Make listing dashboard sortable (#3421)

app/assets/stylesheets/classified_listings.scss

@@ -669,6 +669,43 @@ form.listings-contact-via-connect {
     }
   }
 
+  .dashboard-listings-sorting {
+    padding-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    @media screen and (max-width: 426px) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    select {
+      display: block;
+      font-size: 19px;
+      padding: 12px;
+      border: 1px solid rgb(222, 230, 233);
+      border-radius: 3px;
+      background-color: white;
+      outline: none;
+      font-weight: bold;
+      color: #333333;
+      font-family: 'HelveticaNeue-CondensedBold', 'HelveticaNeueBoldCondensed',
+        'HelveticaNeue-Bold-Condensed', 'Helvetica Neue Bold Condensed',
+        'HelveticaNeueBold', 'HelveticaNeue-Bold', 'Helvetica Neue Bold',
+        'HelveticaNeue', 'Helvetica Neue', 'TeXGyreHerosCnBold', 'Helvetica',
+        'Tahoma', 'Geneva', 'Arial Narrow', 'Arial', sans-serif;
+
+      @media screen and (max-width: 426px) {
+        text-align-last: center;
+        text-align: center;
+        -ms-text-align-last: center;
+        -moz-text-align-last: center;
+        text-align-last: center;
+      }
+    }
+  }
+  
   .dashboard-listings-view {
 
     .dashboard-listing-row {

app/javascript/listings/__tests__/__snapshots__/listingDashboard.test.jsx.snap

@@ -39,6 +39,17 @@ preact-render-spy (1 nodes)
       </a>
     </div>
   </div>
+  <div class="dashboard-listings-sorting">
+    <select onChange={[Function sortListings]}>
+      <option
+        value="created_at"
+        selected="selected"
+      >
+        Recently Created
+      </option>
+      <option value="bumped_at">Recently Bumped</option>
+    </select>
+  </div>
   <div class="dashboard-listings-view">
     <div class="dashboard-listing-row">
       <a href="cfp/asdfasdf-2ea8">

app/javascript/listings/listingDashboard.jsx

@@ -43,6 +43,20 @@ export class ListingDashboard extends Component {
             ),
           );
     };
+    
+    const sortListings = (event) => {
+      const sortedListings = listings.sort((a,b) => (a[event.target.value] > b[event.target.value]) ? -1 : 1)
+      this.setState({listings: sortedListings});
+    }
+
+    const sortingDropdown = (
+      <div class="dashboard-listings-sorting">
+        <select onChange={sortListings} >
+          <option value="created_at" selected="selected">Recently Created</option>
+          <option value="bumped_at">Recently Bumped</option>
+        </select>
+      </div>
+    );
 
     const orgButtons = orgs.map(org => (
       <span
@@ -114,6 +128,7 @@ export class ListingDashboard extends Component {
             </a>
           </div>
         </div>
+        {sortingDropdown}
         <div className="dashboard-listings-view">
           {showListings(selectedListings, listings, orgListings)}
         </div>

app/views/classified_listings/dashboard.html.erb

@@ -1,12 +1,12 @@
 
 <div id="classifieds-listings-dashboard" data-listings="<%= @classified_listings.to_json(
-        only: %i[title tag_list bumped_at updated_at category id user_id slug organization_id location],
+        only: %i[title tag_list created_at bumped_at updated_at category id user_id slug organization_id location],
         include: {
           author: { only: %i[username name], methods: %i[username profile_image_90] },
         },
       )%>" data-usercredits="<%= @user_credits %>"
       data-orglistings="<%= @org_listings.to_json(
-        only: %i[title tag_list bumped_at updated_at category id user_id slug organization_id location],
+        only: %i[title tag_list created_at bumped_at updated_at category id user_id slug organization_id location],
         include: {
           author: { only: %i[username name], methods: %i[username profile_image_90] },
         },