:bug: adjusting computed post in template so it doesnt collide with state helper | #102

vue-theme/src/pages/mixin-post-types.js

@@ -1,5 +1,4 @@
 import { convertTitleCase, postTypes } from '@/utils/helpers'
-import { capitalize } from '@vue/shared'
 import { mapGetters, mapState } from 'vuex'
 
 /**
@@ -31,7 +30,6 @@ const stateHelper = {}
 for (let type of postTypes) {
     stateHelper[type] = type
 }
-
 const postTypeGetters = {
     computed: {
         ...mapGetters(getterHelper),

vue-theme/src/pages/single.vue

@@ -2,25 +2,25 @@
 .page--single.f-col.between
     gallery(v-if="activeGalleryIndex >= 0" :activeImageIndex="activeImageIndex" :images="imagesInGallery" @close="closeGallery")
 
-    article.w-max(v-if="!post")
+    article.w-max(v-if="!singlePost")
         header
             p loading...
     article(v-else).w-max.f-grow.shadow
         header
             //- breadcrumb links at top of page, needs link routing
-            breadcrumb(:type="type" :post="post")
+            breadcrumb(:type="type" :post="singlePost")
             
-            h1.t-b  {{ post.title }}
-            //- p(v-if="post.categories") categories: {{ post.categories }}
-            //- p(v-if="post.type") type: {{ post.type }}
-            //- p(v-if="post.subtypes") subtypes: {{ post.subtypes }}
+            h1.t-b  {{ singlePost.title }}
+            //- p(v-if="singlePost.categories") categories: {{ singlePost.categories }}
+            //- p(v-if="singlePost.type") type: {{ singlePost.type }}
+            //- p(v-if="singlePost.subtypes") subtypes: {{ singlePost.subtypes }}
 
             .date-info(v-if="['exhibition', 'event'].includes(type)")
-                p start: {{ dateFrom(post.start) }}
-                p end: {{ dateFrom(post.end) }}
+                p start: {{ dateFrom(singlePost.start) }}
+                p end: {{ dateFrom(singlePost.end) }}
 
         //- WP main content
-        section.content(v-html="post.content")
+        section.content(v-html="singlePost.content")
 
         //- related artists section for episodes
         section(v-if="type === 'episode' && post" :post="post")
@@ -39,13 +39,14 @@
 </template>
 
 <script>
+import { mapGetters, mapState } from 'vuex'
 import card from '@/components/card.vue'
 import sidebar from '@/components/sidebars/sidebar'
 import gallery from '@/components/gallery/'
 import credits from '@/components/credits'
 import breadcrumb from '@/components/breadcrumb'
 
-import { postTypeGetters, scrollTop } from './mixin-post-types'
+import { postTypeGetters, stateHelper, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, dePluralize, typeFromRoute } from '@/utils/helpers'
 
@@ -72,8 +73,9 @@ export default {
         },
         /**
          * We get the actual post data using the slug
+         * Careful with name collisions with vuex helpers
          */
-        post() {
+        singlePost() {
             if (!this[this.type]) return
             const type = dePluralize(this.type)
 
@@ -87,20 +89,20 @@ export default {
         },
 
         idsForGallery() {
-            if (!this.post || this.activeGalleryIndex < 0) return []
-            return this.post.galleries[this.activeGalleryIndex].ids
+            if (!this.singlePost || this.activeGalleryIndex < 0) return []
+            return this.singlePost.galleries[this.activeGalleryIndex].ids
         },
         /**
          * We need a convenient way to get all the images
          * broken down by gallery. We use the active gallery
          * image IDs to create a map. We match the ID to the
-         * image size and url information returned by post.attached
+         * image size and url information returned by singlePost.attached
          */
         imagesInGallery() {
             if (!this.activeGalleryIndex < 0) return {}
 
             return this.idsForGallery.reduce((imageMap, id) => {
-                imageMap[id] = this.post.attached[parseInt(id)]
+                imageMap[id] = this.singlePost.attached[parseInt(id)]
                 return imageMap
             }, {})
         },
@@ -110,8 +112,8 @@ export default {
             )
         },
         p2pPostsByType() {
-            return this.post
-                ? Object.values(this.post.relatedto).reduce(
+            return this.singlePost
+                ? Object.values(this.singlePost.relatedto).reduce(
                       (byType, relatedPost) => {
                           if (!byType[relatedPost.type])
                               byType[relatedPost.type] = []
@@ -132,7 +134,7 @@ export default {
          * @param {string} imageInfo
          */
         openGallery(imageInfo) {
-            const byIndex = this.post.galleries.reduce(
+            const byIndex = this.singlePost.galleries.reduce(
                 (byIndex, gallery, index) => {
                     byIndex[index] = gallery.ids
                     return byIndex
@@ -196,7 +198,8 @@ export default {
              * !: posts watcher fires when this finishes
              */
             let type = convertTitleCase(this.type) + 's'
-            // modules are NOT plural for some reason
+
+            // modules are NOT plural because module key
             if (!this.$store.state[this.type]) return
             let allPostsOfType = this.$store.state[this.type].all
 
@@ -252,7 +255,7 @@ export default {
     },
     async created() {
         await this.loadPostData()
-        this.checkAndSetHero(this.post)
+        this.checkAndSetHero(this.singlePost)
     },
 }
 </script>