- {buttonsProps.map((buttonProps, index) => (
-
-
-
- ))}
-
- );
-}
+export const ButtonGroup = ({
+ buttonsProps,
+ className,
+}: Props): JSX.Element => (
+
+ {buttonsProps.map((buttonProps, index) => (
+
+
+
+ ))}
+
+);
+
+/*
+ * ╭──────────────────────╮
+ * ───────────────────────────────────╯ PRIVATE COMPONENTS ╰──────────────────────────────────────
+ */
interface ToolTipWrapperProps {
text: string;
}
-function ToolTipWrapper(props: ToolTipWrapperProps & Wrapper) {
- const { text, children } = props;
- return (
-
{iterateMap(items, (key, value, index) => (
- {props.insertLabels &&
- isDefinedAndNotEmpty(props.insertLabels.get(index)) && (
- >;
}
-export function PageSelector(props: Props): JSX.Element {
- const { page, setPage, maxPage, className } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
- return (
- >;
state: number;
@@ -13,8 +17,15 @@ interface Props {
className?: string;
}
-export function Select(props: Props): JSX.Element {
- const { className, state, options, allowEmpty, setState } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const Select = ({
+ className,
+ state,
+ options,
+ allowEmpty,
+ setState,
+}: Props): JSX.Element => {
const [opened, setOpened] = useState(false);
const toggleOpened = useToggle(setOpened);
@@ -80,4 +91,4 @@ export function Select(props: Props): JSX.Element {
);
-}
+};
diff --git a/src/components/Inputs/Switch.tsx b/src/components/Inputs/Switch.tsx
index f35526c..97eabb3 100644
--- a/src/components/Inputs/Switch.tsx
+++ b/src/components/Inputs/Switch.tsx
@@ -1,8 +1,12 @@
import { cIf, cJoin } from "helpers/className";
-
import { useToggle } from "hooks/useToggle";
import { Dispatch, SetStateAction } from "react";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
setState: Dispatch{props.insertLabels.get(index)}
- )} + {insertLabels && isDefinedAndNotEmpty(insertLabels.get(index)) && ( +{insertLabels.get(index)}
+ )} {
const source = event.target as HTMLElement;
@@ -89,4 +97,4 @@ export function OrderableList(props: Props): JSX.Element {
))}
);
-}
+};
diff --git a/src/components/Inputs/PageSelector.tsx b/src/components/Inputs/PageSelector.tsx
index 440c4b2..3551dcd 100644
--- a/src/components/Inputs/PageSelector.tsx
+++ b/src/components/Inputs/PageSelector.tsx
@@ -1,9 +1,13 @@
import { Icon } from "components/Ico";
import { cJoin } from "helpers/className";
-
import { Dispatch, SetStateAction } from "react";
import { Button } from "./Button";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
className?: string;
maxPage: number;
@@ -11,27 +15,27 @@ interface Props {
setPage: Dispatch
-
- );
-}
+export const PageSelector = ({
+ page,
+ setPage,
+ maxPage,
+ className,
+}: Props): JSX.Element => (
+
+
+);
diff --git a/src/components/Inputs/Select.tsx b/src/components/Inputs/Select.tsx
index 7d08768..f8d9768 100644
--- a/src/components/Inputs/Select.tsx
+++ b/src/components/Inputs/Select.tsx
@@ -1,9 +1,13 @@
import { Ico, Icon } from "components/Ico";
import { cIf, cJoin } from "helpers/className";
-
import { useToggle } from "hooks/useToggle";
import { Dispatch, Fragment, SetStateAction, useState } from "react";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
setState: Dispatch
- {
- setState(event.target.value);
- }}
- />
- {isDefinedAndNotEmpty(state) && (
-
- );
-}
+export const TextInput = ({
+ state,
+ setState,
+ className,
+ name,
+ placeholder,
+}: Props): JSX.Element => (
+
- {
- setState("");
- }}
- />
-
- )}
-
+ {
+ setState(event.target.value);
+ }}
+ />
+ {isDefinedAndNotEmpty(state) && (
+
+);
diff --git a/src/components/Inputs/WithLabel.tsx b/src/components/Inputs/WithLabel.tsx
index 542fed0..166f30e 100644
--- a/src/components/Inputs/WithLabel.tsx
+++ b/src/components/Inputs/WithLabel.tsx
@@ -1,32 +1,33 @@
import { cIf, cJoin } from "helpers/className";
import { isDefinedAndNotEmpty } from "helpers/others";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
label: string | null | undefined;
input: JSX.Element;
disabled?: boolean;
}
-export function WithLabel(props: Props): JSX.Element {
- const { label, input, disabled } = props;
- return (
-
+ {
+ setState("");
+ }}
+ />
+
+ )}
+
- {isDefinedAndNotEmpty(label) && (
-
- );
-}
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const WithLabel = ({ label, input, disabled }: Props): JSX.Element => (
+ - {label}: -
- )} - {input} -
+ {isDefinedAndNotEmpty(label) && (
+
+);
diff --git a/src/components/InsetBox.tsx b/src/components/InsetBox.tsx
index 25d0cc9..8b519ed 100644
--- a/src/components/InsetBox.tsx
+++ b/src/components/InsetBox.tsx
@@ -1,21 +1,26 @@
import { cJoin } from "helpers/className";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
className?: string;
children: React.ReactNode;
id?: string;
}
-export function InsetBox(props: Props): JSX.Element {
- return (
- + {label}: +
+ )} + {input} +
- {props.children}
-
- );
-}
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const InsetBox = ({ id, className, children }: Props): JSX.Element => (
+
+ {children}
+
+);
diff --git a/src/components/Library/PreviewCardCTAs.tsx b/src/components/Library/PreviewCardCTAs.tsx
index 913ac16..3601b89 100644
--- a/src/components/Library/PreviewCardCTAs.tsx
+++ b/src/components/Library/PreviewCardCTAs.tsx
@@ -5,73 +5,75 @@ import { useAppLayout } from "contexts/AppLayoutContext";
import { AppStaticProps } from "graphql/getAppStaticProps";
import { LibraryItemUserStatus } from "helpers/types";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
- id: string | null | undefined;
- displayCTAs: boolean;
+ id: string;
expand?: boolean;
langui: AppStaticProps["langui"];
}
-export function PreviewCardCTAs(props: Props): JSX.Element {
- const { id, displayCTAs, expand = false, langui } = props;
- const appLayout = useAppLayout();
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const PreviewCardCTAs = ({
+ id,
+ expand = false,
+ langui,
+}: Props): JSX.Element => {
+ const appLayout = useAppLayout();
return (
<>
- {displayCTAs && id && (
-
-
-
-
-
-
- )}
+
+
+
+
+
+
);
-}
+};
diff --git a/src/components/Library/ScanSet.tsx b/src/components/Library/ScanSet.tsx
index 73b5873..a8f845d 100644
--- a/src/components/Library/ScanSet.tsx
+++ b/src/components/Library/ScanSet.tsx
@@ -13,10 +13,14 @@ import {
isDefined,
isDefinedAndNotEmpty,
} from "helpers/others";
-
import { useSmartLanguage } from "hooks/useSmartLanguage";
import { Fragment, useCallback, useMemo } from "react";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
openLightBox: (images: string[], index?: number) => void;
scanSet: NonNullable<
@@ -45,10 +49,17 @@ interface Props {
>["content"];
}
-export function ScanSet(props: Props): JSX.Element {
- const { openLightBox, scanSet, slug, title, languages, langui, content } =
- props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const ScanSet = ({
+ openLightBox,
+ scanSet,
+ slug,
+ title,
+ languages,
+ langui,
+ content,
+}: Props): JSX.Element => {
const [selectedScan, LanguageSwitcher, languageSwitcherProps] =
useSmartLanguage({
items: scanSet,
@@ -227,4 +238,4 @@ export function ScanSet(props: Props): JSX.Element {
)}
);
-}
+};
diff --git a/src/components/Library/ScanSetCover.tsx b/src/components/Library/ScanSetCover.tsx
index d4f8bd0..f88e0b6 100644
--- a/src/components/Library/ScanSetCover.tsx
+++ b/src/components/Library/ScanSetCover.tsx
@@ -9,10 +9,14 @@ import {
import { AppStaticProps } from "graphql/getAppStaticProps";
import { getAssetURL, ImageQuality } from "helpers/img";
import { filterHasAttributes, getStatusDescription } from "helpers/others";
-
import { useSmartLanguage } from "hooks/useSmartLanguage";
import { Fragment, useCallback, useMemo } from "react";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
openLightBox: (images: string[], index?: number) => void;
images: NonNullable<
@@ -26,9 +30,14 @@ interface Props {
langui: AppStaticProps["langui"];
}
-export function ScanSetCover(props: Props): JSX.Element {
- const { openLightBox, images, languages, langui } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const ScanSetCover = ({
+ openLightBox,
+ images,
+ languages,
+ langui,
+}: Props): JSX.Element => {
const [selectedScan, LanguageSwitcher, languageSwitcherProps] =
useSmartLanguage({
items: images,
@@ -176,4 +185,4 @@ export function ScanSetCover(props: Props): JSX.Element {
);
}
return <>;
-}
+};
diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx
index ca843e7..41d3999 100644
--- a/src/components/LightBox.tsx
+++ b/src/components/LightBox.tsx
@@ -6,6 +6,18 @@ import { Button } from "./Inputs/Button";
import { Popup } from "./Popup";
import { Icon } from "components/Ico";
+/*
+ * ╭─────────────╮
+ * ────────────────────────────────────────╯ CONSTANTS ╰──────────────────────────────────────────
+ */
+
+const SENSIBILITY_SWIPE = 0.5;
+
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
setState:
| Dispatch{langui.table_of_contents}
+ + + ); +}; + +/* + * ╭──────────────────────╮ + * ───────────────────────────────────╯ PRIVATE COMPONENTS ╰────────────────────────────────────── + */ + +interface TocInterface { + title: string; + slug: string; + children: TocInterface[]; } -function typographicRules(text: string): string { +interface LevelProps { + tocchildren: TocInterface[]; + parentNumbering: string; +} + +const TocLevel = ({ + tocchildren, + parentNumbering, +}: LevelProps): JSX.Element => { + const router = useRouter(); + + return ( +-
+ {tocchildren.map((child, childIndex) => (
+
- + {`${parentNumbering}${ + childIndex + 1 + }.`}{" "} + router.replace(`#${child.slug}`)}> + {{child.title}} + + +
getTocFromMarkdawn(preprocessMarkDawn(text), title),
- [text, title]
- );
-
- return (
- <>
- {/* TODO: add to LANGUI */}
- Table of content
-
-
- );
-}
-
-interface LevelProps {
- tocchildren: TOCInterface[];
- parentNumbering: string;
-}
-
-function TOCLevel(props: LevelProps): JSX.Element {
- const router = useRouter();
- const { tocchildren, parentNumbering } = props;
- return (
-
- {tocchildren.map((child, childIndex) => (
-
- -
- {`${parentNumbering}${
- childIndex + 1
- }.`}{" "}
- router.replace(`#${child.slug}`)}>
- {{child.title}}
-
-
-
- ))}
-
- );
-}
-
-interface TOCInterface {
- title: string;
- slug: string;
- children: TOCInterface[];
-}
-
-function getTocFromMarkdawn(text: string, title?: string): TOCInterface {
- const toc: TOCInterface = {
- title: title ?? "Return to top",
- slug: slugify(title),
- children: [],
- };
- let h2 = -1;
- let h3 = -1;
- let h4 = -1;
- let h5 = -1;
- let scenebreak = 0;
- let scenebreakIndex = 0;
-
- function getTitle(line: string): string {
- return line.slice(line.indexOf(`">`) + 2, line.indexOf("`));
- }
-
- text.split("\n").map((line) => {
- if (line.startsWith("
-
+
+ {isDefined(icon) &&
- {isDefined(icon) &&
- {message}
-
-
+ {message}
+
- );
-}
+
+);
diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx
index e616edf..6226904 100644
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@@ -2,10 +2,14 @@ import { Ico, Icon } from "components/Ico";
import { ToolTip } from "components/ToolTip";
import { cJoin, cIf } from "helpers/className";
import { isDefinedAndNotEmpty } from "helpers/others";
-
import { useRouter } from "next/router";
import { MouseEventHandler, useMemo } from "react";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
url: string;
icon?: Icon;
@@ -16,16 +20,17 @@ interface Props {
onClick?: MouseEventHandler;
}
-export function NavOption(props: Props): JSX.Element {
- const {
- url,
- icon,
- title,
- subtitle,
- border = false,
- reduced = false,
- onClick,
- } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const NavOption = ({
+ url,
+ icon,
+ title,
+ subtitle,
+ border = false,
+ reduced = false,
+ onClick,
+}: Props): JSX.Element => {
const router = useRouter();
const isActive = useMemo(
() => router.asPath.startsWith(url),
@@ -82,4 +87,4 @@ export function NavOption(props: Props): JSX.Element {
);
-}
+};
diff --git a/src/components/PanelComponents/PanelHeader.tsx b/src/components/PanelComponents/PanelHeader.tsx
index 5970c18..e369885 100644
--- a/src/components/PanelComponents/PanelHeader.tsx
+++ b/src/components/PanelComponents/PanelHeader.tsx
@@ -2,22 +2,30 @@ import { HorizontalLine } from "components/HorizontalLine";
import { Ico, Icon } from "components/Ico";
import { isDefinedAndNotEmpty } from "helpers/others";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
icon?: Icon;
title: string | null | undefined;
description?: string | null | undefined;
}
-export function PanelHeader(props: Props): JSX.Element {
- const { icon, description, title } = props;
- return (
- <>
-
- {icon && {title}
- {isDefinedAndNotEmpty(description) && {description}
}
-
- {title}
+ {isDefinedAndNotEmpty(description) && {description}
}
+
+
- {children}
-
-
- );
-}
+export const ContentPanel = ({
+ width = ContentPanelWidthSizes.Default,
+ children,
+ className,
+}: Props): JSX.Element => (
+
+
+ {children}
+
+
+);
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index 63d7dd5..d992bf5 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -12,12 +12,18 @@ import { Icon } from "components/Ico";
import { cIf, cJoin } from "helpers/className";
import { isDefinedAndNotEmpty } from "helpers/others";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
langui: AppStaticProps["langui"];
}
-export function MainPanel(props: Props): JSX.Element {
- const { langui } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const MainPanel = ({ langui }: Props): JSX.Element => {
const isDesktop = useMediaDesktop();
const {
mainPanelReduced = false,
@@ -239,4 +245,4 @@ export function MainPanel(props: Props): JSX.Element {
);
-}
+};
diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx
index 4e7a231..4bc9823 100644
--- a/src/components/Panels/SubPanel.tsx
+++ b/src/components/Panels/SubPanel.tsx
@@ -1,11 +1,16 @@
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
children: React.ReactNode;
}
-export function SubPanel(props: Props): JSX.Element {
- return (
-
- {props.children}
-
- );
-}
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const SubPanel = ({ children }: Props): JSX.Element => (
+
+ {children}
+
+);
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 0037f99..6a65e50 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -1,9 +1,13 @@
import { useAppLayout } from "contexts/AppLayoutContext";
import { cIf, cJoin } from "helpers/className";
-
import { Dispatch, SetStateAction, useEffect } from "react";
import Hotkeys from "react-hot-keys";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
setState:
| Dispatch>
@@ -15,16 +19,16 @@ interface Props {
padding?: boolean;
}
-export function Popup(props: Props): JSX.Element {
- const {
- setState,
- state,
- children,
- fillViewport,
- hideBackground = false,
- padding = true,
- } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const Popup = ({
+ setState,
+ state,
+ children,
+ fillViewport,
+ hideBackground = false,
+ padding = true,
+}: Props): JSX.Element => {
const { setMenuGestures } = useAppLayout();
useEffect(() => {
@@ -77,4 +81,4 @@ export function Popup(props: Props): JSX.Element {
);
-}
+};
diff --git a/src/components/PostPage.tsx b/src/components/PostPage.tsx
index 1c9f7d6..f4c8481 100644
--- a/src/components/PostPage.tsx
+++ b/src/components/PostPage.tsx
@@ -8,8 +8,7 @@ import { Fragment, useCallback, useMemo } from "react";
import { AppLayout } from "./AppLayout";
import { Chip } from "./Chip";
import { HorizontalLine } from "./HorizontalLine";
-import { Markdawn } from "./Markdown/Markdawn";
-import { TOC } from "./Markdown/TOC";
+import { Markdawn, TableOfContents } from "./Markdown/Markdawn";
import { ReturnButton, ReturnButtonType } from "./PanelComponents/ReturnButton";
import { ContentPanel } from "./Panels/ContentPanel";
import { SubPanel } from "./Panels/SubPanel";
@@ -17,6 +16,11 @@ import { RecorderChip } from "./RecorderChip";
import { ThumbnailHeader } from "./ThumbnailHeader";
import { ToolTip } from "./ToolTip";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
post: PostWithTranslations;
langui: AppStaticProps["langui"];
@@ -33,22 +37,23 @@ interface Props {
appendBody?: JSX.Element;
}
-export function PostPage(props: Props): JSX.Element {
- const {
- post,
- langui,
- languages,
- returnHref,
- returnTitle,
- displayCredits,
- displayToc,
- displayThumbnailHeader,
- displayLanguageSwitcher,
- appendBody,
- prependBody,
- } = props;
- const displayTitle = props.displayTitle ?? true;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const PostPage = ({
+ post,
+ langui,
+ languages,
+ returnHref,
+ returnTitle,
+ displayCredits,
+ displayToc,
+ displayThumbnailHeader,
+ displayLanguageSwitcher,
+ appendBody,
+ prependBody,
+ displayTitle = true,
+ currencies,
+}: Props): JSX.Element => {
const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] =
useSmartLanguage({
items: post.translations,
@@ -124,7 +129,9 @@ export function PostPage(props: Props): JSX.Element {
)}
- {displayToc &&
-
- )}
- {metadata.price && metadata.currencies && (
-
-
- )}
- {metadata.views && (
-
-
- )}
- {metadata.author && (
-
-
- )}
-
- ) : (
- <>
- );
+ const metadataJSX = useMemo(
+ () =>
+ metadata && (metadata.release_date || metadata.price) ? (
+
+ {metadata.release_date && (
+
+
+ )}
+ {metadata.price && metadata.currencies && (
+
+
+ )}
+ {metadata.views && (
+
+
+ )}
+ {metadata.author && (
+
+
+ )}
+
+ ) : (
+ <>
+ ),
+ [appLayout.currency, metadata]
+ );
return (
@@ -241,12 +248,13 @@ export function PreviewCard(props: Props): JSX.Element {
)}
@@ -287,7 +295,9 @@ export function PreviewCard(props: Props): JSX.Element {
);
-}
+};
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
interface TranslatedProps
extends Omit {
@@ -302,13 +312,14 @@ interface TranslatedProps
languages: AppStaticProps["languages"];
}
-export function TranslatedPreviewCard(props: TranslatedProps): JSX.Element {
- const {
- translations = [{ title: props.slug, language: "default" }],
- slug,
- languages,
- } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const TranslatedPreviewCard = ({
+ slug,
+ translations = [{ title: slug, language: "default" }],
+ languages,
+ ...otherProps
+}: TranslatedProps): JSX.Element => {
const [selectedTranslation] = useSmartLanguage({
items: translations,
languages: languages,
@@ -324,7 +335,7 @@ export function TranslatedPreviewCard(props: TranslatedProps): JSX.Element {
title={selectedTranslation?.title ?? prettySlug(slug)}
subtitle={selectedTranslation?.subtitle}
description={selectedTranslation?.description}
- {...props}
+ {...otherProps}
/>
);
-}
+};
diff --git a/src/components/PreviewLine.tsx b/src/components/PreviewLine.tsx
index 3ff73c0..1c674f8 100644
--- a/src/components/PreviewLine.tsx
+++ b/src/components/PreviewLine.tsx
@@ -2,13 +2,17 @@ import { UploadImageFragment } from "graphql/generated";
import { AppStaticProps } from "graphql/getAppStaticProps";
import { prettySlug } from "helpers/formatters";
import { ImageQuality } from "helpers/img";
-
import { useSmartLanguage } from "hooks/useSmartLanguage";
import Link from "next/link";
import { useCallback } from "react";
import { Chip } from "./Chip";
import { Img } from "./Img";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
thumbnail?: UploadImageFragment | string | null | undefined;
thumbnailAspectRatio?: string;
@@ -20,60 +24,60 @@ interface Props {
bottomChips?: string[];
}
-function PreviewLine(props: Props): JSX.Element {
- const {
- href,
- thumbnail,
- pre_title,
- title,
- subtitle,
- topChips,
- bottomChips,
- thumbnailAspectRatio,
- } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
- return (
-
-
- {thumbnail ? (
-
- ![]()
-
- ) : (
-
- )}
-
- {topChips && topChips.length > 0 && (
-
- {topChips.map((text, index) => (
- {text}
- ))}
-
- )}
-
- {pre_title && {pre_title}
}
- {title && (
- {title}
- )}
- {subtitle && {subtitle}
}
-
- {bottomChips && bottomChips.length > 0 && (
-
- {bottomChips.map((text, index) => (
-
- {text}
-
- ))}
-
- )}
+ >
+ {thumbnail ? (
+
+ ![]()
+ ) : (
+
+ )}
+
+ {topChips && topChips.length > 0 && (
+
+ {topChips.map((text, index) => (
+ {text}
+ ))}
+
+ )}
+
+ {pre_title && {pre_title}
}
+ {title && (
+ {title}
+ )}
+ {subtitle && {subtitle}
}
+
+ {bottomChips && bottomChips.length > 0 && (
+
+ {bottomChips.map((text, index) => (
+
+ {text}
+
+ ))}
+
+ )}
-
- );
-}
+
+
+);
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
interface TranslatedProps
extends Omit {
@@ -88,13 +92,14 @@ interface TranslatedProps
languages: AppStaticProps["languages"];
}
-export function TranslatedPreviewLine(props: TranslatedProps): JSX.Element {
- const {
- translations = [{ title: props.slug, language: "default" }],
- slug,
- languages,
- } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const TranslatedPreviewLine = ({
+ slug,
+ translations = [{ title: slug, language: "default" }],
+ languages,
+ ...otherProps
+}: TranslatedProps): JSX.Element => {
const [selectedTranslation] = useSmartLanguage({
items: translations,
languages: languages,
@@ -109,7 +114,7 @@ export function TranslatedPreviewLine(props: TranslatedProps): JSX.Element {
pre_title={selectedTranslation?.pre_title}
title={selectedTranslation?.title ?? prettySlug(slug)}
subtitle={selectedTranslation?.subtitle}
- {...props}
+ {...otherProps}
/>
);
-}
+};
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx
index 9aadef6..100508c 100644
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@@ -3,64 +3,67 @@ import { RecorderChipFragment } from "graphql/generated";
import { AppStaticProps } from "graphql/getAppStaticProps";
import { ImageQuality } from "helpers/img";
import { filterHasAttributes } from "helpers/others";
-
import { Fragment } from "react";
import { Img } from "./Img";
import { Markdawn } from "./Markdown/Markdawn";
import { ToolTip } from "./ToolTip";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
className?: string;
recorder: RecorderChipFragment;
langui: AppStaticProps["langui"];
}
-export function RecorderChip(props: Props): JSX.Element {
- const { recorder, langui } = props;
- return (
-
-
- {recorder.avatar?.data?.attributes && (
- ![]()
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const RecorderChip = ({ recorder, langui }: Props): JSX.Element => (
+
+
+ {recorder.avatar?.data?.attributes && (
+ ![]()
+ )}
+
+ {recorder.username}
+ {recorder.languages?.data && recorder.languages.data.length > 0 && (
+
+ {langui.languages}:
+ {filterHasAttributes(recorder.languages.data).map(
+ (language) => (
+
+ {language.attributes.code.toUpperCase()}
+
+ )
+ )}
+
+ )}
+ {recorder.pronouns && (
+
+ {langui.pronouns}:
+ {recorder.pronouns}
+
)}
-
- {recorder.username}
- {recorder.languages?.data && recorder.languages.data.length > 0 && (
-
- {langui.languages}:
- {filterHasAttributes(recorder.languages.data).map(
- (language) => (
-
- {language.attributes.code.toUpperCase()}
-
- )
- )}
-
- )}
- {recorder.pronouns && (
-
- {langui.pronouns}:
- {recorder.pronouns}
-
- )}
-
- {recorder.bio?.[0] &&
- {recorder.anonymize
- ? `Recorder#${recorder.anonymous_code}`
- : recorder.username}
-
-
- );
-}
+ {recorder.bio?.[0] &&
+ {recorder.anonymize
+ ? `Recorder#${recorder.anonymous_code}`
+ : recorder.username}
+
+
+);
diff --git a/src/components/ThumbnailHeader.tsx b/src/components/ThumbnailHeader.tsx
index 5ef458b..cd76014 100644
--- a/src/components/ThumbnailHeader.tsx
+++ b/src/components/ThumbnailHeader.tsx
@@ -7,9 +7,13 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
import { prettyinlineTitle, prettySlug, slugify } from "helpers/formatters";
import { getAssetURL, ImageQuality } from "helpers/img";
import { filterHasAttributes } from "helpers/others";
-
import { useLightBox } from "hooks/useLightBox";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
pre_title?: string | null | undefined;
title: string | null | undefined;
@@ -26,19 +30,19 @@ interface Props {
languageSwitcher?: JSX.Element;
}
-export function ThumbnailHeader(props: Props): JSX.Element {
- const {
- langui,
- pre_title,
- title,
- subtitle,
- thumbnail,
- type,
- categories,
- description,
- languageSwitcher,
- } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const ThumbnailHeader = ({
+ langui,
+ pre_title,
+ title,
+ subtitle,
+ thumbnail,
+ type,
+ categories,
+ description,
+ languageSwitcher,
+}: Props): JSX.Element => {
const [openLightBox, LightBox] = useLightBox();
return (
@@ -105,4 +109,4 @@ export function ThumbnailHeader(props: Props): JSX.Element {
)}
);
-}
+};
diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx
index dea0c8a..be6c154 100644
--- a/src/components/ToolTip.tsx
+++ b/src/components/ToolTip.tsx
@@ -2,20 +2,30 @@ import Tippy, { TippyProps } from "@tippyjs/react";
import { cJoin } from "helpers/className";
import "tippy.js/animations/scale-subtle.css";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props extends TippyProps {}
-export function ToolTip(props: Props): JSX.Element {
- const newProps: Props = {
- className: cJoin("text-sm", props.className),
- delay: [150, 0],
- interactive: true,
- animation: "scale-subtle",
- ...props,
- };
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
- return (
-
- {props.children}
-
- );
-}
+export const ToolTip = ({
+ className,
+ delay = [150, 0],
+ interactive = true,
+ animation = "scale-subtle",
+ children,
+ ...otherProps
+}: Props): JSX.Element => (
+
+ {children}
+
+);
diff --git a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
index 0284d5a..9fe92d2 100644
--- a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
+++ b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
@@ -20,36 +20,35 @@ interface Props {
langui: AppStaticProps["langui"];
}
-export function ChronologyItemComponent(props: Props): JSX.Element {
- const { langui } = props;
-
- if (props.item.attributes) {
+export const ChronologyItemComponent = ({
+ langui,
+ item,
+ displayYear,
+}: Props): JSX.Element => {
+ if (item.attributes) {
return (
- {props.displayYear && (
+ {displayYear && (
- {generateYear(
- props.item.attributes.displayed_date,
- props.item.attributes.year
- )}
+ {generateYear(item.attributes.displayed_date, item.attributes.year)}
)}
- {generateDate(props.item.attributes.month, props.item.attributes.day)}
+ {generateDate(item.attributes.month, item.attributes.day)}
- {props.item.attributes.events &&
- filterHasAttributes(props.item.attributes.events, [
+ {item.attributes.events &&
+ filterHasAttributes(item.attributes.events, [
"id",
"translations",
]).map((event) => (
@@ -123,31 +122,29 @@ export function ChronologyItemComponent(props: Props): JSX.Element {
}
return <>;
-}
+};
-function generateAnchor(
+const generateAnchor = (
year: number | undefined,
month: number | null | undefined,
day: number | null | undefined
-): string {
+): string => {
let result = "";
if (year) result += year;
if (month) result += `- ${month.toString().padStart(2, "0")}`;
if (day) result += `- ${day.toString().padStart(2, "0")}`;
return result;
-}
+};
-function generateYear(
+const generateYear = (
displayed_date: string | null | undefined,
year: number | undefined
-): string {
- return displayed_date ?? year?.toString() ?? "";
-}
+): string => displayed_date ?? year?.toString() ?? "";
-function generateDate(
+const generateDate = (
month: number | null | undefined,
day: number | null | undefined
-): string {
+): string => {
const lut = [
"Jan",
"Feb",
@@ -172,4 +169,4 @@ function generateDate(
}
return result;
-}
+};
diff --git a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
index 81ee7af..30b710c 100644
--- a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
+++ b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
@@ -10,22 +10,22 @@ interface Props {
langui: AppStaticProps["langui"];
}
-export function ChronologyYearComponent(props: Props): JSX.Element {
- const { langui } = props;
-
- return (
- 1 ? props.year.toString() : undefined}
- >
- {props.items.map((item, index) => (
- {`Definition ${index}`}
+ {`${langui.definition} ${index}`}
{selectedTranslation?.status && (
{selectedTranslation?.definition}
);
-}
+};
+export default DefinitionCard;
diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx
index 9c7dc64..5002935 100644
--- a/src/contexts/AppLayoutContext.tsx
+++ b/src/contexts/AppLayoutContext.tsx
@@ -106,15 +106,13 @@ const initialState: RequiredNonNullable = {
const AppContext = React.createContext(initialState);
-export function useAppLayout(): AppLayoutState {
- return useContext(AppContext);
-}
+export const useAppLayout = (): AppLayoutState => useContext(AppContext);
interface Props {
children: ReactNode;
}
-export function AppContextProvider(props: Props): JSX.Element {
+export const AppContextProvider = (props: Props): JSX.Element => {
const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage(
"subPanelOpen",
initialState.subPanelOpen
@@ -176,43 +174,43 @@ export function AppContextProvider(props: Props): JSX.Element {
initialState.libraryItemUserStatus
);
- function toggleSubPanelOpen() {
+ const toggleSubPanelOpen = () => {
setSubPanelOpen((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleConfigPanelOpen() {
+ const toggleConfigPanelOpen = () => {
setConfigPanelOpen((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleSearchPanelOpen() {
+ const toggleSearchPanelOpen = () => {
setSearchPanelOpen((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleMainPanelReduced() {
+ const toggleMainPanelReduced = () => {
setMainPanelReduced((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleMainPanelOpen() {
+ const toggleMainPanelOpen = () => {
setMainPanelOpen((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleDarkMode() {
+ const toggleDarkMode = () => {
setDarkMode((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleMenuGestures() {
+ const toggleMenuGestures = () => {
setMenuGestures((current) => !current);
- }
+ };
- function toggleSelectedThemeMode() {
+ const toggleSelectedThemeMode = () => {
setSelectedThemeMode((current) =>
isDefined(current) ? !current : current
);
- }
+ };
- function toggleDyslexic() {
+ const toggleDyslexic = () => {
setDyslexic((current) => (isDefined(current) ? !current : current));
- }
+ };
return (
);
-}
+};
diff --git a/src/graphql/getAppStaticProps.ts b/src/graphql/getAppStaticProps.ts
index 6d3b716..ee040d9 100644
--- a/src/graphql/getAppStaticProps.ts
+++ b/src/graphql/getAppStaticProps.ts
@@ -17,9 +17,9 @@ export type AppStaticProps = {
languages: NonNullable["data"];
};
-export async function getAppStaticProps(
+export const getAppStaticProps = async (
context: GetStaticPropsContext
-): Promise {
+): Promise => {
const sdk = getReadySdk();
const languages = (await sdk.getLanguages()).languages;
@@ -53,4 +53,4 @@ export async function getAppStaticProps(
};
return appStaticProps;
-}
+};
diff --git a/src/graphql/getPostStaticProps.ts b/src/graphql/getPostStaticProps.ts
index 16c6590..97b5a46 100644
--- a/src/graphql/getPostStaticProps.ts
+++ b/src/graphql/getPostStaticProps.ts
@@ -1,5 +1,5 @@
import { PostWithTranslations } from "helpers/types";
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps, GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "./getAppStaticProps";
import { getReadySdk } from "./sdk";
@@ -7,12 +7,8 @@ export interface PostStaticProps extends AppStaticProps {
post: PostWithTranslations;
}
-export function getPostStaticProps(
- slug: string
-): (
- context: GetStaticPropsContext
-) => Promise<{ notFound: boolean } | { props: PostStaticProps }> {
- return async (context: GetStaticPropsContext) => {
+export const getPostStaticProps = (slug: string): GetStaticProps => {
+ return async (context) => {
const sdk = getReadySdk();
const post = await sdk.getPost({
slug: slug,
@@ -29,4 +25,4 @@ export function getPostStaticProps(
}
return { notFound: true };
};
-}
+};
diff --git a/src/graphql/operations/getWebsiteInterface.graphql b/src/graphql/operations/getWebsiteInterface.graphql
index 3b07eed..b6ad3c2 100644
--- a/src/graphql/operations/getWebsiteInterface.graphql
+++ b/src/graphql/operations/getWebsiteInterface.graphql
@@ -154,6 +154,11 @@ query getWebsiteInterface($language_code: String) {
only_display_items_i_want
only_display_unmarked_items
display_all_items
+ table_of_contents
+ definition
+ no_results_message
+ all
+ special_pages
}
}
}
diff --git a/src/graphql/sdk.ts b/src/graphql/sdk.ts
index 9b05ba5..190df8b 100644
--- a/src/graphql/sdk.ts
+++ b/src/graphql/sdk.ts
@@ -1,9 +1,9 @@
import { GraphQLClient } from "graphql-request";
import { getSdk } from "graphql/generated";
-export function getReadySdk() {
+export const getReadySdk = () => {
const client = new GraphQLClient(process.env.URL_GRAPHQL ?? "", {
headers: { Authorization: `Bearer ${process.env.ACCESS_TOKEN}` },
});
return getSdk(client);
-}
+};
diff --git a/src/helpers/className.ts b/src/helpers/className.ts
index 9e983fe..d7473de 100644
--- a/src/helpers/className.ts
+++ b/src/helpers/className.ts
@@ -1,11 +1,11 @@
-export function cIf(
+export const cIf = (
condition: boolean | null | undefined | string,
ifTrueCss: string,
ifFalseCss?: string
-) {
+) => {
return condition ? ifTrueCss : ifFalseCss ?? "";
-}
+};
-export function cJoin(...args: (string | undefined)[]): string {
+export const cJoin = (...args: (string | undefined)[]): string => {
return args.filter((elem) => elem).join(" ");
-}
+};
diff --git a/src/helpers/component.tsx b/src/helpers/component.tsx
index fcbcec2..ff9d575 100644
--- a/src/helpers/component.tsx
+++ b/src/helpers/component.tsx
@@ -2,16 +2,21 @@ export interface Wrapper {
children: React.ReactNode;
}
-export function ConditionalWrapper(props: {
+interface Props {
isWrapping: boolean;
children: React.ReactNode;
wrapper: (wrapperProps: T & Wrapper) => JSX.Element;
wrapperProps: T;
-}): JSX.Element {
- const { isWrapping, children, wrapper: Wrapper, wrapperProps } = props;
- return isWrapping ? (
+}
+
+export const ConditionalWrapper = ({
+ isWrapping,
+ children,
+ wrapper: Wrapper,
+ wrapperProps,
+}: Props): JSX.Element =>
+ isWrapping ? (
{children}
) : (
<>{children}
);
-}
diff --git a/src/helpers/description.ts b/src/helpers/description.ts
index cbdc7e5..03ee88c 100644
--- a/src/helpers/description.ts
+++ b/src/helpers/description.ts
@@ -10,9 +10,12 @@ interface Description {
categories?: Content["categories"];
}
-export function getDescription(props: Description): string {
- const { langui, description: text, type, categories } = props;
-
+export const getDescription = ({
+ langui,
+ description: text,
+ type,
+ categories,
+}: Description): string => {
let description = "";
// TEXT
@@ -44,15 +47,15 @@ export function getDescription(props: Description): string {
}
return description;
-}
+};
-function prettyMarkdown(markdown: string): string {
+const prettyMarkdown = (markdown: string): string => {
return markdown.replace(/[*]/gu, "").replace(/[_]/gu, "");
-}
+};
-function prettyChip(items: (string | undefined)[]): string {
+const prettyChip = (items: (string | undefined)[]): string => {
return items
.filter((item) => isDefined(item))
.map((item) => `(${item})`)
.join(" ");
-}
+};
diff --git a/src/helpers/formatters.ts b/src/helpers/formatters.ts
index bc71cdf..11412e2 100644
--- a/src/helpers/formatters.ts
+++ b/src/helpers/formatters.ts
@@ -2,7 +2,7 @@ import { DatePickerFragment, PricePickerFragment } from "graphql/generated";
import { AppStaticProps } from "../graphql/getAppStaticProps";
import { convertPrice } from "./numbers";
-export function prettyDate(datePicker: DatePickerFragment): string {
+export const prettyDate = (datePicker: DatePickerFragment): string => {
let result = "";
if (datePicker.year) result += datePicker.year.toString();
if (datePicker.month)
@@ -10,13 +10,13 @@ export function prettyDate(datePicker: DatePickerFragment): string {
if (datePicker.day)
result += `/${datePicker.day.toString().padStart(2, "0")}`;
return result;
-}
+};
-export function prettyPrice(
+export const prettyPrice = (
pricePicker: PricePickerFragment,
currencies: AppStaticProps["currencies"],
targetCurrencyCode?: string
-): string {
+): string => {
if (!targetCurrencyCode) return "";
let result = "";
currencies.map((currency) => {
@@ -31,9 +31,9 @@ export function prettyPrice(
}
});
return result;
-}
+};
-export function prettySlug(slug?: string, parentSlug?: string): string {
+export const prettySlug = (slug?: string, parentSlug?: string): string => {
if (slug) {
if (parentSlug && slug.startsWith(parentSlug))
slug = slug.substring(parentSlug.length + 1);
@@ -42,24 +42,24 @@ export function prettySlug(slug?: string, parentSlug?: string): string {
return capitalizeString(slug);
}
return "";
-}
+};
-export function prettyinlineTitle(
+export const prettyinlineTitle = (
pretitle: string | undefined | null,
title: string | undefined | null,
subtitle: string | undefined | null
-): string {
+): string => {
let result = "";
if (pretitle) result += `${pretitle}: `;
result += title;
if (subtitle) result += ` - ${subtitle}`;
return result;
-}
+};
-export function prettyItemType(
+export const prettyItemType = (
metadata: any,
langui: AppStaticProps["langui"]
-): string | undefined | null {
+): string | undefined | null => {
switch (metadata.__typename) {
case "ComponentMetadataAudio":
return langui.audio;
@@ -76,9 +76,9 @@ export function prettyItemType(
default:
return "";
}
-}
+};
-export function prettyItemSubType(
+export const prettyItemSubType = (
metadata:
| {
__typename: "ComponentMetadataAudio";
@@ -156,7 +156,7 @@ export function prettyItemSubType(
}
| { __typename: "Error" }
| null
-): string {
+): string => {
if (metadata) {
switch (metadata.__typename) {
case "ComponentMetadataAudio":
@@ -195,9 +195,9 @@ export function prettyItemSubType(
}
return "";
/* eslint-enable @typescript-eslint/no-explicit-any */
-}
+};
-export function prettyShortenNumber(number: number): string {
+export const prettyShortenNumber = (number: number): string => {
if (number > 1000000) {
return number.toLocaleString(undefined, {
maximumSignificantDigits: 3,
@@ -210,9 +210,9 @@ export function prettyShortenNumber(number: number): string {
);
}
return number.toLocaleString();
-}
+};
-export function prettyDuration(seconds: number): string {
+export const prettyDuration = (seconds: number): string => {
let hours = 0;
let minutes = 0;
while (seconds > 60) {
@@ -228,36 +228,36 @@ export function prettyDuration(seconds: number): string {
result += minutes.toString().padStart(2, "0") + ":";
result += seconds.toString().padStart(2, "0");
return result;
-}
+};
-export function prettyLanguage(
+export const prettyLanguage = (
code: string,
languages: AppStaticProps["languages"]
-): string {
+): string => {
let result = code;
languages.forEach((language) => {
if (language?.attributes?.code === code)
result = language.attributes.localized_name;
});
return result;
-}
+};
-export function prettyURL(url: string): string {
+export const prettyURL = (url: string): string => {
let domain = new URL(url);
return domain.hostname.replace("www.", "");
-}
+};
-function capitalizeString(string: string): string {
- function capitalizeWord(word: string): string {
+const capitalizeString = (string: string): string => {
+ const capitalizeWord = (word: string): string => {
return word.charAt(0).toUpperCase() + word.substring(1);
- }
+ };
let words = string.split(" ");
words = words.map((word) => capitalizeWord(word));
return words.join(" ");
-}
+};
-export function slugify(string: string | undefined): string {
+export const slugify = (string: string | undefined): string => {
if (!string) {
return "";
}
@@ -275,4 +275,4 @@ export function slugify(string: string | undefined): string {
.replace(/[^a-z0-9- ]/gu, "")
.trim()
.replace(/ /gu, "-");
-}
+};
diff --git a/src/helpers/img.ts b/src/helpers/img.ts
index b0db378..089e6c9 100644
--- a/src/helpers/img.ts
+++ b/src/helpers/img.ts
@@ -14,7 +14,7 @@ interface OgImage {
alt: string;
}
-export function getAssetFilename(path: string): string {
+export const getAssetFilename = (path: string): string => {
let result = path.split("/");
result = result[result.length - 1].split(".");
result = result
@@ -22,9 +22,9 @@ export function getAssetFilename(path: string): string {
.join(".")
.split("_");
return result[0];
-}
+};
-export function getAssetURL(url: string, quality: ImageQuality): string {
+export const getAssetURL = (url: string, quality: ImageQuality): string => {
let newUrl = url;
newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
newUrl = newUrl.replace(/.jpg$/u, ".webp");
@@ -32,26 +32,26 @@ export function getAssetURL(url: string, quality: ImageQuality): string {
newUrl = newUrl.replace(/.png$/u, ".webp");
if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg");
return process.env.NEXT_PUBLIC_URL_IMG + newUrl;
-}
+};
-function getImgSizesByMaxSize(
+const getImgSizesByMaxSize = (
width: number,
height: number,
maxSize: number
-): { width: number; height: number } {
+): { width: number; height: number } => {
if (width > height) {
if (width < maxSize) return { width: width, height: height };
return { width: maxSize, height: (height / width) * maxSize };
}
if (height < maxSize) return { width: width, height: height };
return { width: (width / height) * maxSize, height: maxSize };
-}
+};
-export function getImgSizesByQuality(
+export const getImgSizesByQuality = (
width: number,
height: number,
quality: ImageQuality
-): { width: number; height: number } {
+): { width: number; height: number } => {
switch (quality) {
case ImageQuality.Og:
return getImgSizesByMaxSize(width, height, 512);
@@ -64,12 +64,12 @@ export function getImgSizesByQuality(
default:
return { width: 0, height: 0 };
}
-}
+};
-export function getOgImage(
+export const getOgImage = (
quality: ImageQuality,
image: UploadImageFragment
-): OgImage {
+): OgImage => {
const imgSize = getImgSizesByQuality(
image.width ?? 0,
image.height ?? 0,
@@ -81,4 +81,4 @@ export function getOgImage(
height: imgSize.height,
alt: image.alternativeText || "",
};
-}
+};
diff --git a/src/helpers/libraryItem.ts b/src/helpers/libraryItem.ts
index 4c56a8f..1061a5b 100644
--- a/src/helpers/libraryItem.ts
+++ b/src/helpers/libraryItem.ts
@@ -10,11 +10,11 @@ import LibraryPage from "../pages/library/index";
type Items = Parameters[0]["items"];
type GroupLibraryItems = Map;
-export function getGroups(
+export const getGroups = (
langui: AppStaticProps["langui"],
groupByType: number,
items: Items
-): GroupLibraryItems {
+): GroupLibraryItems => {
const groups: GroupLibraryItems = new Map();
switch (groupByType) {
@@ -145,9 +145,9 @@ export function getGroups(
}
}
return mapRemoveEmptyValues(groups);
-}
+};
-export function filterItems(
+export const filterItems = (
appLayout: AppLayoutState,
items: Items,
searchName: string,
@@ -155,7 +155,7 @@ export function filterItems(
showPrimaryItems: boolean,
showSecondaryItems: boolean,
filterUserStatus: LibraryItemUserStatus | undefined
-): Items {
+): Items => {
return items.filter((item) => {
if (!showSubitems && !item.attributes?.root_item) return false;
if (showSubitems && isUntangibleGroupItem(item.attributes?.metadata?.[0])) {
@@ -194,23 +194,23 @@ export function filterItems(
return true;
});
-}
+};
// TODO: Properly type this shit
-export function isUntangibleGroupItem(metadata: any) {
+export const isUntangibleGroupItem = (metadata: any) => {
return (
metadata &&
metadata.__typename === "ComponentMetadataGroup" &&
(metadata.subtype?.data?.attributes?.slug === "variant-set" ||
metadata.subtype?.data?.attributes?.slug === "relation-set")
);
-}
+};
-export function sortBy(
+export const sortBy = (
orderByType: number,
items: Items,
currencies: AppStaticProps["currencies"]
-) {
+) => {
switch (orderByType) {
case 0:
return items.sort((a, b) => {
@@ -249,4 +249,4 @@ export function sortBy(
default:
return items;
}
-}
+};
diff --git a/src/helpers/numbers.ts b/src/helpers/numbers.ts
index 414a1d7..cf14369 100644
--- a/src/helpers/numbers.ts
+++ b/src/helpers/numbers.ts
@@ -1,9 +1,9 @@
import { GetCurrenciesQuery, PricePickerFragment } from "graphql/generated";
-export function convertPrice(
+export const convertPrice = (
pricePicker: PricePickerFragment,
targetCurrency: NonNullable["data"][number]
-): number {
+): number => {
if (
pricePicker.amount &&
pricePicker.currency?.data?.attributes &&
@@ -14,17 +14,17 @@ export function convertPrice(
targetCurrency.attributes.rate_to_usd
);
return 0;
-}
+};
-export function convertMmToInch(mm: number | null | undefined): string {
+export const convertMmToInch = (mm: number | null | undefined): string => {
return mm ? (mm * 0.03937008).toPrecision(3) : "";
-}
+};
-export function randomInt(min: number, max: number) {
+export const randomInt = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min)) + min;
-}
+};
-export function isInteger(value: string): boolean {
+export const isInteger = (value: string): boolean => {
// eslint-disable-next-line require-unicode-regexp
return /^[+-]?[0-9]+$/.test(value);
-}
+};
diff --git a/src/helpers/others.ts b/src/helpers/others.ts
index cb5ed3c..c4b8ab3 100644
--- a/src/helpers/others.ts
+++ b/src/helpers/others.ts
@@ -18,7 +18,7 @@ type SortContentProps =
>["data"][number]["attributes"]
>["contents"];
-export function sortContent(contents: SortContentProps) {
+export const sortContent = (contents: SortContentProps) => {
contents?.data.sort((a, b) => {
if (
a.attributes?.range[0]?.__typename === "ComponentRangePageRange" &&
@@ -31,12 +31,12 @@ export function sortContent(contents: SortContentProps) {
}
return 0;
});
-}
+};
-export function getStatusDescription(
+export const getStatusDescription = (
status: string,
langui: AppStaticProps["langui"]
-): string | null | undefined {
+): string | null | undefined => {
switch (status) {
case Enum_Componentsetstextset_Status.Incomplete:
return langui.status_incomplete;
@@ -53,45 +53,44 @@ export function getStatusDescription(
default:
return "";
}
-}
+};
-export function isDefined(t: T): t is NonNullable {
- return t !== null && t !== undefined;
-}
+export const isDefined = (t: T): t is NonNullable =>
+ t !== null && t !== undefined;
-export function isUndefined(t: T | undefined | null): t is undefined | null {
- return t === null || t === undefined;
-}
+export const isUndefined = (
+ t: T | undefined | null
+): t is undefined | null => t === null || t === undefined;
-export function isDefinedAndNotEmpty(
+export const isDefinedAndNotEmpty = (
string: string | undefined | null
-): string is string {
- return isDefined(string) && string.length > 0;
-}
+): string is string => isDefined(string) && string.length > 0;
-export function filterDefined(t: T[] | undefined | null): NonNullable[] {
- if (isUndefined(t)) return [];
- return t.filter((item) => isDefined(item)) as NonNullable[];
-}
+export const filterDefined = (t: T[] | undefined | null): NonNullable[] =>
+ isUndefined(t)
+ ? []
+ : (t.filter((item) => isDefined(item)) as NonNullable[]);
-export function filterHasAttributes>(
+export const filterHasAttributes = >(
t: T[] | undefined | null,
attributes?: P[]
-): SelectiveRequiredNonNullable, P>[] {
- if (isUndefined(t)) return [];
- return t.filter((item) => {
- if (isDefined(item)) {
- const attributesToCheck = attributes ?? (Object.keys(item) as P[]);
- return attributesToCheck.every((attribute) => isDefined(item[attribute]));
- }
- return false;
- }) as unknown as SelectiveRequiredNonNullable, P>[];
-}
+): SelectiveRequiredNonNullable, P>[] =>
+ isUndefined(t)
+ ? []
+ : (t.filter((item) => {
+ if (isDefined(item)) {
+ const attributesToCheck = attributes ?? (Object.keys(item) as P[]);
+ return attributesToCheck.every((attribute) =>
+ isDefined(item[attribute])
+ );
+ }
+ return false;
+ }) as unknown as SelectiveRequiredNonNullable, P>[]);
-export function iterateMap(
+export const iterateMap = (
map: Map,
callbackfn: (key: K, value: V, index: number) => U
-): U[] {
+): U[] => {
const result: U[] = [];
let index = 0;
for (const [key, value] of map.entries()) {
@@ -99,21 +98,18 @@ export function iterateMap(
index += 1;
}
return result;
-}
+};
-export function mapMoveEntry(
+export const mapMoveEntry = (
map: Map,
sourceIndex: number,
targetIndex: number
-) {
- return new Map(arrayMove([...map], sourceIndex, targetIndex));
-}
+) => new Map(arrayMove([...map], sourceIndex, targetIndex));
-function arrayMove(arr: T[], sourceIndex: number, targetIndex: number) {
+const arrayMove = (arr: T[], sourceIndex: number, targetIndex: number) => {
arr.splice(targetIndex, 0, arr.splice(sourceIndex, 1)[0]);
return arr;
-}
+};
-export function mapRemoveEmptyValues(groups: Map): Map {
- return new Map([...groups].filter(([_, items]) => items.length > 0));
-}
+export const mapRemoveEmptyValues = (groups: Map): Map =>
+ new Map([...groups].filter(([_, items]) => items.length > 0));
diff --git a/src/helpers/videos.ts b/src/helpers/videos.ts
index fb80203..5d46fe3 100644
--- a/src/helpers/videos.ts
+++ b/src/helpers/videos.ts
@@ -1,7 +1,5 @@
-export function getVideoThumbnailURL(uid: string): string {
- return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.webp`;
-}
+export const getVideoThumbnailURL = (uid: string): string =>
+ `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.webp`;
-export function getVideoFile(uid: string): string {
- return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.mp4`;
-}
+export const getVideoFile = (uid: string): string =>
+ `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.mp4`;
diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
index 72b26ea..f0a1510 100644
--- a/src/hooks/useDarkMode.ts
+++ b/src/hooks/useDarkMode.ts
@@ -2,7 +2,7 @@ import { useEffect } from "react";
import { usePrefersDarkMode } from "./useMediaQuery";
import { useStateWithLocalStorage } from "./useStateWithLocalStorage";
-export function useDarkMode(
+export const useDarkMode = (
key: string,
initialValue: boolean | undefined
): [
@@ -10,11 +10,9 @@ export function useDarkMode(
boolean | undefined,
React.Dispatch>,
React.Dispatch>
-] {
+] => {
const [darkMode, setDarkMode] = useStateWithLocalStorage(key, initialValue);
-
const prefersDarkMode = usePrefersDarkMode();
-
const [selectedThemeMode, setSelectedThemeMode] = useStateWithLocalStorage(
"selectedThemeMode",
false
@@ -25,4 +23,4 @@ export function useDarkMode(
}, [selectedThemeMode, prefersDarkMode, setDarkMode]);
return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode];
-}
+};
diff --git a/src/hooks/useLightBox.tsx b/src/hooks/useLightBox.tsx
index f4b7f4a..4730b11 100644
--- a/src/hooks/useLightBox.tsx
+++ b/src/hooks/useLightBox.tsx
@@ -1,10 +1,10 @@
import { LightBox } from "components/LightBox";
import { useState } from "react";
-export function useLightBox(): [
+export const useLightBox = (): [
(images: string[], index?: number) => void,
() => JSX.Element
-] {
+] => {
const [lightboxOpen, setLightboxOpen] = useState(false);
const [lightboxImages, setLightboxImages] = useState([""]);
const [lightboxIndex, setLightboxIndex] = useState(0);
@@ -25,4 +25,4 @@ export function useLightBox(): [
/>
),
];
-}
+};
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
index 244d025..df888e6 100644
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -1,21 +1,21 @@
import { useEffect, useState } from "react";
import { breaks } from "../../design.config";
-function useMediaQuery(query: string): boolean {
- function getMatches(query: string): boolean {
+const useMediaQuery = (query: string): boolean => {
+ const getMatches = (query: string): boolean => {
// Prevents SSR issues
if (typeof window !== "undefined") {
return window.matchMedia(query).matches;
}
return false;
- }
+ };
const [matches, setMatches] = useState(getMatches(query));
useEffect(() => {
- function handleChange() {
+ const handleChange = () => {
setMatches(getMatches(query));
- }
+ };
const matchMedia = window.matchMedia(query);
@@ -31,25 +31,16 @@ function useMediaQuery(query: string): boolean {
}, [query]);
return matches;
-}
+};
// ts-unused-exports:disable-next-line
-export function useMediaThin() {
- return useMediaQuery(breaks.thin.raw);
-}
+export const useMediaThin = () => useMediaQuery(breaks.thin.raw);
-export function useMediaMobile() {
- return useMediaQuery(breaks.mobile.raw);
-}
+export const useMediaMobile = () => useMediaQuery(breaks.mobile.raw);
-export function useMediaDesktop() {
- return useMediaQuery(breaks.desktop.raw);
-}
+export const useMediaDesktop = () => useMediaQuery(breaks.desktop.raw);
-export function useMediaHoverable() {
- return useMediaQuery("(hover: hover)");
-}
+export const useMediaHoverable = () => useMediaQuery("(hover: hover)");
-export function usePrefersDarkMode() {
- return useMediaQuery("(prefers-color-scheme: dark)");
-}
+export const usePrefersDarkMode = () =>
+ useMediaQuery("(prefers-color-scheme: dark)");
diff --git a/src/hooks/useScrollTopOnChange.ts b/src/hooks/useScrollTopOnChange.ts
index fb7347d..26e06f6 100644
--- a/src/hooks/useScrollTopOnChange.ts
+++ b/src/hooks/useScrollTopOnChange.ts
@@ -5,8 +5,8 @@ export enum AnchorIds {
}
// Scroll to top of element "id" when "deps" update.
-export function useScrollTopOnChange(id: AnchorIds, deps: DependencyList) {
+export const useScrollTopOnChange = (id: AnchorIds, deps: DependencyList) => {
useEffect(() => {
document.querySelector(`#${id}`)?.scrollTo({ top: 0, behavior: "smooth" });
}, deps);
-}
+};
diff --git a/src/hooks/useSmartLanguage.ts b/src/hooks/useSmartLanguage.ts
index 001d00a..b38d2db 100644
--- a/src/hooks/useSmartLanguage.ts
+++ b/src/hooks/useSmartLanguage.ts
@@ -13,31 +13,28 @@ interface Props {
transform?: (item: NonNullable) => NonNullable;
}
-function getPreferredLanguage(
+const getPreferredLanguage = (
preferredLanguages: (string | undefined)[],
availableLanguages: Map
-): number | undefined {
+): number | undefined => {
for (const locale of preferredLanguages) {
if (isDefined(locale) && availableLanguages.has(locale)) {
return availableLanguages.get(locale);
}
}
return undefined;
-}
+};
-export function useSmartLanguage(
- props: Props
-): [
+export const useSmartLanguage = ({
+ items,
+ languageExtractor,
+ languages,
+ transform = (item) => item,
+}: Props): [
T | undefined,
typeof LanguageSwitcher,
Parameters[0]
-] {
- const {
- items,
- languageExtractor,
- languages,
- transform = (item) => item,
- } = props;
+] => {
const { preferredLanguages } = useAppLayout();
const router = useRouter();
@@ -81,4 +78,4 @@ export function useSmartLanguage(
};
return [selectedTranslation, LanguageSwitcher, languageSwitcherProps];
-}
+};
diff --git a/src/hooks/useSmartLanguage.tsx b/src/hooks/useSmartLanguage.tsx
deleted file mode 100644
index 001d00a..0000000
--- a/src/hooks/useSmartLanguage.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { LanguageSwitcher } from "components/Inputs/LanguageSwitcher";
-import { useAppLayout } from "contexts/AppLayoutContext";
-import { AppStaticProps } from "graphql/getAppStaticProps";
-import { filterDefined, isDefined } from "helpers/others";
-
-import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
-
-interface Props {
- items: T[];
- languages: AppStaticProps["languages"];
- languageExtractor: (item: NonNullable) => string | undefined;
- transform?: (item: NonNullable) => NonNullable;
-}
-
-function getPreferredLanguage(
- preferredLanguages: (string | undefined)[],
- availableLanguages: Map
-): number | undefined {
- for (const locale of preferredLanguages) {
- if (isDefined(locale) && availableLanguages.has(locale)) {
- return availableLanguages.get(locale);
- }
- }
- return undefined;
-}
-
-export function useSmartLanguage(
- props: Props
-): [
- T | undefined,
- typeof LanguageSwitcher,
- Parameters[0]
-] {
- const {
- items,
- languageExtractor,
- languages,
- transform = (item) => item,
- } = props;
- const { preferredLanguages } = useAppLayout();
- const router = useRouter();
-
- const availableLocales = useMemo(() => {
- const memo = new Map();
- filterDefined(items).map((elem, index) => {
- const result = languageExtractor(elem);
- if (isDefined(result)) memo.set(result, index);
- });
- return memo;
- }, [items, languageExtractor]);
-
- const [selectedTranslationIndex, setSelectedTranslationIndex] = useState<
- number | undefined
- >();
-
- useEffect(() => {
- setSelectedTranslationIndex(
- getPreferredLanguage(
- preferredLanguages ?? [router.locale],
- availableLocales
- )
- );
- }, [preferredLanguages, availableLocales, router.locale]);
-
- const selectedTranslation = useMemo(() => {
- if (isDefined(selectedTranslationIndex)) {
- const item = items[selectedTranslationIndex];
- if (isDefined(item)) {
- return transform(item);
- }
- }
- return undefined;
- }, [items, selectedTranslationIndex, transform]);
-
- const languageSwitcherProps = {
- languages: languages,
- locales: availableLocales,
- localesIndex: selectedTranslationIndex,
- onLanguageChanged: setSelectedTranslationIndex,
- };
-
- return [selectedTranslation, LanguageSwitcher, languageSwitcherProps];
-}
diff --git a/src/hooks/useStateWithLocalStorage.ts b/src/hooks/useStateWithLocalStorage.ts
index 039d990..4deba5c 100644
--- a/src/hooks/useStateWithLocalStorage.ts
+++ b/src/hooks/useStateWithLocalStorage.ts
@@ -1,10 +1,10 @@
import { isDefined } from "helpers/others";
import { useEffect, useState } from "react";
-export function useStateWithLocalStorage(
+export const useStateWithLocalStorage = (
key: string,
initialValue: T
-): [T | undefined, React.Dispatch>] {
+): [T | undefined, React.Dispatch>] => {
const [value, setValue] = useState(undefined);
const [, setFromLocaleStorage] = useState(false);
@@ -28,4 +28,4 @@ export function useStateWithLocalStorage(
}, [value, key]);
return [value, setValue];
-}
+};
diff --git a/src/hooks/useToggle.ts b/src/hooks/useToggle.ts
index ab13a9c..2b43dd3 100644
--- a/src/hooks/useToggle.ts
+++ b/src/hooks/useToggle.ts
@@ -1,7 +1,6 @@
import { Dispatch, SetStateAction, useCallback } from "react";
-export function useToggle(setState: Dispatch>) {
- return useCallback(() => {
+export const useToggle = (setState: Dispatch>) =>
+ useCallback(() => {
setState((current) => !current);
}, []);
-}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 12938a4..1f0dce0 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -5,16 +5,19 @@ import {
} from "components/PanelComponents/ReturnButton";
import { ContentPanel } from "components/Panels/ContentPanel";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { GetStaticProps } from "next";
-import { GetStaticPropsContext } from "next";
-import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
interface Props extends AppStaticProps {}
-export default function FourOhFour(props: Props): JSX.Element {
- const { langui } = props;
- const contentPanel = useMemo(
- () => (
+const FourOhFour = ({ langui, ...otherProps }: Props): JSX.Element => (
+
404 - {langui.page_not_found}
500 - Internal Server Error
-
- );
-}
+const AccordsLibraryApp = (props: AppProps): JSX.Element => (
+
+
+);
+export default AccordsLibraryApp;
diff --git a/src/pages/about-us/accords-handbook.tsx b/src/pages/about-us/accords-handbook.tsx
index dab1b83..78dce0b 100644
--- a/src/pages/about-us/accords-handbook.tsx
+++ b/src/pages/about-us/accords-handbook.tsx
@@ -4,20 +4,33 @@ import {
PostStaticProps,
} from "graphql/getPostStaticProps";
-export default function AccordsHandbook(props: PostStaticProps): JSX.Element {
- const { post, langui, languages, currencies } = props;
- return (
-
-) {
+) => {
if (req.method === "POST") {
const body = req.body as RequestMailProps;
@@ -48,4 +48,5 @@ export default async function Mail(
}
res.status(200).json({ code: "OKAY" });
-}
+};
+export default Mail;
diff --git a/src/pages/api/revalidate.ts b/src/pages/api/revalidate.ts
index 269f9fe..e8791ec 100644
--- a/src/pages/api/revalidate.ts
+++ b/src/pages/api/revalidate.ts
@@ -81,10 +81,10 @@ type ResponseMailProps = {
revalidated: boolean;
};
-export default async function Revalidate(
+const Revalidate = async (
req: NextApiRequest,
res: NextApiResponse
-) {
+) => {
const body = req.body as RequestProps;
const { serverRuntimeConfig } = getConfig();
@@ -217,4 +217,5 @@ export default async function Revalidate(
.status(500)
.send({ message: "Error revalidating", revalidated: false });
}
-}
+};
+export default Revalidate;
diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx
index f4b5a48..6f3fc75 100644
--- a/src/pages/archives/index.tsx
+++ b/src/pages/archives/index.tsx
@@ -4,14 +4,18 @@ import { PanelHeader } from "components/PanelComponents/PanelHeader";
import { SubPanel } from "components/Panels/SubPanel";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { Icon } from "components/Ico";
import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {}
-export default function Archives(props: Props): JSX.Element {
- const { langui } = props;
+const Archives = ({ langui, ...otherProps }: Props): JSX.Element => {
const subPanel = useMemo(
() => (
@@ -26,17 +30,26 @@ export default function Archives(props: Props): JSX.Element {
[langui]
);
return (
- {
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const getStaticPaths: GetStaticPaths = async (context) => {
const sdk = getReadySdk();
const channels = await sdk.getVideoChannelsSlugs();
const paths: GetStaticPathsResult["paths"] = [];
@@ -159,4 +164,4 @@ export async function getStaticPaths(
paths,
fallback: "blocking",
};
-}
+};
diff --git a/src/pages/archives/videos/index.tsx b/src/pages/archives/videos/index.tsx
index eebbf74..2f921b1 100644
--- a/src/pages/archives/videos/index.tsx
+++ b/src/pages/archives/videos/index.tsx
@@ -21,18 +21,29 @@ import { prettyDate } from "helpers/formatters";
import { filterHasAttributes } from "helpers/others";
import { getVideoThumbnailURL } from "helpers/videos";
import { useMediaHoverable } from "hooks/useMediaQuery";
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { Fragment, useMemo, useState } from "react";
+/*
+ * ╭─────────────╮
+ * ────────────────────────────────────────╯ CONSTANTS ╰──────────────────────────────────────────
+ */
+
+const ITEM_PER_PAGE = 50;
+
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {
videos: NonNullable["data"];
}
-const ITEM_PER_PAGE = 50;
-
-export default function Videos(props: Props): JSX.Element {
- const { langui, videos } = props;
+const Videos = ({ langui, videos, ...otherProps }: Props): JSX.Element => {
const hoverable = useMediaHoverable();
+ const [page, setPage] = useState(0);
+ const [keepInfoVisible, setKeepInfoVisible] = useState(true);
const paginatedVideos = useMemo(() => {
const memo = [];
@@ -44,9 +55,6 @@ export default function Videos(props: Props): JSX.Element {
return memo;
}, [videos]);
- const [page, setPage] = useState(0);
- const [keepInfoVisible, setKeepInfoVisible] = useState(true);
-
const subPanel = useMemo(
() => (
@@ -130,14 +138,19 @@ export default function Videos(props: Props): JSX.Element {
navTitle={langui.archives}
subPanel={subPanel}
contentPanel={contentPanel}
- {...props}
+ langui={langui}
+ {...otherProps}
/>
);
-}
+};
+export default Videos;
-export async function getStaticProps(
- context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
+/*
+ * ╭──────────────────────╮
+ * ───────────────────────────────────╯ NEXT DATA FETCHING ╰──────────────────────────────────────
+ */
+
+export const getStaticProps: GetStaticProps = async (context) => {
const sdk = getReadySdk();
const videos = await sdk.getVideosPreview();
if (!videos.videos) return { notFound: true };
@@ -159,4 +172,4 @@ export async function getStaticProps(
return {
props: props,
};
-}
+};
diff --git a/src/pages/archives/videos/v/[uid].tsx b/src/pages/archives/videos/v/[uid].tsx
index bd4c530..247bed4 100644
--- a/src/pages/archives/videos/v/[uid].tsx
+++ b/src/pages/archives/videos/v/[uid].tsx
@@ -21,21 +21,21 @@ import { prettyDate, prettyShortenNumber } from "helpers/formatters";
import { filterHasAttributes, isDefined } from "helpers/others";
import { getVideoFile } from "helpers/videos";
import { useMediaMobile } from "hooks/useMediaQuery";
-import {
- GetStaticPathsContext,
- GetStaticPathsResult,
- GetStaticPropsContext,
-} from "next";
+import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {
video: NonNullable<
NonNullable["data"][number]["attributes"]
>;
}
-export default function Video(props: Props): JSX.Element {
- const { langui, video } = props;
+const Video = ({ langui, video, ...otherProps }: Props): JSX.Element => {
const isMobile = useMediaMobile();
const appLayout = useAppLayout();
const subPanel = useMemo(
@@ -201,14 +201,19 @@ export default function Video(props: Props): JSX.Element {
navTitle={langui.archives}
subPanel={subPanel}
contentPanel={contentPanel}
- {...props}
+ langui={langui}
+ {...otherProps}
/>
);
-}
+};
+export default Video;
-export async function getStaticProps(
- context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
+/*
+ * ╭──────────────────────╮
+ * ───────────────────────────────────╯ NEXT DATA FETCHING ╰──────────────────────────────────────
+ */
+
+export const getStaticProps: GetStaticProps = async (context) => {
const sdk = getReadySdk();
const videos = await sdk.getVideo({
uid:
@@ -224,11 +229,11 @@ export async function getStaticProps(
return {
props: props,
};
-}
+};
-export async function getStaticPaths(
- context: GetStaticPathsContext
-): Promise {
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const getStaticPaths: GetStaticPaths = async (context) => {
const sdk = getReadySdk();
const videos = await sdk.getVideosSlugs();
const paths: GetStaticPathsResult["paths"] = [];
@@ -242,4 +247,4 @@ export async function getStaticPaths(
paths,
fallback: "blocking",
};
-}
+};
diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx
index b212112..202e56e 100644
--- a/src/pages/chronicles/index.tsx
+++ b/src/pages/chronicles/index.tsx
@@ -3,14 +3,18 @@ import { PanelHeader } from "components/PanelComponents/PanelHeader";
import { SubPanel } from "components/Panels/SubPanel";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { Icon } from "components/Ico";
import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {}
-export default function Chronicles(props: Props): JSX.Element {
- const { langui } = props;
+const Chronicles = ({ langui, ...otherProps }: Props): JSX.Element => {
const subPanel = useMemo(
() => (
@@ -25,17 +29,26 @@ export default function Chronicles(props: Props): JSX.Element {
);
return (
- ["data"]
- >["attributes"]
- >["contents"]
->["data"];
-
-export default function Content(props: Props): JSX.Element {
- const { langui, content, languages, currencies } = props;
+const Content = ({
+ langui,
+ content,
+ languages,
+ currencies,
+ ...otherProps
+}: Props): JSX.Element => {
const isMobile = useMediaMobile();
const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] =
@@ -253,15 +250,14 @@ export default function Content(props: Props): JSX.Element {
position: "Bottom",
}}
infoAppend={
-
@@ -277,13 +273,14 @@ export default function Content(props: Props): JSX.Element {
{selectedTranslation?.text_set?.text && (
<>
{
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const getStaticPaths: GetStaticPaths = async (context) => {
const sdk = getReadySdk();
const contents = await sdk.getContentsSlugs();
const paths: GetStaticPathsResult["paths"] = [];
@@ -505,9 +509,22 @@ export async function getStaticPaths(
paths,
fallback: "blocking",
};
-}
+};
-function getPreviousContent(group: Group, currentSlug: string) {
+/*
+ * ╭───────────────────╮
+ * ─────────────────────────────────────╯ PRIVATE METHODS ╰───────────────────────────────────────
+ */
+
+type Group = NonNullable<
+ NonNullable<
+ NonNullable<
+ NonNullable["data"]
+ >["attributes"]
+ >["contents"]
+>["data"];
+
+const getPreviousContent = (group: Group, currentSlug: string) => {
for (let index = 0; index < group.length; index += 1) {
const content = group[index];
if (content.attributes?.slug === currentSlug && index > 0) {
@@ -515,9 +532,11 @@ function getPreviousContent(group: Group, currentSlug: string) {
}
}
return undefined;
-}
+};
-function getNextContent(group: Group, currentSlug: string) {
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+const getNextContent = (group: Group, currentSlug: string) => {
for (let index = 0; index < group.length; index += 1) {
const content = group[index];
if (content.attributes?.slug === currentSlug && index < group.length - 1) {
@@ -525,4 +544,4 @@ function getNextContent(group: Group, currentSlug: string) {
}
}
return undefined;
-}
+};
diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx
index 0b1da36..e65bf2e 100644
--- a/src/pages/contents/index.tsx
+++ b/src/pages/contents/index.tsx
@@ -9,12 +9,10 @@ import {
} from "components/Panels/ContentPanel";
import { SubPanel } from "components/Panels/SubPanel";
import { TranslatedPreviewCard } from "components/PreviewCard";
-
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { prettyinlineTitle, prettySlug } from "helpers/formatters";
-
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { Fragment, useState, useMemo } from "react";
import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
@@ -29,33 +27,47 @@ import {
import { ContentPlaceholder } from "components/PanelComponents/ContentPlaceholder";
import { GetContentsQuery } from "graphql/generated";
-interface Props extends AppStaticProps {
- contents: NonNullable["data"];
-}
+/*
+ * ╭─────────────╮
+ * ────────────────────────────────────────╯ CONSTANTS ╰──────────────────────────────────────────
+ */
-type GroupContentItems = Map;
-
-const defaultFiltersState = {
+const DEFAULT_FILTERS_STATE = {
groupingMethod: -1,
keepInfoVisible: false,
combineRelatedContent: true,
searchName: "",
};
-export default function Contents(props: Props): JSX.Element {
- const { langui, contents, languages } = props;
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
+interface Props extends AppStaticProps {
+ contents: NonNullable["data"];
+}
+
+const Contents = ({
+ langui,
+ contents,
+ languages,
+ ...otherProps
+}: Props): JSX.Element => {
const hoverable = useMediaHoverable();
const [groupingMethod, setGroupingMethod] = useState(
- defaultFiltersState.groupingMethod
+ DEFAULT_FILTERS_STATE.groupingMethod
);
const [keepInfoVisible, setKeepInfoVisible] = useState(
- defaultFiltersState.keepInfoVisible
+ DEFAULT_FILTERS_STATE.keepInfoVisible
);
const [combineRelatedContent, setCombineRelatedContent] = useState(
- defaultFiltersState.combineRelatedContent
+ DEFAULT_FILTERS_STATE.combineRelatedContent
+ );
+ const [searchName, setSearchName] = useState(
+ DEFAULT_FILTERS_STATE.searchName
);
- const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
const effectiveCombineRelatedContent = useMemo(
() => (searchName.length > 1 ? false : combineRelatedContent),
@@ -126,10 +138,12 @@ export default function Contents(props: Props): JSX.Element {
text={langui.reset_all_filters}
icon={Icon.Replay}
onClick={() => {
- setSearchName(defaultFiltersState.searchName);
- setGroupingMethod(defaultFiltersState.groupingMethod);
- setKeepInfoVisible(defaultFiltersState.keepInfoVisible);
- setCombineRelatedContent(defaultFiltersState.combineRelatedContent);
+ setSearchName(DEFAULT_FILTERS_STATE.searchName);
+ setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
+ setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
+ setCombineRelatedContent(
+ DEFAULT_FILTERS_STATE.combineRelatedContent
+ );
}}
/>
@@ -147,12 +161,9 @@ export default function Contents(props: Props): JSX.Element {
const contentPanel = useMemo(
() => (
- {/* TODO: Add to langui */}
{groups.size === 0 && (
;
+
+export const getGroups = (
langui: AppStaticProps["langui"],
groupByType: number,
items: Props["contents"]
-): GroupContentItems {
+): GroupContentItems => {
const groups: GroupContentItems = new Map();
switch (groupByType) {
@@ -347,14 +371,16 @@ export function getGroups(
}
}
return mapRemoveEmptyValues(groups);
-}
+};
-export function filterContents(
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const filterContents = (
contents: Props["contents"],
combineRelatedContent: boolean,
searchName: string
-): Props["contents"] {
- return contents.filter((content) => {
+): Props["contents"] =>
+ contents.filter((content) => {
if (
combineRelatedContent &&
content.attributes?.group?.data?.attributes?.combine === true &&
@@ -381,4 +407,3 @@ export function filterContents(
}
return true;
});
-}
diff --git a/src/pages/dev/checkup/contents.tsx b/src/pages/dev/checkup/contents.tsx
index 233e7bb..e0fb18a 100644
--- a/src/pages/dev/checkup/contents.tsx
+++ b/src/pages/dev/checkup/contents.tsx
@@ -10,16 +10,19 @@ import { DevGetContentsQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { filterDefined, filterHasAttributes } from "helpers/others";
-
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {
contents: DevGetContentsQuery;
}
-export default function CheckupContents(props: Props): JSX.Element {
- const { contents } = props;
+const CheckupContents = ({ contents, ...otherProps }: Props): JSX.Element => {
const testReport = testingContent(contents);
const contentPanel = useMemo(
@@ -82,13 +85,21 @@ export default function CheckupContents(props: Props): JSX.Element {
);
return (
-
-
-
+
+
-
-
-
}
>
-
-
+
- );
-}
+
+);
diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx
index e616edf..6226904 100644
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@@ -2,10 +2,14 @@ import { Ico, Icon } from "components/Ico";
import { ToolTip } from "components/ToolTip";
import { cJoin, cIf } from "helpers/className";
import { isDefinedAndNotEmpty } from "helpers/others";
-
import { useRouter } from "next/router";
import { MouseEventHandler, useMemo } from "react";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
url: string;
icon?: Icon;
@@ -16,16 +20,17 @@ interface Props {
onClick?: MouseEventHandler
+ {isDefined(icon) &&
+ {message}
+
- {isDefined(icon) &&
- {message} -
-
- {icon &&
- {title}
- {isDefinedAndNotEmpty(description) &&{description}
} -
+ {icon &&
+ {title}
+ {isDefinedAndNotEmpty(description) &&{description}
} +
-
- {children}
-
-
- );
-}
+export const ContentPanel = ({
+ width = ContentPanelWidthSizes.Default,
+ children,
+ className,
+}: Props): JSX.Element => (
+
+
+ {children}
+
+
+);
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index 63d7dd5..d992bf5 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -12,12 +12,18 @@ import { Icon } from "components/Ico";
import { cIf, cJoin } from "helpers/className";
import { isDefinedAndNotEmpty } from "helpers/others";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
langui: AppStaticProps["langui"];
}
-export function MainPanel(props: Props): JSX.Element {
- const { langui } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const MainPanel = ({ langui }: Props): JSX.Element => {
const isDesktop = useMediaDesktop();
const {
mainPanelReduced = false,
@@ -239,4 +245,4 @@ export function MainPanel(props: Props): JSX.Element {
);
-}
+};
diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx
index 4e7a231..4bc9823 100644
--- a/src/components/Panels/SubPanel.tsx
+++ b/src/components/Panels/SubPanel.tsx
@@ -1,11 +1,16 @@
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
children: React.ReactNode;
}
-export function SubPanel(props: Props): JSX.Element {
- return (
-
- {props.children}
-
- );
-}
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const SubPanel = ({ children }: Props): JSX.Element => (
+
+ {children}
+
+);
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 0037f99..6a65e50 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -1,9 +1,13 @@
import { useAppLayout } from "contexts/AppLayoutContext";
import { cIf, cJoin } from "helpers/className";
-
import { Dispatch, SetStateAction, useEffect } from "react";
import Hotkeys from "react-hot-keys";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
setState:
| Dispatch
- {metadata.release_date && (
-
- ) : (
- <>
- );
+ const metadataJSX = useMemo(
+ () =>
+ metadata && (metadata.release_date || metadata.price) ? (
+
-
-
-
-
+ {metadata.release_date && (
+
+ ) : (
+ <>
+ ),
+ [appLayout.currency, metadata]
+ );
return (
@@ -241,12 +248,13 @@ export function PreviewCard(props: Props): JSX.Element {
)}
+
+
+
+
@@ -287,7 +295,9 @@ export function PreviewCard(props: Props): JSX.Element {
);
-}
+};
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
interface TranslatedProps
extends Omit
- {thumbnail ? (
- {
@@ -88,13 +92,14 @@ interface TranslatedProps
languages: AppStaticProps["languages"];
}
-export function TranslatedPreviewLine(props: TranslatedProps): JSX.Element {
- const {
- translations = [{ title: props.slug, language: "default" }],
- slug,
- languages,
- } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const TranslatedPreviewLine = ({
+ slug,
+ translations = [{ title: slug, language: "default" }],
+ languages,
+ ...otherProps
+}: TranslatedProps): JSX.Element => {
const [selectedTranslation] = useSmartLanguage({
items: translations,
languages: languages,
@@ -109,7 +114,7 @@ export function TranslatedPreviewLine(props: TranslatedProps): JSX.Element {
pre_title={selectedTranslation?.pre_title}
title={selectedTranslation?.title ?? prettySlug(slug)}
subtitle={selectedTranslation?.subtitle}
- {...props}
+ {...otherProps}
/>
);
-}
+};
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx
index 9aadef6..100508c 100644
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@@ -3,64 +3,67 @@ import { RecorderChipFragment } from "graphql/generated";
import { AppStaticProps } from "graphql/getAppStaticProps";
import { ImageQuality } from "helpers/img";
import { filterHasAttributes } from "helpers/others";
-
import { Fragment } from "react";
import { Img } from "./Img";
import { Markdawn } from "./Markdown/Markdawn";
import { ToolTip } from "./ToolTip";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
className?: string;
recorder: RecorderChipFragment;
langui: AppStaticProps["langui"];
}
-export function RecorderChip(props: Props): JSX.Element {
- const { recorder, langui } = props;
- return (
-
-
+ {recorder.anonymize
+ ? `Recorder#${recorder.anonymous_code}`
+ : recorder.username}
+
+
+);
diff --git a/src/components/ThumbnailHeader.tsx b/src/components/ThumbnailHeader.tsx
index 5ef458b..cd76014 100644
--- a/src/components/ThumbnailHeader.tsx
+++ b/src/components/ThumbnailHeader.tsx
@@ -7,9 +7,13 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
import { prettyinlineTitle, prettySlug, slugify } from "helpers/formatters";
import { getAssetURL, ImageQuality } from "helpers/img";
import { filterHasAttributes } from "helpers/others";
-
import { useLightBox } from "hooks/useLightBox";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props {
pre_title?: string | null | undefined;
title: string | null | undefined;
@@ -26,19 +30,19 @@ interface Props {
languageSwitcher?: JSX.Element;
}
-export function ThumbnailHeader(props: Props): JSX.Element {
- const {
- langui,
- pre_title,
- title,
- subtitle,
- thumbnail,
- type,
- categories,
- description,
- languageSwitcher,
- } = props;
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+export const ThumbnailHeader = ({
+ langui,
+ pre_title,
+ title,
+ subtitle,
+ thumbnail,
+ type,
+ categories,
+ description,
+ languageSwitcher,
+}: Props): JSX.Element => {
const [openLightBox, LightBox] = useLightBox();
return (
@@ -105,4 +109,4 @@ export function ThumbnailHeader(props: Props): JSX.Element {
)}
);
-}
+};
diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx
index dea0c8a..be6c154 100644
--- a/src/components/ToolTip.tsx
+++ b/src/components/ToolTip.tsx
@@ -2,20 +2,30 @@ import Tippy, { TippyProps } from "@tippyjs/react";
import { cJoin } from "helpers/className";
import "tippy.js/animations/scale-subtle.css";
+/*
+ * ╭─────────────╮
+ * ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
+ */
+
interface Props extends TippyProps {}
-export function ToolTip(props: Props): JSX.Element {
- const newProps: Props = {
- className: cJoin("text-sm", props.className),
- delay: [150, 0],
- interactive: true,
- animation: "scale-subtle",
- ...props,
- };
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
- return (
-
-
- );
-}
+export const ToolTip = ({
+ className,
+ delay = [150, 0],
+ interactive = true,
+ animation = "scale-subtle",
+ children,
+ ...otherProps
+}: Props): JSX.Element => (
+
+
+);
diff --git a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
index 0284d5a..9fe92d2 100644
--- a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
+++ b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
@@ -20,36 +20,35 @@ interface Props {
langui: AppStaticProps["langui"];
}
-export function ChronologyItemComponent(props: Props): JSX.Element {
- const { langui } = props;
-
- if (props.item.attributes) {
+export const ChronologyItemComponent = ({
+ langui,
+ item,
+ displayYear,
+}: Props): JSX.Element => {
+ if (item.attributes) {
return (
-
+
+
-
-
-
}
>
-
-
- ![]()
-
- ) : (
-
- )}
-
- {topChips && topChips.length > 0 && (
-
+
+);
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
interface TranslatedProps
extends Omit
- {topChips.map((text, index) => (
- {text}
- ))}
-
- )}
-
- {pre_title &&
- {bottomChips && bottomChips.length > 0 && (
- {pre_title}
} - {title && ( -{title}
- )} - {subtitle &&{subtitle}
} -
- {bottomChips.map((text, index) => (
-
- {text}
-
- ))}
-
- )}
+ >
+ {thumbnail ? (
+
+ ![]()
+ ) : (
+
+ )}
+
+ {topChips && topChips.length > 0 && (
+
-
- );
-}
+
+ {topChips.map((text, index) => (
+ {text}
+ ))}
+
+ )}
+
+ {pre_title &&
+ {bottomChips && bottomChips.length > 0 && (
+ {pre_title}
} + {title && ( +{title}
+ )} + {subtitle &&{subtitle}
} +
+ {bottomChips.map((text, index) => (
+
+ {text}
+
+ ))}
+
+ )}
- {recorder.avatar?.data?.attributes && (
- ![]()
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const RecorderChip = ({ recorder, langui }: Props): JSX.Element => (
+
+
- {recorder.anonymize
- ? `Recorder#${recorder.anonymous_code}`
- : recorder.username}
-
-
- );
-}
+ {recorder.bio?.[0] &&
+ }
+ placement="top"
+ >
+
+ {recorder.avatar?.data?.attributes && (
+ ![]()
+ )}
+
- }
- placement="top"
- >
-
+
- {recorder.bio?.[0] && {recorder.username}
+ {recorder.languages?.data && recorder.languages.data.length > 0 && ( +
+
+ {language.attributes.code.toUpperCase()}
+
+ )
+ )}
+
+ )}
+ {recorder.pronouns && (
+ {langui.languages}:
+ {filterHasAttributes(recorder.languages.data).map( + (language) => ( +
+ {recorder.pronouns}
+
)}
- {langui.pronouns}:
+
-
{recorder.username}
- {recorder.languages?.data && recorder.languages.data.length > 0 && ( -
-
- {language.attributes.code.toUpperCase()}
-
- )
- )}
-
- )}
- {recorder.pronouns && (
- {langui.languages}:
- {filterHasAttributes(recorder.languages.data).map( - (language) => ( -
- {recorder.pronouns}
-
- )}
- {langui.pronouns}:
-{props.children}
- {children}
+
- {props.displayYear && (
+ {displayYear && (
- - {generateYear( - props.item.attributes.displayed_date, - props.item.attributes.year - )} + {generateYear(item.attributes.displayed_date, item.attributes.year)}
)}- {generateDate(props.item.attributes.month, props.item.attributes.day)} + {generateDate(item.attributes.month, item.attributes.day)}
- {props.item.attributes.events &&
- filterHasAttributes(props.item.attributes.events, [
+ {item.attributes.events &&
+ filterHasAttributes(item.attributes.events, [
"id",
"translations",
]).map((event) => (
@@ -123,31 +122,29 @@ export function ChronologyItemComponent(props: Props): JSX.Element {
}
return <>;
-}
+};
-function generateAnchor(
+const generateAnchor = (
year: number | undefined,
month: number | null | undefined,
day: number | null | undefined
-): string {
+): string => {
let result = "";
if (year) result += year;
if (month) result += `- ${month.toString().padStart(2, "0")}`;
if (day) result += `- ${day.toString().padStart(2, "0")}`;
return result;
-}
+};
-function generateYear(
+const generateYear = (
displayed_date: string | null | undefined,
year: number | undefined
-): string {
- return displayed_date ?? year?.toString() ?? "";
-}
+): string => displayed_date ?? year?.toString() ?? "";
-function generateDate(
+const generateDate = (
month: number | null | undefined,
day: number | null | undefined
-): string {
+): string => {
const lut = [
"Jan",
"Feb",
@@ -172,4 +169,4 @@ function generateDate(
}
return result;
-}
+};
diff --git a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
index 81ee7af..30b710c 100644
--- a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
+++ b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
@@ -10,22 +10,22 @@ interface Props {
langui: AppStaticProps["langui"];
}
-export function ChronologyYearComponent(props: Props): JSX.Element {
- const { langui } = props;
-
- return (
- {
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const getStaticPaths: GetStaticPaths = async (context) => {
const sdk = getReadySdk();
const contents = await sdk.getContentsSlugs();
const paths: GetStaticPathsResult["paths"] = [];
@@ -505,9 +509,22 @@ export async function getStaticPaths(
paths,
fallback: "blocking",
};
-}
+};
-function getPreviousContent(group: Group, currentSlug: string) {
+/*
+ * ╭───────────────────╮
+ * ─────────────────────────────────────╯ PRIVATE METHODS ╰───────────────────────────────────────
+ */
+
+type Group = NonNullable<
+ NonNullable<
+ NonNullable<
+ NonNullable["data"]
+ >["attributes"]
+ >["contents"]
+>["data"];
+
+const getPreviousContent = (group: Group, currentSlug: string) => {
for (let index = 0; index < group.length; index += 1) {
const content = group[index];
if (content.attributes?.slug === currentSlug && index > 0) {
@@ -515,9 +532,11 @@ function getPreviousContent(group: Group, currentSlug: string) {
}
}
return undefined;
-}
+};
-function getNextContent(group: Group, currentSlug: string) {
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+const getNextContent = (group: Group, currentSlug: string) => {
for (let index = 0; index < group.length; index += 1) {
const content = group[index];
if (content.attributes?.slug === currentSlug && index < group.length - 1) {
@@ -525,4 +544,4 @@ function getNextContent(group: Group, currentSlug: string) {
}
}
return undefined;
-}
+};
diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx
index 0b1da36..e65bf2e 100644
--- a/src/pages/contents/index.tsx
+++ b/src/pages/contents/index.tsx
@@ -9,12 +9,10 @@ import {
} from "components/Panels/ContentPanel";
import { SubPanel } from "components/Panels/SubPanel";
import { TranslatedPreviewCard } from "components/PreviewCard";
-
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { prettyinlineTitle, prettySlug } from "helpers/formatters";
-
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { Fragment, useState, useMemo } from "react";
import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
@@ -29,33 +27,47 @@ import {
import { ContentPlaceholder } from "components/PanelComponents/ContentPlaceholder";
import { GetContentsQuery } from "graphql/generated";
-interface Props extends AppStaticProps {
- contents: NonNullable["data"];
-}
+/*
+ * ╭─────────────╮
+ * ────────────────────────────────────────╯ CONSTANTS ╰──────────────────────────────────────────
+ */
-type GroupContentItems = Map;
-
-const defaultFiltersState = {
+const DEFAULT_FILTERS_STATE = {
groupingMethod: -1,
keepInfoVisible: false,
combineRelatedContent: true,
searchName: "",
};
-export default function Contents(props: Props): JSX.Element {
- const { langui, contents, languages } = props;
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
+interface Props extends AppStaticProps {
+ contents: NonNullable["data"];
+}
+
+const Contents = ({
+ langui,
+ contents,
+ languages,
+ ...otherProps
+}: Props): JSX.Element => {
const hoverable = useMediaHoverable();
const [groupingMethod, setGroupingMethod] = useState(
- defaultFiltersState.groupingMethod
+ DEFAULT_FILTERS_STATE.groupingMethod
);
const [keepInfoVisible, setKeepInfoVisible] = useState(
- defaultFiltersState.keepInfoVisible
+ DEFAULT_FILTERS_STATE.keepInfoVisible
);
const [combineRelatedContent, setCombineRelatedContent] = useState(
- defaultFiltersState.combineRelatedContent
+ DEFAULT_FILTERS_STATE.combineRelatedContent
+ );
+ const [searchName, setSearchName] = useState(
+ DEFAULT_FILTERS_STATE.searchName
);
- const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
const effectiveCombineRelatedContent = useMemo(
() => (searchName.length > 1 ? false : combineRelatedContent),
@@ -126,10 +138,12 @@ export default function Contents(props: Props): JSX.Element {
text={langui.reset_all_filters}
icon={Icon.Replay}
onClick={() => {
- setSearchName(defaultFiltersState.searchName);
- setGroupingMethod(defaultFiltersState.groupingMethod);
- setKeepInfoVisible(defaultFiltersState.keepInfoVisible);
- setCombineRelatedContent(defaultFiltersState.combineRelatedContent);
+ setSearchName(DEFAULT_FILTERS_STATE.searchName);
+ setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
+ setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
+ setCombineRelatedContent(
+ DEFAULT_FILTERS_STATE.combineRelatedContent
+ );
}}
/>
@@ -147,12 +161,9 @@ export default function Contents(props: Props): JSX.Element {
const contentPanel = useMemo(
() => (
- {/* TODO: Add to langui */}
{groups.size === 0 && (
;
+
+export const getGroups = (
langui: AppStaticProps["langui"],
groupByType: number,
items: Props["contents"]
-): GroupContentItems {
+): GroupContentItems => {
const groups: GroupContentItems = new Map();
switch (groupByType) {
@@ -347,14 +371,16 @@ export function getGroups(
}
}
return mapRemoveEmptyValues(groups);
-}
+};
-export function filterContents(
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const filterContents = (
contents: Props["contents"],
combineRelatedContent: boolean,
searchName: string
-): Props["contents"] {
- return contents.filter((content) => {
+): Props["contents"] =>
+ contents.filter((content) => {
if (
combineRelatedContent &&
content.attributes?.group?.data?.attributes?.combine === true &&
@@ -381,4 +407,3 @@ export function filterContents(
}
return true;
});
-}
diff --git a/src/pages/dev/checkup/contents.tsx b/src/pages/dev/checkup/contents.tsx
index 233e7bb..e0fb18a 100644
--- a/src/pages/dev/checkup/contents.tsx
+++ b/src/pages/dev/checkup/contents.tsx
@@ -10,16 +10,19 @@ import { DevGetContentsQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { filterDefined, filterHasAttributes } from "helpers/others";
-
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {
contents: DevGetContentsQuery;
}
-export default function CheckupContents(props: Props): JSX.Element {
- const { contents } = props;
+const CheckupContents = ({ contents, ...otherProps }: Props): JSX.Element => {
const testReport = testingContent(contents);
const contentPanel = useMemo(
@@ -82,13 +85,21 @@ export default function CheckupContents(props: Props): JSX.Element {
);
return (
-
1 ? props.year.toString() : undefined}
- >
- {props.items.map((item, index) => (
-
- );
-}
+export const ChronologyYearComponent = ({
+ langui,
+ year,
+ items,
+}: Props): JSX.Element => (
+ 1 ? year.toString() : undefined}
+ >
+ {items.map((item, index) => (
+
+);
diff --git a/src/components/Wiki/DefinitionCard.tsx b/src/components/Wiki/DefinitionCard.tsx
index 7e60cd2..287122c 100644
--- a/src/components/Wiki/DefinitionCard.tsx
+++ b/src/components/Wiki/DefinitionCard.tsx
@@ -17,9 +17,13 @@ interface Props {
index: number;
}
-export default function DefinitionCard(props: Props): JSX.Element {
- const { source, translations = [], languages, langui, index } = props;
-
+const DefinitionCard = ({
+ source,
+ translations = [],
+ languages,
+ langui,
+ index,
+}: Props): JSX.Element => {
const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] =
useSmartLanguage({
items: translations,
@@ -33,8 +37,7 @@ export default function DefinitionCard(props: Props): JSX.Element {
return (
<>
- {/* TODO: Langui */}
- {selectedTranslation?.definition}
);
-}
+};
+export default DefinitionCard;
diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx
index 9c7dc64..5002935 100644
--- a/src/contexts/AppLayoutContext.tsx
+++ b/src/contexts/AppLayoutContext.tsx
@@ -106,15 +106,13 @@ const initialState: RequiredNonNullable = {
const AppContext = React.createContext(initialState);
-export function useAppLayout(): AppLayoutState {
- return useContext(AppContext);
-}
+export const useAppLayout = (): AppLayoutState => useContext(AppContext);
interface Props {
children: ReactNode;
}
-export function AppContextProvider(props: Props): JSX.Element {
+export const AppContextProvider = (props: Props): JSX.Element => {
const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage(
"subPanelOpen",
initialState.subPanelOpen
@@ -176,43 +174,43 @@ export function AppContextProvider(props: Props): JSX.Element {
initialState.libraryItemUserStatus
);
- function toggleSubPanelOpen() {
+ const toggleSubPanelOpen = () => {
setSubPanelOpen((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleConfigPanelOpen() {
+ const toggleConfigPanelOpen = () => {
setConfigPanelOpen((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleSearchPanelOpen() {
+ const toggleSearchPanelOpen = () => {
setSearchPanelOpen((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleMainPanelReduced() {
+ const toggleMainPanelReduced = () => {
setMainPanelReduced((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleMainPanelOpen() {
+ const toggleMainPanelOpen = () => {
setMainPanelOpen((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleDarkMode() {
+ const toggleDarkMode = () => {
setDarkMode((current) => (isDefined(current) ? !current : current));
- }
+ };
- function toggleMenuGestures() {
+ const toggleMenuGestures = () => {
setMenuGestures((current) => !current);
- }
+ };
- function toggleSelectedThemeMode() {
+ const toggleSelectedThemeMode = () => {
setSelectedThemeMode((current) =>
isDefined(current) ? !current : current
);
- }
+ };
- function toggleDyslexic() {
+ const toggleDyslexic = () => {
setDyslexic((current) => (isDefined(current) ? !current : current));
- }
+ };
return (
);
-}
+};
diff --git a/src/graphql/getAppStaticProps.ts b/src/graphql/getAppStaticProps.ts
index 6d3b716..ee040d9 100644
--- a/src/graphql/getAppStaticProps.ts
+++ b/src/graphql/getAppStaticProps.ts
@@ -17,9 +17,9 @@ export type AppStaticProps = {
languages: NonNullable["data"];
};
-export async function getAppStaticProps(
+export const getAppStaticProps = async (
context: GetStaticPropsContext
-): Promise {
+): Promise => {
const sdk = getReadySdk();
const languages = (await sdk.getLanguages()).languages;
@@ -53,4 +53,4 @@ export async function getAppStaticProps(
};
return appStaticProps;
-}
+};
diff --git a/src/graphql/getPostStaticProps.ts b/src/graphql/getPostStaticProps.ts
index 16c6590..97b5a46 100644
--- a/src/graphql/getPostStaticProps.ts
+++ b/src/graphql/getPostStaticProps.ts
@@ -1,5 +1,5 @@
import { PostWithTranslations } from "helpers/types";
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps, GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "./getAppStaticProps";
import { getReadySdk } from "./sdk";
@@ -7,12 +7,8 @@ export interface PostStaticProps extends AppStaticProps {
post: PostWithTranslations;
}
-export function getPostStaticProps(
- slug: string
-): (
- context: GetStaticPropsContext
-) => Promise<{ notFound: boolean } | { props: PostStaticProps }> {
- return async (context: GetStaticPropsContext) => {
+export const getPostStaticProps = (slug: string): GetStaticProps => {
+ return async (context) => {
const sdk = getReadySdk();
const post = await sdk.getPost({
slug: slug,
@@ -29,4 +25,4 @@ export function getPostStaticProps(
}
return { notFound: true };
};
-}
+};
diff --git a/src/graphql/operations/getWebsiteInterface.graphql b/src/graphql/operations/getWebsiteInterface.graphql
index 3b07eed..b6ad3c2 100644
--- a/src/graphql/operations/getWebsiteInterface.graphql
+++ b/src/graphql/operations/getWebsiteInterface.graphql
@@ -154,6 +154,11 @@ query getWebsiteInterface($language_code: String) {
only_display_items_i_want
only_display_unmarked_items
display_all_items
+ table_of_contents
+ definition
+ no_results_message
+ all
+ special_pages
}
}
}
diff --git a/src/graphql/sdk.ts b/src/graphql/sdk.ts
index 9b05ba5..190df8b 100644
--- a/src/graphql/sdk.ts
+++ b/src/graphql/sdk.ts
@@ -1,9 +1,9 @@
import { GraphQLClient } from "graphql-request";
import { getSdk } from "graphql/generated";
-export function getReadySdk() {
+export const getReadySdk = () => {
const client = new GraphQLClient(process.env.URL_GRAPHQL ?? "", {
headers: { Authorization: `Bearer ${process.env.ACCESS_TOKEN}` },
});
return getSdk(client);
-}
+};
diff --git a/src/helpers/className.ts b/src/helpers/className.ts
index 9e983fe..d7473de 100644
--- a/src/helpers/className.ts
+++ b/src/helpers/className.ts
@@ -1,11 +1,11 @@
-export function cIf(
+export const cIf = (
condition: boolean | null | undefined | string,
ifTrueCss: string,
ifFalseCss?: string
-) {
+) => {
return condition ? ifTrueCss : ifFalseCss ?? "";
-}
+};
-export function cJoin(...args: (string | undefined)[]): string {
+export const cJoin = (...args: (string | undefined)[]): string => {
return args.filter((elem) => elem).join(" ");
-}
+};
diff --git a/src/helpers/component.tsx b/src/helpers/component.tsx
index fcbcec2..ff9d575 100644
--- a/src/helpers/component.tsx
+++ b/src/helpers/component.tsx
@@ -2,16 +2,21 @@ export interface Wrapper {
children: React.ReactNode;
}
-export function ConditionalWrapper(props: {
+interface Props {
isWrapping: boolean;
children: React.ReactNode;
wrapper: (wrapperProps: T & Wrapper) => JSX.Element;
wrapperProps: T;
-}): JSX.Element {
- const { isWrapping, children, wrapper: Wrapper, wrapperProps } = props;
- return isWrapping ? (
+}
+
+export const ConditionalWrapper = ({
+ isWrapping,
+ children,
+ wrapper: Wrapper,
+ wrapperProps,
+}: Props): JSX.Element =>
+ isWrapping ? (
{children}
) : (
<>{children}
);
-}
diff --git a/src/helpers/description.ts b/src/helpers/description.ts
index cbdc7e5..03ee88c 100644
--- a/src/helpers/description.ts
+++ b/src/helpers/description.ts
@@ -10,9 +10,12 @@ interface Description {
categories?: Content["categories"];
}
-export function getDescription(props: Description): string {
- const { langui, description: text, type, categories } = props;
-
+export const getDescription = ({
+ langui,
+ description: text,
+ type,
+ categories,
+}: Description): string => {
let description = "";
// TEXT
@@ -44,15 +47,15 @@ export function getDescription(props: Description): string {
}
return description;
-}
+};
-function prettyMarkdown(markdown: string): string {
+const prettyMarkdown = (markdown: string): string => {
return markdown.replace(/[*]/gu, "").replace(/[_]/gu, "");
-}
+};
-function prettyChip(items: (string | undefined)[]): string {
+const prettyChip = (items: (string | undefined)[]): string => {
return items
.filter((item) => isDefined(item))
.map((item) => `(${item})`)
.join(" ");
-}
+};
diff --git a/src/helpers/formatters.ts b/src/helpers/formatters.ts
index bc71cdf..11412e2 100644
--- a/src/helpers/formatters.ts
+++ b/src/helpers/formatters.ts
@@ -2,7 +2,7 @@ import { DatePickerFragment, PricePickerFragment } from "graphql/generated";
import { AppStaticProps } from "../graphql/getAppStaticProps";
import { convertPrice } from "./numbers";
-export function prettyDate(datePicker: DatePickerFragment): string {
+export const prettyDate = (datePicker: DatePickerFragment): string => {
let result = "";
if (datePicker.year) result += datePicker.year.toString();
if (datePicker.month)
@@ -10,13 +10,13 @@ export function prettyDate(datePicker: DatePickerFragment): string {
if (datePicker.day)
result += `/${datePicker.day.toString().padStart(2, "0")}`;
return result;
-}
+};
-export function prettyPrice(
+export const prettyPrice = (
pricePicker: PricePickerFragment,
currencies: AppStaticProps["currencies"],
targetCurrencyCode?: string
-): string {
+): string => {
if (!targetCurrencyCode) return "";
let result = "";
currencies.map((currency) => {
@@ -31,9 +31,9 @@ export function prettyPrice(
}
});
return result;
-}
+};
-export function prettySlug(slug?: string, parentSlug?: string): string {
+export const prettySlug = (slug?: string, parentSlug?: string): string => {
if (slug) {
if (parentSlug && slug.startsWith(parentSlug))
slug = slug.substring(parentSlug.length + 1);
@@ -42,24 +42,24 @@ export function prettySlug(slug?: string, parentSlug?: string): string {
return capitalizeString(slug);
}
return "";
-}
+};
-export function prettyinlineTitle(
+export const prettyinlineTitle = (
pretitle: string | undefined | null,
title: string | undefined | null,
subtitle: string | undefined | null
-): string {
+): string => {
let result = "";
if (pretitle) result += `${pretitle}: `;
result += title;
if (subtitle) result += ` - ${subtitle}`;
return result;
-}
+};
-export function prettyItemType(
+export const prettyItemType = (
metadata: any,
langui: AppStaticProps["langui"]
-): string | undefined | null {
+): string | undefined | null => {
switch (metadata.__typename) {
case "ComponentMetadataAudio":
return langui.audio;
@@ -76,9 +76,9 @@ export function prettyItemType(
default:
return "";
}
-}
+};
-export function prettyItemSubType(
+export const prettyItemSubType = (
metadata:
| {
__typename: "ComponentMetadataAudio";
@@ -156,7 +156,7 @@ export function prettyItemSubType(
}
| { __typename: "Error" }
| null
-): string {
+): string => {
if (metadata) {
switch (metadata.__typename) {
case "ComponentMetadataAudio":
@@ -195,9 +195,9 @@ export function prettyItemSubType(
}
return "";
/* eslint-enable @typescript-eslint/no-explicit-any */
-}
+};
-export function prettyShortenNumber(number: number): string {
+export const prettyShortenNumber = (number: number): string => {
if (number > 1000000) {
return number.toLocaleString(undefined, {
maximumSignificantDigits: 3,
@@ -210,9 +210,9 @@ export function prettyShortenNumber(number: number): string {
);
}
return number.toLocaleString();
-}
+};
-export function prettyDuration(seconds: number): string {
+export const prettyDuration = (seconds: number): string => {
let hours = 0;
let minutes = 0;
while (seconds > 60) {
@@ -228,36 +228,36 @@ export function prettyDuration(seconds: number): string {
result += minutes.toString().padStart(2, "0") + ":";
result += seconds.toString().padStart(2, "0");
return result;
-}
+};
-export function prettyLanguage(
+export const prettyLanguage = (
code: string,
languages: AppStaticProps["languages"]
-): string {
+): string => {
let result = code;
languages.forEach((language) => {
if (language?.attributes?.code === code)
result = language.attributes.localized_name;
});
return result;
-}
+};
-export function prettyURL(url: string): string {
+export const prettyURL = (url: string): string => {
let domain = new URL(url);
return domain.hostname.replace("www.", "");
-}
+};
-function capitalizeString(string: string): string {
- function capitalizeWord(word: string): string {
+const capitalizeString = (string: string): string => {
+ const capitalizeWord = (word: string): string => {
return word.charAt(0).toUpperCase() + word.substring(1);
- }
+ };
let words = string.split(" ");
words = words.map((word) => capitalizeWord(word));
return words.join(" ");
-}
+};
-export function slugify(string: string | undefined): string {
+export const slugify = (string: string | undefined): string => {
if (!string) {
return "";
}
@@ -275,4 +275,4 @@ export function slugify(string: string | undefined): string {
.replace(/[^a-z0-9- ]/gu, "")
.trim()
.replace(/ /gu, "-");
-}
+};
diff --git a/src/helpers/img.ts b/src/helpers/img.ts
index b0db378..089e6c9 100644
--- a/src/helpers/img.ts
+++ b/src/helpers/img.ts
@@ -14,7 +14,7 @@ interface OgImage {
alt: string;
}
-export function getAssetFilename(path: string): string {
+export const getAssetFilename = (path: string): string => {
let result = path.split("/");
result = result[result.length - 1].split(".");
result = result
@@ -22,9 +22,9 @@ export function getAssetFilename(path: string): string {
.join(".")
.split("_");
return result[0];
-}
+};
-export function getAssetURL(url: string, quality: ImageQuality): string {
+export const getAssetURL = (url: string, quality: ImageQuality): string => {
let newUrl = url;
newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
newUrl = newUrl.replace(/.jpg$/u, ".webp");
@@ -32,26 +32,26 @@ export function getAssetURL(url: string, quality: ImageQuality): string {
newUrl = newUrl.replace(/.png$/u, ".webp");
if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg");
return process.env.NEXT_PUBLIC_URL_IMG + newUrl;
-}
+};
-function getImgSizesByMaxSize(
+const getImgSizesByMaxSize = (
width: number,
height: number,
maxSize: number
-): { width: number; height: number } {
+): { width: number; height: number } => {
if (width > height) {
if (width < maxSize) return { width: width, height: height };
return { width: maxSize, height: (height / width) * maxSize };
}
if (height < maxSize) return { width: width, height: height };
return { width: (width / height) * maxSize, height: maxSize };
-}
+};
-export function getImgSizesByQuality(
+export const getImgSizesByQuality = (
width: number,
height: number,
quality: ImageQuality
-): { width: number; height: number } {
+): { width: number; height: number } => {
switch (quality) {
case ImageQuality.Og:
return getImgSizesByMaxSize(width, height, 512);
@@ -64,12 +64,12 @@ export function getImgSizesByQuality(
default:
return { width: 0, height: 0 };
}
-}
+};
-export function getOgImage(
+export const getOgImage = (
quality: ImageQuality,
image: UploadImageFragment
-): OgImage {
+): OgImage => {
const imgSize = getImgSizesByQuality(
image.width ?? 0,
image.height ?? 0,
@@ -81,4 +81,4 @@ export function getOgImage(
height: imgSize.height,
alt: image.alternativeText || "",
};
-}
+};
diff --git a/src/helpers/libraryItem.ts b/src/helpers/libraryItem.ts
index 4c56a8f..1061a5b 100644
--- a/src/helpers/libraryItem.ts
+++ b/src/helpers/libraryItem.ts
@@ -10,11 +10,11 @@ import LibraryPage from "../pages/library/index";
type Items = Parameters[0]["items"];
type GroupLibraryItems = Map;
-export function getGroups(
+export const getGroups = (
langui: AppStaticProps["langui"],
groupByType: number,
items: Items
-): GroupLibraryItems {
+): GroupLibraryItems => {
const groups: GroupLibraryItems = new Map();
switch (groupByType) {
@@ -145,9 +145,9 @@ export function getGroups(
}
}
return mapRemoveEmptyValues(groups);
-}
+};
-export function filterItems(
+export const filterItems = (
appLayout: AppLayoutState,
items: Items,
searchName: string,
@@ -155,7 +155,7 @@ export function filterItems(
showPrimaryItems: boolean,
showSecondaryItems: boolean,
filterUserStatus: LibraryItemUserStatus | undefined
-): Items {
+): Items => {
return items.filter((item) => {
if (!showSubitems && !item.attributes?.root_item) return false;
if (showSubitems && isUntangibleGroupItem(item.attributes?.metadata?.[0])) {
@@ -194,23 +194,23 @@ export function filterItems(
return true;
});
-}
+};
// TODO: Properly type this shit
-export function isUntangibleGroupItem(metadata: any) {
+export const isUntangibleGroupItem = (metadata: any) => {
return (
metadata &&
metadata.__typename === "ComponentMetadataGroup" &&
(metadata.subtype?.data?.attributes?.slug === "variant-set" ||
metadata.subtype?.data?.attributes?.slug === "relation-set")
);
-}
+};
-export function sortBy(
+export const sortBy = (
orderByType: number,
items: Items,
currencies: AppStaticProps["currencies"]
-) {
+) => {
switch (orderByType) {
case 0:
return items.sort((a, b) => {
@@ -249,4 +249,4 @@ export function sortBy(
default:
return items;
}
-}
+};
diff --git a/src/helpers/numbers.ts b/src/helpers/numbers.ts
index 414a1d7..cf14369 100644
--- a/src/helpers/numbers.ts
+++ b/src/helpers/numbers.ts
@@ -1,9 +1,9 @@
import { GetCurrenciesQuery, PricePickerFragment } from "graphql/generated";
-export function convertPrice(
+export const convertPrice = (
pricePicker: PricePickerFragment,
targetCurrency: NonNullable["data"][number]
-): number {
+): number => {
if (
pricePicker.amount &&
pricePicker.currency?.data?.attributes &&
@@ -14,17 +14,17 @@ export function convertPrice(
targetCurrency.attributes.rate_to_usd
);
return 0;
-}
+};
-export function convertMmToInch(mm: number | null | undefined): string {
+export const convertMmToInch = (mm: number | null | undefined): string => {
return mm ? (mm * 0.03937008).toPrecision(3) : "";
-}
+};
-export function randomInt(min: number, max: number) {
+export const randomInt = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min)) + min;
-}
+};
-export function isInteger(value: string): boolean {
+export const isInteger = (value: string): boolean => {
// eslint-disable-next-line require-unicode-regexp
return /^[+-]?[0-9]+$/.test(value);
-}
+};
diff --git a/src/helpers/others.ts b/src/helpers/others.ts
index cb5ed3c..c4b8ab3 100644
--- a/src/helpers/others.ts
+++ b/src/helpers/others.ts
@@ -18,7 +18,7 @@ type SortContentProps =
>["data"][number]["attributes"]
>["contents"];
-export function sortContent(contents: SortContentProps) {
+export const sortContent = (contents: SortContentProps) => {
contents?.data.sort((a, b) => {
if (
a.attributes?.range[0]?.__typename === "ComponentRangePageRange" &&
@@ -31,12 +31,12 @@ export function sortContent(contents: SortContentProps) {
}
return 0;
});
-}
+};
-export function getStatusDescription(
+export const getStatusDescription = (
status: string,
langui: AppStaticProps["langui"]
-): string | null | undefined {
+): string | null | undefined => {
switch (status) {
case Enum_Componentsetstextset_Status.Incomplete:
return langui.status_incomplete;
@@ -53,45 +53,44 @@ export function getStatusDescription(
default:
return "";
}
-}
+};
-export function isDefined(t: T): t is NonNullable {
- return t !== null && t !== undefined;
-}
+export const isDefined = (t: T): t is NonNullable =>
+ t !== null && t !== undefined;
-export function isUndefined(t: T | undefined | null): t is undefined | null {
- return t === null || t === undefined;
-}
+export const isUndefined = (
+ t: T | undefined | null
+): t is undefined | null => t === null || t === undefined;
-export function isDefinedAndNotEmpty(
+export const isDefinedAndNotEmpty = (
string: string | undefined | null
-): string is string {
- return isDefined(string) && string.length > 0;
-}
+): string is string => isDefined(string) && string.length > 0;
-export function filterDefined(t: T[] | undefined | null): NonNullable[] {
- if (isUndefined(t)) return [];
- return t.filter((item) => isDefined(item)) as NonNullable[];
-}
+export const filterDefined = (t: T[] | undefined | null): NonNullable[] =>
+ isUndefined(t)
+ ? []
+ : (t.filter((item) => isDefined(item)) as NonNullable[]);
-export function filterHasAttributes>(
+export const filterHasAttributes = >(
t: T[] | undefined | null,
attributes?: P[]
-): SelectiveRequiredNonNullable, P>[] {
- if (isUndefined(t)) return [];
- return t.filter((item) => {
- if (isDefined(item)) {
- const attributesToCheck = attributes ?? (Object.keys(item) as P[]);
- return attributesToCheck.every((attribute) => isDefined(item[attribute]));
- }
- return false;
- }) as unknown as SelectiveRequiredNonNullable, P>[];
-}
+): SelectiveRequiredNonNullable, P>[] =>
+ isUndefined(t)
+ ? []
+ : (t.filter((item) => {
+ if (isDefined(item)) {
+ const attributesToCheck = attributes ?? (Object.keys(item) as P[]);
+ return attributesToCheck.every((attribute) =>
+ isDefined(item[attribute])
+ );
+ }
+ return false;
+ }) as unknown as SelectiveRequiredNonNullable, P>[]);
-export function iterateMap(
+export const iterateMap = (
map: Map,
callbackfn: (key: K, value: V, index: number) => U
-): U[] {
+): U[] => {
const result: U[] = [];
let index = 0;
for (const [key, value] of map.entries()) {
@@ -99,21 +98,18 @@ export function iterateMap(
index += 1;
}
return result;
-}
+};
-export function mapMoveEntry(
+export const mapMoveEntry = (
map: Map,
sourceIndex: number,
targetIndex: number
-) {
- return new Map(arrayMove([...map], sourceIndex, targetIndex));
-}
+) => new Map(arrayMove([...map], sourceIndex, targetIndex));
-function arrayMove(arr: T[], sourceIndex: number, targetIndex: number) {
+const arrayMove = (arr: T[], sourceIndex: number, targetIndex: number) => {
arr.splice(targetIndex, 0, arr.splice(sourceIndex, 1)[0]);
return arr;
-}
+};
-export function mapRemoveEmptyValues(groups: Map): Map {
- return new Map([...groups].filter(([_, items]) => items.length > 0));
-}
+export const mapRemoveEmptyValues = (groups: Map): Map =>
+ new Map([...groups].filter(([_, items]) => items.length > 0));
diff --git a/src/helpers/videos.ts b/src/helpers/videos.ts
index fb80203..5d46fe3 100644
--- a/src/helpers/videos.ts
+++ b/src/helpers/videos.ts
@@ -1,7 +1,5 @@
-export function getVideoThumbnailURL(uid: string): string {
- return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.webp`;
-}
+export const getVideoThumbnailURL = (uid: string): string =>
+ `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.webp`;
-export function getVideoFile(uid: string): string {
- return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.mp4`;
-}
+export const getVideoFile = (uid: string): string =>
+ `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.mp4`;
diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
index 72b26ea..f0a1510 100644
--- a/src/hooks/useDarkMode.ts
+++ b/src/hooks/useDarkMode.ts
@@ -2,7 +2,7 @@ import { useEffect } from "react";
import { usePrefersDarkMode } from "./useMediaQuery";
import { useStateWithLocalStorage } from "./useStateWithLocalStorage";
-export function useDarkMode(
+export const useDarkMode = (
key: string,
initialValue: boolean | undefined
): [
@@ -10,11 +10,9 @@ export function useDarkMode(
boolean | undefined,
React.Dispatch>,
React.Dispatch>
-] {
+] => {
const [darkMode, setDarkMode] = useStateWithLocalStorage(key, initialValue);
-
const prefersDarkMode = usePrefersDarkMode();
-
const [selectedThemeMode, setSelectedThemeMode] = useStateWithLocalStorage(
"selectedThemeMode",
false
@@ -25,4 +23,4 @@ export function useDarkMode(
}, [selectedThemeMode, prefersDarkMode, setDarkMode]);
return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode];
-}
+};
diff --git a/src/hooks/useLightBox.tsx b/src/hooks/useLightBox.tsx
index f4b7f4a..4730b11 100644
--- a/src/hooks/useLightBox.tsx
+++ b/src/hooks/useLightBox.tsx
@@ -1,10 +1,10 @@
import { LightBox } from "components/LightBox";
import { useState } from "react";
-export function useLightBox(): [
+export const useLightBox = (): [
(images: string[], index?: number) => void,
() => JSX.Element
-] {
+] => {
const [lightboxOpen, setLightboxOpen] = useState(false);
const [lightboxImages, setLightboxImages] = useState([""]);
const [lightboxIndex, setLightboxIndex] = useState(0);
@@ -25,4 +25,4 @@ export function useLightBox(): [
/>
),
];
-}
+};
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
index 244d025..df888e6 100644
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -1,21 +1,21 @@
import { useEffect, useState } from "react";
import { breaks } from "../../design.config";
-function useMediaQuery(query: string): boolean {
- function getMatches(query: string): boolean {
+const useMediaQuery = (query: string): boolean => {
+ const getMatches = (query: string): boolean => {
// Prevents SSR issues
if (typeof window !== "undefined") {
return window.matchMedia(query).matches;
}
return false;
- }
+ };
const [matches, setMatches] = useState(getMatches(query));
useEffect(() => {
- function handleChange() {
+ const handleChange = () => {
setMatches(getMatches(query));
- }
+ };
const matchMedia = window.matchMedia(query);
@@ -31,25 +31,16 @@ function useMediaQuery(query: string): boolean {
}, [query]);
return matches;
-}
+};
// ts-unused-exports:disable-next-line
-export function useMediaThin() {
- return useMediaQuery(breaks.thin.raw);
-}
+export const useMediaThin = () => useMediaQuery(breaks.thin.raw);
-export function useMediaMobile() {
- return useMediaQuery(breaks.mobile.raw);
-}
+export const useMediaMobile = () => useMediaQuery(breaks.mobile.raw);
-export function useMediaDesktop() {
- return useMediaQuery(breaks.desktop.raw);
-}
+export const useMediaDesktop = () => useMediaQuery(breaks.desktop.raw);
-export function useMediaHoverable() {
- return useMediaQuery("(hover: hover)");
-}
+export const useMediaHoverable = () => useMediaQuery("(hover: hover)");
-export function usePrefersDarkMode() {
- return useMediaQuery("(prefers-color-scheme: dark)");
-}
+export const usePrefersDarkMode = () =>
+ useMediaQuery("(prefers-color-scheme: dark)");
diff --git a/src/hooks/useScrollTopOnChange.ts b/src/hooks/useScrollTopOnChange.ts
index fb7347d..26e06f6 100644
--- a/src/hooks/useScrollTopOnChange.ts
+++ b/src/hooks/useScrollTopOnChange.ts
@@ -5,8 +5,8 @@ export enum AnchorIds {
}
// Scroll to top of element "id" when "deps" update.
-export function useScrollTopOnChange(id: AnchorIds, deps: DependencyList) {
+export const useScrollTopOnChange = (id: AnchorIds, deps: DependencyList) => {
useEffect(() => {
document.querySelector(`#${id}`)?.scrollTo({ top: 0, behavior: "smooth" });
}, deps);
-}
+};
diff --git a/src/hooks/useSmartLanguage.ts b/src/hooks/useSmartLanguage.ts
index 001d00a..b38d2db 100644
--- a/src/hooks/useSmartLanguage.ts
+++ b/src/hooks/useSmartLanguage.ts
@@ -13,31 +13,28 @@ interface Props {
transform?: (item: NonNullable) => NonNullable;
}
-function getPreferredLanguage(
+const getPreferredLanguage = (
preferredLanguages: (string | undefined)[],
availableLanguages: Map
-): number | undefined {
+): number | undefined => {
for (const locale of preferredLanguages) {
if (isDefined(locale) && availableLanguages.has(locale)) {
return availableLanguages.get(locale);
}
}
return undefined;
-}
+};
-export function useSmartLanguage(
- props: Props
-): [
+export const useSmartLanguage = ({
+ items,
+ languageExtractor,
+ languages,
+ transform = (item) => item,
+}: Props): [
T | undefined,
typeof LanguageSwitcher,
Parameters[0]
-] {
- const {
- items,
- languageExtractor,
- languages,
- transform = (item) => item,
- } = props;
+] => {
const { preferredLanguages } = useAppLayout();
const router = useRouter();
@@ -81,4 +78,4 @@ export function useSmartLanguage(
};
return [selectedTranslation, LanguageSwitcher, languageSwitcherProps];
-}
+};
diff --git a/src/hooks/useSmartLanguage.tsx b/src/hooks/useSmartLanguage.tsx
deleted file mode 100644
index 001d00a..0000000
--- a/src/hooks/useSmartLanguage.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { LanguageSwitcher } from "components/Inputs/LanguageSwitcher";
-import { useAppLayout } from "contexts/AppLayoutContext";
-import { AppStaticProps } from "graphql/getAppStaticProps";
-import { filterDefined, isDefined } from "helpers/others";
-
-import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
-
-interface Props {
- items: T[];
- languages: AppStaticProps["languages"];
- languageExtractor: (item: NonNullable) => string | undefined;
- transform?: (item: NonNullable) => NonNullable;
-}
-
-function getPreferredLanguage(
- preferredLanguages: (string | undefined)[],
- availableLanguages: Map
-): number | undefined {
- for (const locale of preferredLanguages) {
- if (isDefined(locale) && availableLanguages.has(locale)) {
- return availableLanguages.get(locale);
- }
- }
- return undefined;
-}
-
-export function useSmartLanguage(
- props: Props
-): [
- T | undefined,
- typeof LanguageSwitcher,
- Parameters[0]
-] {
- const {
- items,
- languageExtractor,
- languages,
- transform = (item) => item,
- } = props;
- const { preferredLanguages } = useAppLayout();
- const router = useRouter();
-
- const availableLocales = useMemo(() => {
- const memo = new Map();
- filterDefined(items).map((elem, index) => {
- const result = languageExtractor(elem);
- if (isDefined(result)) memo.set(result, index);
- });
- return memo;
- }, [items, languageExtractor]);
-
- const [selectedTranslationIndex, setSelectedTranslationIndex] = useState<
- number | undefined
- >();
-
- useEffect(() => {
- setSelectedTranslationIndex(
- getPreferredLanguage(
- preferredLanguages ?? [router.locale],
- availableLocales
- )
- );
- }, [preferredLanguages, availableLocales, router.locale]);
-
- const selectedTranslation = useMemo(() => {
- if (isDefined(selectedTranslationIndex)) {
- const item = items[selectedTranslationIndex];
- if (isDefined(item)) {
- return transform(item);
- }
- }
- return undefined;
- }, [items, selectedTranslationIndex, transform]);
-
- const languageSwitcherProps = {
- languages: languages,
- locales: availableLocales,
- localesIndex: selectedTranslationIndex,
- onLanguageChanged: setSelectedTranslationIndex,
- };
-
- return [selectedTranslation, LanguageSwitcher, languageSwitcherProps];
-}
diff --git a/src/hooks/useStateWithLocalStorage.ts b/src/hooks/useStateWithLocalStorage.ts
index 039d990..4deba5c 100644
--- a/src/hooks/useStateWithLocalStorage.ts
+++ b/src/hooks/useStateWithLocalStorage.ts
@@ -1,10 +1,10 @@
import { isDefined } from "helpers/others";
import { useEffect, useState } from "react";
-export function useStateWithLocalStorage(
+export const useStateWithLocalStorage = (
key: string,
initialValue: T
-): [T | undefined, React.Dispatch>] {
+): [T | undefined, React.Dispatch>] => {
const [value, setValue] = useState(undefined);
const [, setFromLocaleStorage] = useState(false);
@@ -28,4 +28,4 @@ export function useStateWithLocalStorage(
}, [value, key]);
return [value, setValue];
-}
+};
diff --git a/src/hooks/useToggle.ts b/src/hooks/useToggle.ts
index ab13a9c..2b43dd3 100644
--- a/src/hooks/useToggle.ts
+++ b/src/hooks/useToggle.ts
@@ -1,7 +1,6 @@
import { Dispatch, SetStateAction, useCallback } from "react";
-export function useToggle(setState: Dispatch>) {
- return useCallback(() => {
+export const useToggle = (setState: Dispatch>) =>
+ useCallback(() => {
setState((current) => !current);
}, []);
-}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 12938a4..1f0dce0 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -5,16 +5,19 @@ import {
} from "components/PanelComponents/ReturnButton";
import { ContentPanel } from "components/Panels/ContentPanel";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { GetStaticProps } from "next";
-import { GetStaticPropsContext } from "next";
-import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
interface Props extends AppStaticProps {}
-export default function FourOhFour(props: Props): JSX.Element {
- const { langui } = props;
- const contentPanel = useMemo(
- () => (
+const FourOhFour = ({ langui, ...otherProps }: Props): JSX.Element => (
+
-
- );
-}
+const AccordsLibraryApp = (props: AppProps): JSX.Element => (
+
+
+);
+export default AccordsLibraryApp;
diff --git a/src/pages/about-us/accords-handbook.tsx b/src/pages/about-us/accords-handbook.tsx
index dab1b83..78dce0b 100644
--- a/src/pages/about-us/accords-handbook.tsx
+++ b/src/pages/about-us/accords-handbook.tsx
@@ -4,20 +4,33 @@ import {
PostStaticProps,
} from "graphql/getPostStaticProps";
-export default function AccordsHandbook(props: PostStaticProps): JSX.Element {
- const { post, langui, languages, currencies } = props;
- return (
-
-) {
+) => {
if (req.method === "POST") {
const body = req.body as RequestMailProps;
@@ -48,4 +48,5 @@ export default async function Mail(
}
res.status(200).json({ code: "OKAY" });
-}
+};
+export default Mail;
diff --git a/src/pages/api/revalidate.ts b/src/pages/api/revalidate.ts
index 269f9fe..e8791ec 100644
--- a/src/pages/api/revalidate.ts
+++ b/src/pages/api/revalidate.ts
@@ -81,10 +81,10 @@ type ResponseMailProps = {
revalidated: boolean;
};
-export default async function Revalidate(
+const Revalidate = async (
req: NextApiRequest,
res: NextApiResponse
-) {
+) => {
const body = req.body as RequestProps;
const { serverRuntimeConfig } = getConfig();
@@ -217,4 +217,5 @@ export default async function Revalidate(
.status(500)
.send({ message: "Error revalidating", revalidated: false });
}
-}
+};
+export default Revalidate;
diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx
index f4b5a48..6f3fc75 100644
--- a/src/pages/archives/index.tsx
+++ b/src/pages/archives/index.tsx
@@ -4,14 +4,18 @@ import { PanelHeader } from "components/PanelComponents/PanelHeader";
import { SubPanel } from "components/Panels/SubPanel";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { Icon } from "components/Ico";
import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {}
-export default function Archives(props: Props): JSX.Element {
- const { langui } = props;
+const Archives = ({ langui, ...otherProps }: Props): JSX.Element => {
const subPanel = useMemo(
() => (
@@ -26,17 +30,26 @@ export default function Archives(props: Props): JSX.Element {
[langui]
);
return (
- {
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const getStaticPaths: GetStaticPaths = async (context) => {
const sdk = getReadySdk();
const channels = await sdk.getVideoChannelsSlugs();
const paths: GetStaticPathsResult["paths"] = [];
@@ -159,4 +164,4 @@ export async function getStaticPaths(
paths,
fallback: "blocking",
};
-}
+};
diff --git a/src/pages/archives/videos/index.tsx b/src/pages/archives/videos/index.tsx
index eebbf74..2f921b1 100644
--- a/src/pages/archives/videos/index.tsx
+++ b/src/pages/archives/videos/index.tsx
@@ -21,18 +21,29 @@ import { prettyDate } from "helpers/formatters";
import { filterHasAttributes } from "helpers/others";
import { getVideoThumbnailURL } from "helpers/videos";
import { useMediaHoverable } from "hooks/useMediaQuery";
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { Fragment, useMemo, useState } from "react";
+/*
+ * ╭─────────────╮
+ * ────────────────────────────────────────╯ CONSTANTS ╰──────────────────────────────────────────
+ */
+
+const ITEM_PER_PAGE = 50;
+
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {
videos: NonNullable["data"];
}
-const ITEM_PER_PAGE = 50;
-
-export default function Videos(props: Props): JSX.Element {
- const { langui, videos } = props;
+const Videos = ({ langui, videos, ...otherProps }: Props): JSX.Element => {
const hoverable = useMediaHoverable();
+ const [page, setPage] = useState(0);
+ const [keepInfoVisible, setKeepInfoVisible] = useState(true);
const paginatedVideos = useMemo(() => {
const memo = [];
@@ -44,9 +55,6 @@ export default function Videos(props: Props): JSX.Element {
return memo;
}, [videos]);
- const [page, setPage] = useState(0);
- const [keepInfoVisible, setKeepInfoVisible] = useState(true);
-
const subPanel = useMemo(
() => (
@@ -130,14 +138,19 @@ export default function Videos(props: Props): JSX.Element {
navTitle={langui.archives}
subPanel={subPanel}
contentPanel={contentPanel}
- {...props}
+ langui={langui}
+ {...otherProps}
/>
);
-}
+};
+export default Videos;
-export async function getStaticProps(
- context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
+/*
+ * ╭──────────────────────╮
+ * ───────────────────────────────────╯ NEXT DATA FETCHING ╰──────────────────────────────────────
+ */
+
+export const getStaticProps: GetStaticProps = async (context) => {
const sdk = getReadySdk();
const videos = await sdk.getVideosPreview();
if (!videos.videos) return { notFound: true };
@@ -159,4 +172,4 @@ export async function getStaticProps(
return {
props: props,
};
-}
+};
diff --git a/src/pages/archives/videos/v/[uid].tsx b/src/pages/archives/videos/v/[uid].tsx
index bd4c530..247bed4 100644
--- a/src/pages/archives/videos/v/[uid].tsx
+++ b/src/pages/archives/videos/v/[uid].tsx
@@ -21,21 +21,21 @@ import { prettyDate, prettyShortenNumber } from "helpers/formatters";
import { filterHasAttributes, isDefined } from "helpers/others";
import { getVideoFile } from "helpers/videos";
import { useMediaMobile } from "hooks/useMediaQuery";
-import {
- GetStaticPathsContext,
- GetStaticPathsResult,
- GetStaticPropsContext,
-} from "next";
+import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {
video: NonNullable<
NonNullable["data"][number]["attributes"]
>;
}
-export default function Video(props: Props): JSX.Element {
- const { langui, video } = props;
+const Video = ({ langui, video, ...otherProps }: Props): JSX.Element => {
const isMobile = useMediaMobile();
const appLayout = useAppLayout();
const subPanel = useMemo(
@@ -201,14 +201,19 @@ export default function Video(props: Props): JSX.Element {
navTitle={langui.archives}
subPanel={subPanel}
contentPanel={contentPanel}
- {...props}
+ langui={langui}
+ {...otherProps}
/>
);
-}
+};
+export default Video;
-export async function getStaticProps(
- context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
+/*
+ * ╭──────────────────────╮
+ * ───────────────────────────────────╯ NEXT DATA FETCHING ╰──────────────────────────────────────
+ */
+
+export const getStaticProps: GetStaticProps = async (context) => {
const sdk = getReadySdk();
const videos = await sdk.getVideo({
uid:
@@ -224,11 +229,11 @@ export async function getStaticProps(
return {
props: props,
};
-}
+};
-export async function getStaticPaths(
- context: GetStaticPathsContext
-): Promise {
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const getStaticPaths: GetStaticPaths = async (context) => {
const sdk = getReadySdk();
const videos = await sdk.getVideosSlugs();
const paths: GetStaticPathsResult["paths"] = [];
@@ -242,4 +247,4 @@ export async function getStaticPaths(
paths,
fallback: "blocking",
};
-}
+};
diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx
index b212112..202e56e 100644
--- a/src/pages/chronicles/index.tsx
+++ b/src/pages/chronicles/index.tsx
@@ -3,14 +3,18 @@ import { PanelHeader } from "components/PanelComponents/PanelHeader";
import { SubPanel } from "components/Panels/SubPanel";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { GetStaticPropsContext } from "next";
+import { GetStaticProps } from "next";
import { Icon } from "components/Ico";
import { useMemo } from "react";
+/*
+ * ╭────────╮
+ * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
+ */
+
interface Props extends AppStaticProps {}
-export default function Chronicles(props: Props): JSX.Element {
- const { langui } = props;
+const Chronicles = ({ langui, ...otherProps }: Props): JSX.Element => {
const subPanel = useMemo(
() => (
@@ -25,17 +29,26 @@ export default function Chronicles(props: Props): JSX.Element {
);
return (
- ["data"]
- >["attributes"]
- >["contents"]
->["data"];
-
-export default function Content(props: Props): JSX.Element {
- const { langui, content, languages, currencies } = props;
+const Content = ({
+ langui,
+ content,
+ languages,
+ currencies,
+ ...otherProps
+}: Props): JSX.Element => {
const isMobile = useMediaMobile();
const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] =
@@ -253,15 +250,14 @@ export default function Content(props: Props): JSX.Element {
position: "Bottom",
}}
infoAppend={
-
@@ -277,13 +273,14 @@ export default function Content(props: Props): JSX.Element {
{selectedTranslation?.text_set?.text && (
<>
{`Definition ${index}`}
+{`${langui.definition} ${index}`}
{selectedTranslation?.status && (404 - {langui.page_not_found}
500 - Internal Server Error
-
),
@@ -453,6 +456,7 @@ export default function Editor(props: Props): JSX.Element {
converterOpened,
handleInput,
insert,
+ langui,
markdown,
preline,
toggleWrap,
@@ -464,18 +468,23 @@ export default function Editor(props: Props): JSX.Element {