:recycle: adjusting calls for random | changing template to accept random from stroe

vue-theme/src/pages/index.vue

@@ -10,7 +10,7 @@
             ul.flipped(:class="[`sticky-${Object.keys(allSticky).length}`]")
                 //- if sticky
                 li.shadow(v-for="sticky in allSticky")
-                    card(:content="sticky" :type="`${sticky.type}s`")
+                    card(:content="sticky" :type="`${sticky.type}`")
         
         //- firstRow: ['episodes', 'exhibitions', 'events', 'shorts', 'posts'], exceprt on episodes only.
         section
@@ -21,14 +21,14 @@
         //- secondRow: 'artists', // This is only ONE post, excerpt on artist
         section.max
             ul.w-max
-                li.shadow(v-for="post in [randomPostOfType(secondRow)]")
-                    card(v-if="post" :content="post" :type="`${post.type}s`" :wide="true")
-
+                li.shadow(v-for="post in randomPosts.filter(p => p.type == secondRow)")
+                    card(v-if="post" :content="post" :type="`${post.type}`" :wide="true")
+        
         //- (thirdRow) firstRow.flipped: ['guides', 'objects', 'techniques', 'talks', 'center'], exceprt on guides only
         section
             ul.flipped
                 li.shadow(v-for="type in thirdRow")
-                    .random--wrapper(v-for="post in [randomPostOfType(type)]")
+                     .random--wrapper(v-for="post in randomPosts.filter(p => p.type == type)")
                         card(:content="post" :type="type")
 </template>
 
@@ -71,8 +71,7 @@ export default {
                 }
             }
         }
-        this.$store.dispatch('getRandom', ['episode', 'exhibition', 'event', 'artist', 'post'])
-        
+        await this.$store.dispatch('getRandomPosts', ['episode', 'exhibition', 'event', 'artist', 'post'])
         this.checkAndSetHero('welcome')
     },
     methods: {
@@ -95,7 +94,7 @@ export default {
         },
         firstPostOfType(type) {
             return Object.values(this[`all${convertTitleCase(type)}s`])[0]
-        }
+        },
     },
 }
 </script>
@@ -130,7 +129,7 @@ export default {
         &.stickies
             margin: 0 0 2% 0
         &.max 
-            margin: 1.5% 0 2% 0
+            margin: 35px 0 20px
         ul
             display: grid
             grid-template-columns: 

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

@@ -22,6 +22,9 @@ getterHelper[`pastEvents`] = `pastEvents`
 getterHelper[`upcomingAndCurrentExhibitions`] = `upcomingAndCurrentExhibitions`
 getterHelper[`pastExhibitions`] = `pastExhibitions`
 
+getterHelper[`randomPosts`] = `randomPosts`
+getterHelper[`randomPostsLoaded`] = `randomPostsLoaded`
+
 const stateHelper = {}
 for (let type of postTypes) {
     stateHelper[type] = type

vue-theme/src/store/actions.js

@@ -1,15 +1,12 @@
 import api from '../utils/api'
 
-// for global actions
-export default {
-    getRandom({ commit }, types) {
-        commit('CLEAR_RANDOM')
-        commit('RANDOM_LOADED', false)
-        return api.getRandom(types, sortType, randomPosts => {
-            console.log('randomPosts')
-            console.log(randomPosts)
-            commit('STORE_FETCHED_RANDOM', { randomPosts })
-            commit('RANDOM_LOADED', true)
-        })
-    }
-}
+const getRandomPosts = async ({ commit }, types) => {
+    commit('CLEAR_RANDOM')
+    commit('RANDOM_LOADED', false)
+    return await api.getRandom(types, randomPosts => {
+        commit('STORE_FETCHED_RANDOM', { randomPosts })
+        commit('RANDOM_LOADED', true)
+    })
+}
+
+export { getRandomPosts } 

vue-theme/src/store/getters.js

@@ -1,5 +1,4 @@
-// For global getters
-export default {
-    randomPosts: state => state.randomPosts,
-    randomPostsLoaded: state => state.randomPostsLoaded,
-}
+const randomPosts = state => state.randomPosts
+const randomPostsLoaded = state => state.randomPostsLoaded
+
+export { randomPosts, randomPostsLoaded }

vue-theme/src/utils/api.js

@@ -51,13 +51,13 @@ export default {
                 cb(e)
             })
     },
-    getRandom(types, cb) {
-        const randomPosts = []
-        for(type in types) {
-            axios
+    async getRandom(types, cb) {
+        let randomPosts = []
+        for(let type of types) {
+            await axios
                 .get(SETTINGS.API_BASE_PATH + `${type}?orderby=rand&limit=1`)
                 .then(response => {
-                    randomPosts.push(response.data)
+                    randomPosts = [...response.data, ...randomPosts]
                 })
         }
         cb(randomPosts)