:recycle: trying a different single template loading strategy

vue-theme/src/pages/single.vue

@@ -2,7 +2,7 @@
 .page--single.f-col.between
     gallery(v-if="activeGalleryIndex >= 0" :activeImageIndex="activeImageIndex" :images="imagesInGallery" @close="closeGallery")
 
-    article.w-max(v-if="!singlePost || loading")
+    article.w-max.f-grow.shadow(v-if="!singlePost || loading")
         header
             p loading...
     article(v-else).w-max.f-grow.shadow
@@ -28,9 +28,9 @@
             ul
                 li.f-row.between(v-for="artist in p2pPostsByType['artist']")
                     card(:content="artist" type="artist" :wide="true" :hide-type="true")
-            
+
         credits(v-if="type === 'episode' && singlePost" :post="singlePost")
-        
+
         //- end of article icon
         footer.f-col
             img(src="../star.svg")
@@ -39,7 +39,6 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
 import card from '@/components/card.vue'
 import sidebar from '@/components/sidebars/sidebar'
 import gallery from '@/components/gallery/'
@@ -56,7 +55,6 @@ export default {
     components: { sidebar, gallery, credits, card, breadcrumb },
     props: {
         sidebar: { type: Boolean },
-        id: { type: Number },
     },
     mixins: [postTypeGetters, scrollTop, heroUtils],
     data() {
@@ -162,10 +160,10 @@ export default {
         // _setHeroInfo(post) {} from mixin
         // _clearHero(store) {} from mixin
         /**
-         * Everytime the posts object changes
+         * Everytime the post object changes
          * we use this to set a new HERO
          * in vuex
-         * @param {object} posts
+         * @param {object} post
          */
         checkAndSetHero(post) {
             this._clearHero(this.$store)
@@ -182,30 +180,43 @@ export default {
         },
 
         async loadPostData() {
+            this.loading = true
             /**
              * Conditionally load based on post type
              * which is derived from the route
              */
             // modules are NOT plural because module key
             if (!this.$store.state[this.type]) return
-            let allPostsOfType = this.$store.state[this.type].all
+            const allPostsOfTypeInStore = this.$store.state[this.type].all
 
             /**
              * Load posts if they're not already in state
              */
             // Find the single post from api if it's not already in state
             // Then add it to our list
-            let singlePostData = allPostsOfType.filter(
+            let singlePostData = allPostsOfTypeInStore.filter(
                 post => post.slug == this.$route.params.slug,
             )[0]
 
-            if (!singlePostData) return console.error('could not get single post data...')
-            
-            // NOT plural
+            // Look if it exists before you try and load everything!
+            if (!singlePostData) {
+                console.error('Could not find single post in store; Fetching everything...')
+                const res = await this.$store.dispatch(
+                    `getAll${convertTitleCase(this.type)}s`,
+                    { sortType: null, params: null}
+                )
+                singlePostData = res.filter(
+                    post => post.slug == this.$route.params.slug,
+                )[0]
+            }
+
+            /**
+             * At the point we MUST have singlePostData
+             */
             this.checkAndSetHero(singlePostData)
             await this.$store.dispatch(
                 `getSingle${convertTitleCase(this.type)}`,
-                this.id,
+                singlePostData.id,
             )
             this.loading = false
         },