From f2c572e576a18ece22edd6058c38563a81561fc8 Mon Sep 17 00:00:00 2001 From: DrMint Date: Thu, 2 Jun 2022 00:41:54 +0200 Subject: [PATCH] Smart language for the preview cards and preview line --- src/components/PreviewCard.tsx | 41 ++++++++++++++++++ src/components/PreviewLine.tsx | 42 +++++++++++++++++++ src/graphql/operations/getContentText.graphql | 7 ++++ src/graphql/operations/getContents.graphql | 7 ++++ src/pages/contents/[slug]/index.tsx | 40 ++++++++++-------- src/pages/contents/index.tsx | 37 +++++++++------- 6 files changed, 142 insertions(+), 32 deletions(-) diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx index 51f66db..66f17cf 100644 --- a/src/components/PreviewCard.tsx +++ b/src/components/PreviewCard.tsx @@ -10,9 +10,11 @@ import { prettyDuration, prettyPrice, prettyShortenNumber, + prettySlug, } from "helpers/formatters"; import { ImageQuality } from "helpers/img"; import { Immutable } from "helpers/types"; +import { useSmartLanguage } from "hooks/useSmartLanguage"; import Link from "next/link"; import { Chip } from "./Chip"; import { Ico, Icon } from "./Ico"; @@ -260,3 +262,42 @@ export function PreviewCard(props: Immutable): JSX.Element { ); } + +interface TranslatedProps + extends Omit { + translations: + | { + pre_title?: string | null | undefined; + title: string | null | undefined; + subtitle?: string | null | undefined; + language: string | undefined; + }[] + | undefined; + slug: string; + languages: AppStaticProps["languages"]; +} + +export function TranslatedPreviewCard( + props: Immutable +): JSX.Element { + const { + translations = [{ title: props.slug, language: "default" }], + slug, + languages, + } = props; + + const [selectedTranslation] = useSmartLanguage({ + items: translations, + languages: languages, + languageExtractor: (item) => item.language, + }); + + return ( + + ); +} diff --git a/src/components/PreviewLine.tsx b/src/components/PreviewLine.tsx index f2fa150..248136d 100644 --- a/src/components/PreviewLine.tsx +++ b/src/components/PreviewLine.tsx @@ -1,6 +1,9 @@ import { UploadImageFragment } from "graphql/generated"; +import { AppStaticProps } from "graphql/getAppStaticProps"; +import { prettySlug } from "helpers/formatters"; import { ImageQuality } from "helpers/img"; import { Immutable } from "helpers/types"; +import { useSmartLanguage } from "hooks/useSmartLanguage"; import Link from "next/link"; import { Chip } from "./Chip"; import { Img } from "./Img"; @@ -71,3 +74,42 @@ export function PreviewLine(props: Immutable): JSX.Element { ); } + +interface TranslatedProps + extends Omit { + translations: + | { + pre_title?: string | null | undefined; + title: string | null | undefined; + subtitle?: string | null | undefined; + language: string | undefined; + }[] + | undefined; + slug: string; + languages: AppStaticProps["languages"]; +} + +export function TranslatedPreviewLine( + props: Immutable +): JSX.Element { + const { + translations = [{ title: props.slug, language: "default" }], + slug, + languages, + } = props; + + const [selectedTranslation] = useSmartLanguage({ + items: translations, + languages: languages, + languageExtractor: (item) => item.language, + }); + + return ( + + ); +} diff --git a/src/graphql/operations/getContentText.graphql b/src/graphql/operations/getContentText.graphql index 2dd5f68..47effbf 100644 --- a/src/graphql/operations/getContentText.graphql +++ b/src/graphql/operations/getContentText.graphql @@ -119,6 +119,13 @@ query getContentText($slug: String, $language_code: String) { pre_title title subtitle + language { + data { + attributes { + code + } + } + } } categories { data { diff --git a/src/graphql/operations/getContents.graphql b/src/graphql/operations/getContents.graphql index 5ec77dc..21b1657 100644 --- a/src/graphql/operations/getContents.graphql +++ b/src/graphql/operations/getContents.graphql @@ -8,6 +8,13 @@ query getContents($language_code: String) { pre_title title subtitle + language { + data { + attributes { + code + } + } + } } categories { data { diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index b85f84b..e0fabca 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -9,7 +9,7 @@ import { } from "components/PanelComponents/ReturnButton"; import { ContentPanel } from "components/Panels/ContentPanel"; import { SubPanel } from "components/Panels/SubPanel"; -import { PreviewLine } from "components/PreviewLine"; +import { PreviewLine, TranslatedPreviewLine } from "components/PreviewLine"; import { RecorderChip } from "components/RecorderChip"; import { ThumbnailHeader } from "components/ThumbnailHeader"; import { ToolTip } from "components/ToolTip"; @@ -227,16 +227,18 @@ export default function Content(props: Immutable): JSX.Element {

{langui.previous_content}

- ({ + pre_title: translation?.pre_title, + title: translation?.title, + subtitle: translation?.subtitle, + language: translation?.language?.data?.attributes?.code, + }) + )} + slug={previousContent.attributes.slug} + languages={languages} thumbnail={previousContent.attributes.thumbnail?.data?.attributes} thumbnailAspectRatio="3/2" topChips={ @@ -275,14 +277,18 @@ export default function Content(props: Immutable): JSX.Element {

{langui.followup_content}

- ({ + pre_title: translation?.pre_title, + title: translation?.title, + subtitle: translation?.subtitle, + language: translation?.language?.data?.attributes?.code, + }) + )} + slug={nextContent.attributes.slug} + languages={languages} thumbnail={nextContent.attributes.thumbnail?.data?.attributes} thumbnailAspectRatio="3/2" topChips={ diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx index ab3b477..8ad371b 100644 --- a/src/pages/contents/index.tsx +++ b/src/pages/contents/index.tsx @@ -8,7 +8,7 @@ import { ContentPanelWidthSizes, } from "components/Panels/ContentPanel"; import { SubPanel } from "components/Panels/SubPanel"; -import { PreviewCard } from "components/PreviewCard"; +import { PreviewCard, TranslatedPreviewCard } from "components/PreviewCard"; import { GetContentsQuery } from "graphql/generated"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { getReadySdk } from "graphql/sdk"; @@ -35,7 +35,7 @@ const defaultFiltersState = { }; export default function Contents(props: Immutable): JSX.Element { - const { langui, contents } = props; + const { langui, contents, languages } = props; const [groupingMethod, setGroupingMethod] = useState( defaultFiltersState.groupingMethod @@ -176,14 +176,19 @@ export default function Contents(props: Immutable): JSX.Element { {items.map((item) => ( {item.attributes && ( - ({ + pre_title: translation?.pre_title, + title: translation?.title, + subtitle: translation?.subtitle, + language: + translation?.language?.data?.attributes?.code, + }) + )} + slug={item.attributes.slug} + languages={languages} thumbnail={item.attributes.thumbnail?.data?.attributes} thumbnailAspectRatio="3/2" stackNumber={ @@ -343,13 +348,15 @@ function filterContents( } if (searchName.length > 1) { if ( - prettyinlineTitle( - content.attributes?.translations?.[0]?.pre_title, - content.attributes?.translations?.[0]?.title, - content.attributes?.translations?.[0]?.subtitle + content.attributes?.translations?.find((translation) => + prettyinlineTitle( + translation?.pre_title, + translation?.title, + translation?.subtitle + ) + .toLowerCase() + .includes(searchName.toLowerCase()) ) - .toLowerCase() - .includes(searchName.toLowerCase()) ) { return true; }