feat: sorting by recent moved to the front-end | sorting by recent is default | created sort-by listings on front-end

plugins/cia-endpoints/includes/class.make-endpoint.php

@@ -20,18 +20,25 @@ class Make_Endpoint_For extends WP_REST_Controller {
             array(
                 'methods'  => WP_REST_Server::READABLE,
                 'callback' => array( $this, 'get_items' )
-            ),   
+            ),
         ]);
         register_rest_route( $namespace, '/' . $route . '/(?P<id>[\d]+)', [
             array(
                 'methods'  => WP_REST_Server::READABLE,
                 'callback' => array( $this, 'get_items' )
-            ),   
+            ),
         ]);
     }
 
     public function get_items( $request ) {
-        $args = array( 'numberposts' => -1, 'post_type' => $this->post_type );
+        $args = array(
+            'numberposts' => -1,
+            'post_type' => $this->post_type,
+            // Order DOES NOT WORK because you're
+            // returning the posts by id - DUH
+            // 'orderby' => 'date',
+            // 'order' => 'DESC'
+        );
         
         // Get parameters from request
         // /<id>?limit=<num>
@@ -44,8 +51,10 @@ class Make_Endpoint_For extends WP_REST_Controller {
         return new WP_REST_Response( $this->prepare_item_for_response($args), 200 );
     }
 
-    public function prepare_item_for_response( $args) {
+    public function prepare_item_for_response( $args ) {
         $collection = array();
+        
+        // https://developer.wordpress.org/reference/functions/get_posts/
         foreach( get_posts($args) as $item ) {
             $filtered = default_post_format($item);
             
@@ -59,6 +68,7 @@ class Make_Endpoint_For extends WP_REST_Controller {
             $collection[$item->ID] = $filtered;
         }
         wp_reset_postdata();
+
         return $collection;
     }
 }

vue-theme/src/components/sidebars/sidebar.vue

@@ -2,10 +2,10 @@
 aside.sidebar
     section
         .shadow(v-if="type === 'artists'")
-            h1.t-up sort by
+            h1.t-up sort {{ type }} by
             ul
                 li(v-for="option in sortOptions")
-                    router-link(:to="`/${type}/${option.replace(' ', '-')}`").t-cap
+                    router-link(:to="`/${type}/${sortTypes[option]}`").t-cap
                         p {{ option }}
         .shadow(v-else)
             p {{ type }} sidebar
@@ -21,35 +21,45 @@ export default {
             type: String
         }
     },
+    data() {
+        return {
+            sortTypes: {
+                'most recent': '',
+                'alphabetized': 'by-alpha',
+                'by material': 'by-material',
+                'by artist': 'by-artist',
+                'by episode': 'by-episode',
+            }
+        }
+    },
     computed: {
         sortOptions() {
             let opts = []
             switch (this.type) {
                 case 'artists':
                     opts = [
-                        'most recent',
-                        'alphabetized',
-                        'by material',
+                        Object.keys(this.sortTypes)[0],
+                        Object.keys(this.sortTypes)[1],
+                        Object.keys(this.sortTypes)[2],
                     ]
                     break
                 case 'shorts':
                     opts = [
-                        'by artist',
-                        'by material',
+                        Object.keys(this.sortTypes)[3],
+                        Object.keys(this.sortTypes)[2],
                     ]
                     break
                 case 'guides':
                     opts = [
-                        'most recent',
-                        'by episode',
-                        'by material',
+                        Object.keys(this.sortTypes)[0],
+                        Object.keys(this.sortTypes)[4],
+                        Object.keys(this.sortTypes)[2],
                     ]
                     break
             }
             return opts
         }
-    },
-    mounted() {}
+    }
 }
 </script>
 

vue-theme/src/index.js

@@ -18,8 +18,8 @@ const router = new VueRouter({
         { path: '/episodes', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: false } },
         { path: '/:type', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
         // Sorted List Pages 
-        { path: '/:type/alphabetized', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'alphabetized' } },
-        { path: '/:type/most-recent', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'most-recent' } },
+        { path: '/:type/by-alpha', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-alpha' } },
+        { path: '/:type/recent', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'recent' } },
         { path: '/:type/by-material', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-material' } },
         { path: '/:type/by-episode', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-episode' } },
         { path: '/:type/by-artist', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-artist' } },

vue-theme/src/pages/list.vue

@@ -13,7 +13,8 @@
 
         section(v-for="post in posts").shadow
             router-link(:to="`/${type}/${post.slug}`")
-                h4 {{ post.title }}
+                h4 {{ post.title }} 
+                p(style="font-size: 9px;") {{ post.date }}
 
     sidebar(v-if="sidebar" :type="`${type}`")
         .shadow
@@ -58,7 +59,16 @@ export default {
         },
         posts() {
             let type = this.convertTitleCase(this.type)
-            return this[`all${type}`]
+
+            // We're override the API to sort by date
+            // because items are returned by ID
+            let unsortedOfType = Object.values(this[`all${type}`])
+            let sortedByRecent = unsortedOfType.sort((postA, postB) => {
+                return new Date(postB.date) - new Date(postA.date)
+            })
+            
+            // !: Sorting of this[`all${type}`] is controlled by API
+            return this.sortBy ? this[`all${type}`] : sortedByRecent
         },
     },
     methods: {
@@ -69,17 +79,17 @@ export default {
     mounted() {
         let type = this.convertTitleCase(this.type)
         
-        if(this.sortBy) {
-            // TODO: Make a sorted call instead
-            this.$store.dispatch(`getAll${type}`)
-        } else {
-            this.$store.dispatch(`getAll${type}`)
-        }
+        this.$store.dispatch(`getAll${type}`, this.sortBy)
         this.$store.commit('SET_HERO', type)
     },
     watch: {
         $route(to, from){
             let type = this.convertTitleCase(to.path.slice(1))
+
+            // Accounts for the sort-by in URL case 
+            let dispatchName = this.sortBy ? `getAll${type.split('/')[0]}` : `getAll${type}`
+            this.$store.dispatch(dispatchName, this.sortBy)
+            
             if(this.$store.state.hero.url !== type) {
                 this.$store.commit('SET_HERO', type)
             }

vue-theme/src/store/modules/artist.js

@@ -29,8 +29,10 @@ const getters = {
 }
 
 const actions = {
-    getAllArtists({ commit }) {
-        api.getByType('artists', artists => {
+    getAllArtists({ commit }, sortType) {
+        commit('CLEAR_ARTISTS')
+        
+        api.getByType('artists', sortType, artists => {
             commit('STORE_FETCHED_ARTISTS', { artists })
             commit('ARTISTS_LOADED', true)
         })
@@ -39,6 +41,7 @@ const actions = {
 
 const mutations = {
     STORE_FETCHED_ARTISTS(state, { artists }) { state.all = artists },
+    CLEAR_ARTISTS(state) { state.all = [] },
     ARTISTS_LOADED(state, val) { state.loaded = val },
 }
 

vue-theme/src/store/modules/episode.js

@@ -30,8 +30,8 @@ const getters = {
 }
 
 const actions = {
-    getAllEpisodes({ commit }) {
-        api.getByType('episodes', episodes => {
+    getAllEpisodes({ commit }, sortType) {
+        api.getByType('episodes', sortType, episodes => {
             commit('STORE_FETCHED_EPISODES', { episodes })
             commit('EPISODES_LOADED', true)
         })

vue-theme/src/store/modules/page.js

@@ -33,8 +33,8 @@ const getters = {
 
 // actions
 const actions = {
-    getAllPages({ commit }) {
-        api.getByType('pages', pages => {
+    getAllPages({ commit }, sortType) {
+        api.getByType('pages', sortType, pages => {
             commit('STORE_FETCHED_PAGES', { pages })
             commit('PAGES_LOADED', true)
         })

vue-theme/src/store/modules/post.js

@@ -30,8 +30,8 @@ const getters = {
 }
 
 const actions = {
-    getAllPosts({ commit }) {
-        api.getByType('posts', posts => {
+    getAllPosts({ commit }, sortType) {
+        api.getByType('posts', sortType, posts => {
             commit('STORE_FETCHED_POSTS', { posts })
             commit('POSTS_LOADED', true)
         })

vue-theme/src/utils/api.js

@@ -6,14 +6,17 @@ const SETTINGS = {
 }
 
 export default {
-    getByType(type, cb) {
-        axios.get(SETTINGS.API_BASE_PATH + `${type}`)
-        .then(response => {
-            cb(response.data)
-        })
-        .catch(e => {
-            cb(e)
-        })
+    getByType(type, sortType, cb) {
+        console.log('sortType:', sortType)
+        if (sortType) {
+            axios.get(SETTINGS.API_BASE_PATH + `sort/${type}/${sortType}`).then(response => {
+                cb(response.data)
+            }).catch(e => { cb(e) })
+        } else {
+            axios.get(SETTINGS.API_BASE_PATH + `${type}`).then(response => {
+                cb(response.data)
+            }).catch(e => { cb(e) })
+        }
     },
     getPosts(limit = 5, cb) {
         axios