From 3f2cc27a4ab2bb2522bd6c8294a508e2a08ec252 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 12 Mar 2024 15:24:16 +0300
Subject: [PATCH] Delete unused components

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/components/VLoadMoreOld.vue      | 147 ------------------
 .../VSearchResultsGrid/VAudioList.vue         | 121 --------------
 .../VSearchResultsGrid/VImageGrid.vue         |  99 ------------
 3 files changed, 367 deletions(-)
 delete mode 100644 frontend/src/components/VLoadMoreOld.vue
 delete mode 100644 frontend/src/components/VSearchResultsGrid/VAudioList.vue
 delete mode 100644 frontend/src/components/VSearchResultsGrid/VImageGrid.vue

diff --git a/frontend/src/components/VLoadMoreOld.vue b/frontend/src/components/VLoadMoreOld.vue
deleted file mode 100644
index 0db17d06ee4..00000000000
--- a/frontend/src/components/VLoadMoreOld.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <div ref="loadMoreSectionRef" class="w-full">
-    <VButton
-      v-show="canLoadMore"
-      class="label-bold lg:description-bold h-16 w-full lg:h-18"
-      variant="filled-gray"
-      size="disabled"
-      :disabled="fetchState.isFetching"
-      data-testid="load-more"
-      @click="onLoadMore"
-    >
-      {{ buttonLabel }}
-    </VButton>
-  </div>
-</template>
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from "vue"
-import { storeToRefs } from "pinia"
-import { useElementVisibility } from "@vueuse/core"
-
-import { useRoute } from "@nuxtjs/composition-api"
-
-import { useAnalytics } from "~/composables/use-analytics"
-import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
-import { useI18n } from "~/composables/use-i18n"
-
-import VButton from "~/components/VButton.vue"
-
-export default defineComponent({
-  name: "VLoadMoreOld",
-  components: {
-    VButton,
-  },
-  setup() {
-    const loadMoreSectionRef = ref(null)
-    const route = useRoute()
-    const i18n = useI18n()
-    const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-    const { sendCustomEvent } = useAnalytics()
-
-    // Use the `_searchType` from mediaStore because it falls back to ALL_MEDIA
-    // for unsupported search types.
-    const { fetchState, resultCount, currentPage, _searchType } =
-      storeToRefs(mediaStore)
-    const { searchTerm } = storeToRefs(searchStore)
-
-    const searchStarted = computed(() => {
-      return searchStore.strategy === "default"
-        ? searchTerm.value !== ""
-        : searchStore.collectionParams !== null
-    })
-
-    /**
-     * Whether we should show the "Load more" button.
-     * If the user has entered a search term, there is at least 1 page of results,
-     * there has been no fetching error, and there are more results to fetch,
-     * we show the button.
-     */
-    const canLoadMore = computed(() => {
-      return Boolean(
-        searchStarted.value &&
-          !fetchState.value.fetchingError &&
-          !fetchState.value.isFinished &&
-          resultCount.value > 0
-      )
-    })
-
-    const reachResultEndEventSent = ref(false)
-    /**
-     * On button click, fetch media, persisting the existing results.
-     * The button is disabled when we are fetching, but we still check
-     * whether we are currently fetching to be sure we don't fetch multiple times.
-     *
-     */
-    const onLoadMore = async () => {
-      if (fetchState.value.isFetching) {
-        return
-      }
-
-      reachResultEndEventSent.value = false
-
-      sendCustomEvent("LOAD_MORE_RESULTS", {
-        query: searchStore.searchTerm,
-        searchType: searchStore.searchType,
-        resultPage: currentPage.value || 1,
-      })
-
-      await mediaStore.fetchMedia({
-        shouldPersistMedia: true,
-      })
-    }
-
-    const sendReachResultEnd = () => {
-      // This function can be called before the media is fetched and
-      // currentPage is updated from 0, so we use the value or 1.
-      // The currentPage can never be 0 here because then the loadMore
-      // button would not be visible.
-      sendCustomEvent("REACH_RESULT_END", {
-        searchType: _searchType.value,
-        query: searchTerm.value,
-        resultPage: currentPage.value || 1,
-      })
-    }
-
-    const buttonLabel = computed(() =>
-      fetchState.value.isFetching
-        ? i18n.t("browsePage.loading")
-        : i18n.t("browsePage.load")
-    )
-    const mainPageElement = ref<HTMLElement | null>(null)
-    onMounted(() => {
-      mainPageElement.value = document.getElementById("main-page")
-    })
-    const isLoadMoreButtonVisible = useElementVisibility(loadMoreSectionRef, {
-      scrollTarget: mainPageElement,
-    })
-
-    // Reset the reachResultEndEvent whenever the route changes,
-    // to make sure the result end is tracked properly whenever
-    // the search query or content type changes
-    watch(route, () => {
-      reachResultEndEventSent.value = false
-    })
-
-    watch(isLoadMoreButtonVisible, (isVisible) => {
-      if (isVisible) {
-        if (reachResultEndEventSent.value) {
-          return
-        }
-        sendReachResultEnd()
-        reachResultEndEventSent.value = true
-      }
-    })
-
-    return {
-      buttonLabel,
-      fetchState,
-      onLoadMore,
-      canLoadMore,
-
-      loadMoreSectionRef,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioList.vue b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
deleted file mode 100644
index e1551bd596a..00000000000
--- a/frontend/src/components/VSearchResultsGrid/VAudioList.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <section>
-    <VGridSkeleton
-      v-if="results && results.length === 0 && !fetchState.isFinished"
-      is-for-tab="audio"
-    />
-    <VSnackbar size="large" :is-visible="isSnackbarVisible">
-      <i18n path="audioResults.snackbar.text" tag="p">
-        <template
-          v-for="keyboardKey in ['spacebar', 'left', 'right']"
-          #[keyboardKey]
-        >
-          <kbd :key="keyboardKey" class="font-sans">{{
-            $t(`audioResults.snackbar.${keyboardKey}`)
-          }}</kbd>
-        </template>
-      </i18n>
-    </VSnackbar>
-    <!-- Negative margin compensates for the `p-4` padding in row layout. -->
-    <ol
-      :aria-label="collectionLabel"
-      class="-mx-2 flex flex-col md:-mx-4"
-      :class="kind === 'related' ? 'gap-4' : 'gap-2 md:gap-1'"
-    >
-      <VAudioResult
-        v-for="audio in results"
-        :key="audio.id"
-        :search-term="searchTerm"
-        :audio="audio"
-        layout="row"
-        :size="audioTrackSize"
-        :kind="kind"
-      />
-    </ol>
-    <footer v-if="kind !== 'related'" class="mt-4">
-      <VLoadMoreOld />
-    </footer>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
-
-import type { AudioDetail } from "~/types/media"
-import type { FetchState } from "~/types/fetch-state"
-import type { ResultKind } from "~/types/result"
-import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
-
-import { useSearchStore } from "~/stores/search"
-
-import { useUiStore } from "~/stores/ui"
-
-import VLoadMoreOld from "~/components/VLoadMoreOld.vue"
-import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
-import VSnackbar from "~/components/VSnackbar.vue"
-import VAudioResult from "~/components/VSearchResultsGrid/VAudioResult.vue"
-
-/**
- * This component shows a loading skeleton if the results are not yet loaded,
- * and then shows the list of audio, with the Load more button if needed.
- */
-export default defineComponent({
-  name: "VAudioList",
-  components: {
-    VAudioResult,
-    VSnackbar,
-    VGridSkeleton,
-    VLoadMoreOld,
-  },
-  props: {
-    results: {
-      type: Array as PropType<AudioDetail[]>,
-      default: () => [],
-    },
-    /**
-     * If used for Related audio, do not show the Load more button.
-     */
-    kind: {
-      type: String as PropType<ResultKind>,
-      required: true,
-    },
-    fetchState: {
-      type: Object as PropType<FetchState>,
-      required: true,
-    },
-    /**
-     * The label used for the list of audio for accessibility.
-     */
-    collectionLabel: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { isVisible: isSnackbarVisible } = useAudioSnackbar()
-
-    const uiStore = useUiStore()
-
-    const audioTrackSize = computed(() => {
-      if (props.kind === "related") {
-        return uiStore.isBreakpoint("sm") ? "m" : "s"
-      } else {
-        return !uiStore.isBreakpoint("sm")
-          ? "s"
-          : uiStore.isBreakpoint("xl")
-            ? "l"
-            : "m"
-      }
-    })
-
-    const searchStore = useSearchStore()
-    const searchTerm = computed(() => searchStore.searchTerm)
-
-    return {
-      audioTrackSize,
-      searchTerm,
-      isSnackbarVisible,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VImageGrid.vue b/frontend/src/components/VSearchResultsGrid/VImageGrid.vue
deleted file mode 100644
index 015f029c0f8..00000000000
--- a/frontend/src/components/VSearchResultsGrid/VImageGrid.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <section>
-    <VGridSkeleton
-      v-if="results && !results.length && !fetchState.isFinished"
-      is-for-tab="image"
-    />
-    <ol class="image-grid flex flex-wrap gap-4" :aria-label="imageGridLabel">
-      <VImageCell
-        v-for="image in results"
-        :key="image.id"
-        :image="image"
-        :search-term="searchTerm"
-        aspect-ratio="intrinsic"
-        :kind="kind"
-        :related-to="relatedTo"
-      />
-    </ol>
-    <footer v-if="kind !== 'related'" class="pt-4">
-      <VLoadMoreOld />
-    </footer>
-  </section>
-</template>
-
-<script lang="ts">
-/**
- * This component receives an array of images as a prop, and
- * is responsible for displaying them as a grid.
- * It can also fetch more images when 'Load More' is clicked.
- * Used to display both image search results, and related images.
- */
-import { computed, defineComponent, PropType } from "vue"
-
-import { useSearchStore } from "~/stores/search"
-import { useRelatedMediaStore } from "~/stores/media/related-media"
-
-import type { FetchState } from "~/types/fetch-state"
-import type { ImageDetail } from "~/types/media"
-import type { ResultKind } from "~/types/result"
-
-import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
-import VLoadMoreOld from "~/components/VLoadMoreOld.vue"
-import VImageCell from "~/components/VImageCell/VImageCell.vue"
-
-export default defineComponent({
-  name: "ImageGrid",
-  components: { VGridSkeleton, VLoadMoreOld, VImageCell },
-  props: {
-    results: {
-      type: Array as PropType<ImageDetail[]>,
-      default: () => [],
-    },
-    /**
-     * `VImageGrid` is used for the image search results, related images,
-     * and the image collection page.
-     * The load more button is not shown for related images.
-     */
-    kind: {
-      type: String as PropType<ResultKind>,
-      default: "search",
-    },
-    fetchState: {
-      type: Object as PropType<FetchState>,
-      required: true,
-    },
-    imageGridLabel: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const searchStore = useSearchStore()
-
-    const searchTerm = computed(() => searchStore.searchTerm)
-
-    const relatedTo = computed(() => {
-      return props.kind === "related"
-        ? useRelatedMediaStore().mainMediaId
-        : null
-    })
-
-    return { searchTerm, relatedTo }
-  },
-})
-</script>
-
-<style scoped>
-@screen md {
-  .image-grid:after {
-    /**
-   * This keeps the last item in the results from expanding to fill
-   * all available space, which can result in a final row with a
-   * single, 100% wide image.
-   */
-
-    content: "";
-    flex-grow: 999999999;
-  }
-}
-</style>