feat: proper linking from list component | feat: working single page

vue-theme/src/index.js

@@ -9,6 +9,7 @@ import store from '@/store'
 
 import IndexPage from '@/pages/index.vue'
 import ListPage from '@/pages/list'
+import SinglePage from '@/pages/single'
 
 const router = new VueRouter({
     mode: 'history',
@@ -20,6 +21,11 @@ const router = new VueRouter({
             component: ListPage,
             props: { sidebar: true }
         },
+        {
+            path: '/:type/:id',
+            component: SinglePage,
+            props: { sidebar: true }
+        },
     ]
 })
 

vue-theme/src/pages/list.vue

@@ -5,10 +5,11 @@
             h1 {{ site }}: {{ $route.params.type }} list
         section
             h4 {{ $route.params.type }}
-            p {{ Object.values(allArtists).length }}
+            p {{ Object.values(posts).length }}
             p {{ sidebar }}
         section(v-for="post in posts")
-            h4 {{ post.title }}
+            router-link(:to="`./${$route.params.type}/${post.slug}`")
+                h4 {{ post.title }}
     //- COMPONENT: Make this with a prop
     aside(v-if="sidebar").shadow.b-radius
         header

vue-theme/src/pages/single.vue

@@ -1,42 +1,15 @@
-// Single page for single episode/artist/page/edu-guide
-// Optional sidebar
-// Homepage grid
 <template lang="pug">
-.page--index.f-row.between
-    article.f-grow.shadow.b-radius
+.page--single.f-row.between
+    article.f-grow
         header
-            h1 {{ site }}: index
-        section(v-if="allEpisodesLoaded")
-            h4 Episodes
-            p {{ Object.values(allEpisodes).length }}
-        section(v-if="allArtistsLoaded")
-            h4 artists
-            p {{ Object.values(allArtists).length }}
-        section(v-if="allPagesLoaded")
-            h4 pages
-            p {{ Object.values(allPages).length }}
-        section(v-if="allPostsLoaded")
-            h4 posts
-            p {{ Object.values(allPosts).length }}
+            h1 {{ $route.params.type }}:{{ $route.params.id }} single
         section
-            //- COMPONENT: Looping component
-            .post(v-for="post in allPosts")
-                h4.post--title {{ post.slug }}
-                ul.post--content
-                    li.post--content--block(v-for="block in post.blocks" v-html="block")
-        footer.f-row
-            p icon
-
+            h4 {{ posts[$route.params.id].title }}
+            .block-wrapper(v-for="block in posts[$route.params.id].blocks" v-html="block")
     //- COMPONENT: Make this with a prop
-    aside.shadow.b-radius
+    aside(v-if="sidebar").shadow.b-radius
         header
             h4 this is some other stuff
-        section(v-if="allPostsLoaded")
-            //- COMPONENT: See above
-            .post(v-for="post in allPosts")
-                h4.post--title {{ post.slug }}
-                ul.post--content
-                    li.post--content--block(v-for="block in post.blocks" v-html="block")
 
 </template>
 
@@ -44,34 +17,40 @@
 import { mapGetters } from 'vuex'
 
 export default {
+    props: {
+        sidebar: {
+            type: Boolean
+        }
+    },
     computed: {
         ...mapGetters({
-            somePages: 'somePages',
-            allPages: 'allPages',
-            allPostsLoaded: 'allPostsLoaded',
-            allPosts: 'allPosts',
-            allPagesLoaded: 'allPagesLoaded',
             allArtists: 'allArtists',
             allArtistsLoaded: 'allArtistsLoaded',
+
             allEpisodes: 'allEpisodes',
             allEpisodesLoaded: 'allEpisodesLoaded',
         }),
+        posts() {
+            let type = this.$route.params.type
+            type = type.charAt(0).toUpperCase() + type.slice(1)
+
+            // Return list keyed by slug
+            return Object.values(this[`all${type}`]).reduce((acc, inc) => { 
+                acc[inc.slug] = inc
+                return acc
+            }, {})
+        },
     },
     data() {
         return {
-            site: wp.site_name,
+            loaded: false,
         }
     },
     mounted() {
-        console.log('routes: ', wp.routes)
-        console.log('rest url: ', wp.rest)
-        console.log('template: ', wp.template)
-
-        this.$store.dispatch('getAllPages')
-        this.$store.dispatch('getAllPosts')
-
-        this.$store.dispatch('getAllArtists')
-        this.$store.dispatch('getAllEpisodes')
+        // TODO: this should be conditional after checking vuex state
+        let type = this.$route.params.type
+        type = type.charAt(0).toUpperCase() + type.slice(1)
+        this.$store.dispatch(`getAll${type}`)
     }
 }
 </script>

vue-theme/src/store/index.js

@@ -14,6 +14,8 @@ Vue.use(Vuex)
 
 const debug = process.env.NODE_ENV !== 'production'
 
+Vue.config.devtools = true 
+
 // Current page state
 const state = {
   title: 'Test',