Add additional search view pages to the Nuxt app (#3140)

* Add and update unit tests * Add collections to the search&media stores & service Signed-off-by: Olga Bulat <obulat@gmail.com> * Add collection page Signed-off-by: Olga Bulat <obulat@gmail.com> * Add POC media fetching and collection header Signed-off-by: Olga Bulat <obulat@gmail.com> * Make page matching more strict and set up page Signed-off-by: Olga Bulat <obulat@gmail.com> * Add a test to validate-collection-params Signed-off-by: Olga Bulat <obulat@gmail.com> * Do not show "0 results found" before fetch finished Signed-off-by: Olga Bulat <obulat@gmail.com> * Use getCollectionPath from search store Signed-off-by: Olga Bulat <obulat@gmail.com> * Simplify pages Signed-off-by: Olga Bulat <obulat@gmail.com> * Fix load more Signed-off-by: Olga Bulat <obulat@gmail.com> * Reset search state Signed-off-by: Olga Bulat <obulat@gmail.com> * Set back to results path in single-result middleware Signed-off-by: Olga Bulat <obulat@gmail.com> * Fix paddings Signed-off-by: Olga Bulat <obulat@gmail.com> * Use Results type Signed-off-by: Olga Bulat <obulat@gmail.com> * Remove page query param Signed-off-by: Olga Bulat <obulat@gmail.com> * Refactor creatorHref Signed-off-by: Olga Bulat <obulat@gmail.com> * Add requested changes Signed-off-by: Olga Bulat <obulat@gmail.com> * Fix server rendering Signed-off-by: Olga Bulat <obulat@gmail.com> * Add e2e tests Signed-off-by: Olga Bulat <obulat@gmail.com> * Update bottom margin of the collection header Signed-off-by: Olga Bulat <obulat@gmail.com> * Fix e2e tests Signed-off-by: Olga Bulat <obulat@gmail.com> --------- Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · Dec 5, 2023 · 6102985 · 6102985
1 parent b5270e2
commit 6102985
Show file tree

Hide file tree

Showing 29 changed files with 3,533 additions and 56 deletions.
diff --git a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
@@ -75,6 +75,7 @@ export default defineComponent({
  },
  },
  setup(props) {
+ const mediaStore = useMediaStore()
  const providerStore = useProviderStore()
  const uiStore = useUiStore()
 
@@ -114,7 +115,10 @@ export default defineComponent({
  const { getI18nCollectionResultCountLabel } = useI18nResultsCount()
 
  const resultsLabel = computed(() => {
- const resultsCount = useMediaStore().results[props.mediaType].count
+ if (mediaStore.resultCount === 0 && mediaStore.fetchState.isFetching) {
+ return ""
+ }
+ const resultsCount = mediaStore.results[props.mediaType].count
  if (props.collectionParams.collection === "creator") {
  return getI18nCollectionResultCountLabel(
  resultsCount,

diff --git a/frontend/src/components/VCollectionPage.vue b/frontend/src/components/VCollectionPage.vue
@@ -0,0 +1,106 @@
+<template>
+ <div class="p-6 pt-0 lg:p-10 lg:pt-2">
+ <VCollectionHeader
+ v-if="collectionParams"
+ :collection-params="collectionParams"
+ :creator-url="creatorUrl"
+ :media-type="mediaType"
+ :class="mediaType === 'image' ? 'mb-4' : 'mb-2'"
+ />
+ <VAudioCollection
+ v-if="results.type === 'audio'"
+ :collection-label="collectionLabel"
+ :fetch-state="fetchState"
+ kind="collection"
+ :results="results.items"
+ />
+ <VImageGrid
+ v-if="results.type === 'image'"
+ :image-grid-label="collectionLabel"
+ :fetch-state="fetchState"
+ kind="collection"
+ :results="results.items"
+ />
+ </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue"
+
+import { useMediaStore } from "~/stores/media"
+import { useSearchStore } from "~/stores/search"
+import type { SupportedMediaType } from "~/constants/media"
+
+import { Results } from "~/types/result"
+
+import { useI18n } from "~/composables/use-i18n"
+
+import VCollectionHeader from "~/components/VCollectionHeader/VCollectionHeader.vue"
+import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.vue"
+import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
+
+export default defineComponent({
+ name: "VCollectionPage",
+ components: { VAudioCollection, VImageGrid, VCollectionHeader },
+ props: {
+ mediaType: {
+ type: String as PropType<SupportedMediaType>,
+ required: true,
+ },
+ },
+ setup(props) {
+ const i18n = useI18n()
+ const mediaStore = useMediaStore()
+
+ const fetchState = computed(() => mediaStore.fetchState)
+ const results = computed<Results>(() => {
+ return {
+ type: props.mediaType,
+ items: mediaStore.resultItems[props.mediaType],
+ } as Results
+ })
+
+ const creatorUrl = computed(() => {
+ const media = results.value.items
+ return media.length > 0 ? media[0].creator_url : undefined
+ })
+
+ const searchStore = useSearchStore()
+ const collectionParams = computed(() => searchStore.collectionParams)
+
+ const collectionLabel = computed(() => {
+ const collection = collectionParams.value?.collection
+ switch (collection) {
+ case "tag":
+ return i18n
+ .t(`collection.ariaLabel.tag.${props.mediaType}`, {
+ tag: collectionParams.value?.tag,
+ })
+ .toString()
+ case "source":
+ return i18n
+ .t(`collection.ariaLabel.source.${props.mediaType}`, {
+ source: collectionParams.value?.source,
+ })
+ .toString()
+ case "creator":
+ return i18n
+ .t(`collection.ariaLabel.creator.${props.mediaType}`, {
+ creator: collectionParams.value?.creator,
+ source: collectionParams.value?.source,
+ })
+ .toString()
+ default:
+ return ""
+ }
+ })
+
+ return {
+ fetchState,
+ results,
+ creatorUrl,
+ collectionParams,
+ collectionLabel,
+ }
+ },
+})
+</script>
diff --git a/frontend/src/components/VLoadMore.vue b/frontend/src/components/VLoadMore.vue
@@ -46,19 +46,26 @@ export default defineComponent({
  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(
- () =>
- searchTerm.value !== "" &&
- !fetchState.value.fetchingError &&
- !fetchState.value.isFinished &&
- resultCount.value > 0
- )
+ const canLoadMore = computed(() => {
+ return Boolean(
+ searchStarted.value &&
+ !fetchState.value.fetchingError &&
+ !fetchState.value.isFinished &&
+ resultCount.value > 0
+ )
+ })
 
  const reachResultEndEventSent = ref(false)
  /**

diff --git a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
@@ -59,6 +59,7 @@ import {
 import { useElementSize, useScroll, watchDebounced } from "@vueuse/core"
 
 import { useI18n } from "~/composables/use-i18n"
+import { useSearchStore } from "~/stores/search"
 import type { SupportedMediaType } from "~/constants/media"
 
 import VSourceCreatorButton from "~/components/VMediaInfo/VByLine/VSourceCreatorButton.vue"
@@ -95,7 +96,9 @@ export default defineComponent({
  const buttonsRef = ref<HTMLElement | null>(null)
 
  const showCreator = computed(() => {
- return props.creator && props.creator.toLowerCase() !== "unidentified"
+ return Boolean(
+ props.creator && props.creator.toLowerCase() !== "unidentified"
+ )
  })
 
  const i18n = useI18n()
@@ -213,33 +216,27 @@ export default defineComponent({
  { debounce: 100 }
  )
 
- // TODO: implement this function in the search store.
- const getCollectionPath = ({
- type,
- source,
- creator,
- }: {
- type: SupportedMediaType
- source: string
- creator?: string
- }) => {
- let path = `/${type}/source/${source}/`
- if (creator) path += `creator/${encodeURIComponent(creator)}/`
- return path
- }
+ const searchStore = useSearchStore()
+
  const creatorHref = computed(() => {
- return showCreator.value
- ? getCollectionPath({
- type: props.mediaType,
- source: props.sourceSlug,
- creator: props.creator,
- })
- : undefined
+ if (!props.creator) return undefined
+ return searchStore.getCollectionPath({
+ type: props.mediaType,
+ collectionParams: {
+ collection: "creator",
+ source: props.sourceSlug,
+ creator: props.creator,
+ },
+ })
  })
+
  const sourceHref = computed(() => {
- return getCollectionPath({
+ return searchStore.getCollectionPath({
  type: props.mediaType,
- source: props.sourceSlug,
+ collectionParams: {
+ collection: "source",
+ source: props.sourceSlug,
+ },
  })
  })
 

diff --git a/frontend/src/data/api-service.ts b/frontend/src/data/api-service.ts
@@ -63,6 +63,7 @@ export interface ApiService {
  client: AxiosInstance
  query<T = unknown>(
  resource: string,
+ slug: string,
  params: Record<string, string>
  ): Promise<AxiosResponse<T>>
  get<T = unknown>(
@@ -138,19 +139,22 @@ export const createApiService = ({
 
  /**
  * @param resource - The endpoint of the resource
+ * @param slug - the optional additional endpoint, used for collections.
  * @param params - Url parameter object
  * @returns response The API response object
  */
  query<T = unknown>(
  resource: string,
- params: Record<string, string>
+ slug: string = "",
+ params: Record<string, string> = {}
  ): Promise<AxiosResponse<T>> {
- return client.get(`${getResourceSlug(resource)}`, { params })
+ return client.get(`${getResourceSlug(resource)}${slug}`, { params })
  },
 
  /**
  * @param resource - The endpoint of the resource
  * @param slug - The sub-endpoint of the resource
+ * @param params - Url query parameter object
  * @returns Response The API response object
  */
  get<T = unknown>(

diff --git a/frontend/src/data/media-service.ts b/frontend/src/data/media-service.ts
@@ -1,5 +1,8 @@
 import { decodeMediaData } from "~/utils/decode-media-data"
-import type { PaginatedSearchQuery } from "~/types/search"
+import type {
+ PaginatedCollectionQuery,
+ PaginatedSearchQuery,
+} from "~/types/search"
 import type { ApiService } from "~/data/api-service"
 import type { DetailFromMediaType, Media } from "~/types/media"
 import { AUDIO, type SupportedMediaType } from "~/constants/media"
@@ -45,9 +48,11 @@ class MediaService<T extends Media> {
  /**
  * Search for media items by keyword.
  * @param params - API search query parameters
+ * @param slug - optional slug to get a collection
  */
  async search(
- params: PaginatedSearchQuery
+ params: PaginatedSearchQuery | PaginatedCollectionQuery,
+ slug: string = ""
  ): Promise<MediaResult<Record<string, Media>>> {
  // Add the `peaks` param to all audio searches automatically
  if (this.mediaType === AUDIO) {
@@ -56,6 +61,7 @@ class MediaService<T extends Media> {
 
  const res = await this.apiService.query<MediaResult<T[]>>(
  this.mediaType,
+ slug,
  params as unknown as Record<string, string>
  )
  return this.transformResults(res.data)

diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
@@ -774,6 +774,20 @@
  source: "Open source site",
  creator: "Open creator page",
  },
+ ariaLabel: {
+ creator: {
+ audio: "Audio files by {creator} in {source}",
+ image: "Images by {creator} in {source}",
+ },
+ source: {
+ audio: "Audio files from {source}",
+ image: "Images from {source}",
+ },
+ tag: {
+ audio: "Audio files with the tag {tag}",
+ image: "Images with the tag {tag}",
+ },
+ },
  resultCountLabel: {
  creator: {
  audio: {

diff --git a/frontend/src/middleware/collection.ts b/frontend/src/middleware/collection.ts
@@ -0,0 +1,15 @@
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+
+import type { Middleware } from "@nuxt/types"
+
+export const collectionMiddleware: Middleware = async ({
+ $pinia,
+ error: nuxtError,
+}) => {
+ if (!useFeatureFlagStore($pinia).isOn("additional_search_views")) {
+ nuxtError({
+ statusCode: 404,
+ message: "Additional search views are not enabled",
+ })
+ }
+}
diff --git a/frontend/src/middleware/single-result.ts b/frontend/src/middleware/single-result.ts
@@ -7,6 +7,10 @@ import { AUDIO, IMAGE } from "~/constants/media"
 
 import type { Middleware } from "@nuxt/types"
 
+const isSearchPath = (path: string) => path.includes("/search/")
+const isSearchOrCollectionPath = (path: string) =>
+ isSearchPath(path) || path.includes("/source/") || path.includes("/tag/")
+
 export const singleResultMiddleware: Middleware = async ({
  route,
  from,
@@ -31,16 +35,18 @@ export const singleResultMiddleware: Middleware = async ({
  // Client-side rendering
  singleResultStore.setMediaById(mediaType, route.params.id)
 
- if (from && from.path.includes("/search/")) {
+ if (from && isSearchOrCollectionPath(from.path)) {
  const searchStore = useSearchStore($pinia)
  searchStore.setBackToSearchPath(from.fullPath)
 
- const searchTerm = Array.isArray(route.query.q)
- ? route.query.q[0]
- : route.query.q
+ if (isSearchPath(from.path)) {
+ const searchTerm = Array.isArray(route.query.q)
+ ? route.query.q[0]
+ : route.query.q
 
- if (searchTerm) {
- searchStore.setSearchTerm(searchTerm)
+ if (searchTerm) {
+ searchStore.setSearchTerm(searchTerm)
+ }
  }
  }
  }