From 0591fa22d4124c360a174c65c85c92cb746b2773 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 8 May 2022 21:37:41 +0200 Subject: [PATCH] Mass use of Immutable --- src/components/AppLayout.tsx | 32 ++++++---- src/components/Chip.tsx | 4 +- src/components/HorizontalLine.tsx | 4 +- src/components/Img.tsx | 5 +- src/components/Inputs/Button.tsx | 11 +++- src/components/Inputs/LanguageSwitcher.tsx | 5 +- src/components/Inputs/OrderableList.tsx | 3 +- src/components/Inputs/PageSelector.tsx | 3 +- src/components/Inputs/Select.tsx | 3 +- src/components/Inputs/Switch.tsx | 3 +- src/components/InsetBox.tsx | 4 +- src/components/Library/ContentLine.tsx | 5 +- src/components/Library/ScanSet.tsx | 10 ++-- src/components/Library/ScanSetCover.tsx | 5 +- src/components/LightBox.tsx | 3 +- src/components/Markdown/Markdawn.tsx | 3 +- src/components/Markdown/TOC.tsx | 3 +- src/components/PanelComponents/NavOption.tsx | 3 +- .../PanelComponents/PanelHeader.tsx | 3 +- .../PanelComponents/ReturnButton.tsx | 3 +- src/components/Panels/ContentPanel.tsx | 4 +- src/components/Panels/MainPanel.tsx | 3 +- src/components/Panels/SubPanel.tsx | 4 +- src/components/Popup.tsx | 3 +- src/components/PostPage.tsx | 8 +-- src/components/PreviewCard.tsx | 5 +- src/components/PreviewLine.tsx | 3 +- src/components/RecorderChip.tsx | 3 +- src/components/SVG.tsx | 3 +- src/components/ThumbnailHeader.tsx | 5 +- src/components/ToolTip.tsx | 12 ++-- .../Chronology/ChronologyItemComponent.tsx | 5 +- .../Chronology/ChronologyYearComponent.tsx | 5 +- src/contexts/AppLayoutContext.tsx | 3 +- src/graphql/getAppStaticProps.ts | 15 +++-- src/graphql/getPostStaticProps.ts | 32 ++++++++++ src/helpers/formatters.ts | 10 ++-- src/helpers/img.ts | 10 +++- src/helpers/numbers.ts | 10 ++-- src/helpers/others.ts | 60 ++++++++++--------- src/helpers/types.ts | 15 ++++- src/hooks/useSmartLanguage.tsx | 15 +++-- src/pages/404.tsx | 5 +- src/pages/500.tsx | 5 +- src/pages/about-us/accords-handbook.tsx | 36 +++-------- src/pages/about-us/contact.tsx | 38 ++++-------- src/pages/about-us/index.tsx | 5 +- src/pages/about-us/legality.tsx | 33 ++-------- src/pages/about-us/sharing-policy.tsx | 32 ++-------- src/pages/archives/index.tsx | 5 +- src/pages/chronicles/index.tsx | 3 +- src/pages/contents/[slug]/index.tsx | 5 +- src/pages/contents/index.tsx | 15 ++--- src/pages/dev/checkup/contents.tsx | 9 +-- src/pages/dev/checkup/libraryitems.tsx | 13 ++-- src/pages/dev/editor.tsx | 5 +- src/pages/gallery/index.tsx | 5 +- src/pages/index.tsx | 34 +++-------- src/pages/library/[slug]/index.tsx | 7 ++- src/pages/library/[slug]/scans.tsx | 3 +- src/pages/library/index.tsx | 33 +++++----- src/pages/merch/index.tsx | 5 +- src/pages/news/[slug].tsx | 34 +++-------- src/pages/news/index.tsx | 30 ++++++---- src/pages/wiki/index.tsx | 5 +- 65 files changed, 375 insertions(+), 338 deletions(-) create mode 100644 src/graphql/getPostStaticProps.ts diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index d9a185f..44ac035 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -1,9 +1,10 @@ import Button from "components/Inputs/Button"; import { useAppLayout } from "contexts/AppLayoutContext"; import { UploadImageFragment } from "graphql/generated"; -import { prettyLanguage, prettySlug } from "helpers/formatters"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { prettyLanguage, prettySlug } from "helpers/formatters"; import { getOgImage, ImageQuality, OgImage } from "helpers/img"; +import { Immutable } from "helpers/types"; import { useMediaMobile } from "hooks/useMediaQuery"; import Head from "next/head"; import { useRouter } from "next/router"; @@ -24,8 +25,19 @@ interface Props extends AppStaticProps { description?: string; } -export default function AppLayout(props: Props): JSX.Element { - const { langui, currencies, languages, subPanel, contentPanel } = props; +export default function AppLayout(props: Immutable): JSX.Element { + const { + langui, + currencies, + languages, + subPanel, + contentPanel, + thumbnail, + title, + navTitle, + description, + subPanelIcon, + } = props; const router = useRouter(); const isMobile = useMediaMobile(); const appLayout = useAppLayout(); @@ -58,8 +70,8 @@ export default function AppLayout(props: Props): JSX.Element { const turnSubIntoContent = subPanel && !contentPanel; const titlePrefix = "Accord’s Library"; - const metaImage: OgImage = props.thumbnail - ? getOgImage(ImageQuality.Og, props.thumbnail) + const metaImage: OgImage = thumbnail + ? getOgImage(ImageQuality.Og, thumbnail) : { image: "/default_og.jpg", width: 1200, @@ -67,9 +79,9 @@ export default function AppLayout(props: Props): JSX.Element { alt: "Accord's Library Logo", }; const ogTitle = - props.title ?? props.navTitle ?? prettySlug(router.asPath.split("/").pop()); + title ?? navTitle ?? prettySlug(router.asPath.split("/").pop()); - const metaDescription = props.description ?? langui.default_description ?? ""; + const metaDescription = description ?? langui.default_description ?? ""; useEffect(() => { document.getElementsByTagName("html")[0].style.fontSize = `${ @@ -114,7 +126,7 @@ export default function AppLayout(props: Props): JSX.Element { }, [currencySelect]); let gridCol = ""; - if (props.subPanel) { + if (subPanel) { if (appLayout.mainPanelReduced) { gridCol = "grid-cols-[6rem_20rem_1fr]"; } else { @@ -260,8 +272,8 @@ export default function AppLayout(props: Props): JSX.Element { {subPanel && !turnSubIntoContent ? appLayout.subPanelOpen ? "close" - : props.subPanelIcon - ? props.subPanelIcon + : subPanelIcon + ? subPanelIcon : "tune" : ""} diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index b410c5e..ebba2e8 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -1,9 +1,11 @@ +import { Immutable } from "helpers/types"; + interface Props { className?: string; children: React.ReactNode; } -export default function Chip(props: Props): JSX.Element { +export default function Chip(props: Immutable): JSX.Element { return (
): JSX.Element { return (
): JSX.Element { if (typeof props.image === "string") { return ( ): JSX.Element { const { draggable, id, @@ -39,11 +40,15 @@ export default function Button(props: Props): JSX.Element { transition-all select-none hover:[--opacityBadge:0] --opacityBadge:100 ${className} ${ active ? "text-light bg-black drop-shadow-black-lg !border-black cursor-not-allowed" - : "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:text-light active:drop-shadow-black-lg active:border-black" + : `cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg + active:bg-black active:text-light active:drop-shadow-black-lg active:border-black` }`} > {badgeNumber && ( -
+
{badgeNumber}
)} diff --git a/src/components/Inputs/LanguageSwitcher.tsx b/src/components/Inputs/LanguageSwitcher.tsx index 25c9fb4..4127b09 100644 --- a/src/components/Inputs/LanguageSwitcher.tsx +++ b/src/components/Inputs/LanguageSwitcher.tsx @@ -1,5 +1,6 @@ -import { prettyLanguage } from "helpers/formatters"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { prettyLanguage } from "helpers/formatters"; +import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction } from "react"; import ToolTip from "../ToolTip"; import Button from "./Button"; @@ -12,7 +13,7 @@ interface Props { setLocalesIndex: Dispatch>; } -export default function LanguageSwitcher(props: Props): JSX.Element { +export default function LanguageSwitcher(props: Immutable): JSX.Element { const { locales, className, localesIndex, setLocalesIndex } = props; return ( diff --git a/src/components/Inputs/OrderableList.tsx b/src/components/Inputs/OrderableList.tsx index 6f54c9d..b02dbe9 100644 --- a/src/components/Inputs/OrderableList.tsx +++ b/src/components/Inputs/OrderableList.tsx @@ -1,4 +1,5 @@ import { arrayMove } from "helpers/others"; +import { Immutable } from "helpers/types"; import { useEffect, useState } from "react"; interface Props { @@ -7,7 +8,7 @@ interface Props { onChange?: (items: Map) => void; } -export default function OrderableList(props: Props): JSX.Element { +export default function OrderableList(props: Immutable): JSX.Element { const [items, setItems] = useState>(props.items); useEffect(() => { diff --git a/src/components/Inputs/PageSelector.tsx b/src/components/Inputs/PageSelector.tsx index da75714..4b3c914 100644 --- a/src/components/Inputs/PageSelector.tsx +++ b/src/components/Inputs/PageSelector.tsx @@ -1,3 +1,4 @@ +import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction } from "react"; import Button from "./Button"; @@ -8,7 +9,7 @@ interface Props { setPage: Dispatch>; } -export default function PageSelector(props: Props): JSX.Element { +export default function PageSelector(props: Immutable): JSX.Element { const { page, setPage, maxPage } = props; return ( diff --git a/src/components/Inputs/Select.tsx b/src/components/Inputs/Select.tsx index 63728c4..a4f5290 100644 --- a/src/components/Inputs/Select.tsx +++ b/src/components/Inputs/Select.tsx @@ -1,3 +1,4 @@ +import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction, useState } from "react"; interface Props { @@ -9,7 +10,7 @@ interface Props { className?: string; } -export default function Select(props: Props): JSX.Element { +export default function Select(props: Immutable): JSX.Element { const [opened, setOpened] = useState(false); return ( diff --git a/src/components/Inputs/Switch.tsx b/src/components/Inputs/Switch.tsx index 9640fa3..a6a19a1 100644 --- a/src/components/Inputs/Switch.tsx +++ b/src/components/Inputs/Switch.tsx @@ -1,3 +1,4 @@ +import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction } from "react"; interface Props { @@ -6,7 +7,7 @@ interface Props { className?: string; } -export default function Switch(props: Props): JSX.Element { +export default function Switch(props: Immutable): JSX.Element { return (
): JSX.Element { return (
): JSX.Element { const { content, langui, parentSlug } = props; const [opened, setOpened] = useState(false); diff --git a/src/components/Library/ScanSet.tsx b/src/components/Library/ScanSet.tsx index f1727c1..36194a6 100644 --- a/src/components/Library/ScanSet.tsx +++ b/src/components/Library/ScanSet.tsx @@ -5,9 +5,10 @@ import RecorderChip from "components/RecorderChip"; import ToolTip from "components/ToolTip"; import { GetLibraryItemScansQuery } from "graphql/generated"; import { AppStaticProps } from "graphql/getAppStaticProps"; -import { getStatusDescription } from "helpers/others"; import { getAssetFilename, getAssetURL, ImageQuality } from "helpers/img"; import { isInteger } from "helpers/numbers"; +import { getStatusDescription } from "helpers/others"; +import { Immutable } from "helpers/types"; import useSmartLanguage from "hooks/useSmartLanguage"; import { Dispatch, SetStateAction } from "react"; @@ -50,7 +51,7 @@ interface Props { >["content"]; } -export default function ScanSet(props: Props): JSX.Element { +export default function ScanSet(props: Immutable): JSX.Element { const { setLightboxOpen, setLightboxImages, @@ -68,7 +69,8 @@ export default function ScanSet(props: Props): JSX.Element { languages: languages, languageExtractor: (item) => item?.language?.data?.attributes?.code, transform: (item) => { - item?.pages?.data.sort((a, b) => { + const newItem = { ...item } as Props["scanSet"][number]; + newItem?.pages?.data.sort((a, b) => { if (a.attributes?.url && b.attributes?.url) { let aName = getAssetFilename(a.attributes.url); let bName = getAssetFilename(b.attributes.url); @@ -91,7 +93,7 @@ export default function ScanSet(props: Props): JSX.Element { } return 0; }); - return item; + return newItem; }, }); diff --git a/src/components/Library/ScanSetCover.tsx b/src/components/Library/ScanSetCover.tsx index 6fad839..45559c6 100644 --- a/src/components/Library/ScanSetCover.tsx +++ b/src/components/Library/ScanSetCover.tsx @@ -7,8 +7,9 @@ import { UploadImageFragment, } from "graphql/generated"; import { AppStaticProps } from "graphql/getAppStaticProps"; -import { getStatusDescription } from "helpers/others"; import { getAssetURL, ImageQuality } from "helpers/img"; +import { getStatusDescription } from "helpers/others"; +import { Immutable } from "helpers/types"; import useSmartLanguage from "hooks/useSmartLanguage"; import { Dispatch, SetStateAction } from "react"; @@ -30,7 +31,7 @@ interface Props { langui: AppStaticProps["langui"]; } -export default function ScanSetCover(props: Props): JSX.Element { +export default function ScanSetCover(props: Immutable): JSX.Element { const { setLightboxOpen, setLightboxImages, diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx index eeb42c2..ccaad88 100644 --- a/src/components/LightBox.tsx +++ b/src/components/LightBox.tsx @@ -1,3 +1,4 @@ +import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction } from "react"; import Hotkeys from "react-hot-keys"; import { useSwipeable } from "react-swipeable"; @@ -15,7 +16,7 @@ interface Props { setIndex: Dispatch>; } -export default function LightBox(props: Props): JSX.Element { +export default function LightBox(props: Immutable): JSX.Element { const { state, setState, images, index, setIndex } = props; function handlePrevious() { diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index 464dc47..cf87363 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -6,6 +6,7 @@ import ToolTip from "components/ToolTip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { slugify } from "helpers/formatters"; import { getAssetURL, ImageQuality } from "helpers/img"; +import { Immutable } from "helpers/types"; import Markdown from "markdown-to-jsx"; import { useRouter } from "next/router"; import React, { useState } from "react"; @@ -16,7 +17,7 @@ interface Props { text: string; } -export default function Markdawn(props: Props): JSX.Element { +export default function Markdawn(props: Immutable): JSX.Element { const appLayout = useAppLayout(); const text = preprocessMarkDawn(props.text); diff --git a/src/components/Markdown/TOC.tsx b/src/components/Markdown/TOC.tsx index 261c9c8..4967668 100644 --- a/src/components/Markdown/TOC.tsx +++ b/src/components/Markdown/TOC.tsx @@ -1,4 +1,5 @@ import { slugify } from "helpers/formatters"; +import { Immutable } from "helpers/types"; import { useRouter } from "next/router"; import { preprocessMarkDawn } from "./Markdawn"; @@ -7,7 +8,7 @@ interface Props { title?: string; } -export default function TOCComponent(props: Props): JSX.Element { +export default function TOCComponent(props: Immutable): JSX.Element { const { text, title } = props; const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title); const router = useRouter(); diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx index 9de955a..934814e 100644 --- a/src/components/PanelComponents/NavOption.tsx +++ b/src/components/PanelComponents/NavOption.tsx @@ -1,4 +1,5 @@ import ToolTip from "components/ToolTip"; +import { Immutable } from "helpers/types"; import { useRouter } from "next/router"; import { MouseEventHandler } from "react"; @@ -12,7 +13,7 @@ interface Props { onClick?: MouseEventHandler; } -export default function NavOption(props: Props): JSX.Element { +export default function NavOption(props: Immutable): JSX.Element { const router = useRouter(); const isActive = router.asPath.startsWith(props.url); const divActive = "bg-mid shadow-inner-sm shadow-shade"; diff --git a/src/components/PanelComponents/PanelHeader.tsx b/src/components/PanelComponents/PanelHeader.tsx index 7eef723..eba7a1f 100644 --- a/src/components/PanelComponents/PanelHeader.tsx +++ b/src/components/PanelComponents/PanelHeader.tsx @@ -1,4 +1,5 @@ import HorizontalLine from "components/HorizontalLine"; +import { Immutable } from "helpers/types"; interface Props { icon?: string; @@ -6,7 +7,7 @@ interface Props { description?: string | null | undefined; } -export default function PanelHeader(props: Props): JSX.Element { +export default function PanelHeader(props: Immutable): JSX.Element { return ( <>
diff --git a/src/components/PanelComponents/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx index 498279c..d173940 100644 --- a/src/components/PanelComponents/ReturnButton.tsx +++ b/src/components/PanelComponents/ReturnButton.tsx @@ -2,6 +2,7 @@ import HorizontalLine from "components/HorizontalLine"; import Button from "components/Inputs/Button"; import { useAppLayout } from "contexts/AppLayoutContext"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; interface Props { href: string; @@ -18,7 +19,7 @@ export enum ReturnButtonType { both = "both", } -export default function ReturnButton(props: Props): JSX.Element { +export default function ReturnButton(props: Immutable): JSX.Element { const appLayout = useAppLayout(); return ( diff --git a/src/components/Panels/ContentPanel.tsx b/src/components/Panels/ContentPanel.tsx index b583e99..da23a00 100644 --- a/src/components/Panels/ContentPanel.tsx +++ b/src/components/Panels/ContentPanel.tsx @@ -1,3 +1,5 @@ +import { Immutable } from "helpers/types"; + interface Props { children: React.ReactNode; autoformat?: boolean; @@ -9,7 +11,7 @@ export enum ContentPanelWidthSizes { large = "large", } -export default function ContentPanel(props: Props): JSX.Element { +export default function ContentPanel(props: Immutable): JSX.Element { const width = props.width ? props.width : ContentPanelWidthSizes.default; const widthCSS = width === ContentPanelWidthSizes.default ? "max-w-2xl" : "w-full"; diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 4194c96..17bc118 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -7,12 +7,13 @@ import { useMediaDesktop } from "hooks/useMediaQuery"; import Markdown from "markdown-to-jsx"; import Link from "next/link"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; interface Props { langui: AppStaticProps["langui"]; } -export default function MainPanel(props: Props): JSX.Element { +export default function MainPanel(props: Immutable): JSX.Element { const { langui } = props; const isDesktop = useMediaDesktop(); const appLayout = useAppLayout(); diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx index 4494645..776e305 100644 --- a/src/components/Panels/SubPanel.tsx +++ b/src/components/Panels/SubPanel.tsx @@ -1,8 +1,10 @@ +import { Immutable } from "helpers/types"; + interface Props { children: React.ReactNode; } -export default function SubPanel(props: Props): JSX.Element { +export default function SubPanel(props: Immutable): JSX.Element { return (
{props.children} diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index 5d0b96b..0f56786 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -1,4 +1,5 @@ import { useAppLayout } from "contexts/AppLayoutContext"; +import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction, useEffect } from "react"; import Hotkeys from "react-hot-keys"; @@ -13,7 +14,7 @@ interface Props { padding?: boolean; } -export default function Popup(props: Props): JSX.Element { +export default function Popup(props: Immutable): JSX.Element { const { setState, state, diff --git a/src/components/PostPage.tsx b/src/components/PostPage.tsx index e301928..82324ce 100644 --- a/src/components/PostPage.tsx +++ b/src/components/PostPage.tsx @@ -1,7 +1,7 @@ -import { prettySlug } from "helpers/formatters"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { prettySlug } from "helpers/formatters"; import { getStatusDescription } from "helpers/others"; -import { Post } from "helpers/types"; +import { Immutable, PostWithTranslations } from "helpers/types"; import useSmartLanguage from "hooks/useSmartLanguage"; import AppLayout from "./AppLayout"; import Chip from "./Chip"; @@ -16,7 +16,7 @@ import ThumbnailHeader from "./ThumbnailHeader"; import ToolTip from "./ToolTip"; interface Props { - post: Post; + post: PostWithTranslations; langui: AppStaticProps["langui"]; languages: AppStaticProps["languages"]; currencies: AppStaticProps["currencies"]; @@ -31,7 +31,7 @@ interface Props { appendBody?: JSX.Element; } -export default function PostPage(props: Props): JSX.Element { +export default function PostPage(props: Immutable): JSX.Element { const { post, langui, diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx index 6b8681c..ae723e0 100644 --- a/src/components/PreviewCard.tsx +++ b/src/components/PreviewCard.tsx @@ -4,14 +4,15 @@ import { PricePickerFragment, UploadImageFragment, } from "graphql/generated"; +import { AppStaticProps } from "graphql/getAppStaticProps"; import { prettyDate, prettyDuration, prettyPrice, prettyShortenNumber, } from "helpers/formatters"; -import { AppStaticProps } from "graphql/getAppStaticProps"; import { ImageQuality } from "helpers/img"; +import { Immutable } from "helpers/types"; import Link from "next/link"; import Chip from "./Chip"; import Img from "./Img"; @@ -43,7 +44,7 @@ interface Props { | { __typename: "anotherHoverlayName" }; } -export default function ThumbnailPreview(props: Props): JSX.Element { +export default function ThumbnailPreview(props: Immutable): JSX.Element { const { href, thumbnail, diff --git a/src/components/PreviewLine.tsx b/src/components/PreviewLine.tsx index bc31188..75f99ad 100644 --- a/src/components/PreviewLine.tsx +++ b/src/components/PreviewLine.tsx @@ -1,5 +1,6 @@ import { UploadImageFragment } from "graphql/generated"; import { ImageQuality } from "helpers/img"; +import { Immutable } from "helpers/types"; import Link from "next/link"; import Chip from "./Chip"; import Img from "./Img"; @@ -15,7 +16,7 @@ interface Props { bottomChips?: string[]; } -export default function PreviewLine(props: Props): JSX.Element { +export default function PreviewLine(props: Immutable): JSX.Element { const { href, thumbnail, diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx index 8af3b6d..f992476 100644 --- a/src/components/RecorderChip.tsx +++ b/src/components/RecorderChip.tsx @@ -2,6 +2,7 @@ import Chip from "components/Chip"; import { RecorderChipFragment } from "graphql/generated"; import { AppStaticProps } from "graphql/getAppStaticProps"; import { ImageQuality } from "helpers/img"; +import { Immutable } from "helpers/types"; import Img from "./Img"; import Markdawn from "./Markdown/Markdawn"; import ToolTip from "./ToolTip"; @@ -12,7 +13,7 @@ interface Props { langui: AppStaticProps["langui"]; } -export default function RecorderChip(props: Props): JSX.Element { +export default function RecorderChip(props: Immutable): JSX.Element { const { recorder, langui } = props; return ( ): JSX.Element { return (
): JSX.Element { const { langui, pre_title, diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx index fb5a82f..f563f46 100644 --- a/src/components/ToolTip.tsx +++ b/src/components/ToolTip.tsx @@ -4,12 +4,12 @@ import "tippy.js/animations/scale-subtle.css"; interface Props extends TippyProps {} export default function ToolTip(props: Props): JSX.Element { - const newProps = { ...props }; - - // Set defaults - if (newProps.delay === undefined) newProps.delay = [150, 0]; - if (newProps.interactive === undefined) newProps.interactive = true; - if (newProps.animation === undefined) newProps.animation = "scale-subtle"; + const newProps: Props = { + delay: [150, 0], + interactive: true, + animation: "scale-subtle", + ...props, + }; return ( diff --git a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx index 2b96935..cc30e39 100644 --- a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx +++ b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx @@ -6,6 +6,7 @@ import { } from "graphql/generated"; import { AppStaticProps } from "graphql/getAppStaticProps"; import { getStatusDescription } from "helpers/others"; +import { Immutable } from "helpers/types"; interface Props { item: Exclude< @@ -16,7 +17,9 @@ interface Props { langui: AppStaticProps["langui"]; } -export default function ChronologyItemComponent(props: Props): JSX.Element { +export default function ChronologyItemComponent( + props: Immutable +): JSX.Element { const { langui } = props; function generateAnchor( diff --git a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx index b69715e..389e18c 100644 --- a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx +++ b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx @@ -1,6 +1,7 @@ import ChronologyItemComponent from "components/Wiki/Chronology/ChronologyItemComponent"; import { GetChronologyItemsQuery } from "graphql/generated"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; interface Props { year: number; @@ -11,7 +12,9 @@ interface Props { langui: AppStaticProps["langui"]; } -export default function ChronologyYearComponent(props: Props): JSX.Element { +export default function ChronologyYearComponent( + props: Immutable +): JSX.Element { const { langui } = props; return ( diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index 67b0fd2..eb1a821 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -1,3 +1,4 @@ +import { Immutable } from "helpers/types"; import useDarkMode from "hooks/useDarkMode"; import useStateWithLocalStorage from "hooks/useStateWithLocalStorage"; import React, { ReactNode, useContext, useState } from "react"; @@ -76,7 +77,7 @@ interface Props { children: ReactNode; } -export function AppContextProvider(props: Props): JSX.Element { +export function AppContextProvider(props: Immutable): JSX.Element { const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage< boolean | undefined >("subPanelOpen", initialState.subPanelOpen); diff --git a/src/graphql/getAppStaticProps.ts b/src/graphql/getAppStaticProps.ts index ed9179a..5b276d5 100644 --- a/src/graphql/getAppStaticProps.ts +++ b/src/graphql/getAppStaticProps.ts @@ -4,9 +4,10 @@ import { GetWebsiteInterfaceQuery, } from "graphql/generated"; import { getReadySdk } from "graphql/sdk"; +import { Immutable } from "helpers/types"; import { GetStaticPropsContext } from "next"; -export interface AppStaticProps { +export type AppStaticProps = Immutable<{ langui: Exclude< Exclude< GetWebsiteInterfaceQuery["websiteInterfaces"], @@ -19,7 +20,7 @@ export interface AppStaticProps { null | undefined >["data"]; languages: Exclude["data"]; -} +}>; export async function getAppStaticProps( context: GetStaticPropsContext @@ -50,9 +51,11 @@ export async function getAppStaticProps( }) ).websiteInterfaces?.data[0].attributes; - return { - langui: langui ?? ({} as AppStaticProps["langui"]), - currencies: currencies?.data ?? ({} as AppStaticProps["currencies"]), - languages: languages?.data ?? ({} as AppStaticProps["languages"]), + const appStaticProps: AppStaticProps = { + langui: langui ?? {}, + currencies: currencies?.data ?? [], + languages: languages?.data ?? [], }; + + return appStaticProps; } diff --git a/src/graphql/getPostStaticProps.ts b/src/graphql/getPostStaticProps.ts new file mode 100644 index 0000000..4913b9c --- /dev/null +++ b/src/graphql/getPostStaticProps.ts @@ -0,0 +1,32 @@ +import { PostWithTranslations } from "helpers/types"; +import { GetStaticPropsContext } from "next"; +import { AppStaticProps, getAppStaticProps } from "./getAppStaticProps"; +import { getReadySdk } from "./sdk"; + +export interface PostStaticProps extends AppStaticProps { + post: PostWithTranslations; +} + +export function getPostStaticProps( + slug: string +): ( + context: GetStaticPropsContext +) => Promise<{ notFound: boolean } | { props: PostStaticProps }> { + return async (context: GetStaticPropsContext) => { + const sdk = getReadySdk(); + const post = await sdk.getPost({ + slug: slug, + language_code: context.locale ?? "en", + }); + if (post.posts?.data[0].attributes?.translations) { + const props: PostStaticProps = { + ...(await getAppStaticProps(context)), + post: post.posts.data[0].attributes as PostWithTranslations, + }; + return { + props: props, + }; + } + return { notFound: true }; + }; +} diff --git a/src/helpers/formatters.ts b/src/helpers/formatters.ts index dd04b2f..7b00940 100644 --- a/src/helpers/formatters.ts +++ b/src/helpers/formatters.ts @@ -1,8 +1,9 @@ import { DatePickerFragment, PricePickerFragment } from "graphql/generated"; import { AppStaticProps } from "../graphql/getAppStaticProps"; import { convertPrice } from "./numbers"; +import { Immutable } from "./types"; -export function prettyDate(datePicker: DatePickerFragment): string { +export function prettyDate(datePicker: Immutable): string { let result = ""; if (datePicker.year) result += datePicker.year.toString(); if (datePicker.month) @@ -13,7 +14,7 @@ export function prettyDate(datePicker: DatePickerFragment): string { } export function prettyPrice( - pricePicker: PricePickerFragment, + pricePicker: Immutable, currencies: AppStaticProps["currencies"], targetCurrencyCode?: string ): string { @@ -57,7 +58,7 @@ export function prettyinlineTitle( } export function prettyItemType( - metadata: any, + metadata: Immutable, langui: AppStaticProps["langui"] ): string | undefined | null { switch (metadata.__typename) { @@ -79,7 +80,7 @@ export function prettyItemType( } export function prettyItemSubType( - metadata: + metadata: Immutable< | { __typename: "ComponentMetadataAudio"; subtype?: { @@ -156,6 +157,7 @@ export function prettyItemSubType( } | { __typename: "Error" } | null + > ): string { if (metadata) { switch (metadata.__typename) { diff --git a/src/helpers/img.ts b/src/helpers/img.ts index b2687cb..686edbd 100644 --- a/src/helpers/img.ts +++ b/src/helpers/img.ts @@ -1,4 +1,5 @@ import { UploadImageFragment } from "graphql/generated"; +import { Immutable } from "./types"; export enum ImageQuality { Small = "small", @@ -24,7 +25,10 @@ export function getAssetFilename(path: string): string { return result[0]; } -export function getAssetURL(url: string, quality: ImageQuality): string { +export function getAssetURL( + url: string, + quality: Immutable +): string { let newUrl = url; newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`); newUrl = newUrl.replace(/.jpg$/u, ".webp"); @@ -67,8 +71,8 @@ export function getImgSizesByQuality( } export function getOgImage( - quality: ImageQuality, - image: UploadImageFragment + quality: Immutable, + image: Immutable ): OgImage { const imgSize = getImgSizesByQuality( image.width ?? 0, diff --git a/src/helpers/numbers.ts b/src/helpers/numbers.ts index bb95ef3..252d8e5 100644 --- a/src/helpers/numbers.ts +++ b/src/helpers/numbers.ts @@ -1,11 +1,11 @@ import { GetCurrenciesQuery, PricePickerFragment } from "graphql/generated"; +import { Immutable } from "./types"; export function convertPrice( - pricePicker: PricePickerFragment, - targetCurrency: Exclude< - GetCurrenciesQuery["currencies"], - null | undefined - >["data"][number] + pricePicker: Immutable, + targetCurrency: Immutable< + Exclude["data"][number] + > ): number { if ( pricePicker.amount && diff --git a/src/helpers/others.ts b/src/helpers/others.ts index ed50242..1745fce 100644 --- a/src/helpers/others.ts +++ b/src/helpers/others.ts @@ -4,36 +4,42 @@ import { GetLibraryItemScansQuery, } from "graphql/generated"; import { AppStaticProps } from "../graphql/getAppStaticProps"; +import { Immutable } from "./types"; -export function sortContent( - contents: - | Exclude< - Exclude< - GetLibraryItemQuery["libraryItems"], - null | undefined - >["data"][number]["attributes"], +type SortContentProps = + | Exclude< + Exclude< + GetLibraryItemQuery["libraryItems"], null | undefined - >["contents"] - | Exclude< - Exclude< - GetLibraryItemScansQuery["libraryItems"], - null | undefined - >["data"][number]["attributes"], + >["data"][number]["attributes"], + null | undefined + >["contents"] + | Exclude< + Exclude< + GetLibraryItemScansQuery["libraryItems"], null | undefined - >["contents"] -) { - contents?.data.sort((a, b) => { - if ( - a.attributes?.range[0]?.__typename === "ComponentRangePageRange" && - b.attributes?.range[0]?.__typename === "ComponentRangePageRange" - ) { - return ( - a.attributes.range[0].starting_page - - b.attributes.range[0].starting_page - ); - } - return 0; - }); + >["data"][number]["attributes"], + null | undefined + >["contents"]; + +export function sortContent(contents: Immutable) { + if (contents) { + const newContent = { ...contents } as SortContentProps; + newContent?.data.sort((a, b) => { + if ( + a.attributes?.range[0]?.__typename === "ComponentRangePageRange" && + b.attributes?.range[0]?.__typename === "ComponentRangePageRange" + ) { + return ( + a.attributes.range[0].starting_page - + b.attributes.range[0].starting_page + ); + } + return 0; + }); + return newContent as Immutable; + } + return contents; } export function getStatusDescription( diff --git a/src/helpers/types.ts b/src/helpers/types.ts index fb48368..9966ecb 100644 --- a/src/helpers/types.ts +++ b/src/helpers/types.ts @@ -1,9 +1,22 @@ import { GetPostQuery } from "graphql/generated"; +import React from "react"; -export type Post = Exclude< +type Post = Exclude< Exclude< GetPostQuery["posts"], null | undefined >["data"][number]["attributes"], null | undefined >; + +export interface PostWithTranslations extends Omit { + translations: Exclude; +} + +type ImmutableBlackList = JSX.Element | React.ReactNode | Function; + +export type Immutable = { + readonly [K in keyof T]: T[K] extends ImmutableBlackList + ? T[K] + : Immutable; +}; \ No newline at end of file diff --git a/src/hooks/useSmartLanguage.tsx b/src/hooks/useSmartLanguage.tsx index 13af8dd..d1bd3e4 100644 --- a/src/hooks/useSmartLanguage.tsx +++ b/src/hooks/useSmartLanguage.tsx @@ -1,14 +1,15 @@ import LanguageSwitcher from "components/Inputs/LanguageSwitcher"; import { useAppLayout } from "contexts/AppLayoutContext"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; import { useRouter } from "next/router"; import { useEffect, useMemo, useState } from "react"; interface Props { - items: T[]; + items: Immutable; languages: AppStaticProps["languages"]; - languageExtractor: (item: T) => string | undefined; - transform?: (item: T) => T; + languageExtractor: (item: Immutable) => string | undefined; + transform?: (item: Immutable) => Immutable; } function getPreferredLanguage( @@ -25,7 +26,7 @@ function getPreferredLanguage( export default function useSmartLanguage( props: Props -): [T | undefined, () => JSX.Element] { +): [Immutable, () => JSX.Element] { const { items, languageExtractor, @@ -39,7 +40,8 @@ export default function useSmartLanguage( const [selectedTranslationIndex, setSelectedTranslationIndex] = useState< number | undefined >(); - const [selectedTranslation, setSelectedTranslation] = useState(); + const [selectedTranslation, setSelectedTranslation] = + useState>(); useEffect(() => { items.map((elem, index) => { @@ -58,8 +60,9 @@ export default function useSmartLanguage( }, [appLayout.preferredLanguages, availableLocales, router.locale]); useEffect(() => { - if (selectedTranslationIndex !== undefined) + if (selectedTranslationIndex !== undefined) { setSelectedTranslation(transform(items[selectedTranslationIndex])); + } }, [items, selectedTranslationIndex, transform]); return [ diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 9549334..d265505 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -3,12 +3,13 @@ import ReturnButton, { ReturnButtonType, } from "components/PanelComponents/ReturnButton"; import ContentPanel from "components/Panels/ContentPanel"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps {} -export default function FourOhFour(props: Props): JSX.Element { +export default function FourOhFour(props: Immutable): JSX.Element { const { langui } = props; const contentPanel = ( diff --git a/src/pages/500.tsx b/src/pages/500.tsx index 2093c65..eab7707 100644 --- a/src/pages/500.tsx +++ b/src/pages/500.tsx @@ -3,12 +3,13 @@ import ReturnButton, { ReturnButtonType, } from "components/PanelComponents/ReturnButton"; import ContentPanel from "components/Panels/ContentPanel"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps {} -export default function FiveHundred(props: Props): JSX.Element { +export default function FiveHundred(props: Immutable): JSX.Element { const { langui } = props; const contentPanel = ( diff --git a/src/pages/about-us/accords-handbook.tsx b/src/pages/about-us/accords-handbook.tsx index 06b1a8c..749359e 100644 --- a/src/pages/about-us/accords-handbook.tsx +++ b/src/pages/about-us/accords-handbook.tsx @@ -1,14 +1,13 @@ import PostPage from "components/PostPage"; -import { getReadySdk } from "graphql/sdk"; -import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Post } from "helpers/types"; -import { GetStaticPropsContext } from "next"; +import { + getPostStaticProps, + PostStaticProps, +} from "graphql/getPostStaticProps"; +import { Immutable } from "helpers/types"; -interface Props extends AppStaticProps { - post: Post; -} - -export default function AccordsHandbook(props: Props): JSX.Element { +export default function AccordsHandbook( + props: Immutable +): JSX.Element { const { post, langui, languages, currencies } = props; return ( { - const sdk = getReadySdk(); - const slug = "accords-handbook"; - const post = await sdk.getPost({ - slug: slug, - language_code: context.locale ?? "en", - }); - if (!post.posts?.data[0].attributes) return { notFound: true }; - const props: Props = { - ...(await getAppStaticProps(context)), - post: post.posts.data[0].attributes, - }; - return { - props: props, - }; -} +export const getStaticProps = getPostStaticProps("accords-handbook"); diff --git a/src/pages/about-us/contact.tsx b/src/pages/about-us/contact.tsx index 1d1f278..21015ab 100644 --- a/src/pages/about-us/contact.tsx +++ b/src/pages/about-us/contact.tsx @@ -1,19 +1,18 @@ import InsetBox from "components/InsetBox"; import PostPage from "components/PostPage"; -import { randomInt } from "crypto"; -import { getReadySdk } from "graphql/sdk"; -import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Post } from "helpers/types"; -import { GetStaticPropsContext } from "next"; +import { + getPostStaticProps, + PostStaticProps, +} from "graphql/getPostStaticProps"; +import { randomInt } from "helpers/numbers"; +import { Immutable } from "helpers/types"; import { useRouter } from "next/router"; import { RequestMailProps, ResponseMailProps } from "pages/api/mail"; import { useState } from "react"; -interface Props extends AppStaticProps { - post: Post; -} - -export default function AboutUs(props: Props): JSX.Element { +export default function AboutUs( + props: Immutable +): JSX.Element { const { post, langui, languages, currencies } = props; const router = useRouter(); @@ -182,21 +181,4 @@ export default function AboutUs(props: Props): JSX.Element { ); } -export async function getStaticProps( - context: GetStaticPropsContext -): Promise<{ notFound: boolean } | { props: Props }> { - const sdk = getReadySdk(); - const slug = "contact"; - const post = await sdk.getPost({ - slug: slug, - language_code: context.locale ?? "en", - }); - if (!post.posts?.data[0].attributes) return { notFound: true }; - const props: Props = { - ...(await getAppStaticProps(context)), - post: post.posts.data[0].attributes, - }; - return { - props: props, - }; -} +export const getStaticProps = getPostStaticProps("contact"); diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx index 2a1538b..85c4dec 100644 --- a/src/pages/about-us/index.tsx +++ b/src/pages/about-us/index.tsx @@ -2,12 +2,13 @@ import AppLayout from "components/AppLayout"; import NavOption from "components/PanelComponents/NavOption"; import PanelHeader from "components/PanelComponents/PanelHeader"; import SubPanel from "components/Panels/SubPanel"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps {} -export default function AboutUs(props: Props): JSX.Element { +export default function AboutUs(props: Immutable): JSX.Element { const { langui } = props; const subPanel = ( diff --git a/src/pages/about-us/legality.tsx b/src/pages/about-us/legality.tsx index 8149037..828a342 100644 --- a/src/pages/about-us/legality.tsx +++ b/src/pages/about-us/legality.tsx @@ -1,14 +1,10 @@ import PostPage from "components/PostPage"; -import { getReadySdk } from "graphql/sdk"; -import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Post } from "helpers/types"; -import { GetStaticPropsContext } from "next"; +import { + getPostStaticProps, + PostStaticProps, +} from "graphql/getPostStaticProps"; -interface Props extends AppStaticProps { - post: Post; -} - -export default function SiteInformation(props: Props): JSX.Element { +export default function Legality(props: PostStaticProps): JSX.Element { const { post, langui, languages, currencies } = props; return ( { - const sdk = getReadySdk(); - const slug = "legality"; - const post = await sdk.getPost({ - slug: slug, - language_code: context.locale ?? "en", - }); - if (!post.posts?.data[0].attributes) return { notFound: true }; - const props: Props = { - ...(await getAppStaticProps(context)), - post: post.posts.data[0].attributes, - }; - return { - props: props, - }; -} +export const getStaticProps = getPostStaticProps("legality"); diff --git a/src/pages/about-us/sharing-policy.tsx b/src/pages/about-us/sharing-policy.tsx index f7b3c5c..81c93b7 100644 --- a/src/pages/about-us/sharing-policy.tsx +++ b/src/pages/about-us/sharing-policy.tsx @@ -1,13 +1,10 @@ import PostPage from "components/PostPage"; -import { getReadySdk } from "graphql/sdk"; -import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Post } from "helpers/types"; -import { GetStaticPropsContext } from "next"; +import { + getPostStaticProps, + PostStaticProps, +} from "graphql/getPostStaticProps"; -interface Props extends AppStaticProps { - post: Post; -} -export default function SharingPolicy(props: Props): JSX.Element { +export default function SharingPolicy(props: PostStaticProps): JSX.Element { const { post, langui, languages, currencies } = props; return ( { - const sdk = getReadySdk(); - const slug = "sharing-policy"; - const post = await sdk.getPost({ - slug: slug, - language_code: context.locale ?? "en", - }); - if (!post.posts?.data[0].attributes) return { notFound: true }; - const props: Props = { - ...(await getAppStaticProps(context)), - post: post.posts.data[0].attributes, - }; - return { - props: props, - }; -} +export const getStaticProps = getPostStaticProps("sharing-policy"); diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx index dde0f10..bc38935 100644 --- a/src/pages/archives/index.tsx +++ b/src/pages/archives/index.tsx @@ -2,12 +2,13 @@ import AppLayout from "components/AppLayout"; import NavOption from "components/PanelComponents/NavOption"; import PanelHeader from "components/PanelComponents/PanelHeader"; import SubPanel from "components/Panels/SubPanel"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps {} -export default function Archives(props: Props): JSX.Element { +export default function Archives(props: Immutable): JSX.Element { const { langui } = props; const subPanel = ( diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx index ea6b0c0..0abfd62 100644 --- a/src/pages/chronicles/index.tsx +++ b/src/pages/chronicles/index.tsx @@ -3,10 +3,11 @@ import PanelHeader from "components/PanelComponents/PanelHeader"; import SubPanel from "components/Panels/SubPanel"; import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; interface Props extends AppStaticProps {} -export default function Chronicles(props: Props): JSX.Element { +export default function Chronicles(props: Immutable): JSX.Element { const { langui } = props; const subPanel = ( diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index 9cb42ca..edf8c0f 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -13,14 +13,15 @@ import RecorderChip from "components/RecorderChip"; import ThumbnailHeader from "components/ThumbnailHeader"; import ToolTip from "components/ToolTip"; import { GetContentTextQuery } from "graphql/generated"; +import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { getReadySdk } from "graphql/sdk"; import { prettyinlineTitle, prettyLanguage, prettySlug, } from "helpers/formatters"; -import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { getStatusDescription } from "helpers/others"; +import { Immutable } from "helpers/types"; import { useMediaMobile } from "hooks/useMediaQuery"; import useSmartLanguage from "hooks/useSmartLanguage"; import { @@ -40,7 +41,7 @@ interface Props extends AppStaticProps { >["data"][number]["id"]; } -export default function Content(props: Props): JSX.Element { +export default function Content(props: Immutable): JSX.Element { const { langui, content, languages } = props; const isMobile = useMediaMobile(); diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx index 54df12a..af0043e 100644 --- a/src/pages/contents/index.tsx +++ b/src/pages/contents/index.tsx @@ -9,19 +9,20 @@ import ContentPanel, { import SubPanel from "components/Panels/SubPanel"; import ThumbnailPreview from "components/PreviewCard"; import { GetContentsQuery } from "graphql/generated"; -import { getReadySdk } from "graphql/sdk"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { getReadySdk } from "graphql/sdk"; +import { prettyinlineTitle, prettySlug } from "helpers/formatters"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; import { useEffect, useState } from "react"; -import { prettySlug, prettyinlineTitle } from "helpers/formatters"; interface Props extends AppStaticProps { contents: Exclude["data"]; } -type GroupContentItems = Map; +type GroupContentItems = Map>; -export default function Contents(props: Props): JSX.Element { +export default function Contents(props: Immutable): JSX.Element { const { langui, contents } = props; const [groupingMethod, setGroupingMethod] = useState(-1); @@ -172,7 +173,7 @@ export async function getStaticProps( function getGroups( langui: AppStaticProps["langui"], groupByType: number, - items: Props["contents"] + items: Immutable ): GroupContentItems { switch (groupByType) { case 0: { @@ -209,7 +210,7 @@ function getGroups( } case 1: { - const group: GroupContentItems = new Map(); + const group = new Map(); items.map((item) => { const type = item.attributes?.type?.data?.attributes?.titles?.[0]?.title ?? diff --git a/src/pages/dev/checkup/contents.tsx b/src/pages/dev/checkup/contents.tsx index 392d063..2f577d0 100644 --- a/src/pages/dev/checkup/contents.tsx +++ b/src/pages/dev/checkup/contents.tsx @@ -9,15 +9,16 @@ import { DevGetContentsQuery, Enum_Componentsetstextset_Status, } from "graphql/generated"; -import { getReadySdk } from "graphql/sdk"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { getReadySdk } from "graphql/sdk"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps { contents: DevGetContentsQuery; } -export default function CheckupContents(props: Props): JSX.Element { +export default function CheckupContents(props: Immutable): JSX.Element { const { contents } = props; const testReport = testingContent(contents); @@ -112,7 +113,7 @@ type ReportLine = { frontendUrl: string; }; -function testingContent(contents: Props["contents"]): Report { +function testingContent(contents: Immutable): Report { const report: Report = { title: "Contents", lines: [], diff --git a/src/pages/dev/checkup/libraryitems.tsx b/src/pages/dev/checkup/libraryitems.tsx index eb4ca2b..f881767 100644 --- a/src/pages/dev/checkup/libraryitems.tsx +++ b/src/pages/dev/checkup/libraryitems.tsx @@ -9,15 +9,18 @@ import { DevGetLibraryItemsQuery, Enum_Componentcollectionscomponentlibraryimages_Status, } from "graphql/generated"; -import { getReadySdk } from "graphql/sdk"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { getReadySdk } from "graphql/sdk"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps { libraryItems: DevGetLibraryItemsQuery; } -export default function CheckupLibraryItems(props: Props): JSX.Element { +export default function CheckupLibraryItems( + props: Immutable +): JSX.Element { const { libraryItems } = props; const testReport = testingLibraryItem(libraryItems); @@ -113,7 +116,9 @@ type ReportLine = { }; // eslint-disable-next-line @typescript-eslint/no-unused-vars -function testingLibraryItem(libraryItems: Props["libraryItems"]): Report { +function testingLibraryItem( + libraryItems: Immutable +): Report { const report: Report = { title: "Contents", lines: [], diff --git a/src/pages/dev/editor.tsx b/src/pages/dev/editor.tsx index 9faee01..697a575 100644 --- a/src/pages/dev/editor.tsx +++ b/src/pages/dev/editor.tsx @@ -6,14 +6,15 @@ import ContentPanel, { } from "components/Panels/ContentPanel"; import Popup from "components/Popup"; import ToolTip from "components/ToolTip"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; import { useCallback, useState } from "react"; import TurndownService from "turndown"; interface Props extends AppStaticProps {} -export default function Editor(props: Props): JSX.Element { +export default function Editor(props: Immutable): JSX.Element { const handleInput = useCallback((text: string) => { setMarkdown(text); }, []); diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 925448f..ce1ae66 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -1,10 +1,11 @@ import AppLayout from "components/AppLayout"; -import { GetStaticPropsContext } from "next"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; +import { Immutable } from "helpers/types"; +import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps {} -export default function Gallery(props: Props): JSX.Element { +export default function Gallery(props: Immutable): JSX.Element { const { langui } = props; const contentPanel = (