Use VMediaCollection for all search results

Signed-off-by: Olga Bulat <[email protected]>

frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
-    <div
-      v-if="!noResults"
-      class="results-grid mb-4 mt-2 grid grid-cols-2 gap-4 md:mt-0"
-    >
+    <div class="results-grid mb-4 mt-2 grid grid-cols-2 gap-4 md:mt-0">
       <VContentLink
         v-for="[mediaType, count] in resultCounts"
         :key="mediaType"
@@ -13,30 +10,17 @@
         :to="contentLinkPath(mediaType)"
       />
     </div>
-    <VSnackbar size="large" :is-visible="isSnackbarVisible">
-      <i18n path="allResults.snackbar.text" tag="p">
-        <template #spacebar>
-          <kbd class="font-sans">{{ $t(`allResults.snackbar.spacebar`) }}</kbd>
-        </template>
-      </i18n>
-    </VSnackbar>
-    <VGridSkeleton
-      v-if="resultsLoading && allMedia.length === 0"
-      is-for-tab="all"
-    />
+    <VAudioInstructions kind="all" />
     <ol
-      v-else
       class="results-grid grid grid-cols-2 gap-4"
       :class="
         isSidebarVisible
           ? 'lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'
           : 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'
       "
-      :aria-label="
-        $t('browsePage.aria.results', { query: searchTerm }).toString()
-      "
+      :aria-label="collectionLabel"
     >
-      <template v-for="item in allMedia">
+      <template v-for="item in results">
         <VImageCell
           v-if="isDetail.image(item)"
           :key="item.id"
@@ -55,77 +39,57 @@
         />
       </template>
     </ol>
-
-    <VLoadMoreOld class="mb-6 mt-4 lg:mb-10" />
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue"
+import { computed, defineComponent, type PropType } from "vue"
 import { storeToRefs } from "pinia"
 
 import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 
-import { isDetail } from "~/types/media"
-
-import { useI18n } from "~/composables/use-i18n"
+import { type AudioDetail, type ImageDetail, isDetail } from "~/types/media"
 
 import type { SupportedMediaType } from "~/constants/media"
 
-import VSnackbar from "~/components/VSnackbar.vue"
 import VImageCell from "~/components/VImageCell/VImageCell.vue"
 import VAudioResult from "~/components/VSearchResultsGrid/VAudioResult.vue"
-import VLoadMoreOld from "~/components/VLoadMoreOld.vue"
 import VContentLink from "~/components/VContentLink/VContentLink.vue"
-import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
+import VAudioInstructions from "~/components/VSearchResultsGrid/VAudioInstructions.vue"
 
 export default defineComponent({
   name: "VAllResultsGrid",
   components: {
-    VSnackbar,
     VImageCell,
     VAudioResult,
-    VLoadMoreOld,
-    VGridSkeleton,
+    VAudioInstructions,
     VContentLink,
   },
+  props: {
+    searchTerm: {
+      type: String,
+      required: true,
+    },
+    results: {
+      type: Array as PropType<(AudioDetail | ImageDetail)[]>,
+      required: true,
+    },
+    collectionLabel: {
+      type: String,
+      required: true,
+    },
+  },
   setup() {
-    const i18n = useI18n()
     const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
 
-    const searchTerm = computed(() => searchStore.searchTerm)
-
-    const resultsLoading = computed(() => {
-      return (
-        Boolean(mediaStore.fetchState.fetchingError) ||
-        mediaStore.fetchState.isFetching ||
-        !mediaStore.fetchState.hasStarted
-      )
-    })
-
     const contentLinkPath = (mediaType: SupportedMediaType) =>
       searchStore.getSearchPath({ type: mediaType })
 
-    const allMedia = computed(() => mediaStore.allMedia)
-
-    const isError = computed(() => !!mediaStore.fetchState.fetchingError)
-
-    const fetchState = computed(() => mediaStore.fetchState)
-
-    const errorHeader = computed(() => {
-      const type = i18n.t("browsePage.searchForm.audio")
-      return i18n.t("browsePage.fetchingError", { type })
-    })
-
     const resultCounts = computed(() => mediaStore.resultCountsPerMediaType)
 
-    const noResults = computed(
-      () => fetchState.value.isFinished && allMedia.value.length === 0
-    )
-
     const uiStore = useUiStore()
     const {
       areInstructionsVisible: isSnackbarVisible,
@@ -135,14 +99,7 @@ export default defineComponent({
     const isSm = computed(() => uiStore.isBreakpoint("sm"))
 
     return {
-      searchTerm,
-      isError,
-      errorHeader,
-      allMedia,
-      fetchState,
-      resultsLoading,
       resultCounts,
-      noResults,
 
       contentLinkPath,