Merge pull request #244 from WordPress/namespaced_store

Make most of the Vuex store modules namespaced

src/ab-tests/index.js

@@ -1,5 +1,6 @@
 import { JOINED_AB_TEST_EXPERIMENT } from '~/constants/mutation-types'
 import { participate } from '~/utils/sixpack'
+import { ABTEST } from '~/constants/store-modules'
 
 export const activeExperiments = []
 
@@ -28,7 +29,7 @@ const abTests = async (store, activeExperiments) => {
   // commit each experiment to Vuex
   const commitExperiments = (experiments) => {
     experiments.map((experiment) => {
-      store.commit(JOINED_AB_TEST_EXPERIMENT, {
+      store.commit(`${ABTEST}/${JOINED_AB_TEST_EXPERIMENT}`, {
         name: experiment.name,
         case: experiment.case,
         session: experiment.session,
@@ -37,7 +38,7 @@ const abTests = async (store, activeExperiments) => {
   }
   const experiments = await Promise.all(
     activeExperiments.map((experiment) =>
-      participate(experiment, { sessionId: store.state.abSessionId })
+      participate(experiment, { sessionId: store.state.user.abSessionId })
     )
   )
   commitExperiments(experiments)

src/components/AudioTrack/AudioController.vue

@@ -78,8 +78,8 @@ export default {
 
     const isActiveTrack = computed(
       () =>
-        store.state.activeMediaType === 'audio' &&
-        store.state.activeMediaId === props.audio.id
+        store.state['active-media'].type === 'audio' &&
+        store.state['active-media'].id === props.audio.id
     )
     // Sync status from parent to player and store
     watch(
@@ -107,7 +107,7 @@ export default {
     )
     // Sync status from store to parent
     watch(
-      () => [store.state.activeMediaType, store.state.activeMediaId],
+      () => [store.state['active-media'].type, store.state['active-media'].id],
       () => {
         const status = isActiveTrack.value ? 'playing' : 'paused'
         emit('change', status)

src/components/HeaderSection.vue

@@ -21,7 +21,7 @@ export default {
   computed: {
     ...mapState({
       showNotification: (state) => state.showNotification,
-      isEmbedded: (state) => state.isEmbedded,
+      isEmbedded: (state) => state.nav.isEmbedded,
     }),
   },
 }

src/components/HeroSection.vue

@@ -68,7 +68,7 @@ export default {
   name: 'HeroSection',
   data: () => ({ form: { searchTerm: '' } }),
   computed: {
-    ...mapState({ isEmbedded: (state) => state.isEmbedded }),
+    ...mapState({ isEmbedded: (state) => state.nav.isEmbedded }),
   },
   mounted() {
     if (document.querySelector('#searchTerm')) {

src/components/ImageDetails/ImageInfo.vue

@@ -50,10 +50,11 @@
 import {
   SEND_DETAIL_PAGE_EVENT,
   DETAIL_PAGE_EVENTS,
-} from '~/store-modules/usage-data-analytics-types'
+} from '~/constants/usage-data-analytics-types'
 import PhotoTags from '~/components/PhotoTags'
 import getProviderName from '~/utils/get-provider-name'
 import getProviderLogo from '~/utils/get-provider-logo'
+import { USAGE_DATA } from '~/constants/store-modules'
 
 export default {
   name: 'ImageInfo',
@@ -93,7 +94,7 @@ export default {
       return getProviderLogo(providerName)
     },
     onPhotoSourceLinkClicked() {
-      this.$store.dispatch(SEND_DETAIL_PAGE_EVENT, {
+      this.$store.dispatch(`${USAGE_DATA}/${SEND_DETAIL_PAGE_EVENT}`, {
         eventType: DETAIL_PAGE_EVENTS.SOURCE_CLICKED,
         resultUuid: this.$props.image.id,
       })

src/components/ImageDetails/PhotoDetails.vue

@@ -188,9 +188,10 @@ import { TOGGLE_REPORT_FORM_VISIBILITY } from '~/constants/mutation-types'
 import {
   SEND_DETAIL_PAGE_EVENT,
   DETAIL_PAGE_EVENTS,
-} from '~/store-modules/usage-data-analytics-types'
+} from '~/constants/usage-data-analytics-types'
 import attributionHtml from '~/utils/attribution-html'
 import { getFullLicenseName } from '~/utils/license'
+import { REPORT_CONTENT, USAGE_DATA } from '~/constants/store-modules'
 
 export default {
   name: 'PhotoDetails',
@@ -240,6 +241,13 @@ export default {
     },
   },
   methods: {
+    sendDetailPageEvent(eventType) {
+      const eventData = {
+        eventType,
+        resultUuid: this.$props.image.id,
+      }
+      this.$store.dispatch(`${USAGE_DATA}/${SEND_DETAIL_PAGE_EVENT}`, eventData)
+    },
     onGoBackToSearchResults() {
       this.$router.back()
     },
@@ -260,19 +268,13 @@ export default {
       return attributionHtml(this.image, licenseURL, this.fullLicenseName)
     },
     toggleReportFormVisibility() {
-      this.$store.commit(TOGGLE_REPORT_FORM_VISIBILITY)
+      this.$store.commit(`${REPORT_CONTENT}/${TOGGLE_REPORT_FORM_VISIBILITY}`)
     },
     onPhotoSourceLinkClicked() {
-      this.$store.dispatch(SEND_DETAIL_PAGE_EVENT, {
-        eventType: DETAIL_PAGE_EVENTS.SOURCE_CLICKED,
-        resultUuid: this.$props.image.id,
-      })
+      this.sendDetailPageEvent(DETAIL_PAGE_EVENTS.SOURCE_CLICKED)
     },
     onPhotoCreatorLinkClicked() {
-      this.$store.dispatch(SEND_DETAIL_PAGE_EVENT, {
-        eventType: DETAIL_PAGE_EVENTS.CREATOR_CLICKED,
-        resultUuid: this.$props.image.id,
-      })
+      this.sendDetailPageEvent(DETAIL_PAGE_EVENTS.CREATOR_CLICKED)
     },
   },
 }

src/components/ImageDetails/ReuseSurvey.vue

@@ -18,7 +18,8 @@
 import {
   SEND_DETAIL_PAGE_EVENT,
   DETAIL_PAGE_EVENTS,
-} from '~/store-modules/usage-data-analytics-types'
+} from '~/constants/usage-data-analytics-types'
+import { USAGE_DATA } from '~/constants/store-modules'
 
 const reuseForm =
   'https://docs.google.com/forms/d/e/1FAIpQLSegPUDIUj_odzclJhhWRfPumSfbHtXDVDCHqRfFl7ZS8cMn2g/viewform'
@@ -41,7 +42,7 @@ export default {
   },
   methods: {
     onReuseSurveyClick() {
-      this.$store.dispatch(SEND_DETAIL_PAGE_EVENT, {
+      this.$store.dispatch(`${USAGE_DATA}/${SEND_DETAIL_PAGE_EVENT}`, {
         eventType: DETAIL_PAGE_EVENTS.REUSE_SURVEY,
         resultUuid: this.$props.image.id,
       })

src/components/ImageDetails/SocialShareButtons.vue

@@ -40,7 +40,8 @@ import { SOCIAL_MEDIA_SHARE } from '~/constants/action-types'
 import {
   SEND_DETAIL_PAGE_EVENT,
   DETAIL_PAGE_EVENTS,
-} from '~/store-modules/usage-data-analytics-types'
+} from '~/constants/usage-data-analytics-types'
+import { SOCIAL, USAGE_DATA } from '~/constants/store-modules'
 
 export default {
   name: 'SocialShareButtons',
@@ -53,8 +54,8 @@ export default {
   },
   methods: {
     onSocialMediaLinkClick(site) {
-      this.$store.dispatch(SOCIAL_MEDIA_SHARE, { site })
-      this.$store.dispatch(SEND_DETAIL_PAGE_EVENT, {
+      this.$store.dispatch(`${SOCIAL}/${SOCIAL_MEDIA_SHARE}`, { site })
+      this.$store.dispatch(`${USAGE_DATA}/${SEND_DETAIL_PAGE_EVENT}`, {
         eventType: DETAIL_PAGE_EVENTS.SHARED_SOCIAL,
         resultUuid: this.$props.image.id,
       })

src/components/MediaInfo/CopyLicense.vue

@@ -176,8 +176,9 @@ import { COPY_ATTRIBUTION } from '~/constants/action-types'
 import {
   SEND_DETAIL_PAGE_EVENT,
   DETAIL_PAGE_EVENTS,
-} from '~/store-modules/usage-data-analytics-types'
+} from '~/constants/usage-data-analytics-types'
 import { isPublicDomain } from '~/utils/license'
+import { ATTRIBUTION, USAGE_DATA } from '~/constants/store-modules'
 
 export default {
   name: 'CopyLicense',
@@ -219,23 +220,26 @@ export default {
       this.activeTab = tabIdx
     },
     sendDetailPageEvent(eventType) {
-      this.$store.dispatch(SEND_DETAIL_PAGE_EVENT, {
+      this.$store.dispatch(`${USAGE_DATA}/${SEND_DETAIL_PAGE_EVENT}`, {
         eventType,
         resultUuid: this.$props.media.id,
       })
     },
     onCopyAttribution(type, event) {
-      this.$store.dispatch(COPY_ATTRIBUTION, { type, content: event.content })
+      this.$store.dispatch(`${ATTRIBUTION}/${COPY_ATTRIBUTION}`, {
+        type,
+        content: event.content,
+      })
       this.sendDetailPageEvent(DETAIL_PAGE_EVENTS.ATTRIBUTION_CLICKED)
     },
     onPhotoSourceLinkClicked() {
-      this.$store.dispatch(SEND_DETAIL_PAGE_EVENT, {
+      this.sendDetailPageEvent({
         eventType: DETAIL_PAGE_EVENTS.SOURCE_CLICKED,
         resultUuid: this.$props.media.id,
       })
     },
     onPhotoCreatorLinkClicked() {
-      this.$store.dispatch(SEND_DETAIL_PAGE_EVENT, {
+      this.sendDetailPageEvent({
         eventType: DETAIL_PAGE_EVENTS.CREATOR_CLICKED,
         resultUuid: this.$props.media.id,
       })

src/components/NotificationBanner.vue

@@ -36,24 +36,26 @@
 <script>
 import { mapState } from 'vuex'
 import { SET_SHOW_NOTIFICATION } from '~/constants/mutation-types'
+import { NOTIFICATION } from '~/constants/store-modules'
+import { NOTIFICATION_ACTION } from '~/constants/action-types'
 
 export default {
   name: 'NotificationBanner',
   computed: {
     ...mapState({
-      text: (state) => state.notificationText,
-      dismissLabel: (state) => state.notificationDismiss,
-      okayLabel: (state) => state.notificationOkay,
+      text: (state) => state.notification.notificationText,
+      dismissLabel: (state) => state.notification.notificationDismiss,
+      okayLabel: (state) => state.notification.notificationOkay,
     }),
   },
   methods: {
     handleDismissClick() {
-      this.$store.commit(SET_SHOW_NOTIFICATION, {
+      this.$store.commit(`${NOTIFICATION}/${SET_SHOW_NOTIFICATION}`, {
         showNotification: false,
       })
     },
     handleOkayClick() {
-      this.$store.dispatch('NOTIFICATION_ACTION')
+      this.$store.dispatch(`${NOTIFICATION}/${NOTIFICATION_ACTION}`)
     },
   },
 }

src/components/SearchRating.vue

@@ -30,7 +30,8 @@
 </template>
 
 <script>
-import { SEND_SEARCH_RATING_EVENT } from '~/store-modules/usage-data-analytics-types'
+import { SEND_SEARCH_RATING_EVENT } from '~/constants/usage-data-analytics-types'
+import { USAGE_DATA } from '~/constants/store-modules'
 
 const Statuses = {
   NOT_SENT: 'NOT_SENT',
@@ -47,7 +48,7 @@ export default {
   },
   methods: {
     sendSearchRatingEvent(isRelevant) {
-      this.$store.dispatch(SEND_SEARCH_RATING_EVENT, {
+      this.$store.dispatch(`${USAGE_DATA}/${SEND_SEARCH_RATING_EVENT}`, {
         query: this.$props.searchTerm,
         relevant: isRelevant,
       })

src/constants/action-types.js

@@ -15,3 +15,4 @@ export const SEND_CONTENT_REPORT = 'SEND_CONTENT_REPORT'
 export const SET_SEARCH_TYPE_FROM_URL = 'SET_SEARCH_TYPE_FROM_URL'
 export const UPDATE_SEARCH_TYPE = 'UPDATE_SEARCH_TYPE'
 export const HANDLE_NO_MEDIA = 'HANDLE_NO_MEDIA'
+export const NOTIFICATION_ACTION = 'NOTIFICATION_ACTION'

src/constants/store-modules.js

@@ -0,0 +1,9 @@
+export const RELATED = 'related'
+export const ABTEST = 'abtest'
+export const ATTRIBUTION = 'attribution'
+export const PROVIDER = 'provider'
+export const NAV = 'nav'
+export const NOTIFICATION = 'notification'
+export const REPORT_CONTENT = 'report-content'
+export const USAGE_DATA = 'usage-data'
+export const SOCIAL = 'social'

src/layouts/embedded-with-nav-search.vue

@@ -19,7 +19,9 @@ const embeddedWithNavSearch = {
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true })
   },
-  computed: mapState(['isReferredFromCc']),
+  computed: mapState({
+    isReferredFromCc: (state) => state.nav.isReferredFromCc,
+  }),
 }
 export default embeddedWithNavSearch
 </script>

src/layouts/embedded.vue

@@ -19,7 +19,9 @@ const embeddedPage = {
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true })
   },
-  computed: mapState(['isReferredFromCc']),
+  computed: mapState({
+    isReferredFromCc: (state) => state.nav.isReferredFromCc,
+  }),
 }
 export default embeddedPage
 </script>

src/middleware/middleware.js

@@ -1,6 +1,7 @@
 import { SET_EMBEDDED, SET_REFERRED } from '~/constants/mutation-types'
 import { sendWindowMessage } from '~/utils/send-message'
 import config from '../../nuxt.config.js'
+import { NAV } from '~/constants/store-modules'
 
 /**
  * In embedded mode, the app sends its size and url
@@ -19,7 +20,7 @@ import config from '../../nuxt.config.js'
 export default function ({ store, query, route }) {
   if ('embedded' in query) {
     const isEmbedded = query.embedded === 'true'
-    store.commit(SET_EMBEDDED, { isEmbedded })
+    store.commit(`${NAV}/${SET_EMBEDDED}`, { isEmbedded })
   }
   if (process.client) {
     sendWindowMessage({
@@ -29,7 +30,7 @@ export default function ({ store, query, route }) {
     })
   }
 
-  if (store.state.isReferredFromCc) {
-    store.commit(SET_REFERRED, { isReferredFromCc: false })
+  if (store.state.nav.isReferredFromCc) {
+    store.commit(`${NAV}/${SET_REFERRED}`, { isReferredFromCc: false })
   }
 }

src/mixins/iframe-height.js

@@ -10,7 +10,7 @@ import config from '../../nuxt.config.js'
 export default {
   data: () => ({ height: 0, observer: null }),
   mounted() {
-    if (this.$store.state.isEmbedded) {
+    if (this.$store.state.nav.isEmbedded) {
       this.notifyOuterWindow(document.documentElement.scrollHeight)
       this.observer = this.createResizeObserver()
       this.observer.observe(document.documentElement)

src/pages/about.vue

@@ -101,12 +101,12 @@ import { mapState } from 'vuex'
 const AboutPage = {
   name: 'about-page',
   layout({ store }) {
-    return store.state.isEmbedded
+    return store.state.nav.isEmbedded
       ? 'embedded-with-nav-search'
       : 'with-nav-search'
   },
   computed: {
-    ...mapState(['isEmbedded']),
+    ...mapState({ isEmbedded: (state) => state.nav.isEmbedded }),
   },
 }
 

src/pages/extension.vue

@@ -82,7 +82,7 @@ const AboutPage = {
   name: 'about-page',
   components: { ExtensionBrowsers },
   layout({ store }) {
-    return store.state.isEmbedded
+    return store.state.nav.isEmbedded
       ? 'embedded-with-nav-search'
       : 'with-nav-search'
   },
@@ -98,7 +98,7 @@ const AboutPage = {
     }
   },
   computed: {
-    ...mapState(['isEmbedded']),
+    ...mapState({ isEmbedded: (state) => state.nav.isEmbedded }),
   },
   methods: {
     togglePlay() {