:bug: more fixes for hero loading | hero loading on welcome | direct links to posts for welcome page

vue-theme/src/pages/index.vue

@@ -3,30 +3,31 @@
 .page--index.f-row.between
     article.f-grow
         .f-row
-            h3(v-if="!allPagesLoaded ") loading...
+            h3(v-if="!allPagesLoaded") loading...
             .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")
         .f-row
             section(v-if="allEpisodesLoaded").shadow
-                router-link(:to="`./episodes`")
+                router-link(:to="`/episodes`")
                     h4.t-cap episodes
-                    p(v-if="Object.values(allEpisodes).length > 0") {{ Object.values(allEpisodes)[0].slug }}
-                    p(v-else) no episodes
+                router-link(:to="`/episodes/${Object.values(allEpisodes)[0].slug}`")
+                    p {{ Object.values(allEpisodes)[0].slug }}
 
             section(v-if="allArtistsLoaded").shadow
-                router-link(:to="`./artists`")
+                router-link(:to="`/artists`")
                     h4.t-cap artists
-                    p(v-if="Object.values(allArtists).length > 0") {{ Object.values(allArtists)[0].slug}}
-                    p(v-else) no artists
+                router-link(:to="`/artists/${Object.values(allArtists)[0].slug}`")
+                    p {{ Object.values(allArtists)[0].slug }}
 
             section(v-if="allPagesLoaded").shadow
                 h4.t-cap pages
-                    p(v-if="Object.values(allPages).length > 0") {{ Object.values(allPages)[0].slug }}
-                    p(v-else) no pages
+                    p {{ Object.values(allPages)[0].slug }}
+
         .f-row
             section(v-if="allPostsLoaded").shadow
-                router-link(:to="`./posts`")
+                router-link(:to="`/posts`")
                     h4.t-cap posts
-                    p(v-if="Object.values(allPosts).length > 0") {{ Object.values(allPosts)[0].slug }}
+                router-link(:to="`/posts/${Object.values(allPosts)[0].slug}`")
+                    p {{ Object.values(allPosts)[0].slug }}
      
         .f-row
             footer.f-col
@@ -43,11 +44,26 @@ export default {
     mixins: [postTypeGetters, scrollTop],
     created() {
         // console.log(wp)
-
         postTypes.forEach(type => {
             const capitalizedType = convertTitleCase(type)
             this.$store.dispatch(`getAll${capitalizedType}`)
         })
+        this.checkAndSetHero('welcome')
+    },
+    methods: {
+        async checkAndSetHero(type) {
+            if(!this['allPagesLoaded']) {
+                await this.$store.dispatch('getAllPages')    
+            }
+            const page = this.allPages[type]
+            if(!page) return
+            let json = { url: page.featured, heroType: 'image' }
+            if(page.hero && JSON.parse(page.hero) && JSON.parse(page.hero).url) {
+                json = JSON.parse(page.hero)
+                json.heroType = 'video'
+            }
+            this.$store.commit('SET_HERO', json)
+        },
     }
 }
 </script>

vue-theme/src/pages/list.vue

@@ -81,7 +81,7 @@ export default {
         },
     },
     methods: {
-        setHeroAndGetPosts() {
+        getPosts() {
             // Sorting
             let sort = this.sortBy ? this.sortBy : this.$route.path.split('/').pop()
             
@@ -95,11 +95,13 @@ export default {
             // Don't dispatch if there's no type
             if(this.type && this.dispatchName) {
                 this.$store.dispatch(this.dispatchName, sort)
-                this.checkAndSetHero()
             }
         },
-        checkAndSetHero() {
-            const page = this.allPages[this.type]
+        async checkAndSetHero(type) {
+            if(!this['allPagesLoaded']) {
+                await this.$store.dispatch('getAllPages')
+            }
+            const page = this.allPages[type]
             if(!page) return
             let json = { url: page.featured, heroType: 'image' }
             if(page.hero && JSON.parse(page.hero) && JSON.parse(page.hero).url) {
@@ -114,16 +116,16 @@ export default {
             // console.log(this.sidebar)
             let type = convertTitleCase(this.type)
             let sort = this.sortBy ? this.sortBy : to.path.split('/').pop()
-            
-            await this.$store.dispatch('getAllPages')    
-            if(!this[`all${type}Loaded`] && this['allPagesLoaded'] || sort) this.setHeroAndGetPosts()
+            this.checkAndSetHero(this.type)
+            if(!this[`all${type}Loaded`] || sort) this.getPosts()
         }
     },
-    async created() {
+    created() {
         let type = convertTitleCase(this.type)
-        // console.log('already loaded ?:', this[`all${type}Loaded`])
-        await this.$store.dispatch('getAllPages')
-        if(!this[`all${type}Loaded`] && this['allPagesLoaded']) this.setHeroAndGetPosts()
+        console.log(`${type} already loaded?:`, this[`all${type}Loaded`])
+        
+        this.checkAndSetHero(this.type)
+        if(!this[`all${type}Loaded`]) this.getPosts()
     }
 }
 </script>

vue-theme/src/pages/single.vue

@@ -143,6 +143,7 @@ export default {
          * @param {object} posts
          */
         checkAndSetHero(post) {
+            // console.log(post)
             if(!post) return
             let json = { url: post.featured, heroType: 'image' }
             if(post.hero && JSON.parse(post.hero) && JSON.parse(post.hero).url) {
@@ -151,7 +152,7 @@ export default {
             }
             this.$store.commit('SET_HERO', json)
         },
-
+        
         /**
          * Date Object from unix strings from db
          */
@@ -190,14 +191,15 @@ export default {
     },
     watch: {
         post(newVal, oldVal) {
-            this.checkAndSetHero(newVal)
+            this.checkAndSetHero(this.post)
         },
         $route(newVal, oldVal) {
             this.loadPostData()
         }
     },
     async created() {
-        this.loadPostData()
+        await this.loadPostData()
+        this.checkAndSetHero(this.post)
     }
 }
 </script>