From cd7c163d6ed523df4a966af8fa72cfe7fc33e8c6 Mon Sep 17 00:00:00 2001 From: DrMint Date: Fri, 6 Jan 2023 22:59:59 +0100 Subject: [PATCH] Updated search params --- src/components/Panels/SearchPopup.tsx | 129 +++++++++++++----- src/pages/archives/videos/c/[uid].tsx | 3 +- src/pages/archives/videos/index.tsx | 3 +- src/pages/archives/videos/v/[uid].tsx | 3 +- src/pages/contents/all.tsx | 15 +- src/pages/library/index.tsx | 75 ++++++---- src/pages/news/index.tsx | 15 +- .../meilisearch-graphql-typings/meiliTypes.ts | 23 +--- 8 files changed, 172 insertions(+), 94 deletions(-) diff --git a/src/components/Panels/SearchPopup.tsx b/src/components/Panels/SearchPopup.tsx index 2faa5fb..1d52ab5 100644 --- a/src/components/Panels/SearchPopup.tsx +++ b/src/components/Panels/SearchPopup.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import { MaterialSymbol } from "material-symbols"; import { Popup } from "components/Containers/Popup"; import { sendAnalytics } from "helpers/analytics"; import { atoms } from "contexts/atoms"; @@ -46,16 +47,25 @@ export const SearchPopup = (): JSX.Element => { const fetchLibraryItems = async () => { const searchResult = await meiliSearch(MeiliIndices.LIBRARY_ITEM, query, { limit: SEARCH_LIMIT, + attributesToRetrieve: [ + "title", + "subtitle", + "descriptions", + "id", + "slug", + "thumbnail", + "release_date", + "price", + "categories", + "metadata", + ], + attributesToHighlight: ["title", "subtitle", "descriptions"], attributesToCrop: ["descriptions"], }); searchResult.hits = searchResult.hits.map((item) => { - if ( - isDefined(item._formatted) && - item._matchesPosition.descriptions && - item._matchesPosition.descriptions.length > 0 - ) { + if (Object.keys(item._matchesPosition).some((match) => match.startsWith("descriptions"))) { item._formatted.descriptions = filterDefined(item._formatted.descriptions).filter( - (description) => description.includes("") + (description) => containsHighlight(JSON.stringify(description)) ); } return item; @@ -65,16 +75,15 @@ export const SearchPopup = (): JSX.Element => { const fetchContents = async () => { const searchResult = await meiliSearch(MeiliIndices.CONTENT, query, { - attributesToCrop: ["translations.description"], limit: SEARCH_LIMIT, + attributesToRetrieve: ["translations", "id", "slug", "categories", "type", "thumbnail"], + attributesToHighlight: ["translations"], + attributesToCrop: ["translations.displayable_description"], }); searchResult.hits = searchResult.hits.map((item) => { - if ( - Object.keys(item._matchesPosition).filter((match) => match.startsWith("translations")) - .length > 0 - ) { + if (Object.keys(item._matchesPosition).some((match) => match.startsWith("translations"))) { item._formatted.translations = filterDefined(item._formatted.translations).filter( - (translation) => JSON.stringify(translation).includes("") + (translation) => containsHighlight(JSON.stringify(translation)) ); } return item; @@ -94,8 +103,8 @@ export const SearchPopup = (): JSX.Element => { "duration", "description", ], + attributesToHighlight: ["title", "channel", "description"], attributesToCrop: ["description"], - sort: ["sortable_published_date:desc"], }); setVideos(searchResult); }; @@ -106,9 +115,16 @@ export const SearchPopup = (): JSX.Element => { attributesToRetrieve: ["translations", "thumbnail", "slug", "date", "categories"], attributesToHighlight: ["translations.title", "translations.excerpt", "translations.body"], attributesToCrop: ["translations.body"], - sort: ["sortable_date:desc"], filter: ["hidden = false"], }); + searchResult.hits = searchResult.hits.map((item) => { + if (Object.keys(item._matchesPosition).some((match) => match.startsWith("translations"))) { + item._formatted.translations = filterDefined(item._formatted.translations).filter( + (translation) => JSON.stringify(translation).includes("") + ); + } + return item; + }); setPosts(searchResult); }; @@ -123,6 +139,17 @@ export const SearchPopup = (): JSX.Element => { ], attributesToCrop: ["translations.displayable_description"], }); + searchResult.hits = searchResult.hits.map((item) => { + if ( + Object.keys(item._matchesPosition).filter((match) => match.startsWith("translations")) + .length > 0 + ) { + item._formatted.translations = filterDefined(item._formatted.translations).filter( + (translation) => JSON.stringify(translation).includes("") + ); + } + return item; + }); setWikiPages(searchResult); }; @@ -159,22 +186,27 @@ export const SearchPopup = (): JSX.Element => { {isDefined(libraryItems) && (
{libraryItems.hits.map((item) => ( - 0 - ? item._formatted.descriptions?.[0] - : undefined - } + translations={filterHasAttributes(item._formatted.descriptions, [ + "language.data.attributes.code", + ] as const).map((translation) => ({ + language: translation.language.data.attributes.code, + title: item.title, + subtitle: item.subtitle, + description: containsHighlight(translation.description) + ? translation.description + : undefined, + }))} + fallback={{ title: item._formatted.title, subtitle: item._formatted.subtitle }} thumbnail={item.thumbnail?.data?.attributes} thumbnailAspectRatio="21/29.7" thumbnailRounded={false} @@ -201,18 +233,25 @@ export const SearchPopup = (): JSX.Element => { {isDefined(contents) && (
{contents.hits.map((item) => ( - ({ + ...otherAttributes, + description: containsHighlight(displayable_description) + ? displayable_description + : undefined, + language: language.data.attributes.code, + }))} + fallback={{ title: prettySlug(item.slug) }} thumbnail={item.thumbnail?.data?.attributes} thumbnailAspectRatio="3/2" thumbnailForceAspectRatio @@ -238,7 +277,8 @@ export const SearchPopup = (): JSX.Element => { {isDefined(wikiPages) && (
{wikiPages.hits.map((item) => ( @@ -288,6 +328,7 @@ export const SearchPopup = (): JSX.Element => { {isDefined(posts) && (
@@ -329,6 +370,7 @@ export const SearchPopup = (): JSX.Element => { {isDefined(videos) && (
@@ -370,21 +412,34 @@ export const SearchPopup = (): JSX.Element => { interface SearchResultSectionProps { title?: string | null; + icon: MaterialSymbol; href: string; totalHits?: number; children: React.ReactNode; } -const SearchResultSection = ({ title, href, totalHits, children }: SearchResultSectionProps) => ( +const SearchResultSection = ({ + title, + icon, + href, + totalHits, + children, +}: SearchResultSectionProps) => ( <> {isDefined(totalHits) && totalHits > 0 && (
- -

{title}

- {isDefined(totalHits) && totalHits > SEARCH_LIMIT && ( -

{`(showing ${SEARCH_LIMIT} out of ${totalHits} results)`}

- )} + + +
+

{title}

+ {isDefined(totalHits) && totalHits > SEARCH_LIMIT && ( + /* TODO: Langui */ +

{`(showing ${SEARCH_LIMIT} out of ${totalHits} results)`}

+ )} +
{children} diff --git a/src/pages/archives/videos/c/[uid].tsx b/src/pages/archives/videos/c/[uid].tsx index 305bf9e..75e38b7 100644 --- a/src/pages/archives/videos/c/[uid].tsx +++ b/src/pages/archives/videos/c/[uid].tsx @@ -123,8 +123,8 @@ const Channel = ({ channel, ...otherProps }: Props): JSX.Element => { "duration", "description", ], + attributesToHighlight: ["title", "channel", "description"], attributesToCrop: ["description"], - attributesToHighlight: ["*"], sort: isDefined(currentSortingMethod) ? [currentSortingMethod.meiliAttribute] : undefined, filter: [onlyShowGone ? "gone = true" : "", `channel_uid = ${channel.uid}`], }); @@ -147,7 +147,6 @@ const Channel = ({ channel, ...otherProps }: Props): JSX.Element => { useEffect(() => { if (router.isReady) { - console.log(router.query); if (isDefined(router.query.page)) setPage(router.query.page); if (isDefined(router.query.query)) setQuery(router.query.query); if (isDefined(router.query.sort)) setSortingMethod(router.query.sort); diff --git a/src/pages/archives/videos/index.tsx b/src/pages/archives/videos/index.tsx index a85d795..1a74736 100644 --- a/src/pages/archives/videos/index.tsx +++ b/src/pages/archives/videos/index.tsx @@ -117,8 +117,8 @@ const Videos = ({ ...otherProps }: Props): JSX.Element => { "duration", "description", ], + attributesToHighlight: ["title", "channel", "description"], attributesToCrop: ["description"], - attributesToHighlight: ["*"], sort: isDefined(currentSortingMethod) ? [currentSortingMethod.meiliAttribute] : undefined, filter: onlyShowGone ? ["gone = true"] : undefined, }); @@ -141,7 +141,6 @@ const Videos = ({ ...otherProps }: Props): JSX.Element => { useEffect(() => { if (router.isReady) { - console.log(router.query); if (isDefined(router.query.page)) setPage(router.query.page); if (isDefined(router.query.query)) setQuery(router.query.query); if (isDefined(router.query.sort)) setSortingMethod(router.query.sort); diff --git a/src/pages/archives/videos/v/[uid].tsx b/src/pages/archives/videos/v/[uid].tsx index afef963..e62c775 100644 --- a/src/pages/archives/videos/v/[uid].tsx +++ b/src/pages/archives/videos/v/[uid].tsx @@ -109,7 +109,8 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {

{langui.channel}