Use Vuex modules the classic Vuex store model (#1271)

components/advocates/MeetTheAdvocates.vue

@@ -61,7 +61,7 @@ import AppFieldset from '~/components/ui/AppFieldset.vue'
 import AppFiltersResultsLayout from '~/components/ui/AppFiltersResultsLayout.vue'
 import InfiniteScroll from '~/components/ui/InfiniteScroll.vue'
 import AppLink from '~/components/ui/AppLink.vue'
-import { Advocate, ADVOCATES_WORLD_REGION_OPTIONS, State } from '~/store/modules/advocates.ts'
+import { Advocate, ADVOCATES_WORLD_REGION_OPTIONS, State } from '~/store/advocates.ts'
 
 @Component({
   components: {

hooks/advocate-conversion-utils.ts

@@ -4,7 +4,7 @@ import Airtable from 'airtable'
 import {
   Advocate,
   AdvocatesWorldRegion
-} from '../store/modules/advocates'
+} from '../store/advocates'
 
 import {
   getImageUrl,

hooks/event-conversion-utils.ts

@@ -8,7 +8,7 @@ import {
   COMMUNITY_EVENT_TYPES,
   COMMUNITY_EVENT_TYPE_OPTIONS,
   WORLD_REGIONS
-} from '../store/modules/events'
+} from '../store/events'
 
 import {
   getImageUrl,

pages/events/index.vue

@@ -81,7 +81,7 @@
 </template>
 
 <script lang="ts">
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
 import { Component } from 'vue-property-decorator'
 import QiskitPage from '~/components/logic/QiskitPage.vue'
 
@@ -89,7 +89,7 @@ import {
   CommunityEvent,
   WORLD_REGION_OPTIONS,
   COMMUNITY_EVENT_TYPE_OPTIONS
-} from '~/store/modules/events.ts'
+} from '~/store/events.ts'
 import { EVENT_REQUEST_LINK } from '~/constants/appLinks'
 
 @Component({
@@ -100,27 +100,21 @@ import { EVENT_REQUEST_LINK } from '~/constants/appLinks'
   },
 
   computed: {
-    ...mapGetters([
+    ...mapGetters('events', [
       'filteredEvents',
       'typeFilters',
       'regionFilters'
     ])
   },
 
-  methods: {
-    ...mapActions({
-      fetchEvents: 'fetchEvents'
-    })
-  },
-
   async fetch ({ store }) {
-    const upcomingEvents = await store.dispatch('fetchUpcomingEvents')
+    const upcomingEvents = await store.dispatch('events/fetchUpcomingEvents')
-    const pastEvents = await store.dispatch('fetchPastEvents')
+    const pastEvents = await store.dispatch('events/fetchPastEvents')
 
     const upcomingEventsPayload = { events: 'upcomingCommunityEvents', eventsSet: upcomingEvents }
     const pastEventsPayload = { events: 'pastCommunityEvents', eventsSet: pastEvents }
-    store.commit('setEvents', upcomingEventsPayload)
+    store.commit('events/setEvents', upcomingEventsPayload)
-    store.commit('setEvents', pastEventsPayload)
+    store.commit('events/setEvents', pastEventsPayload)
   }
 })
 export default class EventsPage extends QiskitPage {
@@ -157,7 +151,7 @@ export default class EventsPage extends QiskitPage {
     const { commit } = this.$store
     const payload = { filter, filterValues }
 
-    commit('updateFilterSet', payload)
+    commit('events/updateFilterSet', payload)
   }
 
   isFilterChecked (filter: string, filterValue: string): Array<CommunityEvent> {
@@ -174,14 +168,14 @@ export default class EventsPage extends QiskitPage {
     const { commit } = this.$store
 
     isSelected
-      ? commit('addFilter', payload)
+      ? commit('events/addFilter', payload)
-      : commit('removeFilter', payload)
+      : commit('events/removeFilter', payload)
   }
 
   selectTab (selectedTab: number) {
     const activeSet = selectedTab === 0 ? 'upcoming' : 'past'
 
-    this.$store.commit('setActiveSet', activeSet)
+    this.$store.commit('events/setActiveSet', activeSet)
   }
 }
 </script>

pages/learn/index.vue

@@ -46,7 +46,7 @@ import {
   TIME_SCALES,
   LEARN_LEVEL_OPTIONS,
   TIME_SCALE_OPTIONS
-} from '~/store/modules/learning-resources.ts'
+} from '~/store/learning-resources.ts'
 
 @Component({
   head () {
@@ -56,7 +56,7 @@ import {
   },
 
   computed: {
-    ...mapGetters([
+    ...mapGetters('learning-resources', [
       'filteredLearningResources',
       'learnLevel',
       'timeScale'
@@ -67,7 +67,7 @@ import {
     const learningResources = await $content('learning-resources')
       .sortBy('order', 'asc')
       .fetch()
-    store.commit('setLearningResources', learningResources)
+    store.commit('learning-resources/setLearningResources', learningResources)
   }
 })
 
@@ -92,8 +92,8 @@ export default class LearnPage extends QiskitPage {
   _parseFilterFromUrl (route: any) {
     const timeScale = route.query.timeScale || this.timeScales.all
     const learnLevel = route.query.learnLevel || this.learnLevels.all
-    this.$store.commit('setTimeScale', timeScale)
+    this.$store.commit('learning-resources/setTimeScale', timeScale)
-    this.$store.commit('setLearnLevel', learnLevel)
+    this.$store.commit('learning-resources/setLearnLevel', learnLevel)
   }
 
   setTimeScale (scale: TimeScale): void {

store/index.ts

@@ -1,13 +0,0 @@
-import Vuex from 'vuex'
-import Vue from 'vue'
-import events from './modules/events'
-import advocates from './modules/advocates'
-import learningResources from './modules/learning-resources'
-
-Vue.use(Vuex)
-
-export const storeOptions = {
-  modules: { events, advocates, learningResources }
-}
-
-export default () => new Vuex.Store(storeOptions)

tests/hooks/advocate-conversion-utils.spec.ts

@@ -9,7 +9,7 @@ import {
   getSlackUsername
 } from '~/hooks/advocate-conversion-utils'
 
-import { AdvocatesWorldRegion, ADVOCATES_WORLD_REGIONS } from '~/store/modules/advocates'
+import { AdvocatesWorldRegion, ADVOCATES_WORLD_REGIONS } from '~/store/advocates'
 
 type RecordFields = {
   name: string,

tests/hooks/event-conversion-utils.spec.ts

@@ -10,7 +10,7 @@ import {
   getImage
 } from '~/hooks/event-conversion-utils'
 
-import { COMMUNITY_EVENT_TYPES, WORLD_REGIONS } from '~/store/modules/events'
+import { COMMUNITY_EVENT_TYPES, WORLD_REGIONS } from '~/store/events'
 
 type RecordFields = {
   name: string,

tests/store/_store-options.ts

@@ -0,0 +1,18 @@
+import cloneDeep from 'lodash/cloneDeep'
+import advocates from '~/store/advocates'
+import events from '~/store/events'
+import learningResources from '~/store/learning-resources'
+
+const storeOptions = {
+  modules: {
+    advocates,
+    events,
+    'learning-resources': learningResources
+  }
+}
+
+export default () => {
+  const storeOptionsClone = cloneDeep(storeOptions)
+
+  return storeOptionsClone
+}

tests/store/advocates.spec.ts

@@ -1,6 +1,8 @@
+import Vue from 'vue'
 import Vuex, { Store } from 'vuex'
-import cloneDeep from 'lodash/cloneDeep'
+import storeOptions from './_store-options'
-import { storeOptions } from '~/store'
+
+Vue.use(Vuex)
 
 let store: Store<any>
 
@@ -31,8 +33,7 @@ describe('filteredAdvocates', () => {
   const mockNonMatchingRegionFilter = () => 'Moon'
 
   beforeEach(() => {
-    const initialStoreOptions = cloneDeep(storeOptions)
+    store = new Vuex.Store(storeOptions())
-    store = new Vuex.Store(initialStoreOptions)
     store.commit('advocates/setAdvocates', [mockAdvocate1(), mockAdvocate2()])
   })
 
@@ -66,8 +67,7 @@ describe('setAdvocates', () => {
   const mutationType = 'advocates/setAdvocates'
 
   beforeEach(() => {
-    const initialStoreOptions = cloneDeep(storeOptions)
+    store = new Vuex.Store(storeOptions())
-    store = new Vuex.Store(initialStoreOptions)
   })
 
   it('sets the list of advocates with one advocate', () => {
@@ -98,8 +98,7 @@ describe('setRegionFilters', () => {
   const mockRegionFilter2 = 'Europe'
 
   beforeEach(() => {
-    const initialStoreOptions = cloneDeep(storeOptions)
+    store = new Vuex.Store(storeOptions())
-    store = new Vuex.Store(initialStoreOptions)
   })
 
   it('sets the region filters with one filter', () => {

tests/store/events.spec.ts

@@ -1,4 +1,8 @@
-import createStore from '~/store'
+import Vue from 'vue'
+import Vuex from 'vuex'
+import storeOptions from './_store-options'
+
+Vue.use(Vuex)
 
 describe('module events', () => {
   let store: any
@@ -33,7 +37,7 @@ describe('module events', () => {
   const pastEvents = [hackathonInAmericas, unconferenceOnline]
 
   beforeEach(() => {
-    store = createStore()
+    store = new Vuex.Store(storeOptions())
     store.commit('setEvents', {
       events: 'upcomingCommunityEvents',
       eventsSet: futureEvents