:bug: fixed conditional loading issue on single templates

vue-theme/src/pages/index.vue

@@ -8,11 +8,13 @@
                     h4.t-cap episodes
                 router-link(:to="{ path: `/episodes/${Object.values(allEpisodes)[0].slug}` }")
                     p {{ Object.values(allEpisodes)[0].title }}
+
             section(v-if="allArtistsLoaded").shadow
                 router-link(:to="`./artists`")
                     h4.t-cap artists
                 router-link(:to="{ path: `/artists/${Object.values(allArtists)[0].slug}` }")
                     p {{ Object.values(allArtists)[0].title }}
+                    
             section(v-if="allPagesLoaded").shadow
                 h4.t-cap pages
                 router-link(:to="{ path: `/pages/${Object.values(allPages)[0].slug}` }")

vue-theme/src/pages/single.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.page--single.f-row.between(v-if="allPostsLoaded && allPagesLoaded && allArtistsLoaded && allEpisodesLoaded")
+.page--single.f-row.between
     gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = -1" :images="images")
     article.f-grow.shadow
         header
@@ -49,6 +49,14 @@ export default {
             allEpisodes: 'allEpisodes',
             allEpisodesLoaded: 'allEpisodesLoaded',
         }),
+        allLoaded() {
+            const flags = []
+            flags.push(this.allPagesLoaded)
+            flags.push(this.allPostsLoaded)
+            flags.push(this.allArtistsLoaded)
+            flags.push(this.allEpisodesLoaded)
+            return flags.every(Boolean)
+        },
         type() { // Checks for type and fixes Episodes route edge case 
             return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
         },
@@ -64,15 +72,14 @@ export default {
     },
     methods: {
         pageBlocks(posts) {
-            console.log('block for: ', this.posts)
-            console.log(this.$route.params.slug)
+            if(this.images.length < 1) return []
             return posts[this.$route.params.slug].blocks.map(block => {
                 if(block) return block
             })
         },
         checkForImages(posts) {
-            if(Object.keys(posts).length === 0) return
-            console.log(posts)
+            if(Object.keys(posts).length == 0) return
+
             this.pageBlocks(posts).forEach(block => {
                 if(!block) return
 
@@ -96,7 +103,7 @@ export default {
         }
     },
     watch: {
-        posts(newVal, oldVal) { 
+        posts(newVal, oldVal) {
             // Loads images from the DOM
             this.checkForImages(newVal)
             
@@ -104,13 +111,13 @@ export default {
             
             // Gottas be on the next render tick
             this.$nextTick(() => {
+                const blocks = this.pageBlocks(newVal)
                 let gallery
-                this.pageBlocks(newVal).forEach(block => {
-                    if(!block) return
+                blocks.forEach(block => {
                     gallery = document.querySelectorAll('.blocks-gallery-item figure')
                 })
                 
-                if(gallery.length < 1) return
+                if(!gallery || gallery.length < 1) return
 
                 gallery.forEach((item, i) => {
                     item.addEventListener('mouseup', event => { this.fullscreengallery = i })
@@ -120,10 +127,12 @@ export default {
         }
     },
     created() {
-        // TODO: Only makes req if this hasn't been loaded yet
-        let type = this.$route.params.type
-        type = type.charAt(0).toUpperCase() + type.slice(1)
-        this.$store.dispatch(`getAll${type}`)
+        if(!this.allLoaded) {
+            let type = this.$route.params.type
+            type = type.charAt(0).toUpperCase() + type.slice(1)
+            console.log('retrieving...', type)
+            this.$store.dispatch(`getAll${type}`)
+        }
     }
 }
 </script>

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

@@ -31,7 +31,7 @@ const getters = {
 const actions = {
     getAllArtists({ commit }, sortType) {
         commit('CLEAR_ARTISTS')
-        
+        commit('ARTISTS_LOADED', false)
         api.getByType('artists', sortType, artists => {
             commit('STORE_FETCHED_ARTISTS', { artists })
             commit('ARTISTS_LOADED', true)

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

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

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

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

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

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