:recycle: renaming of single post data in modules because of name collisions

vue-theme/src/pages/list.vue

@@ -88,6 +88,7 @@ export default {
     created() {
         let type = convertTitleCase(this.type)
         console.log('already loaded ?:', this[`all${type}Loaded`])
+        console.log(this)
         if(!this[`all${type}Loaded`]) this.setHeroAndGetPosts()
     }
 }

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

@@ -6,12 +6,12 @@ import { mapGetters, mapState } from 'vuex'
  * list and single components to request data
  */
 const postTypes = [
-    'post',
-    'page',
-    'artist',
-    'episode',
-    'event',
-    'exhibition'
+    'posts',
+    'pages',
+    'artists',
+    'episodes',
+    'events',
+    'exhibitions'
 ]
 
 /**
@@ -22,9 +22,9 @@ const postTypes = [
 const getterHelper = {}
 for(let type of postTypes) {
     const capitalized = convertTitleCase(type)
-    getterHelper[`all${capitalized}sBySlug`] = `all${capitalized}sBySlug`
-    getterHelper[`all${capitalized}s`] = `all${capitalized}s`
-    getterHelper[`all${capitalized}sLoaded`] = `all${capitalized}sLoaded`
+    getterHelper[`all${capitalized}BySlug`] = `all${capitalized}BySlug`
+    getterHelper[`all${capitalized}`] = `all${capitalized}`
+    getterHelper[`all${capitalized}Loaded`] = `all${capitalized}Loaded`
 }
 
 const stateHelper = {}

vue-theme/src/pages/single.vue

@@ -1,6 +1,9 @@
 <template lang="pug">
 .page--single.f-row.between
-    article(v-if="post").f-grow.shadow
+    article(v-if="!post")
+        header
+            p loading...
+    article(v-else).f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} {{ post.title }}
             p(v-if="post.categories") categories: {{ post.categories }}
@@ -49,13 +52,16 @@ export default {
          * We get the actual post data using the slug
          */
         post() {
+            if(!this[this.type]) return
+            
             const type = dePluralize(this.type)
 
             // State not a getter!
-            const typeState = this[type]
-            if(!typeState[type]) return
+            const singleOfTypeFromState = this[this.type][`single${convertTitleCase(type)}`]
+            
+            if(!singleOfTypeFromState) return
 
-            return Object.values(typeState[type])[0]
+            return singleOfTypeFromState
         },
 
         idsForGallery() {
@@ -132,7 +138,7 @@ export default {
          * !: posts watcher fires when this finishes
          */
         let type = convertTitleCase(this.type)
-        let allPostsOfType = this.$store.state[dePluralize(this.type)].all
+        let allPostsOfType = this.$store.state[this.type].all
         
         /**
          * Load posts if they're not already in state
@@ -140,11 +146,11 @@ export default {
         if(!this[`all${type}Loaded`] && allPostsOfType.length < 1) {
             const res = await this.$store.dispatch(`getAll${type}`)
             allPostsOfType = res
+            console.log(`reloaded ${type}...`)
         }
-
-        const single = Object.values(allPostsOfType).filter(post => post.slug == this.$route.params.slug)[0]
-        console.log(this.$route.params.slug)
-        this.$store.dispatch(`getSingle${dePluralize(type)}`, single.id)
+        const singlePostData = Object.values(allPostsOfType).filter(post => post.slug == this.$route.params.slug)[0]
+ 
+        await this.$store.dispatch(`getSingle${dePluralize(type)}`, singlePostData.id)
     }
 }
 </script>

vue-theme/src/store/index.js

@@ -5,12 +5,12 @@ import Vuex from 'vuex'
 import * as actions from './actions'
 import * as getters from './getters'
 
-import page from './modules/page'
-import post from './modules/post'
-import artist from './modules/artist'
-import episode from './modules/episode'
-import event from './modules/event'
-import exhibition from './modules/exhibition'
+import pages from './modules/page'
+import posts from './modules/post'
+import artists from './modules/artist'
+import episodes from './modules/episode'
+import events from './modules/event'
+import exhibitions from './modules/exhibition'
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -43,12 +43,12 @@ const store = new Vuex.Store({
   mutations,
   state,
   modules: {
-      post,
-      page,
-      artist,
-      episode,
-      event,
-      exhibition
+      posts,
+      pages,
+      artists,
+      episodes,
+      events,
+      exhibitions
   },
   strict: debug,
 })

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

@@ -3,7 +3,7 @@ import api from '../../utils/api'
 const state = {
     all: [],
     loaded: false,
-    artist: null,
+    singleArtist: null,
 }
 
 const getters = {
@@ -24,10 +24,11 @@ const actions = {
             commit('ARTISTS_LOADED', true)
         })
     },
-    getSingleArtist({ commit }, slug) {
+    getSingleArtist({ commit }, id) {
+        console.log('getting single Artist...')
         commit('CLEAR_SINGLE_ARTIST')
         commit('ARTISTS_LOADED', false)
-        api.getSingleType('artists', slug,  artist => {
+        api.getSingleType('artists', id,  artist => {
             commit('STORE_FETCHED_SINGLE_ARTIST', artist)
             commit('ARTISTS_LOADED', true)
         })
@@ -36,9 +37,9 @@ const actions = {
 
 const mutations = {
     STORE_FETCHED_ARTISTS(state, { artists }) { state.all = artists },
-    STORE_FETCHED_SINGLE_ARTIST(state, artist) { state.artist = artist },
+    STORE_FETCHED_SINGLE_ARTIST(state, artist) { state.singleArtist = artist },
     CLEAR_ARTISTS(state) { state.all = [] },
-    CLEAR_SINGLE_ARTIST(state) { state.artist = null },
+    CLEAR_SINGLE_ARTIST(state) { state.singleArtist = null },
     ARTISTS_LOADED(state, val) { state.loaded = val },
 }
 

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

@@ -1,13 +1,17 @@
 import api from '../../utils/api'
 
 const state = {
-    all: {},
+    all: [],
     loaded: false,
-    episode: null,
+    singleEpisode: null,
 }
 
 const getters = {
     allEpisodes: state => state.all,
+    allEpisodesBySlug: state => Object.values(state.all).reduce((bySlug, episode) => {
+        bySlug[episode.slug] = episode
+        return bySlug
+    }, {}),
     allEpisodesLoaded: state => state.loaded,
 }
 
@@ -20,10 +24,10 @@ const actions = {
             commit('EPISODES_LOADED', true)
         })
     },
-    getSingleEpisode({ commit }, slug) {
+    getSingleEpisode({ commit }, id) {
         commit('CLEAR_SINGLE_EPISODE')
         commit('EPISODES_LOADED', false)
-        api.getSingleType('episodes', slug,  episode => {
+        api.getSingleType('episodes', id,  episode => {
             commit('STORE_FETCHED_SINGLE_EPISODE', episode)
             commit('EPISODES_LOADED', true)
         })
@@ -32,7 +36,7 @@ const actions = {
 
 const mutations = {
     STORE_FETCHED_EPISODES(state, { episodes }) { state.all = episodes },
-    STORE_FETCHED_SINGLE_EPISODE(state, episode) { state.episode = episode },
+    STORE_FETCHED_SINGLE_EPISODE(state, episode) { state.singleEpisode = episode },
     CLEAR_EPISODES(state) { state.all = [] },
     CLEAR_SINGLE_EPISODE(state) { state.episode = null },
     EPISODES_LOADED(state, val) { state.loaded = val },

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

@@ -1,9 +1,9 @@
 import api from '../../utils/api'
 
 const state = {
-    all: {},
+    all: [],
     loaded: false,
-    event: null,
+    singleEvent: null,
 }
 
 const getters = {
@@ -25,7 +25,7 @@ const actions = {
     getAllEvents({ commit }, sortType) {
         commit('CLEAR_EVENTS')
         commit('EVENTS_LOADED', false)
-        api.getByType('events', sortType, events => {
+        return api.getByType('events', sortType, events => {
             commit('STORE_FETCHED_EVENTS', { events })
             commit('EVENTS_LOADED', true)
         })

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

@@ -1,9 +1,9 @@
 import api from '../../utils/api'
 
 const state = {
-    all: {},
+    all: [],
     loaded: false,
-    exhibition: null,
+    singleExhibition: null,
 }
 
 const getters = {
@@ -25,7 +25,7 @@ const actions = {
     getAllExhibitions({ commit }, sortType) {
         commit('CLEAR_EXHIBITIONS')
         commit('EXHIBITIONS_LOADED', false)
-        api.getByType('exhibitions', sortType, exhibitions => {
+        return api.getByType('exhibitions', sortType, exhibitions => {
             commit('STORE_FETCHED_EXHIBITIONS', { exhibitions })
             commit('EXHIBITIONS_LOADED', true)
         })

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

@@ -2,9 +2,9 @@ import api from '../../utils/api'
 
 // initial state
 const state = {
-    all: {},
+    all: [],
     loaded: false,
-    page: null,
+    singlePage: null,
 }
 
 // getters
@@ -35,7 +35,7 @@ const getters = {
 const actions = {
     getAllPages({ commit }, sortType) {
         commit('PAGES_LOADED', false)
-        api.getByType('pages', sortType, pages => {
+        return api.getByType('pages', sortType, pages => {
             commit('STORE_FETCHED_PAGES', { pages })
             commit('PAGES_LOADED', true)
         })

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

@@ -1,46 +1,40 @@
 import api from '../../utils/api'
 
 const state = {
-    all: {},
+    all: [],
     loaded: false,
-    post: null,
+    singlePost: null,
 }
 
 const getters = {
     allPosts: state => state.all,
     allPostsLoaded: state => state.loaded,
-    post: state => id => {
-        let field = typeof id === 'number' ? 'id' : 'slug'
-        let post = state.all.filter(post => post[field] === id)
-        return (post[0]) ? post[0] : false
-    },
-    postContent: state => id => {
-        let field = typeof id === 'number' ? 'id' : 'slug'
-        let post = state.all.filter(post => post[field] === id)
-        
-        return (post[0]) ? post[0].content.rendered : false
-    },
-    somePosts: state => limit => {
-        if(state.all.length < 1) return false
-        
-        let all = [...state.all]
-        
-        return all.splice(0, Math.min(limit, state.all.length))
-    },
 }
 
 const actions = {
     getAllPosts({ commit }, sortType) {
+        commit('CLEAR_POSTS')
         commit('POSTS_LOADED', false)
-        api.getByType('posts', sortType, posts => {
+        return api.getByType('posts', sortType, posts => {
             commit('STORE_FETCHED_POSTS', { posts })
             commit('POSTS_LOADED', true)
         })
+    },
+    getSinglePost({ commit }, id) {
+        commit('CLEAR_SINGLE_POST')
+        commit('POSTS_LOADED', false)
+        api.getSingleType('posts', id,  post => {
+            commit('STORE_FETCHED_SINGLE_POST', post)
+            commit('POSTS_LOADED', true)
+        })
     }
 }
 
 const mutations = {
+    STORE_FETCHED_SINGLE_POST(state, post) { state.singlePost = post },
     STORE_FETCHED_POSTS(state, { posts }) { state.all = posts },
+    CLEAR_POSTS(state) { state.all = [] },
+    CLEAR_SINGLE_POST(state) { state.post = null },
     POSTS_LOADED(state, val) { state.loaded = val },
 }
 

vue-theme/src/utils/api.js

@@ -22,13 +22,13 @@ export default {
             }).catch(e => { cb(e) })
         }
     },
-    getSingleType(type, id, cb) {
-        axios.get(SETTINGS.API_BASE_PATH + `${type}/${id}`).then(response => {
-            cb(response.data)
+    async getSingleType(type, id, cb) {
+        await axios.get(SETTINGS.API_BASE_PATH + `${type}/${id}`).then(response => {
+            cb(Object.values(response.data)[0])
         }).catch(e => { cb(e) })
     },
-    getSingleMedia(id, cb) {
-        axios.get(SETTINGS.API_MEDIA_PATH + `${id}`).then(response => {
+    async getSingleMedia(id, cb) {
+        await axios.get(SETTINGS.API_MEDIA_PATH + `${id}`).then(response => {
             cb(response.data)
         }).catch(e => { cb(e) })
     },