Add orderby support.

app/controllers/App.php

@@ -85,6 +85,21 @@ class App extends Controller
         }
     }
 
+    public function currentSubject()
+    {
+        return (get_query_var('pb_subject')) ? get_query_var('pb_subject') : '';
+    }
+
+    public function currentLicense()
+    {
+        return (get_query_var('pb_license')) ? get_query_var('pb_license') : '';
+    }
+
+    public function currentOrderBy()
+    {
+        return (get_query_var('orderby')) ? get_query_var('orderby') : 'title';
+    }
+
     public static function previousPage($page)
     {
         return ($page > 1) ? $page - 1 : 0;
@@ -105,7 +120,7 @@ class App extends Controller
         return $response->headers['X-WP-TotalPages'];
     }
 
-    public static function books($page = 1, $per_page = 10)
+    public static function books($page = 1, $per_page = 10, $orderby = 'title', $license = '', $subject = '')
     {
         $request = new \WP_REST_Request('GET', '/pressbooks/v2/books');
         $request->set_query_params([
@@ -113,6 +128,20 @@ class App extends Controller
             'per_page' => $per_page,
         ]);
         $response = rest_do_request($request);
-        return rest_get_server()->response_to_data($response, true);
+        $data = rest_get_server()->response_to_data($response, true);
+        $books = [];
+        foreach ($data as $key => $book) {
+            $book['title'] = $book['metadata']['name'];
+            $book['date-published'] = (isset($book['metadata']['datePublished'])) ?
+                $book['metadata']['datePublished'] :
+                '';
+            $book['subject'] = (isset($book['metadata']['keywords'])) ? $book['metadata']['keywords'] : '';
+            $books[] = $book;
+        }
+        if ($orderby === 'latest') {
+            return wp_list_sort($books, $orderby, 'desc');
+        } else {
+            return wp_list_sort($books, $orderby);
+        }
     }
 }

resources/assets/scripts/routes/catalog.js

@@ -13,7 +13,11 @@ export default {
         subject: '[data-subject]',
         latest: '[data-date-published]',
       },
-      sortBy: 'title',
+      sortAscending: {
+        title: true,
+        subject: true,
+        latest: false,
+      },
     });
     $('.filters > a').click((e) => {
       e.preventDefault();
@@ -32,6 +36,7 @@ export default {
       $(id).toggleClass('is-active');
     })
     $('.subjects .filter-list a').click((e) => {
+      e.preventDefault();
       if ($(e.currentTarget).hasClass('is-active')) {
         $('.subjects .filter-list a').removeClass('is-active');
         $('.subjects').removeClass('has-active-child');
@@ -56,6 +61,7 @@ export default {
       $grid.isotope({ filter: `${subjectValue}${licenseValue}` });
     });
     $('.licenses .filter-list a').click((e) => {
+      e.preventDefault();
       if ($(e.currentTarget).hasClass('is-active')) {
         $('.licenses .filter-list a').removeClass('is-active');
         $('.licenses').removeClass('has-active-child');
@@ -83,7 +89,8 @@ export default {
       $('.sort').toggleClass('is-active');
     })
     $('.sorts a').click((e) => {
-      let sortBy = $(e.currentTarget).attr('href').substr(1);
+      e.preventDefault();
+      let sortBy = $(e.currentTarget).attr('data-sort');
       $('.sorts a').removeClass('is-active');
       $(e.currentTarget).addClass('is-active');
       $grid.isotope({sortBy: sortBy});

resources/assets/styles/common/_global.scss

@@ -1,3 +1,7 @@
+html {
+  -webkit-font-smoothing: antialiased;
+}
+
 * {
   box-sizing: border-box;
 }

resources/assets/styles/layouts/pages/_catalog.scss

@@ -424,7 +424,7 @@
           display: block;
           margin-top: rem(60);
 
-          a {
+          > a {
             background: var(--link, $brand-primary);
             color: $white;
 
@@ -487,3 +487,27 @@
     }
   }
 }
+
+.catalog.no-js {
+  .filters {
+    .arrow {
+      display: none;
+    }
+
+    .filter-groups,
+    .licenses,
+    .filter-list {
+      display: block;
+    }
+  }
+
+  .sort {
+    .arrow {
+      display: none;
+    }
+
+    .sorts {
+      display: block;
+    }
+  }
+}

resources/views/page-catalog.blade.php

@@ -33,14 +33,14 @@
       <div class="sort">
         <a href="#sort">{{ __('Sort by', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
         <ul id="sort" class="sorts">
-          <li><a class="is-active" href="#title">{{ __('Title', 'aldine') }}</a></li>
+          <li><a data-sort="title" href="{{ network_home_url("/catalog/page/$current_page/?orderby=title") }}">{{ __('Title', 'aldine') }}</a></li>
-          <li><a href="#subject">{{ __('Subject', 'aldine') }}</a></li>
+          <li><a data-sort="subject" href="{{ network_home_url("/catalog/page/$current_page/?orderby=subject") }}">{{ __('Subject', 'aldine') }}</a></li>
-          <li><a href="#latest">{{ __('Latest', 'aldine') }}</a></li>
+          <li><a data-sort="latest" href="{{ network_home_url("/catalog/page/$current_page/?orderby=latest") }}">{{ __('Latest', 'aldine') }}</a></li>
         </ul>
       </div>
     </div>
     <div class="books">
-      @foreach(App::books($current_page, 9) as $book)
+      @foreach(App::books($current_page, 9, $current_order_by) as $book)
         @include('partials.book', ['book' => $book])
       @endforeach
     </div>

resources/views/partials/book.blade.php

@@ -1,5 +1,5 @@
 <div class="book"
-  data-date-published="{{ @$book['metadata']['datePublished'] }}"
+  data-date-published="{{ str_replace('-', '', @$book['metadata']['datePublished']) }}"
   data-license="{{ (new \Pressbooks\Licensing())->getLicenseFromUrl($book['metadata']['license']) }}"
   data-subject="{{ sanitize_title(@$book['metadata']['keywords']) }}"
 >