import { Fragment, useCallback, useMemo } from "react"; import { AppLayout } from "./AppLayout"; import { Chip } from "./Chip"; import { HorizontalLine } from "./HorizontalLine"; import { Markdawn, TableOfContents } from "./Markdown/Markdawn"; import { ReturnButton, ReturnButtonType } from "./PanelComponents/ReturnButton"; import { ContentPanel } from "./Panels/ContentPanel"; import { SubPanel } from "./Panels/SubPanel"; import { RecorderChip } from "./RecorderChip"; import { ThumbnailHeader } from "./ThumbnailHeader"; import { ToolTip } from "./ToolTip"; import { useSmartLanguage } from "hooks/useSmartLanguage"; import { PostWithTranslations } from "helpers/types"; import { filterHasAttributes, getStatusDescription } from "helpers/others"; import { prettySlug } from "helpers/formatters"; import { getDescription } from "helpers/description"; import { AppStaticProps } from "graphql/getAppStaticProps"; /* * ╭─────────────╮ * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── */ interface Props { post: PostWithTranslations; langui: AppStaticProps["langui"]; languages: AppStaticProps["languages"]; currencies: AppStaticProps["currencies"]; returnHref?: string; returnTitle?: string | null | undefined; displayCredits?: boolean; displayToc?: boolean; displayThumbnailHeader?: boolean; displayTitle?: boolean; displayLanguageSwitcher?: boolean; prependBody?: JSX.Element; appendBody?: JSX.Element; } // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ export const PostPage = ({ post, langui, languages, returnHref, returnTitle, displayCredits, displayToc, displayThumbnailHeader, displayLanguageSwitcher, appendBody, prependBody, displayTitle = true, currencies, }: Props): JSX.Element => { const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({ items: post.translations, languages: languages, languageExtractor: useCallback( (item: NonNullable) => item.language?.data?.attributes?.code, [] ), }); const { thumbnail, body, title, excerpt } = useMemo( () => ({ thumbnail: selectedTranslation?.thumbnail?.data?.attributes ?? post.thumbnail?.data?.attributes, body: selectedTranslation?.body ?? "", title: selectedTranslation?.title ?? prettySlug(post.slug), excerpt: selectedTranslation?.excerpt ?? "", }), [post.slug, post.thumbnail, selectedTranslation] ); const subPanel = useMemo( () => returnHref || returnTitle || displayCredits || displayToc ? ( {returnHref && returnTitle && ( )} {displayCredits && ( <> {selectedTranslation && (

{langui.status}:

)} {post.authors && post.authors.data.length > 0 && (

{"Authors"}:

{filterHasAttributes(post.authors.data, [ "id", "attributes", ] as const).map((author) => ( ))}
)} )} {displayToc && ( )}
) : undefined, [ body, displayCredits, displayToc, langui, post.authors, returnHref, returnTitle, selectedTranslation, title, ] ); const contentPanel = useMemo( () => ( {returnHref && returnTitle && ( )} {displayThumbnailHeader ? ( <> 1 ? ( ) : undefined } /> ) : ( <> {displayLanguageSwitcher && (
)} {displayTitle && (

{title}

)} )} {prependBody} {appendBody}
), [ LanguageSwitcher, appendBody, body, displayLanguageSwitcher, displayThumbnailHeader, displayTitle, excerpt, languageSwitcherProps, langui, post.categories, prependBody, returnHref, returnTitle, thumbnail, title, ] ); return ( ); };