- {state === -1 ? "—" : options[state]} + {value === -1 ? "—" : options[value]}
- {state >= 0 && allowEmpty && ( + {value >= 0 && allowEmpty && ( {
setOpened(false);
- setState(index);
+ onChange(index);
}}
>
{option}
diff --git a/src/components/Inputs/Switch.tsx b/src/components/Inputs/Switch.tsx
index ff8184b..62cc374 100644
--- a/src/components/Inputs/Switch.tsx
+++ b/src/components/Inputs/Switch.tsx
@@ -1,6 +1,4 @@
-import { Dispatch, SetStateAction } from "react";
import { cIf, cJoin } from "helpers/className";
-import { useToggle } from "hooks/useToggle";
/*
* ╭─────────────╮
@@ -8,8 +6,8 @@ import { useToggle } from "hooks/useToggle";
*/
interface Props {
- setState: Dispatch>;
- state: boolean;
+ onClick: () => void;
+ value: boolean;
className?: string;
disabled?: boolean;
}
@@ -17,38 +15,31 @@ interface Props {
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
export const Switch = ({
- state,
- setState,
+ value,
+ onClick,
className,
disabled = false,
-}: Props): JSX.Element => {
- const toggleState = useToggle(setState);
- return (
+}: Props): JSX.Element => (
+
+);
diff --git a/src/components/Inputs/TextInput.tsx b/src/components/Inputs/TextInput.tsx
index 8f81017..db9427a 100644
--- a/src/components/Inputs/TextInput.tsx
+++ b/src/components/Inputs/TextInput.tsx
@@ -1,4 +1,3 @@
-import { Dispatch, SetStateAction } from "react";
import { Ico, Icon } from "components/Ico";
import { cJoin } from "helpers/className";
import { isDefinedAndNotEmpty } from "helpers/others";
@@ -9,10 +8,8 @@ import { isDefinedAndNotEmpty } from "helpers/others";
*/
interface Props {
- state: string | undefined;
- setState:
- | Dispatch {
+ if (!disabled) onClick();
+ }}
+ >
+ {
- if (!disabled) toggleState();
- }}
- >
-
-
- );
-};
+ > {
event.preventDefault();
- appLayout.setLibraryItemUserStatus((current) => {
+ setLibraryItemUserStatus((current) => {
const newLibraryItemUserStatus = current ? { ...current } : {};
newLibraryItemUserStatus[id] =
newLibraryItemUserStatus[id] === LibraryItemUserStatus.Want
@@ -56,13 +53,10 @@ export const PreviewCardCTAs = ({
@@ -153,8 +152,7 @@ export const ScanSet = ({
{selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
- {/* TODO: Add Scanner to langui */}
-
{"Scanners"}:
+{langui.scanners}:
{filterHasAttributes(selectedScan.scanners.data, [
"id",
@@ -173,8 +171,7 @@ export const ScanSet = ({
{selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
- {/* TODO: Add Cleaners to langui */}
-
{"Cleaners"}:
+{langui.cleaners}:
{filterHasAttributes(selectedScan.cleaners.data, [
"id",
@@ -194,8 +191,9 @@ export const ScanSet = ({
{selectedScan.typesetters &&
selectedScan.typesetters.data.length > 0 && (
{
- if (
- compProps.href.startsWith("/") ||
- compProps.href.startsWith("#")
- ) {
- return (
- router.push(compProps.href)}>
- {compProps.children}
-
- );
- }
+ if (isUndefined(text) || text === "") {
+ return <>;
+ }
+
+ return (
+ <>
+ {
+ if (
+ compProps.href.startsWith("/") ||
+ compProps.href.startsWith("#")
+ ) {
return (
-
+ router.push(compProps.href)}>
{compProps.children}
);
- },
- },
-
- h1: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
+ }
+ return (
+
{compProps.children}
-
- ),
+
+ );
},
+ },
- h2: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h1: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- h3: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h2: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- h4: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h3: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- h5: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h4: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- h6: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h5: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- SceneBreak: {
- component: (compProps: { id: string }) => (
-
+ {compProps.children}
+
+ ),
+ },
- IntraLink: {
- component: (compProps: {
- children: React.ReactNode;
- target?: string;
- page?: string;
- }) => {
- const slug = isDefinedAndNotEmpty(compProps.target)
- ? slugify(compProps.target)
- : slugify(compProps.children?.toString());
- return (
-
- router.replace(`${compProps.page ?? ""}#${slug}`)
- }
- >
- {compProps.children}
-
- );
- },
- },
+ SceneBreak: {
+ component: (compProps: { id: string }) => (
+ "}
-
- ),
- },
-
- Transcript: {
- component: (compProps) => (
- {compProps.children}
- ),
- },
-
- li: {
- component: (compProps: { children: React.ReactNode }) => (
- {compProps.children}
- ).length > 100
- ? "my-4"
- : ""
+ IntraLink: {
+ component: (compProps: {
+ children: React.ReactNode;
+ target?: string;
+ page?: string;
+ }) => {
+ const slug = isDefinedAndNotEmpty(compProps.target)
+ ? slugify(compProps.target)
+ : slugify(compProps.children?.toString());
+ return (
+
+ router.replace(`${compProps.page ?? ""}#${slug}`)
}
>
{compProps.children}
-
- ),
- },
-
- Highlight: {
- component: (compProps: { children: React.ReactNode }) => (
- {compProps.children}
- ),
- },
-
- footer: {
- component: (compProps: { children: React.ReactNode }) => (
- <>
-
-
- );
- }
- return <>;
+
+ Transcript: {
+ component: (compProps) => (
+ {compProps.children}
+ ),
+ },
+
+ li: {
+ component: (compProps: { children: React.ReactNode }) => (
+ {compProps.children}
+ ).length > 100
+ ? "my-4"
+ : ""
+ }
+ >
+ {compProps.children}
+
+ ),
+ },
+
+ Highlight: {
+ component: (compProps: { children: React.ReactNode }) => (
+ {compProps.children}
+ ),
+ },
+
+ footer: {
+ component: (compProps: { children: React.ReactNode }) => (
+ <>
+
+
+ );
};
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
@@ -422,21 +415,6 @@ const HeaderToolTip = (props: { id: string }): JSX.Element => (
* ───────────────────────────────────╯ PRIVATE COMPONENTS ╰──────────────────────────────────────
*/
-const typographicRules = (text: string): string => {
- let newText = text;
- newText = newText.replace(/--/gu, "—");
- /*
- * newText = newText.replace(/\.\.\./gu, "…");
- * newText = newText.replace(/(?:^|[\s{[(<'"\u2018\u201C])(")/gu, " “");
- * newText = newText.replace(/"/gu, "”");
- * newText = newText.replace(/(?:^|[\s{[(<'"\u2018\u201C])(')/gu, " ‘");
- * newText = newText.replace(/'/gu, "’");
- */
- return newText;
-};
-
-// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
-
enum HeaderLevels {
H1 = 1,
H2 = 2,
@@ -446,10 +424,17 @@ enum HeaderLevels {
H6 = 6,
}
-const preprocessMarkDawn = (text: string): string => {
+const preprocessMarkDawn = (text: string, playerName = ""): string => {
if (!text) return "";
- let preprocessed = typographicRules(text);
+ let preprocessed = text
+ .replaceAll("--", "—")
+ .replaceAll(
+ "@player",
+ isDefinedAndNotEmpty(playerName) ? playerName : "(player)"
+ );
+
+ console.log();
let scenebreakIndex = 0;
const visitedSlugs: string[] = [];
diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx
index 659cada..a0f7785 100644
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@@ -1,9 +1,11 @@
import { useRouter } from "next/router";
-import { MouseEventHandler, useMemo } from "react";
+import { MouseEventHandler, useCallback, useMemo } from "react";
import { Ico, Icon } from "components/Ico";
import { ToolTip } from "components/ToolTip";
import { cJoin, cIf } from "helpers/className";
import { isDefinedAndNotEmpty } from "helpers/others";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
/*
* ╭─────────────╮
@@ -88,3 +90,45 @@ export const NavOption = ({
);
};
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+interface TranslatedProps extends Omit {
+ translations: {
+ title: string | null | undefined;
+ subtitle?: string | null | undefined;
+ language: string;
+ }[];
+ fallbackTitle: TranslatedProps["translations"][number]["title"];
+ fallbackSubtitle: TranslatedProps["translations"][number]["subtitle"];
+ languages: AppStaticProps["languages"];
+}
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const TranslatedNavOption = ({
+ fallbackTitle,
+ fallbackSubtitle,
+ translations = [
+ { title: fallbackTitle, subtitle: fallbackSubtitle, language: "default" },
+ ],
+ languages,
+ ...otherProps
+}: TranslatedProps): JSX.Element => {
+ const [selectedTranslation] = useSmartLanguage({
+ items: translations,
+ languages: languages,
+ languageExtractor: useCallback(
+ (item: TranslatedProps["translations"][number]) => item.language,
+ []
+ ),
+ });
+
+ return (
+
- {/* TODO: Add typesetter to langui */}
- {
+ translations: {
+ title: string;
+ language: string;
+ }[];
+ fallbackTitle: TranslatedProps["translations"][number]["title"];
+ languages: AppStaticProps["languages"];
+}
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const TranslatedScanSet = ({
+ fallbackTitle,
+ translations = [{ title: fallbackTitle, language: "default" }],
+ languages,
+ ...otherProps
+}: TranslatedProps): JSX.Element => {
+ const [selectedTranslation] = useSmartLanguage({
+ items: translations,
+ languages: languages,
+ languageExtractor: useCallback(
+ (item: TranslatedProps["translations"][number]) => item.language,
+ []
+ ),
+ });
+
+ return (
+
+ )}
+
+ );
};
diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx
index 58dadbd..2b16276 100644
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@@ -12,7 +12,7 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
import { cJoin } from "helpers/className";
import { slugify } from "helpers/formatters";
import { getAssetURL, ImageQuality } from "helpers/img";
-import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
+import { isDefined, isDefinedAndNotEmpty, isUndefined } from "helpers/others";
import { useLightBox } from "hooks/useLightBox";
/*
@@ -31,283 +31,276 @@ export const Markdawn = ({
className,
text: rawText,
}: MarkdawnProps): JSX.Element => {
- const appLayout = useAppLayout();
+ const { playerName } = useAppLayout();
const router = useRouter();
const [openLightBox, LightBox] = useLightBox();
/* eslint-disable no-irregular-whitespace */
const text = useMemo(
- () => `${preprocessMarkDawn(rawText)}
+ () => `${preprocessMarkDawn(rawText, playerName)}
`,
- [rawText]
+ [playerName, rawText]
);
/* eslint-enable no-irregular-whitespace */
- if (text) {
- return (
- <>
- {"Typesetters"}:
++ {langui.typesetters}: +
{filterHasAttributes(selectedScan.typesetters.data, [
"id",
@@ -214,8 +212,7 @@ export const ScanSet = ({
{isDefinedAndNotEmpty(selectedScan.notes) && (
- {/* TODO: Add Notes to langui */}
-
)}
@@ -245,3 +242,40 @@ export const ScanSet = ({
);
};
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+interface TranslatedProps extends Omit
-
- )}
-
- );
- }
- return <>;
+
-
+
+ - {/* TODO: Add Cover to langui */} - {"Cover"} -
+ > ++ {langui.cover} +
- {/* TODO: Add Scan and Scanlation to langui */} -
+ ![]()
+
+ ))}
+
+
- {langui.status}:
+
-
-
-
-
-
+ {selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
+
- {selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
- {langui.status}:
-
+
+ )}
- {selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
+ {selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
+ {langui.scanners}:
+
+ {filterHasAttributes(selectedScan.scanners.data, [
+ "id",
+ "attributes",
+ ] as const).map((scanner) => (
+
+
+ ))}
+
+
+ )}
+
+ {selectedScan.typesetters &&
+ selectedScan.typesetters.data.length > 0 && (
{langui.cleaners}:
+
+ {filterHasAttributes(selectedScan.cleaners.data, [
+ "id",
+ "attributes",
+ ] as const).map((cleaner) => (
+
+
+ ))}
+
+
- {/* TODO: Add Scanner to langui */}
-
)}
+ {"Scanners"}:
++ {langui.typesetters}: +
- {filterHasAttributes(selectedScan.scanners.data, [
+ {filterHasAttributes(selectedScan.typesetters.data, [
"id",
"attributes",
- ] as const).map((scanner) => (
-
+ ] as const).map((typesetter) => (
+
))}
- {/* TODO: Add Cleaners to langui */}
-
- )}
-
- {selectedScan.typesetters &&
- selectedScan.typesetters.data.length > 0 && (
- {"Cleaners"}:
-
- {filterHasAttributes(selectedScan.cleaners.data, [
- "id",
- "attributes",
- ] as const).map((cleaner) => (
-
-
- ))}
-
-
- {/* TODO: Add Cleaners to Typesetters */}
-
- )}
- {"Typesetters"}:
-
- {filterHasAttributes(selectedScan.typesetters.data, [
- "id",
- "attributes",
- ] as const).map((typesetter) => (
-
-
- ))}
-
-
- {coverImages.map((image, index) => (
-
+ openLightBox(imgs, index);
+ }}
+ >
+ {
- const imgs = coverImages.map((img) =>
- getAssetURL(img.url, ImageQuality.Large)
- );
+ onClick={() => {
+ const imgs = coverImages.map((img) =>
+ getAssetURL(img.url, ImageQuality.Large)
+ );
- openLightBox(imgs, index);
- }}
- >
- ![]()
-
- ))}
-
+ }
+ return (
+
{compProps.children}
-
- ),
+
+ );
},
+ },
- h2: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h1: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- h3: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h2: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- h4: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h3: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- h5: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h4: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- h6: {
- component: (compProps: {
- id: string;
- style: React.CSSProperties;
- children: React.ReactNode;
- }) => (
-
- {compProps.children}
-
- ),
- },
+ h5: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- SceneBreak: {
- component: (compProps: { id: string }) => (
-
- * * *
-
- ),
- },
+ h6: {
+ component: (compProps: {
+ id: string;
+ style: React.CSSProperties;
+ children: React.ReactNode;
+ }) => (
+
+ {compProps.children}
+
+ ),
+ },
- IntraLink: {
- component: (compProps: {
- children: React.ReactNode;
- target?: string;
- page?: string;
- }) => {
- const slug = isDefinedAndNotEmpty(compProps.target)
- ? slugify(compProps.target)
- : slugify(compProps.children?.toString());
- return (
-
- router.replace(`${compProps.page ?? ""}#${slug}`)
- }
- >
- {compProps.children}
-
- );
- },
- },
+ SceneBreak: {
+ component: (compProps: { id: string }) => (
+
+ * * *
+
+ ),
+ },
- player: {
- component: () => (
-
- {appLayout.playerName ?? "
- {compProps.children}
-
- ),
- },
-
- Line: {
- component: (compProps) => (
- <>
-
- {compProps.name}
-
- {compProps.children}
- - ), - }, - - InsetBox: { - component: (compProps) => ( -{compProps.children}
-
- ),
- },
-
- blockquote: {
- component: (compProps: {
- children: React.ReactNode;
- cite?: string;
- }) => (
- - {isDefinedAndNotEmpty(compProps.cite) ? ( - <> - “{compProps.children}” - — {compProps.cite} - - ) : ( - compProps.children - )} -- ), - }, - - img: { - component: (compProps: { - alt: string; - src: string; - width?: number; - height?: number; - caption?: string; - name?: string; - }) => ( -
{
- openLightBox([
- compProps.src.startsWith("/uploads/")
- ? getAssetURL(compProps.src, ImageQuality.Large)
- : compProps.src,
- ]);
- }}
- >
- ![]()
-
- ),
+
+ );
},
},
- }}
- >
- {text}
-
+ {compProps.children}
+
+ ),
+ },
+
+ Line: {
+ component: (compProps) => (
+ <>
+
+ {compProps.name}
+
+ {compProps.children}
+ + ), + }, + + InsetBox: { + component: (compProps) => ( +{compProps.children}
+
+ ),
+ },
+
+ blockquote: {
+ component: (compProps: {
+ children: React.ReactNode;
+ cite?: string;
+ }) => (
+ + {isDefinedAndNotEmpty(compProps.cite) ? ( + <> + “{compProps.children}” + — {compProps.cite} + + ) : ( + compProps.children + )} ++ ), + }, + + img: { + component: (compProps: { + alt: string; + src: string; + width?: number; + height?: number; + caption?: string; + name?: string; + }) => ( +
{
+ openLightBox([
+ compProps.src.startsWith("/uploads/")
+ ? getAssetURL(compProps.src, ImageQuality.Large)
+ : compProps.src,
+ ]);
+ }}
+ >
+ ![]()
+
+ ),
+ },
+ },
+ }}
+ >
+ {text}
+
+
diff --git a/src/graphql/operations/getLibraryItemScans.graphql b/src/graphql/operations/getLibraryItemScans.graphql
index d2aaa8d..ab96195 100644
--- a/src/graphql/operations/getLibraryItemScans.graphql
+++ b/src/graphql/operations/getLibraryItemScans.graphql
@@ -102,6 +102,102 @@ query getLibraryItemScans($slug: String, $language_code: String) {
}
}
}
+ release_date {
+ ...datePicker
+ }
+ price {
+ ...pricePicker
+ }
+ categories {
+ data {
+ id
+ attributes {
+ name
+ short
+ }
+ }
+ }
+ metadata {
+ __typename
+ ... on ComponentMetadataBooks {
+ subtype {
+ data {
+ attributes {
+ slug
+ titles(
+ filters: { language: { code: { eq: $language_code } } }
+ ) {
+ title
+ }
+ }
+ }
+ }
+ }
+ ... on ComponentMetadataGame {
+ platforms {
+ data {
+ id
+ attributes {
+ short
+ }
+ }
+ }
+ }
+ ... on ComponentMetadataVideo {
+ subtype {
+ data {
+ attributes {
+ slug
+ titles(
+ filters: { language: { code: { eq: $language_code } } }
+ ) {
+ title
+ }
+ }
+ }
+ }
+ }
+ ... on ComponentMetadataAudio {
+ subtype {
+ data {
+ attributes {
+ slug
+ titles(
+ filters: { language: { code: { eq: $language_code } } }
+ ) {
+ title
+ }
+ }
+ }
+ }
+ }
+ ... on ComponentMetadataGroup {
+ subtype {
+ data {
+ attributes {
+ slug
+ titles(
+ filters: { language: { code: { eq: $language_code } } }
+ ) {
+ title
+ }
+ }
+ }
+ }
+ subitems_type {
+ data {
+ attributes {
+ slug
+ titles(
+ filters: { language: { code: { eq: $language_code } } }
+ ) {
+ title
+ }
+ }
+ }
+ }
+ }
+ }
contents(pagination: { limit: -1 }) {
data {
id
@@ -122,6 +218,18 @@ query getLibraryItemScans($slug: String, $language_code: String) {
data {
attributes {
slug
+ translations {
+ pre_title
+ title
+ subtitle
+ language {
+ data {
+ attributes {
+ code
+ }
+ }
+ }
+ }
}
}
}
diff --git a/src/graphql/operations/getWebsiteInterface.graphql b/src/graphql/operations/getWebsiteInterface.graphql
index b6ad3c2..44d230f 100644
--- a/src/graphql/operations/getWebsiteInterface.graphql
+++ b/src/graphql/operations/getWebsiteInterface.graphql
@@ -159,6 +159,15 @@ query getWebsiteInterface($language_code: String) {
no_results_message
all
special_pages
+ scan
+ scanlation
+ scanners
+ cleaners
+ typesetters
+ notes
+ cover
+ tags
+ no_source_warning
}
}
}
diff --git a/src/hooks/useBoolean.ts b/src/hooks/useBoolean.ts
new file mode 100644
index 0000000..834537d
--- /dev/null
+++ b/src/hooks/useBoolean.ts
@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
+
+export const useBoolean = (
+ initialState: boolean
+): {
+ state: boolean;
+ toggleState: () => void;
+ setTrue: () => void;
+ setFalse: () => void;
+ setState: Dispatch>;
+} => {
+ const [state, setState] = useState(initialState);
+ const toggleState = useCallback(
+ () => setState((currentState) => !currentState),
+ []
+ );
+ const setTrue = useCallback(() => setState(true), []);
+ const setFalse = useCallback(() => setState(false), []);
+ return { state, toggleState, setTrue, setFalse, setState };
+};
diff --git a/src/hooks/useScrollTopOnChange.ts b/src/hooks/useScrollTopOnChange.ts
index ca8af3a..322801f 100644
--- a/src/hooks/useScrollTopOnChange.ts
+++ b/src/hooks/useScrollTopOnChange.ts
@@ -15,5 +15,6 @@ export const useScrollTopOnChange = (
document
.querySelector(`#${id}`)
?.scrollTo({ top: 0, behavior: "smooth" });
- }, [id, deps, enabled]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [id, ...deps, enabled]);
};
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 6c05daa..8cbf7d4 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,5 +1,6 @@
import Document, {
DocumentContext,
+ DocumentInitialProps,
Head,
Html,
Main,
@@ -7,8 +8,9 @@ import Document, {
} from "next/document";
export default class MyDocument extends Document {
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
- static async getInitialProps(ctx: DocumentContext) {
+ static async getInitialProps(
+ ctx: DocumentContext
+ ): Promise {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
diff --git a/src/pages/archives/videos/c/[uid].tsx b/src/pages/archives/videos/c/[uid].tsx
index 5b27787..9a39cc2 100644
--- a/src/pages/archives/videos/c/[uid].tsx
+++ b/src/pages/archives/videos/c/[uid].tsx
@@ -1,5 +1,5 @@
import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { Fragment, useState, useMemo } from "react";
+import { Fragment, useMemo } from "react";
import { AppLayout } from "components/AppLayout";
import { Switch } from "components/Inputs/Switch";
import { PanelHeader } from "components/PanelComponents/PanelHeader";
@@ -21,6 +21,7 @@ import { Icon } from "components/Ico";
import { useMediaHoverable } from "hooks/useMediaQuery";
import { WithLabel } from "components/Inputs/WithLabel";
import { filterHasAttributes, isDefined } from "helpers/others";
+import { useBoolean } from "hooks/useBoolean";
/*
* ╭────────╮
@@ -34,7 +35,8 @@ interface Props extends AppStaticProps {
}
const Channel = ({ langui, channel, ...otherProps }: Props): JSX.Element => {
- const [keepInfoVisible, setKeepInfoVisible] = useState(true);
+ const { state: keepInfoVisible, toggleState: toggleKeepInfoVisible } =
+ useBoolean(true);
const hoverable = useMediaHoverable();
const subPanel = useMemo(
@@ -58,13 +60,13 @@ const Channel = ({ langui, channel, ...otherProps }: Props): JSX.Element => {
@@ -55,25 +55,25 @@ const Video = ({ langui, video, ...otherProps }: Props): JSX.Element => {
title={langui.video}
url="#video"
border
- onClick={() => appLayout.setSubPanelOpen(false)}
+ onClick={() => setSubPanelOpen(false)}
/>
appLayout.setSubPanelOpen(false)}
+ onClick={() => setSubPanelOpen(false)}
/>
appLayout.setSubPanelOpen(false)}
+ onClick={() => setSubPanelOpen(false)}
/>
),
- [appLayout, langui]
+ [setSubPanelOpen, langui]
);
const contentPanel = useMemo(
diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx
index bb943d3..79818cc 100644
--- a/src/pages/contents/[slug]/index.tsx
+++ b/src/pages/contents/[slug]/index.tsx
@@ -206,7 +206,7 @@ const Content = ({
{isDefinedAndNotEmpty(selectedTranslation.text_set.notes) && (
{langui.source}:
-
({
+ language: translation.language.data.attributes.code,
+ title: prettyinlineTitle(
+ translation.pre_title,
+ translation.title,
+ translation.subtitle
+ ),
+ subtitle:
+ content.attributes.range[0]?.__typename ===
+ "ComponentRangePageRange"
+ ? `${content.attributes.range[0].starting_page}` +
+ `→` +
+ `${content.attributes.range[0].ending_page}`
+ : undefined,
+ }))}
+ fallbackTitle={prettySlug(
+ content.attributes.slug,
+ item.slug
+ )}
+ fallbackSubtitle={
+ content.attributes.range[0]?.__typename ===
+ "ComponentRangePageRange"
+ ? `${content.attributes.range[0].starting_page}` +
+ `→` +
+ `${content.attributes.range[0].ending_page}`
+ : undefined
+ }
+ border
+ languages={languages}
+ />
+ )}
+
+ )
+ )}
),
- [item.contents?.data, item.slug, langui]
+ [
+ currencies,
+ item.categories?.data,
+ item.contents?.data,
+ item.metadata,
+ item.price,
+ item.release_date,
+ item.slug,
+ item.subtitle,
+ item.thumbnail?.data?.attributes,
+ item.title,
+ itemId,
+ languages,
+ langui,
+ ]
);
const contentPanel = useMemo(
@@ -105,11 +195,22 @@ const LibrarySlug = ({
{item.contents?.data.map((content) => (
{content.attributes?.scan_set?.[0] && (
- ({
+ language: translation.language.data.attributes.code,
+ title: prettyinlineTitle(
+ translation.pre_title,
+ translation.title,
+ translation.subtitle
+ ),
+ }))}
+ fallbackTitle={prettySlug(content.attributes.slug, item.slug)}
languages={languages}
langui={langui}
content={content.attributes.content}
@@ -138,6 +239,7 @@ const LibrarySlug = ({
thumbnail={item.thumbnail?.data?.attributes ?? undefined}
languages={languages}
langui={langui}
+ currencies={currencies}
{...otherProps}
/>
);
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index fe25946..e6e72d4 100644
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@@ -33,6 +33,7 @@ import { useAppLayout } from "contexts/AppLayoutContext";
import { convertPrice } from "helpers/numbers";
import { SmartList } from "components/SmartList";
import { SelectiveNonNullable } from "helpers/types/SelectiveNonNullable";
+import { useBoolean } from "hooks/useBoolean";
/*
* ╭─────────────╮
@@ -66,29 +67,44 @@ const Library = ({
...otherProps
}: Props): JSX.Element => {
const hoverable = useMediaHoverable();
- const appLayout = useAppLayout();
+ const { libraryItemUserStatus } = useAppLayout();
const [searchName, setSearchName] = useState(
DEFAULT_FILTERS_STATE.searchName
);
- const [showSubitems, setShowSubitems] = useState(
- DEFAULT_FILTERS_STATE.showSubitems
- );
- const [showPrimaryItems, setShowPrimaryItems] = useState(
- DEFAULT_FILTERS_STATE.showPrimaryItems
- );
- const [showSecondaryItems, setShowSecondaryItems] = useState(
- DEFAULT_FILTERS_STATE.showSecondaryItems
- );
+
+ const {
+ state: showSubitems,
+ toggleState: toggleShowSubitems,
+ setState: setShowSubitems,
+ } = useBoolean(DEFAULT_FILTERS_STATE.showSubitems);
+
+ const {
+ state: showPrimaryItems,
+ toggleState: toggleShowPrimaryItems,
+ setState: setShowPrimaryItems,
+ } = useBoolean(DEFAULT_FILTERS_STATE.showPrimaryItems);
+
+ const {
+ state: showSecondaryItems,
+ toggleState: toggleShowSecondaryItems,
+ setState: setShowSecondaryItems,
+ } = useBoolean(DEFAULT_FILTERS_STATE.showSecondaryItems);
+
+ const {
+ state: keepInfoVisible,
+ toggleState: toggleKeepInfoVisible,
+ setState: setKeepInfoVisible,
+ } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
+
const [sortingMethod, setSortingMethod] = useState(
DEFAULT_FILTERS_STATE.sortingMethod
);
+
const [groupingMethod, setGroupingMethod] = useState(
DEFAULT_FILTERS_STATE.groupingMethod
);
- const [keepInfoVisible, setKeepInfoVisible] = useState(
- DEFAULT_FILTERS_STATE.keepInfoVisible
- );
+
const [filterUserStatus, setFilterUserStatus] = useState<
LibraryItemUserStatus | undefined
>(DEFAULT_FILTERS_STATE.filterUserStatus);
@@ -107,28 +123,22 @@ const Library = ({
if (item.attributes.primary && !showPrimaryItems) return false;
if (!item.attributes.primary && !showSecondaryItems) return false;
- if (
- isDefined(filterUserStatus) &&
- item.id &&
- appLayout.libraryItemUserStatus
- ) {
+ if (isDefined(filterUserStatus) && item.id && libraryItemUserStatus) {
if (isUntangibleGroupItem(item.attributes.metadata?.[0])) {
return false;
}
if (filterUserStatus === LibraryItemUserStatus.None) {
- if (appLayout.libraryItemUserStatus[item.id]) {
+ if (libraryItemUserStatus[item.id]) {
return false;
}
- } else if (
- filterUserStatus !== appLayout.libraryItemUserStatus[item.id]
- ) {
+ } else if (filterUserStatus !== libraryItemUserStatus[item.id]) {
return false;
}
}
return true;
},
[
- appLayout.libraryItemUserStatus,
+ libraryItemUserStatus,
filterUserStatus,
showPrimaryItems,
showSecondaryItems,
@@ -260,8 +270,8 @@ const Library = ({
{"Notes"}:
+{langui.notes}:
{langui.source}
-
+
+ 0 && item.metadata[0]
+ ? [prettyItemSubType(item.metadata[0])]
+ : []
+ }
+ bottomChips={filterHasAttributes(item.categories?.data, [
+ "attributes",
+ ] as const).map((category) => category.attributes.short)}
+ metadata={{
+ currencies: currencies,
+ release_date: item.release_date,
+ price: item.price,
+ position: "Bottom",
+ }}
+ infoAppend={
+ !isUntangibleGroupItem(item.metadata?.[0]) && (
+
+
+
{filterHasAttributes(content.ranged_contents.data, [
"attributes.library_item.data.attributes",
"attributes.library_item.data.id",
@@ -330,7 +330,11 @@ const Content = ({
type={content.type}
categories={content.categories}
langui={langui}
- languageSwitcher={(
DEFAULT_FILTERS_STATE.groupingMethod
);
- const [keepInfoVisible, setKeepInfoVisible] = useState(
- DEFAULT_FILTERS_STATE.keepInfoVisible
- );
+ const {
+ state: keepInfoVisible,
+ toggleState: toggleKeepInfoVisible,
+ setState: setKeepInfoVisible,
+ } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
const [combineRelatedContent, setCombineRelatedContent] = useState(
DEFAULT_FILTERS_STATE.combineRelatedContent
);
@@ -149,8 +152,8 @@ const Contents = ({
@@ -450,8 +448,8 @@ const LibrarySlug = ({
label={langui.always_show_info}
input={
- {prettyPrice(
- item.price,
- currencies,
- appLayout.currency
- )}{" "}
-
({langui.calculated?.toLowerCase()})
+ {prettyPrice(item.price, currencies, currency)}
(
+ {langui.calculated?.toLowerCase()})
+ {langui.contents} +
+ + {filterHasAttributes(item.contents?.data, ["attributes"] as const).map( + (content) => ( + <> + {content.attributes.scan_set && + content.attributes.scan_set.length > 0 && ( +- {/* TODO: Add Tags to langui */} - {"Tags"} + {langui.tags}
- {filterHasAttributes(page.tags?.data, [
+ {filterHasAttributes(page.tags.data, [
"attributes",
] as const).map((tag) => (
(
@@ -78,8 +81,8 @@ const Wiki = ({