diff --git a/.eslintrc.js b/.eslintrc.js index bfa1395..9775f97 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -190,10 +190,10 @@ module.exports = { "@typescript-eslint/promise-function-async": "error", "@typescript-eslint/require-array-sort-compare": "error", "@typescript-eslint/sort-type-union-intersection-members": "warn", - "@typescript-eslint/strict-boolean-expressions": [ - "error", - { allowAny: true }, - ], + // "@typescript-eslint/strict-boolean-expressions": [ + // "error", + // { allowAny: true }, + // ], "@typescript-eslint/switch-exhaustiveness-check": "error", "@typescript-eslint/typedef": "error", "@typescript-eslint/unified-signatures": "error", diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 02bf6b2..36d7e45 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -7,7 +7,7 @@ import { prettyLanguage, prettySlug } from "helpers/formatters"; import { getOgImage, ImageQuality } from "helpers/img"; import { isDefined, isDefinedAndNotEmpty } from "helpers/others"; // import { getClient, Indexes, search, SearchResult } from "helpers/search"; -import { Immutable } from "helpers/types"; + import { useMediaMobile } from "hooks/useMediaQuery"; import { AnchorIds } from "hooks/useScrollTopOnChange"; import Head from "next/head"; @@ -35,7 +35,7 @@ interface Props extends AppStaticProps { const SENSIBILITY_SWIPE = 1.1; const TITLE_PREFIX = "Accord’s Library"; -export function AppLayout(props: Immutable): JSX.Element { +export function AppLayout(props: Props): JSX.Element { const { langui, currencies, diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index f4b26e5..565fc4d 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -1,12 +1,11 @@ import { cJoin } from "helpers/className"; -import { Immutable } from "helpers/types"; interface Props { className?: string; children: React.ReactNode; } -export function Chip(props: Immutable): JSX.Element { +export function Chip(props: Props): JSX.Element { return (
): JSX.Element { +export function HorizontalLine(props: Props): JSX.Element { const { className } = props; return (
): JSX.Element { +export function Ico(props: Props): JSX.Element { const { onClick, icon, className } = props; return ( ; } -export function Img(props: Immutable): JSX.Element { +export function Img(props: Props): JSX.Element { const { className, image, diff --git a/src/components/Inputs/Button.tsx b/src/components/Inputs/Button.tsx index c578b09..1d955c4 100644 --- a/src/components/Inputs/Button.tsx +++ b/src/components/Inputs/Button.tsx @@ -1,7 +1,7 @@ import { Ico, Icon } from "components/Ico"; import { cIf, cJoin } from "helpers/className"; import { ConditionalWrapper, Wrapper } from "helpers/component"; -import { Immutable } from "helpers/types"; + import { isDefined, isDefinedAndNotEmpty } from "helpers/others"; import { useRouter } from "next/router"; import React, { MouseEventHandler } from "react"; @@ -20,7 +20,7 @@ interface Props { badgeNumber?: number; } -export function Button(props: Immutable): JSX.Element { +export function Button(props: Props): JSX.Element { const { draggable, id, diff --git a/src/components/Inputs/ButtonGroup.tsx b/src/components/Inputs/ButtonGroup.tsx index e619fac..b252758 100644 --- a/src/components/Inputs/ButtonGroup.tsx +++ b/src/components/Inputs/ButtonGroup.tsx @@ -1,5 +1,5 @@ import { cJoin } from "helpers/className"; -import { Immutable } from "helpers/types"; + import { useLayoutEffect, useRef } from "react"; interface Props { @@ -7,7 +7,7 @@ interface Props { className?: string; } -export function ButtonGroup(props: Immutable): JSX.Element { +export function ButtonGroup(props: Props): JSX.Element { const { children, className } = props; const ref = useRef(null); diff --git a/src/components/Inputs/LanguageSwitcher.tsx b/src/components/Inputs/LanguageSwitcher.tsx index 647aa9f..9f9316d 100644 --- a/src/components/Inputs/LanguageSwitcher.tsx +++ b/src/components/Inputs/LanguageSwitcher.tsx @@ -2,7 +2,7 @@ import { Icon } from "components/Ico"; import { AppStaticProps } from "graphql/getAppStaticProps"; import { cJoin } from "helpers/className"; import { prettyLanguage } from "helpers/formatters"; -import { Immutable } from "helpers/types"; + import { Fragment } from "react"; import { ToolTip } from "../ToolTip"; import { Button } from "./Button"; @@ -15,7 +15,7 @@ interface Props { onLanguageChanged: (index: number) => void; } -export function LanguageSwitcher(props: Immutable): JSX.Element { +export function LanguageSwitcher(props: Props): JSX.Element { const { locales, className, localesIndex, onLanguageChanged } = props; return ( diff --git a/src/components/Inputs/OrderableList.tsx b/src/components/Inputs/OrderableList.tsx index 53eb015..f6f5eed 100644 --- a/src/components/Inputs/OrderableList.tsx +++ b/src/components/Inputs/OrderableList.tsx @@ -1,6 +1,6 @@ import { Ico, Icon } from "components/Ico"; import { arrayMove, isDefinedAndNotEmpty } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { Fragment, useCallback, useState } from "react"; interface Props { @@ -10,7 +10,7 @@ interface Props { onChange?: (items: Map) => void; } -export function OrderableList(props: Immutable): JSX.Element { +export function OrderableList(props: Props): JSX.Element { const { onChange } = props; const [items, setItems] = useState>(props.items); diff --git a/src/components/Inputs/PageSelector.tsx b/src/components/Inputs/PageSelector.tsx index c9de56a..440c4b2 100644 --- a/src/components/Inputs/PageSelector.tsx +++ b/src/components/Inputs/PageSelector.tsx @@ -1,6 +1,6 @@ import { Icon } from "components/Ico"; import { cJoin } from "helpers/className"; -import { Immutable } from "helpers/types"; + import { Dispatch, SetStateAction } from "react"; import { Button } from "./Button"; @@ -11,7 +11,7 @@ interface Props { setPage: Dispatch>; } -export function PageSelector(props: Immutable): JSX.Element { +export function PageSelector(props: Props): JSX.Element { const { page, setPage, maxPage, className } = props; return ( diff --git a/src/components/Inputs/Select.tsx b/src/components/Inputs/Select.tsx index 60fb34f..43a5edb 100644 --- a/src/components/Inputs/Select.tsx +++ b/src/components/Inputs/Select.tsx @@ -1,6 +1,6 @@ import { Ico, Icon } from "components/Ico"; import { cIf, cJoin } from "helpers/className"; -import { Immutable } from "helpers/types"; + import { useToggle } from "hooks/useToggle"; import { Dispatch, Fragment, SetStateAction, useState } from "react"; @@ -13,7 +13,7 @@ interface Props { className?: string; } -export function Select(props: Immutable): JSX.Element { +export function Select(props: Props): JSX.Element { const { className, state, options, allowEmpty, setState } = props; const [opened, setOpened] = useState(false); const toggleOpened = useToggle(setOpened); diff --git a/src/components/Inputs/Switch.tsx b/src/components/Inputs/Switch.tsx index c5475ac..a7f90cf 100644 --- a/src/components/Inputs/Switch.tsx +++ b/src/components/Inputs/Switch.tsx @@ -1,5 +1,5 @@ import { cIf, cJoin } from "helpers/className"; -import { Immutable } from "helpers/types"; + import { useToggle } from "hooks/useToggle"; import { Dispatch, SetStateAction } from "react"; @@ -10,7 +10,7 @@ interface Props { disabled?: boolean; } -export function Switch(props: Immutable): JSX.Element { +export function Switch(props: Props): JSX.Element { const { state, setState, className, disabled } = props; const toggleState = useToggle(setState); return ( diff --git a/src/components/Inputs/TextInput.tsx b/src/components/Inputs/TextInput.tsx index 26dcbdf..abf331c 100644 --- a/src/components/Inputs/TextInput.tsx +++ b/src/components/Inputs/TextInput.tsx @@ -1,7 +1,7 @@ import { Ico, Icon } from "components/Ico"; import { cJoin } from "helpers/className"; import { isDefinedAndNotEmpty } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { Dispatch, SetStateAction } from "react"; interface Props { @@ -14,7 +14,7 @@ interface Props { placeholder?: string; } -export function TextInput(props: Immutable): JSX.Element { +export function TextInput(props: Props): JSX.Element { const { state, setState, className, name, placeholder } = props; return ( diff --git a/src/components/Inputs/WithLabel.tsx b/src/components/Inputs/WithLabel.tsx index b1be7e7..542fed0 100644 --- a/src/components/Inputs/WithLabel.tsx +++ b/src/components/Inputs/WithLabel.tsx @@ -1,6 +1,5 @@ import { cIf, cJoin } from "helpers/className"; import { isDefinedAndNotEmpty } from "helpers/others"; -import { Immutable } from "helpers/types"; interface Props { label: string | null | undefined; @@ -8,7 +7,7 @@ interface Props { disabled?: boolean; } -export function WithLabel(props: Immutable): JSX.Element { +export function WithLabel(props: Props): JSX.Element { const { label, input, disabled } = props; return (
): JSX.Element { +export function InsetBox(props: Props): JSX.Element { return (
): JSX.Element { +export function ContentLine(props: Props): 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 754c94b..6d3e7c0 100644 --- a/src/components/Library/ScanSet.tsx +++ b/src/components/Library/ScanSet.tsx @@ -8,7 +8,7 @@ import { AppStaticProps } from "graphql/getAppStaticProps"; import { getAssetFilename, getAssetURL, ImageQuality } from "helpers/img"; import { isInteger } from "helpers/numbers"; import { getStatusDescription, isDefinedAndNotEmpty } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { useSmartLanguage } from "hooks/useSmartLanguage"; import { Fragment } from "react"; @@ -40,7 +40,7 @@ interface Props { >["content"]; } -export function ScanSet(props: Immutable): JSX.Element { +export function ScanSet(props: Props): JSX.Element { const { openLightBox, scanSet, slug, title, languages, langui, content } = props; @@ -49,36 +49,34 @@ export function ScanSet(props: Immutable): JSX.Element { languages: languages, languageExtractor: (item) => item.language?.data?.attributes?.code, transform: (item) => { - (item as NonNullable).pages?.data.sort( - (a, b) => { - if ( - a.attributes && - b.attributes && - isDefinedAndNotEmpty(a.attributes.url) && - isDefinedAndNotEmpty(b.attributes.url) - ) { - let aName = getAssetFilename(a.attributes.url); - let bName = getAssetFilename(b.attributes.url); + item.pages?.data.sort((a, b) => { + if ( + a.attributes && + b.attributes && + isDefinedAndNotEmpty(a.attributes.url) && + isDefinedAndNotEmpty(b.attributes.url) + ) { + let aName = getAssetFilename(a.attributes.url); + let bName = getAssetFilename(b.attributes.url); - /* - * If the number is a succession of 0s, make the number - * incrementally smaller than 0 (i.e: 00 becomes -1) - */ - if (aName.replaceAll("0", "").length === 0) { - aName = (1 - aName.length).toString(10); - } - if (bName.replaceAll("0", "").length === 0) { - bName = (1 - bName.length).toString(10); - } - - if (isInteger(aName) && isInteger(bName)) { - return parseInt(aName, 10) - parseInt(bName, 10); - } - return a.attributes.url.localeCompare(b.attributes.url); + /* + * If the number is a succession of 0s, make the number + * incrementally smaller than 0 (i.e: 00 becomes -1) + */ + if (aName.replaceAll("0", "").length === 0) { + aName = (1 - aName.length).toString(10); } - return 0; + if (bName.replaceAll("0", "").length === 0) { + bName = (1 - bName.length).toString(10); + } + + if (isInteger(aName) && isInteger(bName)) { + return parseInt(aName, 10) - parseInt(bName, 10); + } + return a.attributes.url.localeCompare(b.attributes.url); } - ); + return 0; + }); return item; }, }); diff --git a/src/components/Library/ScanSetCover.tsx b/src/components/Library/ScanSetCover.tsx index 5107a40..5d346d9 100644 --- a/src/components/Library/ScanSetCover.tsx +++ b/src/components/Library/ScanSetCover.tsx @@ -9,7 +9,7 @@ import { import { AppStaticProps } from "graphql/getAppStaticProps"; import { getAssetURL, ImageQuality } from "helpers/img"; import { getStatusDescription } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { useSmartLanguage } from "hooks/useSmartLanguage"; import { Fragment } from "react"; @@ -26,7 +26,7 @@ interface Props { langui: AppStaticProps["langui"]; } -export function ScanSetCover(props: Immutable): JSX.Element { +export function ScanSetCover(props: Props): JSX.Element { const { openLightBox, images, languages, langui } = props; const [selectedScan, LanguageSwitcher] = useSmartLanguage({ diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx index a8578bb..ca843e7 100644 --- a/src/components/LightBox.tsx +++ b/src/components/LightBox.tsx @@ -1,4 +1,3 @@ -import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction, useCallback } from "react"; import Hotkeys from "react-hot-keys"; import { useSwipeable } from "react-swipeable"; @@ -19,7 +18,7 @@ interface Props { const SENSIBILITY_SWIPE = 0.5; -export function LightBox(props: Immutable): JSX.Element { +export function LightBox(props: Props): JSX.Element { const { state, setState, images, index, setIndex } = props; const handlePrevious = useCallback(() => { diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index a104cca..8ca575b 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -8,7 +8,7 @@ import { cJoin } from "helpers/className"; import { slugify } from "helpers/formatters"; import { getAssetURL, ImageQuality } from "helpers/img"; import { isDefined, isDefinedAndNotEmpty } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { useLightBox } from "hooks/useLightBox"; import Markdown from "markdown-to-jsx"; import { useRouter } from "next/router"; @@ -20,7 +20,7 @@ interface Props { text: string; } -export function Markdawn(props: Immutable): JSX.Element { +export function Markdawn(props: Props): JSX.Element { const { className, text: rawText } = props; const appLayout = useAppLayout(); const router = useRouter(); diff --git a/src/components/Markdown/TOC.tsx b/src/components/Markdown/TOC.tsx index 0993945..fa70c93 100644 --- a/src/components/Markdown/TOC.tsx +++ b/src/components/Markdown/TOC.tsx @@ -1,5 +1,5 @@ import { slugify } from "helpers/formatters"; -import { Immutable } from "helpers/types"; + import { useRouter } from "next/router"; import { Fragment, useMemo } from "react"; import { preprocessMarkDawn } from "./Markdawn"; @@ -9,7 +9,7 @@ interface Props { title?: string; } -export function TOC(props: Immutable): JSX.Element { +export function TOC(props: Props): JSX.Element { const { text, title } = props; const router = useRouter(); const toc = useMemo( diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx index b3f6037..53ab3d3 100644 --- a/src/components/PanelComponents/NavOption.tsx +++ b/src/components/PanelComponents/NavOption.tsx @@ -2,7 +2,7 @@ import { Ico, Icon } from "components/Ico"; import { ToolTip } from "components/ToolTip"; import { cJoin, cIf } from "helpers/className"; import { isDefinedAndNotEmpty } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { useRouter } from "next/router"; import { MouseEventHandler, useMemo } from "react"; @@ -16,7 +16,7 @@ interface Props { onClick?: MouseEventHandler; } -export function NavOption(props: Immutable): JSX.Element { +export function NavOption(props: Props): JSX.Element { const { url, icon, title, subtitle, border, reduced, onClick } = props; const router = useRouter(); const isActive = useMemo( @@ -66,7 +66,9 @@ export function NavOption(props: Immutable): JSX.Element { {reduced === false && (

{title}

- {isDefinedAndNotEmpty(subtitle) &&

{subtitle}

} + {isDefinedAndNotEmpty(subtitle) && ( +

{subtitle}

+ )}
)}
diff --git a/src/components/PanelComponents/PanelHeader.tsx b/src/components/PanelComponents/PanelHeader.tsx index 5ea6478..5970c18 100644 --- a/src/components/PanelComponents/PanelHeader.tsx +++ b/src/components/PanelComponents/PanelHeader.tsx @@ -1,7 +1,6 @@ import { HorizontalLine } from "components/HorizontalLine"; import { Ico, Icon } from "components/Ico"; import { isDefinedAndNotEmpty } from "helpers/others"; -import { Immutable } from "helpers/types"; interface Props { icon?: Icon; @@ -9,7 +8,7 @@ interface Props { description?: string | null | undefined; } -export function PanelHeader(props: Immutable): JSX.Element { +export function PanelHeader(props: Props): JSX.Element { const { icon, description, title } = props; return ( <> diff --git a/src/components/PanelComponents/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx index 315293c..f82adfd 100644 --- a/src/components/PanelComponents/ReturnButton.tsx +++ b/src/components/PanelComponents/ReturnButton.tsx @@ -4,7 +4,6 @@ import { Button } from "components/Inputs/Button"; import { useAppLayout } from "contexts/AppLayoutContext"; import { AppStaticProps } from "graphql/getAppStaticProps"; import { cJoin } from "helpers/className"; -import { Immutable } from "helpers/types"; interface Props { href: string; @@ -21,7 +20,7 @@ export enum ReturnButtonType { Both = "both", } -export function ReturnButton(props: Immutable): JSX.Element { +export function ReturnButton(props: Props): JSX.Element { const { href, title, langui, displayOn, horizontalLine, className } = props; const appLayout = useAppLayout(); diff --git a/src/components/Panels/ContentPanel.tsx b/src/components/Panels/ContentPanel.tsx index 87c80e6..91f30f3 100644 --- a/src/components/Panels/ContentPanel.tsx +++ b/src/components/Panels/ContentPanel.tsx @@ -1,5 +1,4 @@ import { cJoin } from "helpers/className"; -import { Immutable } from "helpers/types"; interface Props { children: React.ReactNode; @@ -12,7 +11,7 @@ export enum ContentPanelWidthSizes { Full = "full", } -export function ContentPanel(props: Immutable): JSX.Element { +export function ContentPanel(props: Props): JSX.Element { const { width = ContentPanelWidthSizes.Default, children } = props; return ( diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 5c52ba9..0287984 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -4,7 +4,7 @@ import { NavOption } from "components/PanelComponents/NavOption"; import { ToolTip } from "components/ToolTip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { AppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { useMediaDesktop } from "hooks/useMediaQuery"; import Markdown from "markdown-to-jsx"; import Link from "next/link"; @@ -16,7 +16,7 @@ interface Props { langui: AppStaticProps["langui"]; } -export function MainPanel(props: Immutable): JSX.Element { +export function MainPanel(props: Props): JSX.Element { const { langui } = props; const isDesktop = useMediaDesktop(); const { diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx index a3f8397..4e7a231 100644 --- a/src/components/Panels/SubPanel.tsx +++ b/src/components/Panels/SubPanel.tsx @@ -1,10 +1,8 @@ -import { Immutable } from "helpers/types"; - interface Props { children: React.ReactNode; } -export function SubPanel(props: Immutable): JSX.Element { +export function SubPanel(props: Props): JSX.Element { return (
{props.children} diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index 70a8001..218d57f 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -1,6 +1,6 @@ import { useAppLayout } from "contexts/AppLayoutContext"; import { cIf, cJoin } from "helpers/className"; -import { Immutable } from "helpers/types"; + import { Dispatch, SetStateAction, useEffect } from "react"; import Hotkeys from "react-hot-keys"; @@ -15,7 +15,7 @@ interface Props { padding?: boolean; } -export function Popup(props: Immutable): JSX.Element { +export function Popup(props: Props): JSX.Element { const { setState, state, diff --git a/src/components/PostPage.tsx b/src/components/PostPage.tsx index 4d0581d..83167b2 100644 --- a/src/components/PostPage.tsx +++ b/src/components/PostPage.tsx @@ -2,7 +2,7 @@ import { AppStaticProps } from "graphql/getAppStaticProps"; import { getDescription } from "helpers/description"; import { prettySlug } from "helpers/formatters"; import { getStatusDescription } from "helpers/others"; -import { Immutable, PostWithTranslations } from "helpers/types"; +import { PostWithTranslations } from "helpers/types"; import { useSmartLanguage } from "hooks/useSmartLanguage"; import { Fragment, useMemo } from "react"; import { AppLayout } from "./AppLayout"; @@ -33,7 +33,7 @@ interface Props { appendBody?: JSX.Element; } -export function PostPage(props: Immutable): JSX.Element { +export function PostPage(props: Props): JSX.Element { const { post, langui, diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx index 474e564..ff3c330 100644 --- a/src/components/PreviewCard.tsx +++ b/src/components/PreviewCard.tsx @@ -14,7 +14,7 @@ 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"; @@ -52,7 +52,7 @@ interface Props { | { __typename: "anotherHoverlayName" }; } -export function PreviewCard(props: Immutable): JSX.Element { +export function PreviewCard(props: Props): JSX.Element { const { href, thumbnail, diff --git a/src/components/PreviewLine.tsx b/src/components/PreviewLine.tsx index 8884e6e..a76e478 100644 --- a/src/components/PreviewLine.tsx +++ b/src/components/PreviewLine.tsx @@ -2,7 +2,7 @@ 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"; @@ -19,7 +19,7 @@ interface Props { bottomChips?: string[]; } -export function PreviewLine(props: Immutable): JSX.Element { +export function PreviewLine(props: Props): JSX.Element { const { href, thumbnail, diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx index f10c47b..1da4460 100644 --- a/src/components/RecorderChip.tsx +++ b/src/components/RecorderChip.tsx @@ -2,7 +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 { Fragment } from "react"; import { Img } from "./Img"; import { Markdawn } from "./Markdown/Markdawn"; @@ -14,7 +14,7 @@ interface Props { langui: AppStaticProps["langui"]; } -export function RecorderChip(props: Immutable): JSX.Element { +export function RecorderChip(props: Props): JSX.Element { const { recorder, langui } = props; return ( ): JSX.Element { +export function ThumbnailHeader(props: Props): JSX.Element { const { langui, pre_title, diff --git a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx index 7608a46..c85c4bb 100644 --- a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx +++ b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx @@ -7,7 +7,7 @@ import { } from "graphql/generated"; import { AppStaticProps } from "graphql/getAppStaticProps"; import { getStatusDescription } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { Fragment } from "react"; interface Props { @@ -16,7 +16,7 @@ interface Props { langui: AppStaticProps["langui"]; } -export function ChronologyItemComponent(props: Immutable): JSX.Element { +export function ChronologyItemComponent(props: Props): JSX.Element { const { langui } = props; if (props.item.attributes) { diff --git a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx index 6c6cbfb..81ee7af 100644 --- a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx +++ b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx @@ -1,7 +1,6 @@ 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 +10,7 @@ interface Props { langui: AppStaticProps["langui"]; } -export function ChronologyYearComponent(props: Immutable): JSX.Element { +export function ChronologyYearComponent(props: Props): JSX.Element { const { langui } = props; return ( diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index 613a99e..4de374d 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -1,9 +1,5 @@ import { isDefined } from "helpers/others"; -import { - Immutable, - LibraryItemUserStatus, - RequiredNonNullable, -} from "helpers/types"; +import { LibraryItemUserStatus, RequiredNonNullable } from "helpers/types"; import { useDarkMode } from "hooks/useDarkMode"; import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage"; import React, { ReactNode, useContext, useState } from "react"; @@ -120,7 +116,7 @@ interface Props { children: ReactNode; } -export function AppContextProvider(props: Immutable): JSX.Element { +export function AppContextProvider(props: Props): JSX.Element { const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage( "subPanelOpen", initialState.subPanelOpen diff --git a/src/graphql/getAppStaticProps.ts b/src/graphql/getAppStaticProps.ts index fee9a66..6d3b716 100644 --- a/src/graphql/getAppStaticProps.ts +++ b/src/graphql/getAppStaticProps.ts @@ -4,10 +4,10 @@ import { GetWebsiteInterfaceQuery, } from "graphql/generated"; import { getReadySdk } from "graphql/sdk"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; -export type AppStaticProps = Immutable<{ +export type AppStaticProps = { langui: NonNullable< NonNullable< GetWebsiteInterfaceQuery["websiteInterfaces"] @@ -15,7 +15,7 @@ export type AppStaticProps = Immutable<{ >; currencies: NonNullable["data"]; languages: NonNullable["data"]; -}>; +}; export async function getAppStaticProps( context: GetStaticPropsContext diff --git a/src/helpers/contents.ts b/src/helpers/contents.ts index 00967b9..ca98d27 100644 --- a/src/helpers/contents.ts +++ b/src/helpers/contents.ts @@ -1,14 +1,12 @@ -import { ContentWithTranslations, Immutable } from "./types"; +import { ContentWithTranslations } from "./types"; -type Group = Immutable< +type Group = NonNullable< NonNullable< NonNullable< - NonNullable< - NonNullable["data"] - >["attributes"] - >["contents"] - >["data"] ->; + NonNullable["data"] + >["attributes"] + >["contents"] +>["data"]; export function getPreviousContent(group: Group, currentSlug: string) { for (let index = 0; index < group.length; index += 1) { diff --git a/src/helpers/description.ts b/src/helpers/description.ts index c98b41a..cbdc7e5 100644 --- a/src/helpers/description.ts +++ b/src/helpers/description.ts @@ -1,13 +1,13 @@ import { AppStaticProps } from "graphql/getAppStaticProps"; import { prettySlug } from "./formatters"; import { isDefined } from "./others"; -import { Content, Immutable } from "./types"; +import { Content } from "./types"; interface Description { langui: AppStaticProps["langui"]; description?: string | null | undefined; - type?: Immutable; - categories?: Immutable; + type?: Content["type"]; + categories?: Content["categories"]; } export function getDescription(props: Description): string { diff --git a/src/helpers/formatters.ts b/src/helpers/formatters.ts index 7b00940..dd04b2f 100644 --- a/src/helpers/formatters.ts +++ b/src/helpers/formatters.ts @@ -1,9 +1,8 @@ import { DatePickerFragment, PricePickerFragment } from "graphql/generated"; import { AppStaticProps } from "../graphql/getAppStaticProps"; import { convertPrice } from "./numbers"; -import { Immutable } from "./types"; -export function prettyDate(datePicker: Immutable): string { +export function prettyDate(datePicker: DatePickerFragment): string { let result = ""; if (datePicker.year) result += datePicker.year.toString(); if (datePicker.month) @@ -14,7 +13,7 @@ export function prettyDate(datePicker: Immutable): string { } export function prettyPrice( - pricePicker: Immutable, + pricePicker: PricePickerFragment, currencies: AppStaticProps["currencies"], targetCurrencyCode?: string ): string { @@ -58,7 +57,7 @@ export function prettyinlineTitle( } export function prettyItemType( - metadata: Immutable, + metadata: any, langui: AppStaticProps["langui"] ): string | undefined | null { switch (metadata.__typename) { @@ -80,7 +79,7 @@ export function prettyItemType( } export function prettyItemSubType( - metadata: Immutable< + metadata: | { __typename: "ComponentMetadataAudio"; subtype?: { @@ -157,7 +156,6 @@ 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 686edbd..b2687cb 100644 --- a/src/helpers/img.ts +++ b/src/helpers/img.ts @@ -1,5 +1,4 @@ import { UploadImageFragment } from "graphql/generated"; -import { Immutable } from "./types"; export enum ImageQuality { Small = "small", @@ -25,10 +24,7 @@ export function getAssetFilename(path: string): string { return result[0]; } -export function getAssetURL( - url: string, - quality: Immutable -): string { +export function getAssetURL(url: string, quality: ImageQuality): string { let newUrl = url; newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`); newUrl = newUrl.replace(/.jpg$/u, ".webp"); @@ -71,8 +67,8 @@ export function getImgSizesByQuality( } export function getOgImage( - quality: Immutable, - image: Immutable + quality: ImageQuality, + image: UploadImageFragment ): OgImage { const imgSize = getImgSizesByQuality( image.width ?? 0, diff --git a/src/helpers/libraryItem.ts b/src/helpers/libraryItem.ts index 4af1c17..df09011 100644 --- a/src/helpers/libraryItem.ts +++ b/src/helpers/libraryItem.ts @@ -4,14 +4,14 @@ import { AppStaticProps } from "graphql/getAppStaticProps"; import { prettyinlineTitle, prettyDate } from "./formatters"; import { convertPrice } from "./numbers"; import { isDefined } from "./others"; -import { Immutable, LibraryItemUserStatus } from "./types"; +import { LibraryItemUserStatus } from "./types"; type Items = NonNullable["data"]; -type GroupLibraryItems = Map>; +type GroupLibraryItems = Map; export function getGroups( langui: AppStaticProps["langui"], groupByType: number, - items: Immutable + items: Items ): GroupLibraryItems { switch (groupByType) { case 0: { @@ -148,13 +148,13 @@ export function getGroups( export function filterItems( appLayout: AppLayoutState, - items: Immutable, + items: Items, searchName: string, showSubitems: boolean, showPrimaryItems: boolean, showSecondaryItems: boolean, filterUserStatus: LibraryItemUserStatus | undefined -): Immutable { +): Items { return [...items].filter((item) => { if (!showSubitems && !item.attributes?.root_item) return false; if (showSubitems && isUntangibleGroupItem(item.attributes?.metadata?.[0])) { @@ -196,7 +196,6 @@ export function filterItems( } // TODO: Properly type this shit -// Best attempt was Immutable["metadata"]>[number]> export function isUntangibleGroupItem(metadata: any) { return ( metadata && @@ -208,9 +207,9 @@ export function isUntangibleGroupItem(metadata: any) { export function sortBy( orderByType: number, - items: Immutable, + items: Items, currencies: AppStaticProps["currencies"] -): Immutable { +): Items { switch (orderByType) { case 0: return [...items].sort((a, b) => { diff --git a/src/helpers/numbers.ts b/src/helpers/numbers.ts index 0448cc3..414a1d7 100644 --- a/src/helpers/numbers.ts +++ b/src/helpers/numbers.ts @@ -1,11 +1,8 @@ import { GetCurrenciesQuery, PricePickerFragment } from "graphql/generated"; -import { Immutable } from "./types"; export function convertPrice( - pricePicker: Immutable, - targetCurrency: Immutable< - NonNullable["data"][number] - > + pricePicker: PricePickerFragment, + targetCurrency: NonNullable["data"][number] ): number { if ( pricePicker.amount && diff --git a/src/helpers/others.ts b/src/helpers/others.ts index d8d91fe..cdaa15b 100644 --- a/src/helpers/others.ts +++ b/src/helpers/others.ts @@ -4,7 +4,6 @@ import { GetLibraryItemScansQuery, } from "graphql/generated"; import { AppStaticProps } from "../graphql/getAppStaticProps"; -import { Immutable } from "./types"; type SortContentProps = | NonNullable< @@ -18,9 +17,9 @@ type SortContentProps = >["data"][number]["attributes"] >["contents"]; -export function sortContent(contents: Immutable) { +export function sortContent(contents: SortContentProps) { if (contents) { - const newContent = { ...contents } as SortContentProps; + const newContent = { ...contents }; newContent?.data.sort((a, b) => { if ( a.attributes?.range[0]?.__typename === "ComponentRangePageRange" && @@ -33,7 +32,7 @@ export function sortContent(contents: Immutable) { } return 0; }); - return newContent as Immutable; + return newContent; } return contents; } diff --git a/src/helpers/types.ts b/src/helpers/types.ts index 3978d39..973bc84 100644 --- a/src/helpers/types.ts +++ b/src/helpers/types.ts @@ -30,14 +30,6 @@ export interface WikiPageWithTranslations translations: NonNullable; } -type ImmutableBlackList = JSX.Element | React.ReactNode | Function; - -export type Immutable = { - readonly [K in keyof T]: T[K] extends ImmutableBlackList - ? T[K] - : Immutable; -}; - export type RequiredNonNullable = Required<{ [P in keyof T]: NonNullable; }>; diff --git a/src/hooks/useSmartLanguage.tsx b/src/hooks/useSmartLanguage.tsx index 0915d52..d8ec52e 100644 --- a/src/hooks/useSmartLanguage.tsx +++ b/src/hooks/useSmartLanguage.tsx @@ -2,15 +2,15 @@ import { LanguageSwitcher } from "components/Inputs/LanguageSwitcher"; import { useAppLayout } from "contexts/AppLayoutContext"; import { AppStaticProps } from "graphql/getAppStaticProps"; import { isDefined } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { useRouter } from "next/router"; import { useEffect, useMemo, useState } from "react"; interface Props { - items: Immutable; + items: T[]; languages: AppStaticProps["languages"]; - languageExtractor: (item: NonNullable>) => string | undefined; - transform?: (item: NonNullable>) => NonNullable>; + languageExtractor: (item: NonNullable) => string | undefined; + transform?: (item: NonNullable) => NonNullable; } function getPreferredLanguage( @@ -27,7 +27,7 @@ function getPreferredLanguage( export function useSmartLanguage( props: Props -): [Immutable, () => JSX.Element] { +): [T | undefined, () => JSX.Element] { const { items, languageExtractor, @@ -63,13 +63,15 @@ export function useSmartLanguage( ); }, [preferredLanguages, availableLocales, router.locale]); - const selectedTranslation = useMemo( - () => - isDefined(selectedTranslationIndex) - ? transform(items[selectedTranslationIndex]) - : undefined, - [items, selectedTranslationIndex, transform] - ); + const selectedTranslation = useMemo(() => { + if (isDefined(selectedTranslationIndex)) { + const item = items[selectedTranslationIndex]; + if (isDefined(item)) { + return transform(item); + } + } + return undefined; + }, [items, selectedTranslationIndex, transform]); return [ selectedTranslation, diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 836e83b..9ad8bfb 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -5,12 +5,12 @@ import { } from "components/PanelComponents/ReturnButton"; import { ContentPanel } from "components/Panels/ContentPanel"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps {} -export default function FourOhFour(props: Immutable): JSX.Element { +export default function FourOhFour(props: Props): JSX.Element { const { langui } = props; const contentPanel = ( diff --git a/src/pages/500.tsx b/src/pages/500.tsx index 3ce261b..67c84bf 100644 --- a/src/pages/500.tsx +++ b/src/pages/500.tsx @@ -5,12 +5,12 @@ import { } from "components/PanelComponents/ReturnButton"; import { ContentPanel } from "components/Panels/ContentPanel"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps {} -export default function FiveHundred(props: Immutable): JSX.Element { +export default function FiveHundred(props: Props): 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 e35fab1..dab1b83 100644 --- a/src/pages/about-us/accords-handbook.tsx +++ b/src/pages/about-us/accords-handbook.tsx @@ -3,11 +3,8 @@ import { getPostStaticProps, PostStaticProps, } from "graphql/getPostStaticProps"; -import { Immutable } from "helpers/types"; -export default function AccordsHandbook( - props: Immutable -): JSX.Element { +export default function AccordsHandbook(props: PostStaticProps): JSX.Element { const { post, langui, languages, currencies } = props; return ( -): JSX.Element { +export default function AboutUs(props: PostStaticProps): JSX.Element { const { post, langui, languages, currencies } = props; const router = useRouter(); diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx index 52e98c7..de8e770 100644 --- a/src/pages/about-us/index.tsx +++ b/src/pages/about-us/index.tsx @@ -4,12 +4,12 @@ import { NavOption } from "components/PanelComponents/NavOption"; import { PanelHeader } from "components/PanelComponents/PanelHeader"; import { SubPanel } from "components/Panels/SubPanel"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; interface Props extends AppStaticProps {} -export default function AboutUs(props: Immutable): JSX.Element { +export default function AboutUs(props: Props): JSX.Element { const { langui } = props; const subPanel = ( diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx index f510f46..00fcc7f 100644 --- a/src/pages/archives/index.tsx +++ b/src/pages/archives/index.tsx @@ -3,13 +3,13 @@ import { NavOption } from "components/PanelComponents/NavOption"; import { PanelHeader } from "components/PanelComponents/PanelHeader"; import { SubPanel } from "components/Panels/SubPanel"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; import { Icon } from "components/Ico"; interface Props extends AppStaticProps {} -export default function Archives(props: Immutable): JSX.Element { +export default function Archives(props: Props): JSX.Element { const { langui } = props; const subPanel = ( diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx index cd879b1..9d6ed41 100644 --- a/src/pages/chronicles/index.tsx +++ b/src/pages/chronicles/index.tsx @@ -2,13 +2,13 @@ import { AppLayout } from "components/AppLayout"; import { PanelHeader } from "components/PanelComponents/PanelHeader"; import { SubPanel } from "components/Panels/SubPanel"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; import { Icon } from "components/Ico"; interface Props extends AppStaticProps {} -export default function Chronicles(props: Immutable): JSX.Element { +export default function Chronicles(props: Props): JSX.Element { const { langui } = props; const subPanel = ( diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index 87c302c..00f4061 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -27,7 +27,7 @@ import { } from "helpers/formatters"; import { isUntangibleGroupItem } from "helpers/libraryItem"; import { getStatusDescription } from "helpers/others"; -import { ContentWithTranslations, Immutable } from "helpers/types"; +import { ContentWithTranslations } from "helpers/types"; import { useMediaMobile } from "hooks/useMediaQuery"; import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange"; import { useSmartLanguage } from "hooks/useSmartLanguage"; @@ -42,7 +42,7 @@ interface Props extends AppStaticProps { content: ContentWithTranslations; } -export default function Content(props: Immutable): JSX.Element { +export default function Content(props: Props): JSX.Element { const { langui, content, languages, currencies } = props; const isMobile = useMediaMobile(); diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx index 0463f98..27a42a6 100644 --- a/src/pages/contents/index.tsx +++ b/src/pages/contents/index.tsx @@ -13,7 +13,7 @@ import { GetContentsQuery } from "graphql/generated"; 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 { Fragment, useState, useMemo } from "react"; import { Icon } from "components/Ico"; @@ -26,7 +26,7 @@ interface Props extends AppStaticProps { contents: NonNullable["data"]; } -type GroupContentItems = Map>; +type GroupContentItems = Map; const defaultFiltersState = { groupingMethod: -1, @@ -35,7 +35,7 @@ const defaultFiltersState = { searchName: "", }; -export default function Contents(props: Immutable): JSX.Element { +export default function Contents(props: Props): JSX.Element { const { langui, contents, languages } = props; const hoverable = useMediaHoverable(); @@ -250,7 +250,7 @@ export async function getStaticProps( function getGroups( langui: AppStaticProps["langui"], groupByType: number, - items: Immutable + items: Props["contents"] ): GroupContentItems { switch (groupByType) { case 0: { diff --git a/src/pages/dev/checkup/contents.tsx b/src/pages/dev/checkup/contents.tsx index d3c5fa0..6036af6 100644 --- a/src/pages/dev/checkup/contents.tsx +++ b/src/pages/dev/checkup/contents.tsx @@ -9,14 +9,14 @@ import { ToolTip } from "components/ToolTip"; import { DevGetContentsQuery } from "graphql/generated"; 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: Immutable): JSX.Element { +export default function CheckupContents(props: Props): JSX.Element { const { contents } = props; const testReport = testingContent(contents); @@ -110,7 +110,7 @@ type ReportLine = { frontendUrl: string; }; -function testingContent(contents: Immutable): Report { +function testingContent(contents: Props["contents"]): Report { const report: Report = { title: "Contents", lines: [], diff --git a/src/pages/dev/checkup/libraryitems.tsx b/src/pages/dev/checkup/libraryitems.tsx index 1659cb5..3805957 100644 --- a/src/pages/dev/checkup/libraryitems.tsx +++ b/src/pages/dev/checkup/libraryitems.tsx @@ -12,16 +12,14 @@ import { } from "graphql/generated"; 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: Immutable -): JSX.Element { +export default function CheckupLibraryItems(props: Props): JSX.Element { const { libraryItems } = props; const testReport = testingLibraryItem(libraryItems); @@ -115,9 +113,7 @@ type ReportLine = { frontendUrl: string; }; -function testingLibraryItem( - libraryItems: Immutable -): Report { +function testingLibraryItem(libraryItems: Props["libraryItems"]): Report { const report: Report = { title: "Contents", lines: [], diff --git a/src/pages/dev/editor.tsx b/src/pages/dev/editor.tsx index 838779e..4c5977a 100644 --- a/src/pages/dev/editor.tsx +++ b/src/pages/dev/editor.tsx @@ -8,7 +8,7 @@ import { import { Popup } from "components/Popup"; import { ToolTip } from "components/ToolTip"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; import { useCallback, useState } from "react"; import TurndownService from "turndown"; @@ -17,7 +17,7 @@ import { TOC } from "components/Markdown/TOC"; interface Props extends AppStaticProps {} -export default function Editor(props: Immutable): JSX.Element { +export default function Editor(props: Props): JSX.Element { const handleInput = useCallback((text: string) => { setMarkdown(text); }, []); @@ -62,19 +62,20 @@ export default function Editor(props: Immutable): JSX.Element { properties?: Record, addInnerNewLines?: boolean ) { - const textarea = document.querySelector( - "#editorTextArea" - ) as HTMLTextAreaElement; - const { value, selectionStart, selectionEnd } = textarea; + const textarea = + document.querySelector("#editorTextArea"); + if (textarea) { + const { value, selectionStart, selectionEnd } = textarea; - if ( - value.slice(selectionStart - wrapper.length, selectionStart) === - wrapper && - value.slice(selectionEnd, selectionEnd + wrapper.length) === wrapper - ) { - unwrap(wrapper); - } else { - wrap(wrapper, properties, addInnerNewLines); + if ( + value.slice(selectionStart - wrapper.length, selectionStart) === + wrapper && + value.slice(selectionEnd, selectionEnd + wrapper.length) === wrapper + ) { + unwrap(wrapper); + } else { + wrap(wrapper, properties, addInnerNewLines); + } } } @@ -126,23 +127,24 @@ export default function Editor(props: Immutable): JSX.Element { selectedEnd: number ) => { prependLength: number; transformedValue: string } ) { - const textarea = document.querySelector( - "#editorTextArea" - ) as HTMLTextAreaElement; - const { value, selectionStart, selectionEnd } = textarea; + const textarea = + document.querySelector("#editorTextArea"); + if (textarea) { + const { value, selectionStart, selectionEnd } = textarea; - const { prependLength, transformedValue } = transformation( - value, - selectionStart, - selectionEnd - ); + const { prependLength, transformedValue } = transformation( + value, + selectionStart, + selectionEnd + ); - textarea.value = transformedValue; - handleInput(textarea.value); + textarea.value = transformedValue; + handleInput(textarea.value); - textarea.focus(); - textarea.selectionStart = selectionStart + prependLength; - textarea.selectionEnd = selectionEnd + prependLength; + textarea.focus(); + textarea.selectionStart = selectionStart + prependLength; + textarea.selectionEnd = selectionEnd + prependLength; + } } const contentPanel = ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 129ff3b..f61e088 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,9 +3,8 @@ import { getPostStaticProps, PostStaticProps, } from "graphql/getPostStaticProps"; -import { Immutable } from "helpers/types"; -export default function Home(props: Immutable): JSX.Element { +export default function Home(props: PostStaticProps): JSX.Element { const { post, langui, languages, currencies } = props; return ( ["data"][number]["id"]; } -export default function LibrarySlug(props: Immutable): JSX.Element { +export default function LibrarySlug(props: Props): JSX.Element { const { item, itemId, langui, currencies } = props; const appLayout = useAppLayout(); const hoverable = useMediaHoverable(); diff --git a/src/pages/library/[slug]/scans.tsx b/src/pages/library/[slug]/scans.tsx index d506210..72ad4ef 100644 --- a/src/pages/library/[slug]/scans.tsx +++ b/src/pages/library/[slug]/scans.tsx @@ -16,7 +16,7 @@ import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { getReadySdk } from "graphql/sdk"; import { prettyinlineTitle, prettySlug } from "helpers/formatters"; import { isDefined, sortContent } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { useLightBox } from "hooks/useLightBox"; import { GetStaticPathsContext, @@ -34,7 +34,7 @@ interface Props extends AppStaticProps { >["data"][number]["id"]; } -export default function LibrarySlug(props: Immutable): JSX.Element { +export default function LibrarySlug(props: Props): JSX.Element { const { item, langui, languages } = props; const [openLightBox, LightBox] = useLightBox(); sortContent(item?.contents); diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index f6860ff..6878aea 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -12,7 +12,7 @@ import { GetLibraryItemsPreviewQuery } from "graphql/generated"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { getReadySdk } from "graphql/sdk"; import { prettyItemSubType } from "helpers/formatters"; -import { Immutable, LibraryItemUserStatus } from "helpers/types"; +import { LibraryItemUserStatus } from "helpers/types"; import { GetStaticPropsContext } from "next"; import { Fragment, useState, useMemo } from "react"; import { Icon } from "components/Ico"; @@ -48,7 +48,7 @@ const defaultFiltersState = { filterUserStatus: undefined, }; -export default function Library(props: Immutable): JSX.Element { +export default function Library(props: Props): JSX.Element { const { langui, items: libraryItems, currencies } = props; const appLayout = useAppLayout(); const hoverable = useMediaHoverable(); diff --git a/src/pages/merch/index.tsx b/src/pages/merch/index.tsx index 8a4eed5..bf1958e 100644 --- a/src/pages/merch/index.tsx +++ b/src/pages/merch/index.tsx @@ -2,12 +2,12 @@ import { AppLayout } from "components/AppLayout"; import { PanelHeader } from "components/PanelComponents/PanelHeader"; import { SubPanel } from "components/Panels/SubPanel"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; import { Icon } from "components/Ico"; interface Props extends AppStaticProps {} -export default function Merch(props: Immutable): JSX.Element { +export default function Merch(props: Props): JSX.Element { const { langui } = props; const subPanel = ( diff --git a/src/pages/news/[slug].tsx b/src/pages/news/[slug].tsx index f2a0549..5d5f3cf 100644 --- a/src/pages/news/[slug].tsx +++ b/src/pages/news/[slug].tsx @@ -6,7 +6,7 @@ import { } from "graphql/getPostStaticProps"; import { getReadySdk } from "graphql/sdk"; import { isDefined } from "helpers/others"; -import { Immutable } from "helpers/types"; + import { GetStaticPathsContext, GetStaticPathsResult, @@ -15,7 +15,7 @@ import { interface Props extends AppStaticProps, PostStaticProps {} -export default function LibrarySlug(props: Immutable): JSX.Element { +export default function LibrarySlug(props: Props): JSX.Element { const { post, langui, languages, currencies } = props; return ( ): JSX.Element { +export default function News(props: Props): JSX.Element { const { langui } = props; const posts = sortPosts(props.posts); const hoverable = useMediaHoverable(); @@ -144,10 +144,8 @@ export async function getStaticProps( }; } -function sortPosts( - posts: Immutable -): Immutable { - const sortedPosts = [...posts] as Props["posts"]; +function sortPosts(posts: Props["posts"]): Props["posts"] { + const sortedPosts = [...posts]; sortedPosts .sort((a, b) => { const dateA = a.attributes?.date ? prettyDate(a.attributes.date) : "9999"; @@ -155,10 +153,10 @@ function sortPosts( return dateA.localeCompare(dateB); }) .reverse(); - return sortedPosts as Immutable; + return sortedPosts; } -function filterItems(posts: Immutable, searchName: string) { +function filterItems(posts: Props["posts"], searchName: string) { return [...posts].filter((post) => { if (searchName.length > 1) { if ( diff --git a/src/pages/wiki/[slug]/index.tsx b/src/pages/wiki/[slug]/index.tsx index 8b17d42..32aec1b 100644 --- a/src/pages/wiki/[slug]/index.tsx +++ b/src/pages/wiki/[slug]/index.tsx @@ -15,7 +15,7 @@ import DefinitionCard from "components/Wiki/DefinitionCard"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { getReadySdk } from "graphql/sdk"; import { isDefined, isDefinedAndNotEmpty } from "helpers/others"; -import { Immutable, WikiPageWithTranslations } from "helpers/types"; +import { WikiPageWithTranslations } from "helpers/types"; import { useSmartLanguage } from "hooks/useSmartLanguage"; import { GetStaticPathsContext, @@ -27,7 +27,7 @@ interface Props extends AppStaticProps { page: WikiPageWithTranslations; } -export default function WikiPage(props: Immutable): JSX.Element { +export default function WikiPage(props: Props): JSX.Element { const { page, langui, languages } = props; const [selectedTranslation, LanguageSwitcher] = useSmartLanguage({ diff --git a/src/pages/wiki/index.tsx b/src/pages/wiki/index.tsx index f847acf..1826b9a 100644 --- a/src/pages/wiki/index.tsx +++ b/src/pages/wiki/index.tsx @@ -3,7 +3,7 @@ import { NavOption } from "components/PanelComponents/NavOption"; import { PanelHeader } from "components/PanelComponents/PanelHeader"; import { SubPanel } from "components/Panels/SubPanel"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; -import { Immutable } from "helpers/types"; + import { GetStaticPropsContext } from "next"; import { Icon } from "components/Ico"; import { getReadySdk } from "graphql/sdk"; @@ -30,7 +30,7 @@ const defaultFiltersState = { keepInfoVisible: true, }; -export default function Wiki(props: Immutable): JSX.Element { +export default function Wiki(props: Props): JSX.Element { const { langui, languages } = props; const pages = sortPages(props.pages); const hoverable = useMediaHoverable(); @@ -149,19 +149,17 @@ export async function getStaticProps( }; } -function sortPages( - pages: Immutable -): Immutable { - const sortedPages = [...pages] as Props["pages"]; +function sortPages(pages: Props["pages"]): Props["pages"] { + const sortedPages = [...pages]; sortedPages.sort((a, b) => { const slugA = a.attributes?.slug ?? ""; const slugB = b.attributes?.slug ?? ""; return slugA.localeCompare(slugB); }); - return sortedPages as Immutable; + return sortedPages; } -function filterPages(posts: Immutable, searchName: string) { +function filterPages(posts: Props["pages"], searchName: string) { return [...posts].filter((post) => { if (searchName.length > 1) { if (