Set active content type using prop

WordPress · Jan 17, 2022 · f701e65 · f701e65
1 parent 3f38014
commit f701e65
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 29 deletions.
diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
@@ -31,7 +31,11 @@
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 import { resultsCount } from '~/composables/use-i18n-utilities'
-import { AUDIO, IMAGE, mediaTypes } from '~/constants/media'
+import {
+  AUDIO,
+  IMAGE,
+  supportedMediaTypes as mediaTypes,
+} from '~/constants/media'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 import audioIcon from '~/assets/icons/audio-wave.svg'

diff --git a/src/components/VContentSwitcher/VContentSwitcherButton.vue b/src/components/VContentSwitcher/VContentSwitcherButton.vue
@@ -28,6 +28,7 @@ import caretDownIcon from '~/assets/icons/caret-down.svg'
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import { isMinScreen } from '@/composables/use-media-query'
+import { ALL_MEDIA, AUDIO, IMAGE } from '@/constants/media'
 
 export default {
   name: 'VContentSwitcherButton',
@@ -37,8 +38,13 @@ export default {
       type: Object,
       required: true,
     },
+    activeItem: {
+      type: String,
+      default: ALL_MEDIA,
+      validator: (val) => [ALL_MEDIA, IMAGE, AUDIO].includes(val),
+    },
   },
-  setup() {
+  setup(props) {
     const { i18n } = useContext()
     const isHeaderScrolled = inject('isHeaderScrolled', null)
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
@@ -58,7 +64,7 @@ export default {
         audio: 'search-type.audio',
         all: 'search-type.all',
         video: 'search-type.video',
-      }[activeItem.value]
+      }[props.activeItem]
       return i18n.t(labelKey)
     })
     const showLabel = computed(

diff --git a/src/components/VContentSwitcher/VContentSwitcherPopover.vue b/src/components/VContentSwitcher/VContentSwitcherPopover.vue
@@ -5,7 +5,10 @@
     :label="$t('search-type.label')"
   >
     <template #trigger="{ a11yProps }">
-      <VContentSwitcherButton :a11y-props="a11yProps" />
+      <VContentSwitcherButton
+        :a11y-props="a11yProps"
+        :active-item="activeItem"
+      />
     </template>
     <VItemGroup
       direction="vertical"
@@ -16,7 +19,7 @@
       <VItem
         v-for="(item, idx) in content.types"
         :key="idx"
-        :selected="item === content.activeType.value"
+        :selected="item === activeItem"
         :is-first="idx === 0"
         @click.native="handleClick(item)"
       >
@@ -43,10 +46,17 @@ export default {
     VContentSwitcherButton,
     VPopover,
   },
-  setup(_, { emit }) {
+  props: {
+    activeItem: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
     const content = useContentType()
 
     const contentMenuPopover = ref(null)
+
     /**
      * Only the contentMenuPopover needs to be closed programmatically
      */

diff --git a/src/components/VHeader/VContentSwitcher/VMobileContentSwitcher.vue b/src/components/VHeader/VContentSwitcher/VMobileContentSwitcher.vue
@@ -47,7 +47,7 @@
           <VItem
             v-for="(page, idx) in pages.all"
             :key="page.id"
-            class="'w-1/2'"
+            class="w-1/2"
             :selected="page.id === pages.current"
             :is-first="idx === 0"
             v-bind="getLinkProps(page)"

diff --git a/src/components/VHeader/VHeaderMenu.vue b/src/components/VHeader/VHeaderMenu.vue
@@ -55,6 +55,7 @@ export default {
       return h('div', { class: 'flex flex-grow justify-between' }, [
         h(VDesktopPageMenu),
         h(VContentSwitcherPopover, {
+          props: { activeItem: this.content.activeType.value },
           ref: 'menuModalRef',
           on: { select: this.selectContentType },
         }),

diff --git a/src/composables/use-content-type.js b/src/composables/use-content-type.js
@@ -1,4 +1,5 @@
-import { computed, reactive, ref, useContext } from '@nuxtjs/composition-api'
+import { computed, ref, useContext } from '@nuxtjs/composition-api'
+import { supportedContentTypes } from '~/constants/media'
 import { SEARCH } from '~/constants/store-modules'
 import { UPDATE_QUERY } from '~/constants/action-types'
 import allIcon from '~/assets/icons/all-content.svg'
@@ -13,7 +14,7 @@ const icons = {
 export default function useContentType() {
   const { store } = useContext()
 
-  const contentTypes = reactive(['all', 'image', 'audio'])
+  const contentTypes = [...supportedContentTypes]
 
   const activeType = computed(() => store.state.search.searchType)
   const previousContentType = ref(activeType.value)

diff --git a/src/constants/media.js b/src/constants/media.js
@@ -5,11 +5,15 @@ export const ALL_MEDIA = 'all'
 
 /** @typedef {typeof AUDIO | typeof IMAGE | typeof VIDEO | typeof ALL_MEDIA} MediaType */
 
-// Media types
-/** @type {MediaType[]} */
-export const mediaTypes = [AUDIO, IMAGE]
-// Media types which support custom filters
-/** @type {MediaType[]} */
-export const supportedMediaTypes = [AUDIO, IMAGE, VIDEO]
-/** @type {MediaType[]} */
-export const allMediaTypes = [ALL_MEDIA, IMAGE, AUDIO, VIDEO]
+/**
+ * Media types that the API supports.
+ * These types also support custom filters.
+ * @type {MediaType[]}
+ */
+export const supportedMediaTypes = [AUDIO, IMAGE]
+
+/**
+ * The types of content that users can search. `All` is also an option here.
+ * @type {MediaType[]}
+ */
+export const supportedContentTypes = [ALL_MEDIA, IMAGE, AUDIO]
diff --git a/src/locales/scripts/wp-locales.json b/src/locales/scripts/wp-locales.json
@@ -358,7 +358,7 @@
     "facebookLocale": "cs_CZ",
     "wpLocale": "cs_CZ",
     "code": "cs",
-    "translated": 97
+    "translated": 100
   },
   "cy": {
     "name": "Welsh",
@@ -385,7 +385,7 @@
     "facebookLocale": "da_DK",
     "wpLocale": "da_DK",
     "code": "da",
-    "translated": 95
+    "translated": 98
   },
   "de_AT": {
     "name": "German (Austria)",
@@ -419,7 +419,7 @@
     "facebookLocale": "de_DE",
     "wpLocale": "de_DE",
     "code": "de",
-    "translated": 97
+    "translated": 100
   },
   "dsb": {
     "name": "Lower Sorbian",
@@ -528,7 +528,7 @@
     "googleCode": "en",
     "wpLocale": "en_ZA",
     "code": "en-za",
-    "translated": 96
+    "translated": 95
   },
   "eo": {
     "name": "Esperanto",
@@ -553,7 +553,7 @@
     "facebookLocale": "es_LA",
     "wpLocale": "es_AR",
     "code": "es-ar",
-    "translated": 95
+    "translated": 94
   },
   "es_CL": {
     "name": "Spanish (Chile)",
@@ -670,7 +670,7 @@
     "facebookLocale": "es_MX",
     "wpLocale": "es_MX",
     "code": "es-mx",
-    "translated": 74
+    "translated": 85
   },
   "es_PE": {
     "name": "Spanish (Peru)",
@@ -848,7 +848,7 @@
     "facebookLocale": "fr_FR",
     "wpLocale": "fr_FR",
     "code": "fr",
-    "translated": 86
+    "translated": 92
   },
   "frp": {
     "name": "Arpitan",
@@ -941,7 +941,7 @@
     "facebookLocale": "gl_ES",
     "wpLocale": "gl_ES",
     "code": "gl",
-    "translated": 100
+    "translated": 99
   },
   "gu": {
     "name": "Gujarati",
@@ -1576,7 +1576,7 @@
     "googleCode": "nl",
     "wpLocale": "nl_BE",
     "code": "nl-be",
-    "translated": 23
+    "translated": 37
   },
   "nl_NL": {
     "name": "Dutch",
@@ -1589,7 +1589,7 @@
     "facebookLocale": "nl_NL",
     "wpLocale": "nl_NL",
     "code": "nl",
-    "translated": 94
+    "translated": 100
   },
   "nn_NO": {
     "name": "Norwegian (Nynorsk)",
@@ -1798,7 +1798,7 @@
     "facebookLocale": "ru_RU",
     "wpLocale": "ru_RU",
     "code": "ru",
-    "translated": 51
+    "translated": 50
   },
   "sa_IN": {
     "name": "Sanskrit",
@@ -2002,7 +2002,7 @@
     "facebookLocale": "sv_SE",
     "wpLocale": "sv_SE",
     "code": "sv",
-    "translated": 74
+    "translated": 73
   },
   "sw": {
     "name": "Swahili",