Convert media store to an options store

src/composables/use-fetch-state.ts

@@ -7,6 +7,13 @@ export interface FetchState {
   hasStarted?: boolean
   isFinished?: boolean
 }
+export const initialFetchState: FetchState = {
+  hasStarted: false,
+  isFetching: false,
+  canFetch: true,
+  isFinished: false,
+  fetchingError: null,
+} as const
 
 /* Constants */
 
@@ -41,11 +48,33 @@ const nonErrorStatuses: Status[] = [
 const canFetchStatuses: Status[] = [statuses.IDLE, statuses.SUCCESS]
 
 /* Composable */
+export const useFetchState = (state: FetchState = initialFetchState) => {
+  const initialState: {
+    status: Status
+    fetchError: null | string
+    isFinished: boolean
+  } = {
+    status: statuses.IDLE,
+    fetchError: null,
+    isFinished: false,
+  }
+  if (state) {
+    if (state.isFetching) {
+      initialState.status = statuses.FETCHING
+    } else if (state.fetchingError) {
+      initialState.status = statuses.ERROR
+      initialState.fetchError = state.fetchingError
+    } else if (state.hasStarted) {
+      initialState.status = statuses.SUCCESS
+    }
+    if (state.isFinished) {
+      initialState.isFinished = true
+    }
+  }
 
-export const useFetchState = (initialState = statuses.IDLE) => {
-  const fetchStatus: Ref<Status> = ref(initialState)
-  const fetchError: Ref<string | null> = ref(null)
-  const isFinished: Ref<boolean> = ref(false)
+  const fetchStatus: Ref<Status> = ref(initialState.status)
+  const fetchError: Ref<string | null> = ref(initialState.fetchError)
+  const isFinished: Ref<boolean> = ref(initialState.isFinished)
 
   watch(fetchStatus, () => {
     if (nonErrorStatuses.includes(fetchStatus.value)) {
@@ -112,3 +141,26 @@ export const useFetchState = (initialState = statuses.IDLE) => {
     reset,
   }
 }
+
+export const updateFetchState = (
+  initial: FetchState,
+  action: 'end' | 'finish' | 'start' | 'reset',
+  option?: string
+) => {
+  const fetchState = useFetchState(initial)
+  switch (action) {
+    case 'end':
+      fetchState.endFetching(option)
+      break
+    case 'start':
+      fetchState.startFetching()
+      break
+    case 'finish':
+      fetchState.setFinished()
+      break
+    case 'reset':
+      fetchState.reset()
+      break
+  }
+  return fetchState.fetchState
+}

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-04-08T16:46:12+00:00\n"
+"POT-Creation-Date: 2022-04-12T15:09:43+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1078,13 +1078,13 @@ msgid "An error occurred"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:142
+#: src/pages/image/_id.vue:137
 msgctxt "error.image-not-found"
 msgid "Couldn't find image with id ###id###"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/audio/_id.vue:67
+#: src/pages/audio/_id.vue:61
 msgctxt "error.media-not-found"
 msgid "Couldn't find ###mediaType### with id ###id###"
 msgstr ""

src/pages/audio/_id.vue

@@ -15,10 +15,9 @@
 </template>
 
 <script>
-import { computed } from '@nuxtjs/composition-api'
-
 import { AUDIO } from '~/constants/media'
-import { useMediaStore } from '~/stores/media'
+
+import { useMediaItemStore } from '~/stores/media/media-item'
 
 import VAudioDetails from '~/components/VAudioDetails/VAudioDetails.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
@@ -40,26 +39,21 @@ const AudioDetailPage = {
       showBackToSearchLink: false,
     }
   },
-  setup() {
-    const mediaStore = useMediaStore()
-    const audio = computed(() => mediaStore.state.audio)
-
-    return { audio }
-  },
   watch: {
     audio(newAudio) {
       this.id = newAudio.id
     },
   },
   async asyncData({ route, error, app, $pinia }) {
     try {
-      const mediaStore = useMediaStore($pinia)
-      await mediaStore.fetchMediaItem({
+      const mediaItemStore = useMediaItemStore($pinia)
+      await mediaItemStore.fetchMediaItem({
         id: route.params.id,
-        mediaType: AUDIO,
+        type: AUDIO,
       })
+      const audio = mediaItemStore.mediaItem
       return {
-        id: route.params.id,
+        audio,
       }
     } catch (err) {
       error({

src/pages/image/_id.vue

@@ -69,17 +69,15 @@
       :image-height="imageHeight"
       :image-type="imageType"
     />
-    <VRelatedImages :image-id="imageId" />
+    <VRelatedImages :image-id="image.id" />
   </div>
 </template>
 
 <script>
 import axios from 'axios'
 
-import { computed } from '@nuxtjs/composition-api'
-
 import { IMAGE } from '~/constants/media'
-import { useMediaStore } from '~/stores/media'
+import { useMediaItemStore } from '~/stores/media/media-item'
 
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
@@ -112,11 +110,6 @@ const VImageDetailsPage = {
       sketchFabfailure: false,
     }
   },
-  setup() {
-    const mediaStore = useMediaStore()
-    const image = computed(() => mediaStore.state.image)
-    return { image }
-  },
   computed: {
     sketchFabUid() {
       if (this.image?.source !== 'sketchfab' || this.sketchFabfailure) {
@@ -129,14 +122,16 @@ const VImageDetailsPage = {
   },
   async asyncData({ app, error, route, $pinia }) {
     const imageId = route.params.id
-    const mediaStore = useMediaStore($pinia)
+    const mediaItemStore = useMediaItemStore($pinia)
     try {
-      await mediaStore.fetchMediaItem({
+      await mediaItemStore.fetchMediaItem({
         id: imageId,
-        mediaType: IMAGE,
+        type: IMAGE,
       })
+      /** @type {import('~/models/media').ImageDetail} */
+      const image = mediaItemStore.mediaItem
       return {
-        imageId: imageId,
+        image,
       }
     } catch (err) {
       const errorMessage = app.i18n.t('error.image-not-found', {