:recycle: page sort/load fixes | sidebar post loading

vue-theme/src/components/sidebars/events.vue

@@ -1,18 +1,49 @@
 <template lang="pug">
-//- most recent upcoming events - sidebar in exhibition list - max=2?
-h3.t-up upcoming events
+//- most recent upcoming event - sidebar in events list - max=2?
+h3.t-up {{ listType }} events
 ul.t-up
-    li
-        img(src="https://i2.wp.com/www.craftinamerica.org/wp-content/uploads/2021/10/IMG_9399edit.jpg?fit=640%2C361&ssl=1")
-        p event title link 
-        p date
-        p date from  -  date to
-        p 
-    li
-        img(src="https://i2.wp.com/www.craftinamerica.org/wp-content/uploads/2021/10/IMG_9399edit.jpg?fit=640%2C361&ssl=1")
-        p event title link 
-        p date
-        p date from  -  date todate
-        p 
+    li(v-for="post in events")
+        featured-image(:post="post", thumbsize="'standard'")
+        router-link(:to="`/events/${post.slug}`")
+            p.t-up {{ post.title }}
+        p {{ post.start }} &ndash; {{ post.end }}
+</template>
 
-</template>
+<script>
+import featuredImage from '@/components/featured-image'
+import { postTypeGetters } from '@/pages/mixin-post-types'
+import { sortTypes } from '@/utils/helpers'
+
+export default {
+    mixins: [postTypeGetters],
+    components: { featuredImage },
+    computed: {
+        loaded() {
+            return this[`allEventsLoaded`]
+        },
+        events() {
+            return this[`upcomingAndCurrentEvents`]
+        },
+    },
+    data() {
+        return {
+            listType: 'upcoming',
+        }
+    },
+    methods: {
+        async getPosts() {
+            const upcoming = this.$store.dispatch(
+                `getAllEvents`,
+                sortTypes.currentAndUpcoming,
+            )
+            if (upcoming.length < 1) {
+                // this.listType = 'past'
+                // this.$store.dispatch(`getAllEvents`, sortTypes.past)
+            }
+        },
+    },
+    created() {
+        if (!this.loaded) this.getPosts()
+    },
+}
+</script>

vue-theme/src/components/sidebars/exhibitions.vue

@@ -1,29 +1,49 @@
 <template lang="pug">
 //- most recent upcoming exhibition - sidebar in events list - max=2?
-h3.t-up upcoming exhibitions
+h3.t-up {{ listType }} exhibitions
 ul.t-up
-    li
-        img(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2021/10/DSC_0382edit-1.jpg?fit=640%2C361&ssl=1")
-        p exhibition title link
-        p date from  -  date to
-        p 
-    li
-        img(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2021/10/DSC_0382edit-1.jpg?fit=640%2C361&ssl=1")
-        p exhibition title link
-        p date from  -  date to
-        p 
-
+    li(v-for="post in exhibitions")
+        featured-image(:post="post", thumbsize="'standard'")
+        router-link(:to="`/exhibitions/${post.slug}`")
+            p.t-up {{ post.title }}
+        p {{ post.start }} &ndash; {{ post.end }}
 </template>
 
 <script>
+import featuredImage from '@/components/featured-image'
+import { postTypeGetters } from '@/pages/mixin-post-types'
+import { sortTypes } from '@/utils/helpers'
+
 export default {
-    props: {
-        postsByType:{
-            type: Array
-        }, 
-        postType:{
-            type: String
-        }, 
-    }
+    mixins: [postTypeGetters],
+    components: { featuredImage },
+    computed: {
+        loaded() {
+            return this[`allExhibitionsLoaded`]
+        },
+        exhibitions() {
+            return this[`upcomingAndCurrentExhibitions`]
+        },
+    },
+    data() {
+        return {
+            listType: 'upcoming',
+        }
+    },
+    methods: {
+        async getPosts() {
+            const upcoming = this.$store.dispatch(
+                `getAllExhibitions`,
+                sortTypes.currentAndUpcoming,
+            )
+            if (upcoming.length < 1) {
+                // this.listType = 'past'
+                // this.$store.dispatch(`getAllExhibitions`, sortTypes.past)
+            }
+        },
+    },
+    created() {
+        if (!this.loaded) this.getPosts()
+    },
 }
-</script>
+</script>

vue-theme/src/components/sidebars/sidebar.vue

@@ -46,12 +46,11 @@ aside.sidebar
         slot
 
         //- single layout Exhibitions sidebar
-        .shadow(v-if="layout === 'single'")
-            exhibitions-sidebar
-        
-        //- single layout Events sindebar
-        .shadow(v-if="layout === 'single'")
+        .shadow(v-if="type === 'exhibitions' && layout === 'single'")
             events-sidebar
+        //- single layout Events sindebar
+        .shadow(v-if="type === 'events' && layout === 'single'")
+            exhibitions-sidebar
 
         //- list layout Exhibition sidebar show events
         .shadow(v-if="type === 'exhibitions' && layout === 'list'")

vue-theme/src/pages/list.vue

@@ -66,9 +66,11 @@ export default {
             // Sorting
             let sort = this.sortBy
                 ? this.sortBy
-                : this.$route.path.split('/').pop()
+                : this.$route.path
+                      .split('/')
+                      .filter(p => p)
+                      .pop()
             // !: BUG
-            // if(this.type !== sort || !Object.values(sortTypes).includes(sort)) sort = null
             // if (Object.values(sortTypes).includes(sort)) {
             //     console.log('trying to sort by:', sort)
             //     console.log(
@@ -77,9 +79,28 @@ export default {
             //     )
             // }
 
+            if (!Object.values(sortTypes).includes(sort)) {
+                console.log('Sort not found:', sort)
+                sort = null
+            }
+
             // Don't dispatch if there's no type
             if (this.type && this.dispatchName) {
+                console.log('Gettings posts:', this.type, this.dispatchName)
                 this.$store.dispatch(this.dispatchName, sort)
+
+                if (this.type == 'events') {
+                    this.$store.dispatch(
+                        'getAllExhibitions',
+                        sortTypes.currentAndUpcoming,
+                    )
+                }
+                if (this.type == 'exhibitions') {
+                    this.$store.dispatch(
+                        'getAllEvents',
+                        sortTypes.currentAndUpcoming,
+                    )
+                }
             }
         },
         async checkAndSetHero(type) {
@@ -117,10 +138,20 @@ export default {
         async $route(to, from) {
             // console.log(this.sidebar)
             let type = convertTitleCase(this.type)
-            let sort = this.sortBy ? this.sortBy : to.path.split('/').pop()
+            let sort = to.path
+                .split('/')
+                .filter(p => p)
+                .pop()
             this.checkAndSetHero(this.type)
-            // console.log('---')
-            // console.log(sort)
+
+            // console.log('---', sort, type)
+            // console.log(`${from.path}>>>${to.path}`)
+            if (!Object.values(sortTypes).includes(sort)) {
+                console.log('sort not found:', sort)
+                sort = null
+            }
+            // console.log('---', sort, type)
+
             if (!this[`all${type}Loaded`] || sort) this.getPosts()
         },
     },
@@ -131,8 +162,6 @@ export default {
     },
     created() {
         let type = convertTitleCase(this.type)
-        // console.log(`${type} already loaded?:`, this[`all${type}Loaded`])
-
         this.checkAndSetHero(this.type)
 
         if (!this[`all${type}Loaded`]) this.getPosts()

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

@@ -13,6 +13,10 @@ for (let type of postTypes) {
     getterHelper[`all${capitalized}`] = `all${capitalized}`
     getterHelper[`all${capitalized}Loaded`] = `all${capitalized}Loaded`
 }
+getterHelper[`upcomingAndCurrentEvents`] = `upcomingAndCurrentEvents`
+getterHelper[`pastEvents`] = `pastEvents`
+getterHelper[`upcomingAndCurrentExhibitions`] = `upcomingAndCurrentExhibitions`
+getterHelper[`pastExhibitions`] = `pastExhibitions`
 
 const stateHelper = {}
 for (let type of postTypes) {

vue-theme/src/router/routes.js

@@ -11,14 +11,13 @@ export default [
     {
         path: '/episodes',
         component: listPage,
-        props: { sidebar: false, grid: true },
+        props: { sidebar: false, grid: true, sortBy: null },
     },
     {
         path: '/artists',
         component: listPage,
-        props: { sidebar: true, grid: true },
+        props: { sidebar: true, grid: true, sortBy: null },
     },
-    { path: '/:type', component: listPage, props: { sidebar: true } },
     // Sorted List Pages
     {
         path: `/artists/${sortTypes.alpha}`,
@@ -70,6 +69,11 @@ export default [
         component: listPage,
         props: { sidebar: true, sortBy: 'by-artist' },
     },
+    {
+        path: '/:type',
+        component: listPage,
+        props: { sidebar: true, sortBy: null },
+    },
     // Single Pages
     { path: '/:type/:slug', component: singlePage, props: { sidebar: true } },
 ]

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

@@ -9,6 +9,18 @@ const state = {
 const getters = {
     allEvents: state => state.all,
     allEventsLoaded: state => state.loaded,
+    pastEvents: state => {
+        const now = new Date()
+        return state.all.filter(event => {
+            return parseInt(event.end) > now
+        })
+    },
+    upcomingAndCurrentEvents: state => {
+        const now = new Date()
+        return state.all.filter(event => {
+            return parseInt(event.end) <= now
+        })
+    },
 }
 
 const actions = {

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

@@ -1,5 +1,4 @@
 import api from '../../utils/api'
-import { sortTypes } from '../../utils/helpers'
 
 const state = {
     all: [],
@@ -10,6 +9,20 @@ const state = {
 const getters = {
     allExhibitions: state => state.all,
     allExhibitionsLoaded: state => state.loaded,
+    pastExhibitions: state => {
+        return state.all.filter(exhibition => {
+            const now = new Date()
+            return parseInt(exhibition.end) > now
+        })
+    },
+    upcomingAndCurrentExhibitions: state => {
+        return state.all
+        // return state.all.filter(exhibition => {
+        //     const now = new Date()
+        //     // return parseInt(exhibition.end) <= now
+        //     return parseInt(exhibition.end) <= now
+        // })
+    },
 }
 
 const actions = {