Extract useCollection composable

Signed-off-by: Olga Bulat <obulat@gmail.com>

frontend/src/composables/use-collection.ts

@@ -0,0 +1,66 @@
+import { computed, ref } from "vue"
+
+import { useMediaStore } from "~/stores/media"
+import { useSearchStore } from "~/stores/search"
+import { useI18n } from "~/composables/use-i18n"
+import type { DetailFromMediaType } from "~/types/media"
+import type { SupportedMediaType } from "~/constants/media"
+
+export const useCollection = <T extends SupportedMediaType>({
+  mediaType,
+}: {
+  mediaType: T
+}) => {
+  const mediaStore = useMediaStore()
+  const searchStore = useSearchStore()
+
+  const collectionParams = computed(() => searchStore.collectionParams)
+  const isFetching = computed(() => mediaStore.fetchState.isFetching)
+
+  const media = ref<DetailFromMediaType<typeof mediaType>[]>([])
+  const creatorUrl = ref<string>()
+
+  const i18n = useI18n()
+
+  const collectionLabel = computed(() => {
+    if (!collectionParams.value) {
+      return ""
+    }
+    const { collection, ...params } = collectionParams.value
+    return i18n
+      .t(`collection.label.${collection}.image`, { ...params })
+      .toString()
+  })
+
+  const fetchMedia = async (
+    { shouldPersistMedia }: { shouldPersistMedia: boolean } = {
+      shouldPersistMedia: false,
+    }
+  ) => {
+    if (mediaStore._searchType !== mediaType) {
+      throw new Error(
+        `Search type is incorrectly set in the store to ${mediaStore._searchType} when it should be "${mediaType}"`
+      )
+    }
+    media.value = (await mediaStore.fetchMedia({
+      shouldPersistMedia,
+    })) as (typeof media)["value"]
+    creatorUrl.value =
+      media.value.length > 0 ? media.value[0].creator_url : undefined
+  }
+
+  const handleLoadMore = async () => {
+    await fetchMedia({ shouldPersistMedia: true })
+  }
+
+  const results = computed(() => ({ type: mediaType, items: media.value }))
+
+  return {
+    results,
+    creatorUrl,
+    fetchMedia,
+    handleLoadMore,
+    collectionLabel,
+    isFetching,
+  }
+}

frontend/src/pages/audio/collection.vue

@@ -4,7 +4,7 @@
       v-if="collectionParams"
       search-term=""
       :is-fetching="isFetching"
-      :results="{ type: 'audio', items: media }"
+      :results="results"
       :collection-label="collectionLabel"
       :collection-params="collectionParams"
       @load-more="handleLoadMore"
@@ -14,15 +14,12 @@
 
 <script lang="ts">
 import { defineComponent, useFetch, useMeta } from "@nuxtjs/composition-api"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
-import { useMediaStore } from "~/stores/media"
 import { collectionMiddleware } from "~/middleware/collection"
-
 import { useSearchStore } from "~/stores/search"
-import type { AudioDetail } from "~/types/media"
+import { useCollection } from "~/composables/use-collection"
 import { AUDIO } from "~/constants/media"
-import { useI18n } from "~/composables/use-i18n"
 
 import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
@@ -32,55 +29,32 @@ export default defineComponent({
   layout: "content-layout",
   middleware: collectionMiddleware,
   setup() {
-    const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
 
     const collectionParams = computed(() => searchStore.collectionParams)
-    const isFetching = computed(() => mediaStore.fetchState.isFetching)
-
-    const media = ref<AudioDetail[]>([])
-    const creatorUrl = ref<string>()
 
-    const fetchMedia = async (shouldPersistMedia: boolean = false) => {
-      if (mediaStore._searchType !== AUDIO) {
-        throw new Error(
-          `Search type is incorrectly set in the store to ${mediaStore._searchType} when it should be "audio"`
-        )
-      }
-      media.value = (await mediaStore.fetchMedia({
-        shouldPersistMedia,
-      })) as AudioDetail[]
-      creatorUrl.value =
-        media.value.length > 0 ? media.value[0].creator_url : undefined
-    }
+    const {
+      results,
+      creatorUrl,
+      fetchMedia,
+      handleLoadMore,
+      collectionLabel,
+      isFetching,
+    } = useCollection({
+      mediaType: AUDIO,
+    })
 
     useFetch(async () => {
       await fetchMedia()
     })
 
-    const handleLoadMore = async () => {
-      await fetchMedia(true)
-    }
-
-    const i18n = useI18n()
-
-    const collectionLabel = computed(() => {
-      if (!collectionParams.value) {
-        return ""
-      }
-      const { collection, ...params } = collectionParams.value
-      return i18n
-        .t(`collection.label.${collection}.audio`, { ...params })
-        .toString()
-    })
-
     useMeta({
       meta: [{ hid: "robots", name: "robots", content: "all" }],
     })
 
     return {
+      results,
       collectionParams,
-      media,
       isFetching,
       creatorUrl,
       collectionLabel,

frontend/src/pages/image/collection.vue

@@ -4,7 +4,7 @@
       v-if="collectionParams"
       search-term=""
       :is-fetching="isFetching"
-      :results="{ type: 'image', items: media }"
+      :results="results"
       :collection-label="collectionLabel"
       :collection-params="collectionParams"
       @load-more="handleLoadMore"
@@ -14,15 +14,12 @@
 
 <script lang="ts">
 import { defineComponent, useFetch, useMeta } from "@nuxtjs/composition-api"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
-import { useMediaStore } from "~/stores/media"
 import { collectionMiddleware } from "~/middleware/collection"
-
+import { useCollection } from "~/composables/use-collection"
 import { useSearchStore } from "~/stores/search"
-import type { ImageDetail } from "~/types/media"
 import { IMAGE } from "~/constants/media"
-import { useI18n } from "~/composables/use-i18n"
 
 import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
@@ -32,55 +29,32 @@ export default defineComponent({
   layout: "content-layout",
   middleware: collectionMiddleware,
   setup() {
-    const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
 
     const collectionParams = computed(() => searchStore.collectionParams)
-    const isFetching = computed(() => mediaStore.fetchState.isFetching)
-
-    const media = ref<ImageDetail[]>([])
-    const creatorUrl = ref<string>()
-
-    const fetchMedia = async (shouldPersistMedia: boolean = false) => {
-      if (mediaStore._searchType !== IMAGE) {
-        throw new Error(
-          `Search type is incorrectly set in the store to ${mediaStore._searchType} when it should be "image"`
-        )
-      }
-      media.value = (await mediaStore.fetchMedia({
-        shouldPersistMedia,
-      })) as ImageDetail[]
-      creatorUrl.value =
-        media.value.length > 0 ? media.value[0].creator_url : undefined
-    }
-
-    useFetch(async () => {
-      await fetchMedia()
-    })
-
-    const handleLoadMore = async () => {
-      await fetchMedia(true)
-    }
 
-    const i18n = useI18n()
-
-    const collectionLabel = computed(() => {
-      if (!collectionParams.value) {
-        return ""
-      }
-      const { collection, ...params } = collectionParams.value
-      return i18n
-        .t(`collection.label.${collection}.image`, { ...params })
-        .toString()
+    const {
+      results,
+      creatorUrl,
+      fetchMedia,
+      handleLoadMore,
+      collectionLabel,
+      isFetching,
+    } = useCollection({
+      mediaType: IMAGE,
     })
 
     useMeta({
       meta: [{ hid: "robots", name: "robots", content: "all" }],
     })
 
+    useFetch(async () => {
+      await fetchMedia()
+    })
+
     return {
       collectionParams,
-      media,
+      results,
       isFetching,
       creatorUrl,
       collectionLabel,