From 67aa30c2f70b7fd915de997e0d05eb0dd5c1ec1d Mon Sep 17 00:00:00 2001 From: DrMint Date: Fri, 4 Mar 2022 23:21:31 +0100 Subject: [PATCH 01/91] Replaced ReactChild type with ReactNode type --- src/components/Button.tsx | 2 +- src/components/Chip.tsx | 2 +- src/components/InsetBox.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 1106928..73eda2b 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -5,7 +5,7 @@ type ButtonProps = { id?: string; className?: string; href?: string; - children: React.ReactChild | React.ReactChild[]; + children: React.ReactNode; active?: boolean; locale?: string; onClick?: MouseEventHandler; diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index e490ddc..f0d117f 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -1,6 +1,6 @@ type ChipProps = { className?: string; - children: React.ReactChild | React.ReactChild[]; + children: React.ReactNode; "data-tip"?: string; "data-for"?: string; "data-html"?: boolean; diff --git a/src/components/InsetBox.tsx b/src/components/InsetBox.tsx index 83de892..c9f45ea 100644 --- a/src/components/InsetBox.tsx +++ b/src/components/InsetBox.tsx @@ -1,6 +1,6 @@ type InsetBoxProps = { className?: string; - children: React.ReactChild | React.ReactChild[]; + children: React.ReactNode; id?: string; }; From 8684640ef4a0311d47110b585746b895c586f323 Mon Sep 17 00:00:00 2001 From: DrMint Date: Fri, 4 Mar 2022 23:21:42 +0100 Subject: [PATCH 02/91] Added support for filtering Library items --- src/components/Select.tsx | 87 +++++++++++++++ src/graphql/operation.graphql | 1 - src/pages/library/index.tsx | 193 +++++++++++++++++++++++++++++++++- 3 files changed, 275 insertions(+), 6 deletions(-) create mode 100644 src/components/Select.tsx diff --git a/src/components/Select.tsx b/src/components/Select.tsx new file mode 100644 index 0000000..5b256dc --- /dev/null +++ b/src/components/Select.tsx @@ -0,0 +1,87 @@ +import { useEffect, useState } from "react"; + +export type SelectProps = { + options: SelectOption[]; + selected?: number; + allowEmpty?: boolean; + className?: string; + onChange?: Function; +}; + +export type SelectOption = { + name: string; + label: string; +}; + +export function selectOptionsIncludes( + options: SelectOption[], + newOption: SelectOption +) { + options.map((option) => { + if (option.label === newOption.label) return true; + }); + return false; +} + +export default function Select(props: SelectProps): JSX.Element { + const [selected, setSelected] = useState( + props.selected ? props.selected : props.allowEmpty ? -1 : 0 + ); + const [opened, setOpened] = useState(false); + + return ( +
+
+

setOpened(!opened)} className="w-full"> + {selected === -1 ? "—" : props.options[selected].label} +

+ {selected >= 0 && props.allowEmpty && ( + { + setSelected(-1); + props.onChange && props.onChange(""); + }} + className="material-icons !text-xs" + > + close + + )} + setOpened(!opened)} className="material-icons"> + {opened ? "arrow_drop_up" : "arrow_drop_down"} + +
+
+ {props.options.map((option, index) => ( + <> + {index !== selected && ( +
{ + setOpened(false); + setSelected(index); + props.onChange && props.onChange(props.options[index].name); + }} + > + {option.label} +
+ )} + + ))} +
+
+ ); +} diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 63d9963..a91da45 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -128,7 +128,6 @@ query getLibraryItemsPreview($language_code: String) { libraryItems( filters: { root_item: { eq: true } } pagination: { limit: -1 } - sort: ["title:asc", "subtitle:asc"] ) { data { id diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 915a284..32cd19c 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -14,14 +14,43 @@ import { import PanelHeader from "components/PanelComponents/PanelHeader"; import AppLayout from "components/AppLayout"; import LibraryItemsPreview from "components/Library/LibraryItemsPreview"; +import Select from "components/Select"; +import { useEffect, useState } from "react"; +import { prettyDate, prettyinlineTitle } from "queries/helpers"; type LibraryProps = { libraryItems: GetLibraryItemsPreviewQuery; langui: GetWebsiteInterfaceQuery; }; +type GroupLibraryItems = Map< + string, + GetLibraryItemsPreviewQuery["libraryItems"]["data"] +>; + export default function Library(props: LibraryProps): JSX.Element { const langui = props.langui.websiteInterfaces.data[0].attributes; + + const [sortedItems, setSortedItem] = useState< + LibraryProps["libraryItems"]["libraryItems"]["data"] + >(sortBy("title", props.libraryItems.libraryItems.data)); + + const [sortingMethod, setSortingMethod] = useState("title"); + + const [groups, setGroups] = useState( + getGroups("", sortedItems) + ); + + const [groupingMethod, setGroupingMethod] = useState(""); + + useEffect(() => { + setSortedItem(sortBy(sortingMethod, props.libraryItems.libraryItems.data)); + }, [props.libraryItems.libraryItems.data, sortingMethod]); + + useEffect(() => { + setGroups(getGroups(groupingMethod, sortedItems)); + }, [groupingMethod, sortedItems]); + const subPanel = ( + +
+

Group by:

+ +
); const contentPanel = ( -
- {props.libraryItems.libraryItems.data.map((item) => ( - - ))} -
+ {[...groups].map(([name, items]) => ( + <> + {items.length > 0 && ( + <> +

{name}

+
+ {items.map((item) => ( + + ))} +
+ + )} + + ))} ); return ( @@ -67,3 +135,118 @@ export const getStaticProps: GetStaticProps = async (context) => { return { props: {} }; } }; + +function getGroups( + groupByType: string, + items: LibraryProps["libraryItems"]["libraryItems"]["data"] +): GroupLibraryItems { + switch (groupByType) { + case "category": + return new Map(); + + case "type": + const groupType: GroupLibraryItems = new Map(); + groupType.set("Audio", []); + groupType.set("Game", []); + groupType.set("Textual", []); + groupType.set("Video", []); + groupType.set("Other", []); + groupType.set("No type", []); + items.map((item) => { + if (item.attributes.metadata.length > 0) { + switch (item.attributes.metadata[0].__typename) { + case "ComponentMetadataAudio": + groupType.get("Audio")?.push(item); + break; + case "ComponentMetadataGame": + groupType.get("Game")?.push(item); + break; + case "ComponentMetadataBooks": + groupType.get("Textual")?.push(item); + break; + case "ComponentMetadataVideo": + groupType.get("Video")?.push(item); + break; + case "ComponentMetadataOther": + groupType.get("Other")?.push(item); + break; + } + } else { + groupType.get("No type")?.push(item); + } + }); + return groupType; + + case "releaseYear": + const years: number[] = []; + items.map((item) => { + if (item.attributes.release_date) { + if (!years.includes(item.attributes.release_date.year)) + years.push(item.attributes.release_date.year); + } + }); + const groupYear: GroupLibraryItems = new Map(); + years.sort(); + years.map((year) => { + groupYear.set(year.toString(), []); + }); + groupYear.set("No year", []); + items.map((item) => { + if (item.attributes.release_date) { + groupYear + .get(item.attributes.release_date.year.toString()) + ?.push(item); + } else { + groupYear.get("No year")?.push(item); + } + }); + + return groupYear; + + default: + const groupDefault: GroupLibraryItems = new Map(); + groupDefault.set("", items); + return groupDefault; + } +} + +function sortBy( + orderByType: string, + items: LibraryProps["libraryItems"]["libraryItems"]["data"] +): LibraryProps["libraryItems"]["libraryItems"]["data"] { + switch (orderByType) { + case "title": + return [...items].sort((a, b) => { + const titleA = prettyinlineTitle( + "", + a.attributes.title, + a.attributes.subtitle + ); + const titleB = prettyinlineTitle( + "", + b.attributes.title, + b.attributes.subtitle + ); + return titleA.localeCompare(titleB); + }); + case "price": + return [...items].sort((a, b) => { + const priceA = a.attributes.price ? a.attributes.price.amount : 99999; + const priceB = b.attributes.price ? b.attributes.price.amount : 99999; + return priceA - priceB; + }); + case "releaseDate": + return [...items].sort((a, b) => { + const dateA = + a.attributes.release_date !== null + ? prettyDate(a.attributes.release_date) + : "9999"; + const dateB = + b.attributes.release_date !== null + ? prettyDate(b.attributes.release_date) + : "9999"; + return dateA.localeCompare(dateB); + }); + } + return items; +} From 7c8fb24d67991323f711096b487c2e0c24c42bdd Mon Sep 17 00:00:00 2001 From: DrMint Date: Sat, 5 Mar 2022 13:15:43 +0100 Subject: [PATCH 03/91] More filtering options in Library --- .../Library/LibraryItemsPreview.tsx | 2 +- src/components/Select.tsx | 26 +++---- src/components/Switch.tsx | 26 +++++++ src/graphql/operation.graphql | 2 +- src/graphql/operations-types.ts | 1 + src/pages/library/index.tsx | 73 ++++++++++++++++--- 6 files changed, 104 insertions(+), 26 deletions(-) create mode 100644 src/components/Switch.tsx diff --git a/src/components/Library/LibraryItemsPreview.tsx b/src/components/Library/LibraryItemsPreview.tsx index d4f97ef..3db4afd 100644 --- a/src/components/Library/LibraryItemsPreview.tsx +++ b/src/components/Library/LibraryItemsPreview.tsx @@ -30,7 +30,7 @@ export default function LibraryItemsPreview( {item.thumbnail.data ? ( ) : (
diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 5b256dc..da912e0 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -13,22 +13,22 @@ export type SelectOption = { label: string; }; -export function selectOptionsIncludes( - options: SelectOption[], - newOption: SelectOption -) { - options.map((option) => { - if (option.label === newOption.label) return true; - }); - return false; -} - export default function Select(props: SelectProps): JSX.Element { const [selected, setSelected] = useState( props.selected ? props.selected : props.allowEmpty ? -1 : 0 ); const [opened, setOpened] = useState(false); + useEffect(() => { + if (props.onChange) { + if (selected >= 0) { + props.onChange(props.options[selected].name); + } else { + props.onChange(""); + } + } + }, [props, selected]); + return (
{selected >= 0 && props.allowEmpty && ( { - setSelected(-1); - props.onChange && props.onChange(""); - }} + onClick={() => setSelected(-1)} className="material-icons !text-xs" > close @@ -73,7 +70,6 @@ export default function Select(props: SelectProps): JSX.Element { onClick={() => { setOpened(false); setSelected(index); - props.onChange && props.onChange(props.options[index].name); }} > {option.label} diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx new file mode 100644 index 0000000..6f33b96 --- /dev/null +++ b/src/components/Switch.tsx @@ -0,0 +1,26 @@ +import { Dispatch, SetStateAction } from "react"; + +export type SwitchProps = { + setState: Dispatch>; + state: boolean; + className?: string; +}; + +export default function Select(props: SwitchProps): JSX.Element { + return ( +
{ + props.setState(!props.state); + }} + > +
+
+ ); +} diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index a91da45..f83644f 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -126,7 +126,6 @@ query getChronologyItems($language_code: String) { query getLibraryItemsPreview($language_code: String) { libraryItems( - filters: { root_item: { eq: true } } pagination: { limit: -1 } ) { data { @@ -135,6 +134,7 @@ query getLibraryItemsPreview($language_code: String) { title subtitle slug + root_item thumbnail { data { attributes { diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index 57b4615..45392cf 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -238,6 +238,7 @@ export type GetLibraryItemsPreviewQuery = { title: string; subtitle: string; slug: string; + root_item: boolean; thumbnail: { __typename: "UploadFileEntityResponse"; data: { diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 32cd19c..be097cf 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -17,6 +17,7 @@ import LibraryItemsPreview from "components/Library/LibraryItemsPreview"; import Select from "components/Select"; import { useEffect, useState } from "react"; import { prettyDate, prettyinlineTitle } from "queries/helpers"; +import Switch from "components/Switch"; type LibraryProps = { libraryItems: GetLibraryItemsPreviewQuery; @@ -31,21 +32,31 @@ type GroupLibraryItems = Map< export default function Library(props: LibraryProps): JSX.Element { const langui = props.langui.websiteInterfaces.data[0].attributes; + const [showSubitems, setShowSubitems] = useState(false); + const [sortingMethod, setSortingMethod] = useState("title"); + const [groupingMethod, setGroupingMethod] = useState(""); + + const [filteredItems, setFilteredItems] = useState< + LibraryProps["libraryItems"]["libraryItems"]["data"] + >(filterItems(showSubitems, props.libraryItems.libraryItems.data)); + const [sortedItems, setSortedItem] = useState< LibraryProps["libraryItems"]["libraryItems"]["data"] - >(sortBy("title", props.libraryItems.libraryItems.data)); - - const [sortingMethod, setSortingMethod] = useState("title"); + >(sortBy(groupingMethod, filteredItems)); const [groups, setGroups] = useState( getGroups("", sortedItems) ); - const [groupingMethod, setGroupingMethod] = useState(""); + useEffect(() => { + setFilteredItems( + filterItems(showSubitems, props.libraryItems.libraryItems.data) + ); + }, [showSubitems, props.libraryItems.libraryItems.data]); useEffect(() => { - setSortedItem(sortBy(sortingMethod, props.libraryItems.libraryItems.data)); - }, [props.libraryItems.libraryItems.data, sortingMethod]); + setSortedItem(sortBy(sortingMethod, filteredItems)); + }, [filteredItems, sortingMethod]); useEffect(() => { setGroups(getGroups(groupingMethod, sortedItems)); @@ -85,6 +96,11 @@ export default function Library(props: LibraryProps): JSX.Element { onChange={setSortingMethod} />
+ +
+

Show subitems:

+ +
); const contentPanel = ( @@ -93,10 +109,10 @@ export default function Library(props: LibraryProps): JSX.Element { <> {items.length > 0 && ( <> -

{name}

+

{name}

{items.map((item) => ( @@ -168,7 +184,26 @@ function getGroups( groupType.get("Video")?.push(item); break; case "ComponentMetadataOther": - groupType.get("Other")?.push(item); + switch ( + item.attributes.metadata[0].subtype.data.attributes.slug + ) { + case "audio-case": + groupType.get("Audio")?.push(item); + break; + + case "video-case": + groupType.get("Video")?.push(item); + break; + + case "game-case": + groupType.get("Game")?.push(item); + break; + + default: + groupType.get("Other")?.push(item); + break; + } + break; } } else { @@ -210,6 +245,26 @@ function getGroups( } } +function filterItems( + showSubitems: boolean, + items: LibraryProps["libraryItems"]["libraryItems"]["data"] +): LibraryProps["libraryItems"]["libraryItems"]["data"] { + return [...items].filter((item) => { + let result = true; + if (!showSubitems && !item.attributes.root_item) result = false; + if ( + item.attributes.metadata.length > 0 && + item.attributes.metadata[0].__typename === "ComponentMetadataOther" && + (item.attributes.metadata[0].subtype.data.attributes.slug === + "variant-set" || + item.attributes.metadata[0].subtype.data.attributes.slug === + "relation-set") + ) + result = false; + return result; + }); +} + function sortBy( orderByType: string, items: LibraryProps["libraryItems"]["libraryItems"]["data"] From 4c7d7231e326a4784babc4a4c38dc80357339186 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sat, 5 Mar 2022 13:33:19 +0100 Subject: [PATCH 04/91] Refacto Select component to use parent state --- src/components/Select.tsx | 27 ++++++++------------------- src/pages/library/index.tsx | 33 ++++++++++++++++++--------------- 2 files changed, 26 insertions(+), 34 deletions(-) diff --git a/src/components/Select.tsx b/src/components/Select.tsx index da912e0..c89bbbf 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1,6 +1,8 @@ -import { useEffect, useState } from "react"; +import { Dispatch, SetStateAction, useState } from "react"; export type SelectProps = { + setState: Dispatch>; + state: number; options: SelectOption[]; selected?: number; allowEmpty?: boolean; @@ -14,21 +16,8 @@ export type SelectOption = { }; export default function Select(props: SelectProps): JSX.Element { - const [selected, setSelected] = useState( - props.selected ? props.selected : props.allowEmpty ? -1 : 0 - ); const [opened, setOpened] = useState(false); - useEffect(() => { - if (props.onChange) { - if (selected >= 0) { - props.onChange(props.options[selected].name); - } else { - props.onChange(""); - } - } - }, [props, selected]); - return (

setOpened(!opened)} className="w-full"> - {selected === -1 ? "—" : props.options[selected].label} + {props.state === -1 ? "—" : props.options[props.state].label}

- {selected >= 0 && props.allowEmpty && ( + {props.state >= 0 && props.allowEmpty && ( setSelected(-1)} + onClick={() => props.setState(-1)} className="material-icons !text-xs" > close @@ -62,14 +51,14 @@ export default function Select(props: SelectProps): JSX.Element { > {props.options.map((option, index) => ( <> - {index !== selected && ( + {index !== props.state && (
{ setOpened(false); - setSelected(index); + props.setState(index); }} > {option.label} diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index be097cf..d4386eb 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -33,8 +33,8 @@ export default function Library(props: LibraryProps): JSX.Element { const langui = props.langui.websiteInterfaces.data[0].attributes; const [showSubitems, setShowSubitems] = useState(false); - const [sortingMethod, setSortingMethod] = useState("title"); - const [groupingMethod, setGroupingMethod] = useState(""); + const [sortingMethod, setSortingMethod] = useState(0); + const [groupingMethod, setGroupingMethod] = useState(-1); const [filteredItems, setFilteredItems] = useState< LibraryProps["libraryItems"]["libraryItems"]["data"] @@ -45,7 +45,7 @@ export default function Library(props: LibraryProps): JSX.Element { >(sortBy(groupingMethod, filteredItems)); const [groups, setGroups] = useState( - getGroups("", sortedItems) + getGroups(groupingMethod, sortedItems) ); useEffect(() => { @@ -79,7 +79,8 @@ export default function Library(props: LibraryProps): JSX.Element { { name: "type", label: "Type" }, { name: "releaseYear", label: "Release year" }, ]} - onChange={setGroupingMethod} + state={groupingMethod} + setState={setGroupingMethod} allowEmpty />
@@ -90,10 +91,11 @@ export default function Library(props: LibraryProps): JSX.Element { className="w-full" options={[ { name: "title", label: "Title" }, - { name: "releaseDate", label: "Release date" }, { name: "price", label: "Price" }, + { name: "releaseDate", label: "Release date" }, ]} - onChange={setSortingMethod} + state={sortingMethod} + setState={setSortingMethod} />
@@ -153,14 +155,14 @@ export const getStaticProps: GetStaticProps = async (context) => { }; function getGroups( - groupByType: string, + groupByType: number, items: LibraryProps["libraryItems"]["libraryItems"]["data"] ): GroupLibraryItems { switch (groupByType) { - case "category": + case 0: return new Map(); - case "type": + case 1: const groupType: GroupLibraryItems = new Map(); groupType.set("Audio", []); groupType.set("Game", []); @@ -212,7 +214,7 @@ function getGroups( }); return groupType; - case "releaseYear": + case 2: const years: number[] = []; items.map((item) => { if (item.attributes.release_date) { @@ -266,11 +268,11 @@ function filterItems( } function sortBy( - orderByType: string, + orderByType: number, items: LibraryProps["libraryItems"]["libraryItems"]["data"] ): LibraryProps["libraryItems"]["libraryItems"]["data"] { switch (orderByType) { - case "title": + case 0: return [...items].sort((a, b) => { const titleA = prettyinlineTitle( "", @@ -284,13 +286,13 @@ function sortBy( ); return titleA.localeCompare(titleB); }); - case "price": + case 1: return [...items].sort((a, b) => { const priceA = a.attributes.price ? a.attributes.price.amount : 99999; const priceB = b.attributes.price ? b.attributes.price.amount : 99999; return priceA - priceB; }); - case "releaseDate": + case 2: return [...items].sort((a, b) => { const dateA = a.attributes.release_date !== null @@ -302,6 +304,7 @@ function sortBy( : "9999"; return dateA.localeCompare(dateB); }); + default: + return items; } - return items; } From 9b42a4f59f7a0dddb3a4cd8123b551b6dc57e257 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sat, 5 Mar 2022 15:36:43 +0100 Subject: [PATCH 05/91] Replaced old UI translation naming scheme --- src/components/AppLayout.tsx | 2 +- src/components/Content/ThumbnailHeader.tsx | 4 +- .../PanelComponents/ReturnButton.tsx | 2 +- src/components/Panels/MainPanel.tsx | 35 +++-- src/components/Select.tsx | 15 +- src/graphql/operation.graphql | 138 ++++++++++-------- src/graphql/operations-types.ts | 130 +++++++++-------- src/pages/404.tsx | 6 +- src/pages/about-us/index.tsx | 4 +- src/pages/archives/index.tsx | 4 +- src/pages/chronicles/index.tsx | 4 +- src/pages/contents/[slug]/index.tsx | 6 +- src/pages/gallery/index.tsx | 2 +- src/pages/library/[slug].tsx | 78 +++++----- src/pages/library/index.tsx | 63 ++++---- src/pages/merch/index.tsx | 4 +- src/pages/news/index.tsx | 4 +- src/pages/wiki/index.tsx | 4 +- 18 files changed, 253 insertions(+), 252 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 40f5890..06516de 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -88,7 +88,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { const metaDescription = props.description ? props.description - : "Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer."; + : props.langui.default_description; return (
diff --git a/src/components/Content/ThumbnailHeader.tsx b/src/components/Content/ThumbnailHeader.tsx index 13f1c3a..2b8ec2a 100644 --- a/src/components/Content/ThumbnailHeader.tsx +++ b/src/components/Content/ThumbnailHeader.tsx @@ -55,7 +55,7 @@ export default function ThumbnailHeader(
{content.type ? (
-

{langui.global_type}

+

{langui.type}

))} diff --git a/src/components/PanelComponents/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx index 6f2517c..c208c2b 100644 --- a/src/components/PanelComponents/ReturnButton.tsx +++ b/src/components/PanelComponents/ReturnButton.tsx @@ -13,7 +13,7 @@ export default function ReturnButton(props: ReturnButtonProps): JSX.Element { return ( ); } diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 1ac3b2f..cc819aa 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -1,6 +1,5 @@ import Link from "next/link"; import NavOption from "components/PanelComponents/NavOption"; -import SVG from "components/SVG"; import { useRouter } from "next/router"; import Button from "components/Button"; import HorizontalLine from "components/HorizontalLine"; @@ -84,8 +83,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -94,8 +93,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -104,8 +103,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -114,8 +113,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -126,7 +125,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -135,7 +134,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -144,7 +143,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -153,7 +152,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -162,7 +161,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.setMainPanelOpen(false)} @@ -176,8 +175,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { }`} >

- {langui.main_licensing ? ( - {langui.main_licensing} + {langui.licensing_notice ? ( + {langui.licensing_notice} ) : ( "" )} @@ -194,8 +193,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {

- {langui.main_copyright ? ( - {langui.main_copyright} + {langui.copyright_notice ? ( + {langui.copyright_notice} ) : ( "" )} diff --git a/src/components/Select.tsx b/src/components/Select.tsx index c89bbbf..06c6e2a 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -3,18 +3,13 @@ import { Dispatch, SetStateAction, useState } from "react"; export type SelectProps = { setState: Dispatch>; state: number; - options: SelectOption[]; + options: string[]; selected?: number; allowEmpty?: boolean; className?: string; onChange?: Function; }; -export type SelectOption = { - name: string; - label: string; -}; - export default function Select(props: SelectProps): JSX.Element { const [opened, setOpened] = useState(false); @@ -30,7 +25,7 @@ export default function Select(props: SelectProps): JSX.Element { }`} >

setOpened(!opened)} className="w-full"> - {props.state === -1 ? "—" : props.options[props.state].label} + {props.state === -1 ? "—" : props.options[props.state]}

{props.state >= 0 && props.allowEmpty && ( { setOpened(false); props.setState(index); }} > - {option.label} + {option}
)} diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index f83644f..2aaea2e 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -1,72 +1,86 @@ query getWebsiteInterface($language_code: String) { - websiteInterfaces(filters: { language: { code: { eq: $language_code } } }) { + websiteInterfaces( + filters: { ui_language: { code: { eq: $language_code } } } + ) { data { attributes { - main_library - main_library_description - main_news - main_merch - main_gallery - main_archives - main_about_us - main_licensing - main_copyright + library + contents + wiki + chronicles + library_short_description + contents_short_description + wiki_short_description + chronicles_short_description + news + merch + gallery + archives + about_us + licensing_notice + copyright_notice + contents_description + type + category + categories + size + release_date + release_year + details + price + width + height + thickness + subitem + subitems + subitem_of + variant + variants + variant_of + summary + audio + video + textual + game + other + return_to + left_to_right + right_to_left + page + pages + page_order + binding + type_information + front_matter + back_matter + open_content + read_content + watch_content + listen_content + view_scans + paperback + hardcover + languages + select_language + language library_description - library_item_summary - library_item_gallery - library_item_details - library_item_subitems - library_item_variants - library_item_content - global_return_label - global_subitem_of - global_type - global_width - global_height - global_thickness - global_binding - global_language - global_languages - global_page - global_pages - global_page_order - global_release_date - global_price - library_item_physical_size - library_item_type_information - library_item_front_matter - library_item_back_matter - library_item_type_textual - library_item_type_audio - library_item_type_game - library_item_type_video - library_item_type_other - library_item_open_content - library_item_view_scans - content_read_content - content_watch_content - content_listen_content - global_category - global_categories - global_paperback - global_hardcover - global_left_to_right - global_right_to_left - main_wiki - main_wiki_description - main_chronicles - main_chronicles_description - library_items - library_items_description - library_content - library_content_description wiki_description - news_description chronicles_description + news_description + merch_description gallery_description archives_description about_us_description - merch_description + page_not_found + default_description + name + show_subitems + show_primary_items + show_secondary_items + no_type + no_year + order_by + group_by } } } @@ -125,9 +139,7 @@ query getChronologyItems($language_code: String) { } query getLibraryItemsPreview($language_code: String) { - libraryItems( - pagination: { limit: -1 } - ) { + libraryItems(pagination: { limit: -1 }) { data { id attributes { diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index 45392cf..2f56aec 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -86,71 +86,83 @@ export type GetWebsiteInterfaceQuery = { __typename: "WebsiteInterfaceEntity"; attributes: { __typename: "WebsiteInterface"; - main_library: string; - main_library_description: string; - main_news: string; - main_merch: string; - main_gallery: string; - main_archives: string; - main_about_us: string; - main_licensing: string; - main_copyright: string; + library: string; + contents: string; + wiki: string; + chronicles: string; + library_short_description: string; + contents_short_description: string; + wiki_short_description: string; + chronicles_short_description: string; + news: string; + merch: string; + gallery: string; + archives: string; + about_us: string; + licensing_notice: string; + copyright_notice: string; + contents_description: string; + type: string; + category: string; + categories: string; + size: string; + release_date: string; + release_year: string; + details: string; + price: string; + width: string; + height: string; + thickness: string; + subitem: string; + subitems: string; + subitem_of: string; + variant: string; + variants: string; + variant_of: string; + summary: string; + audio: string; + video: string; + textual: string; + game: string; + other: string; + return_to: string; + left_to_right: string; + right_to_left: string; + page: string; + pages: string; + page_order: string; + binding: string; + type_information: string; + front_matter: string; + back_matter: string; + open_content: string; + read_content: string; + watch_content: string; + listen_content: string; + view_scans: string; + paperback: string; + hardcover: string; + languages: string; + select_language: string; + language: string; library_description: string; - library_item_summary: string; - library_item_gallery: string; - library_item_details: string; - library_item_subitems: string; - library_item_variants: string; - library_item_content: string; - global_return_label: string; - global_subitem_of: string; - global_type: string; - global_width: string; - global_height: string; - global_thickness: string; - global_binding: string; - global_language: string; - global_languages: string; - global_page: string; - global_pages: string; - global_page_order: string; - global_release_date: string; - global_price: string; - library_item_physical_size: string; - library_item_type_information: string; - library_item_front_matter: string; - library_item_back_matter: string; - library_item_type_textual: string; - library_item_type_audio: string; - library_item_type_game: string; - library_item_type_video: string; - library_item_type_other: string; - library_item_open_content: string; - library_item_view_scans: string; - content_read_content: string; - content_watch_content: string; - content_listen_content: string; - global_category: string; - global_categories: string; - global_paperback: string; - global_hardcover: string; - global_left_to_right: string; - global_right_to_left: string; - main_wiki: string; - main_wiki_description: string; - main_chronicles: string; - main_chronicles_description: string; - library_items: string; - library_items_description: string; - library_content: string; - library_content_description: string; wiki_description: string; - news_description: string; chronicles_description: string; + news_description: string; + merch_description: string; gallery_description: string; archives_description: string; about_us_description: string; - merch_description: string; + page_not_found: string; + default_description: string; + name: string; + show_subitems: string; + show_primary_items: string; + show_secondary_items: string; + no_type: string; + no_year: string; + order_by: string; + group_by: string; }; }>; }; diff --git a/src/pages/404.tsx b/src/pages/404.tsx index fd9217f..e24d3c5 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -13,13 +13,15 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element { const langui = props.langui.websiteInterfaces.data[0].attributes; const contentPanel = ( -

404 - Page Not Found

+

404 - {langui.page_not_found}

Go back home ); - return ; + return ( + + ); } export const getStaticProps: GetStaticProps = async (context) => { diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx index 2e4b3ff..8e69680 100644 --- a/src/pages/about-us/index.tsx +++ b/src/pages/about-us/index.tsx @@ -15,14 +15,14 @@ export default function AboutUs(props: AboutUsProps): JSX.Element { ); return ( diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx index eb258b9..88fc0a2 100644 --- a/src/pages/archives/index.tsx +++ b/src/pages/archives/index.tsx @@ -15,14 +15,14 @@ export default function Archives(props: ArchivesProps): JSX.Element { ); return ( diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx index 8f9db43..2ef7522 100644 --- a/src/pages/chronicles/index.tsx +++ b/src/pages/chronicles/index.tsx @@ -15,14 +15,14 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element { ); return ( diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index 0abd7e0..144ecda 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -40,7 +40,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { {content.text_set.length > 0 ? ( ) : ( "" @@ -48,7 +48,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { {content.audio_set.length > 0 ? ( ) : ( "" @@ -56,7 +56,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { {content.video_set.length > 0 ? ( ) : ( "" diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 865078b..f9608f9 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -18,7 +18,7 @@ export default function Gallery(props: GalleryProps): JSX.Element { return ( diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index cd44876..235eb31 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -58,16 +58,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { const subPanel = ( - +
appLayout.setSubPanelOpen(false)} @@ -75,7 +71,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { {item.gallery.data.length > 0 ? ( appLayout.setSubPanelOpen(false)} @@ -85,7 +81,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { )} appLayout.setSubPanelOpen(false)} @@ -93,11 +89,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { {item.subitems.data.length > 0 ? ( appLayout.setSubPanelOpen(false)} @@ -107,11 +99,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { )} {item.contents.data.length > 0 ? ( - + ) : ( "" )} @@ -140,7 +128,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
{item.subitem_of.data.length > 0 ? (
-

{langui.global_subitem_of}

+

{langui.subitem_of}

) : ( "" @@ -450,7 +438,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { ) : ( "" @@ -474,7 +462,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { return ( (sortBy(groupingMethod, filteredItems)); const [groups, setGroups] = useState( - getGroups(groupingMethod, sortedItems) + getGroups(langui, groupingMethod, sortedItems) ); useEffect(() => { @@ -59,26 +59,22 @@ export default function Library(props: LibraryProps): JSX.Element { }, [filteredItems, sortingMethod]); useEffect(() => { - setGroups(getGroups(groupingMethod, sortedItems)); - }, [groupingMethod, sortedItems]); + setGroups(getGroups(langui, groupingMethod, sortedItems)); + }, [langui, groupingMethod, sortedItems]); const subPanel = (
-

Group by:

+

{langui.group_by}:

-

Show subitems:

+

{langui.show_subitems}:

 @@ -128,7 +120,7 @@ export default function Library(props: LibraryProps): JSX.Element { ); return ( { }; function getGroups( + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"], groupByType: number, items: LibraryProps["libraryItems"]["libraryItems"]["data"] ): GroupLibraryItems { @@ -164,52 +157,52 @@ function getGroups( case 1: const groupType: GroupLibraryItems = new Map(); - groupType.set("Audio", []); - groupType.set("Game", []); - groupType.set("Textual", []); - groupType.set("Video", []); - groupType.set("Other", []); - groupType.set("No type", []); + groupType.set(langui.audio, []); + groupType.set(langui.game, []); + groupType.set(langui.textual, []); + groupType.set(langui.video, []); + groupType.set(langui.other, []); + groupType.set(langui.no_type, []); items.map((item) => { if (item.attributes.metadata.length > 0) { switch (item.attributes.metadata[0].__typename) { case "ComponentMetadataAudio": - groupType.get("Audio")?.push(item); + groupType.get(langui.audio)?.push(item); break; case "ComponentMetadataGame": - groupType.get("Game")?.push(item); + groupType.get(langui.game)?.push(item); break; case "ComponentMetadataBooks": - groupType.get("Textual")?.push(item); + groupType.get(langui.textual)?.push(item); break; case "ComponentMetadataVideo": - groupType.get("Video")?.push(item); + groupType.get(langui.video)?.push(item); break; case "ComponentMetadataOther": switch ( item.attributes.metadata[0].subtype.data.attributes.slug ) { case "audio-case": - groupType.get("Audio")?.push(item); + groupType.get(langui.audio)?.push(item); break; case "video-case": - groupType.get("Video")?.push(item); + groupType.get(langui.video)?.push(item); break; case "game-case": - groupType.get("Game")?.push(item); + groupType.get(langui.game)?.push(item); break; default: - groupType.get("Other")?.push(item); + groupType.get(langui.other)?.push(item); break; } break; } } else { - groupType.get("No type")?.push(item); + groupType.get(langui.no_type)?.push(item); } }); return groupType; @@ -227,14 +220,14 @@ function getGroups( years.map((year) => { groupYear.set(year.toString(), []); }); - groupYear.set("No year", []); + groupYear.set(langui.no_year, []); items.map((item) => { if (item.attributes.release_date) { groupYear .get(item.attributes.release_date.year.toString()) ?.push(item); } else { - groupYear.get("No year")?.push(item); + groupYear.get(langui.no_year)?.push(item); } }); diff --git a/src/pages/merch/index.tsx b/src/pages/merch/index.tsx index eaf0f80..393688a 100644 --- a/src/pages/merch/index.tsx +++ b/src/pages/merch/index.tsx @@ -15,7 +15,7 @@ export default function Merch(props: MerchProps): JSX.Element { @@ -23,7 +23,7 @@ export default function Merch(props: MerchProps): JSX.Element { return ( diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx index 3521fba..4777519 100644 --- a/src/pages/news/index.tsx +++ b/src/pages/news/index.tsx @@ -15,7 +15,7 @@ export default function News(props: NewsProps): JSX.Element { @@ -23,7 +23,7 @@ export default function News(props: NewsProps): JSX.Element { return ( diff --git a/src/pages/wiki/index.tsx b/src/pages/wiki/index.tsx index 3ad13df..102448a 100644 --- a/src/pages/wiki/index.tsx +++ b/src/pages/wiki/index.tsx @@ -16,7 +16,7 @@ export default function Hubs(props: WikiProps): JSX.Element { @@ -25,7 +25,7 @@ export default function Hubs(props: WikiProps): JSX.Element { return ( Date: Sat, 5 Mar 2022 16:34:19 +0100 Subject: [PATCH 06/91] Added missing translations here and there --- next.config.js | 2 +- src/components/AppLayout.tsx | 12 ++++-------- src/graphql/operation.graphql | 1 + src/graphql/operations-types.ts | 1 + src/pages/404.tsx | 5 ++--- src/pages/index.tsx | 12 +++++------- src/queries/helpers.ts | 10 +++++----- 7 files changed, 19 insertions(+), 24 deletions(-) diff --git a/next.config.js b/next.config.js index f6c43d3..f8dd901 100644 --- a/next.config.js +++ b/next.config.js @@ -3,7 +3,7 @@ module.exports = { swcMinify: true, reactStrictMode: true, i18n: { - locales: ["en", "fr", "ja", "es", "xx"], + locales: ["en", "fr", "ja", "es"], defaultLocale: "en", }, images: { diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 06516de..bf6c1ed 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -104,12 +104,8 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { content={`${titlePrefix} - ${ogTitle}`} > - {props.description && ( - <> - - - - )} + + @@ -160,7 +156,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {

❮

- Select one of the options in the sidebar + {props.langui.select_option_sidebar}

@@ -238,7 +234,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { appLayout.languagePanelOpen ? "scale-100" : "scale-0" }`} > -

Select a language

+

{props.langui.select_language}

{router.locales?.sort().map((locale) => (
+ +
+

{langui.show_primary_items}:

+ +
+ +
+

{langui.show_secondary_items}:

+ +
); const contentPanel = ( @@ -242,12 +271,14 @@ function getGroups( function filterItems( showSubitems: boolean, + showPrimaryItems: boolean, + showSecondaryItems: boolean, items: LibraryProps["libraryItems"]["libraryItems"]["data"] ): LibraryProps["libraryItems"]["libraryItems"]["data"] { return [...items].filter((item) => { - let result = true; - if (!showSubitems && !item.attributes.root_item) result = false; + if (!showSubitems && !item.attributes.root_item) return false; if ( + showSubitems && item.attributes.metadata.length > 0 && item.attributes.metadata[0].__typename === "ComponentMetadataOther" && (item.attributes.metadata[0].subtype.data.attributes.slug === @@ -255,8 +286,10 @@ function filterItems( item.attributes.metadata[0].subtype.data.attributes.slug === "relation-set") ) - result = false; - return result; + return false; + if (item.attributes.primary && !showPrimaryItems) return false; + if (!item.attributes.primary && !showSecondaryItems) return false; + return true; }); } From 5b2d45443f56d3331cb71741bb8f163f814a602e Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 00:40:55 +0100 Subject: [PATCH 08/91] Groups Metadata type is now a thing, hurray --- src/graphql/operation.graphql | 45 ++- src/graphql/operations-types.ts | 160 ++++++---- src/graphql/operations.ts | 1 - src/graphql/schema.graphql | 520 +++++++++++++++++++++----------- src/pages/library/index.tsx | 25 +- src/queries/helpers.ts | 17 +- 6 files changed, 510 insertions(+), 258 deletions(-) diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 3f5b07f..77fb0a9 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -82,6 +82,7 @@ query getWebsiteInterface($language_code: String) { order_by group_by select_option_sidebar + group } } } @@ -231,7 +232,7 @@ query getLibraryItemsPreview($language_code: String) { } } } - ... on ComponentMetadataOther { + ... on ComponentMetadataGroup { subtype { data { attributes { @@ -244,6 +245,18 @@ query getLibraryItemsPreview($language_code: String) { } } } + subitems_type { + data { + attributes { + slug + titles( + filters: { language: { code: { eq: $language_code } } } + ) { + title + } + } + } + } } } } @@ -409,7 +422,7 @@ query getLibraryItem($slug: String, $language_code: String) { } } } - ... on ComponentMetadataOther { + ... on ComponentMetadataGroup { subtype { data { attributes { @@ -422,6 +435,18 @@ query getLibraryItem($slug: String, $language_code: String) { } } } + subitems_type { + data { + attributes { + slug + titles( + filters: { language: { code: { eq: $language_code } } } + ) { + title + } + } + } + } } } subitem_of { @@ -529,7 +554,7 @@ query getLibraryItem($slug: String, $language_code: String) { } } } - ... on ComponentMetadataOther { + ... on ComponentMetadataGroup { subtype { data { attributes { @@ -544,6 +569,20 @@ query getLibraryItem($slug: String, $language_code: String) { } } } + subitems_type { + data { + attributes { + slug + titles( + filters: { + language: { code: { eq: $language_code } } + } + ) { + title + } + } + } + } } } } diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index 603eaeb..87dd152 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -164,6 +164,7 @@ export type GetWebsiteInterfaceQuery = { order_by: string; group_by: string; select_option_sidebar: string; + group: string; }; }>; }; @@ -291,13 +292,13 @@ export type GetLibraryItemsPreviewQuery = { }; metadata: Array< | { - __typename: "ComponentMetadataBooks"; + __typename: "ComponentMetadataAudio"; subtype: { - __typename: "TextualSubtypeEntityResponse"; + __typename: "AudioSubtypeEntityResponse"; data: { - __typename: "TextualSubtypeEntity"; + __typename: "AudioSubtypeEntity"; attributes: { - __typename: "TextualSubtype"; + __typename: "AudioSubtype"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; @@ -308,13 +309,13 @@ export type GetLibraryItemsPreviewQuery = { }; } | { - __typename: "ComponentMetadataVideo"; + __typename: "ComponentMetadataBooks"; subtype: { - __typename: "VideoSubtypeEntityResponse"; + __typename: "TextualSubtypeEntityResponse"; data: { - __typename: "VideoSubtypeEntity"; + __typename: "TextualSubtypeEntity"; attributes: { - __typename: "VideoSubtype"; + __typename: "TextualSubtype"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; @@ -339,13 +340,27 @@ export type GetLibraryItemsPreviewQuery = { }; } | { - __typename: "ComponentMetadataAudio"; + __typename: "ComponentMetadataGroup"; subtype: { - __typename: "AudioSubtypeEntityResponse"; + __typename: "GroupSubtypeEntityResponse"; data: { - __typename: "AudioSubtypeEntity"; + __typename: "GroupSubtypeEntity"; attributes: { - __typename: "AudioSubtype"; + __typename: "GroupSubtype"; + slug: string; + titles: Array<{ + __typename: "ComponentTranslationsSimpleTitle"; + title: string; + }>; + }; + }; + }; + subitems_type: { + __typename: "MetadataTypeEntityResponse"; + data: { + __typename: "MetadataTypeEntity"; + attributes: { + __typename: "MetadataType"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; @@ -355,14 +370,15 @@ export type GetLibraryItemsPreviewQuery = { }; }; } + | { __typename: "ComponentMetadataOther" } | { - __typename: "ComponentMetadataOther"; + __typename: "ComponentMetadataVideo"; subtype: { - __typename: "OtherSubtypeEntityResponse"; + __typename: "VideoSubtypeEntityResponse"; data: { - __typename: "OtherSubtypeEntity"; + __typename: "VideoSubtypeEntity"; attributes: { - __typename: "OtherSubtype"; + __typename: "VideoSubtype"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; @@ -477,6 +493,23 @@ export type GetLibraryItemQuery = { description: string; }>; metadata: Array< + | { + __typename: "ComponentMetadataAudio"; + subtype: { + __typename: "AudioSubtypeEntityResponse"; + data: { + __typename: "AudioSubtypeEntity"; + attributes: { + __typename: "AudioSubtype"; + slug: string; + titles: Array<{ + __typename: "ComponentTranslationsSimpleTitle"; + title: string; + }>; + }; + }; + }; + } | { __typename: "ComponentMetadataBooks"; binding_type: Enum_Componentmetadatabooks_Binding_Type; @@ -508,22 +541,6 @@ export type GetLibraryItemQuery = { }>; }; } - | { - __typename: "ComponentMetadataVideo"; - subtype: { - __typename: "VideoSubtypeEntityResponse"; - data: { - __typename: "VideoSubtypeEntity"; - attributes: { - __typename: "VideoSubtype"; - titles: Array<{ - __typename: "ComponentTranslationsSimpleTitle"; - title: string; - }>; - }; - }; - }; - } | { __typename: "ComponentMetadataGame"; platforms: { @@ -572,13 +589,27 @@ export type GetLibraryItemQuery = { }; } | { - __typename: "ComponentMetadataAudio"; + __typename: "ComponentMetadataGroup"; subtype: { - __typename: "AudioSubtypeEntityResponse"; + __typename: "GroupSubtypeEntityResponse"; data: { - __typename: "AudioSubtypeEntity"; + __typename: "GroupSubtypeEntity"; attributes: { - __typename: "AudioSubtype"; + __typename: "GroupSubtype"; + slug: string; + titles: Array<{ + __typename: "ComponentTranslationsSimpleTitle"; + title: string; + }>; + }; + }; + }; + subitems_type: { + __typename: "MetadataTypeEntityResponse"; + data: { + __typename: "MetadataTypeEntity"; + attributes: { + __typename: "MetadataType"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; @@ -588,15 +619,15 @@ export type GetLibraryItemQuery = { }; }; } + | { __typename: "ComponentMetadataOther" } | { - __typename: "ComponentMetadataOther"; + __typename: "ComponentMetadataVideo"; subtype: { - __typename: "OtherSubtypeEntityResponse"; + __typename: "VideoSubtypeEntityResponse"; data: { - __typename: "OtherSubtypeEntity"; + __typename: "VideoSubtypeEntity"; attributes: { - __typename: "OtherSubtype"; - slug: string; + __typename: "VideoSubtype"; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; title: string; @@ -668,13 +699,13 @@ export type GetLibraryItemQuery = { }; metadata: Array< | { - __typename: "ComponentMetadataBooks"; + __typename: "ComponentMetadataAudio"; subtype: { - __typename: "TextualSubtypeEntityResponse"; + __typename: "AudioSubtypeEntityResponse"; data: { - __typename: "TextualSubtypeEntity"; + __typename: "AudioSubtypeEntity"; attributes: { - __typename: "TextualSubtype"; + __typename: "AudioSubtype"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; @@ -685,13 +716,13 @@ export type GetLibraryItemQuery = { }; } | { - __typename: "ComponentMetadataVideo"; + __typename: "ComponentMetadataBooks"; subtype: { - __typename: "VideoSubtypeEntityResponse"; + __typename: "TextualSubtypeEntityResponse"; data: { - __typename: "VideoSubtypeEntity"; + __typename: "TextualSubtypeEntity"; attributes: { - __typename: "VideoSubtype"; + __typename: "TextualSubtype"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; @@ -716,13 +747,27 @@ export type GetLibraryItemQuery = { }; } | { - __typename: "ComponentMetadataAudio"; + __typename: "ComponentMetadataGroup"; subtype: { - __typename: "AudioSubtypeEntityResponse"; + __typename: "GroupSubtypeEntityResponse"; data: { - __typename: "AudioSubtypeEntity"; + __typename: "GroupSubtypeEntity"; attributes: { - __typename: "AudioSubtype"; + __typename: "GroupSubtype"; + slug: string; + titles: Array<{ + __typename: "ComponentTranslationsSimpleTitle"; + title: string; + }>; + }; + }; + }; + subitems_type: { + __typename: "MetadataTypeEntityResponse"; + data: { + __typename: "MetadataTypeEntity"; + attributes: { + __typename: "MetadataType"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; @@ -732,14 +777,15 @@ export type GetLibraryItemQuery = { }; }; } + | { __typename: "ComponentMetadataOther" } | { - __typename: "ComponentMetadataOther"; + __typename: "ComponentMetadataVideo"; subtype: { - __typename: "OtherSubtypeEntityResponse"; + __typename: "VideoSubtypeEntityResponse"; data: { - __typename: "OtherSubtypeEntity"; + __typename: "VideoSubtypeEntity"; attributes: { - __typename: "OtherSubtype"; + __typename: "VideoSubtype"; slug: string; titles: Array<{ __typename: "ComponentTranslationsSimpleTitle"; diff --git a/src/graphql/operations.ts b/src/graphql/operations.ts index 4245797..8d52f9a 100644 --- a/src/graphql/operations.ts +++ b/src/graphql/operations.ts @@ -103,7 +103,6 @@ export async function getContentsSlugs( return await graphQL(query, JSON.stringify(variables)); } - export async function getContents( variables: GetContentsQueryVariables ): Promise { diff --git a/src/graphql/schema.graphql b/src/graphql/schema.graphql index 41e523f..526c5af 100644 --- a/src/graphql/schema.graphql +++ b/src/graphql/schema.graphql @@ -509,6 +509,12 @@ type ComponentMetadataGame { ): LanguageRelationResponseCollection } +type ComponentMetadataGroup { + id: ID! + subtype: GroupSubtypeEntityResponse + subitems_type: MetadataTypeEntityResponse +} + type ComponentMetadataMerch { id: ID! merch_item: MerchItemEntityResponse @@ -516,7 +522,6 @@ type ComponentMetadataMerch { type ComponentMetadataOther { id: ID! - subtype: OtherSubtypeEntityResponse } type ComponentMetadataVideo { @@ -1801,6 +1806,46 @@ type GlossaryItemTypeEntityResponseCollection { meta: ResponseCollectionMeta! } +input GroupSubtypeFiltersInput { + id: IDFilterInput + slug: StringFilterInput + createdAt: DateTimeFilterInput + updatedAt: DateTimeFilterInput + and: [GroupSubtypeFiltersInput] + or: [GroupSubtypeFiltersInput] + not: GroupSubtypeFiltersInput +} + +input GroupSubtypeInput { + slug: String + titles: [ComponentTranslationsSimpleTitleInput] +} + +type GroupSubtype { + slug: String! + titles( + filters: ComponentTranslationsSimpleTitleFiltersInput + pagination: PaginationArg = {} + sort: [String] = [] + ): [ComponentTranslationsSimpleTitle] + createdAt: DateTime + updatedAt: DateTime +} + +type GroupSubtypeEntity { + id: ID + attributes: GroupSubtype +} + +type GroupSubtypeEntityResponse { + data: GroupSubtypeEntity +} + +type GroupSubtypeEntityResponseCollection { + data: [GroupSubtypeEntity!]! + meta: ResponseCollectionMeta! +} + input LanguageFiltersInput { id: IDFilterInput name: StringFilterInput @@ -1846,11 +1891,12 @@ type LanguageRelationResponseCollection { } union LibraryItemMetadataDynamicZone = - ComponentMetadataBooks - | ComponentMetadataVideo + ComponentMetadataAudio + | ComponentMetadataBooks | ComponentMetadataGame - | ComponentMetadataAudio + | ComponentMetadataGroup | ComponentMetadataOther + | ComponentMetadataVideo | Error scalar LibraryItemMetadataDynamicZoneInput @@ -2013,6 +2059,46 @@ type MerchItemRelationResponseCollection { data: [MerchItemEntity!]! } +input MetadataTypeFiltersInput { + id: IDFilterInput + slug: StringFilterInput + createdAt: DateTimeFilterInput + updatedAt: DateTimeFilterInput + and: [MetadataTypeFiltersInput] + or: [MetadataTypeFiltersInput] + not: MetadataTypeFiltersInput +} + +input MetadataTypeInput { + slug: String + titles: [ComponentTranslationsSimpleTitleInput] +} + +type MetadataType { + slug: String! + titles( + filters: ComponentTranslationsSimpleTitleFiltersInput + pagination: PaginationArg = {} + sort: [String] = [] + ): [ComponentTranslationsSimpleTitle] + createdAt: DateTime + updatedAt: DateTime +} + +type MetadataTypeEntity { + id: ID + attributes: MetadataType +} + +type MetadataTypeEntityResponse { + data: MetadataTypeEntity +} + +type MetadataTypeEntityResponseCollection { + data: [MetadataTypeEntity!]! + meta: ResponseCollectionMeta! +} + input OtherSubtypeFiltersInput { id: IDFilterInput slug: StringFilterInput @@ -2490,72 +2576,85 @@ type WeaponStoryTypeEntityResponseCollection { input WebsiteInterfaceFiltersInput { id: IDFilterInput - language: LanguageFiltersInput - main_library: StringFilterInput - main_library_description: StringFilterInput - main_news: StringFilterInput - main_merch: StringFilterInput - main_gallery: StringFilterInput - main_archives: StringFilterInput - main_about_us: StringFilterInput - main_licensing: StringFilterInput - main_copyright: StringFilterInput + library: StringFilterInput + contents: StringFilterInput + wiki: StringFilterInput + chronicles: StringFilterInput + library_short_description: StringFilterInput + contents_short_description: StringFilterInput + wiki_short_description: StringFilterInput + chronicles_short_description: StringFilterInput + news: StringFilterInput + merch: StringFilterInput + gallery: StringFilterInput + archives: StringFilterInput + about_us: StringFilterInput + licensing_notice: StringFilterInput + copyright_notice: StringFilterInput + contents_description: StringFilterInput + type: StringFilterInput + category: StringFilterInput + categories: StringFilterInput + size: StringFilterInput + release_date: StringFilterInput + release_year: StringFilterInput + details: StringFilterInput + price: StringFilterInput + width: StringFilterInput + height: StringFilterInput + thickness: StringFilterInput + subitem: StringFilterInput + subitems: StringFilterInput + subitem_of: StringFilterInput + variant: StringFilterInput + variants: StringFilterInput + variant_of: StringFilterInput + summary: StringFilterInput + audio: StringFilterInput + video: StringFilterInput + textual: StringFilterInput + game: StringFilterInput + other: StringFilterInput + return_to: StringFilterInput + left_to_right: StringFilterInput + right_to_left: StringFilterInput + page: StringFilterInput + pages: StringFilterInput + page_order: StringFilterInput + binding: StringFilterInput + type_information: StringFilterInput + front_matter: StringFilterInput + back_matter: StringFilterInput + open_content: StringFilterInput + read_content: StringFilterInput + watch_content: StringFilterInput + listen_content: StringFilterInput + view_scans: StringFilterInput + paperback: StringFilterInput + hardcover: StringFilterInput + ui_language: LanguageFiltersInput + languages: StringFilterInput + select_language: StringFilterInput + language: StringFilterInput library_description: StringFilterInput - library_item_summary: StringFilterInput - library_item_gallery: StringFilterInput - library_item_details: StringFilterInput - library_item_subitems: StringFilterInput - library_item_variants: StringFilterInput - library_item_content: StringFilterInput - global_return_label: StringFilterInput - global_subitem_of: StringFilterInput - global_type: StringFilterInput - global_width: StringFilterInput - global_height: StringFilterInput - global_thickness: StringFilterInput - global_binding: StringFilterInput - global_language: StringFilterInput - global_languages: StringFilterInput - global_page: StringFilterInput - global_pages: StringFilterInput - global_page_order: StringFilterInput - global_release_date: StringFilterInput - global_price: StringFilterInput - library_item_physical_size: StringFilterInput - library_item_type_information: StringFilterInput - library_item_front_matter: StringFilterInput - library_item_back_matter: StringFilterInput - library_item_type_textual: StringFilterInput - library_item_type_audio: StringFilterInput - library_item_type_game: StringFilterInput - library_item_type_video: StringFilterInput - library_item_type_other: StringFilterInput - library_item_open_content: StringFilterInput - library_item_view_scans: StringFilterInput - content_read_content: StringFilterInput - content_watch_content: StringFilterInput - content_listen_content: StringFilterInput - global_category: StringFilterInput - global_categories: StringFilterInput - global_paperback: StringFilterInput - global_hardcover: StringFilterInput - global_left_to_right: StringFilterInput - global_right_to_left: StringFilterInput - main_wiki: StringFilterInput - main_wiki_description: StringFilterInput - main_chronicles: StringFilterInput - main_chronicles_description: StringFilterInput - library_items: StringFilterInput - library_items_description: StringFilterInput - library_content: StringFilterInput - library_content_description: StringFilterInput wiki_description: StringFilterInput - news_description: StringFilterInput chronicles_description: StringFilterInput + news_description: StringFilterInput + merch_description: StringFilterInput gallery_description: StringFilterInput archives_description: StringFilterInput about_us_description: StringFilterInput - merch_description: StringFilterInput + page_not_found: StringFilterInput + default_description: StringFilterInput + name: StringFilterInput + show_subitems: StringFilterInput + show_primary_items: StringFilterInput + show_secondary_items: StringFilterInput + no_type: StringFilterInput + no_year: StringFilterInput + order_by: StringFilterInput + group_by: StringFilterInput + select_option_sidebar: StringFilterInput createdAt: DateTimeFilterInput updatedAt: DateTimeFilterInput and: [WebsiteInterfaceFiltersInput] @@ -2564,141 +2663,167 @@ input WebsiteInterfaceFiltersInput { } input WebsiteInterfaceInput { - language: ID - main_library: String - main_library_description: String - main_news: String - main_merch: String - main_gallery: String - main_archives: String - main_about_us: String - main_licensing: String - main_copyright: String + library: String + contents: String + wiki: String + chronicles: String + library_short_description: String + contents_short_description: String + wiki_short_description: String + chronicles_short_description: String + news: String + merch: String + gallery: String + archives: String + about_us: String + licensing_notice: String + copyright_notice: String + contents_description: String + type: String + category: String + categories: String + size: String + release_date: String + release_year: String + details: String + price: String + width: String + height: String + thickness: String + subitem: String + subitems: String + subitem_of: String + variant: String + variants: String + variant_of: String + summary: String + audio: String + video: String + textual: String + game: String + other: String + return_to: String + left_to_right: String + right_to_left: String + page: String + pages: String + page_order: String + binding: String + type_information: String + front_matter: String + back_matter: String + open_content: String + read_content: String + watch_content: String + listen_content: String + view_scans: String + paperback: String + hardcover: String + ui_language: ID + languages: String + select_language: String + language: String library_description: String - library_item_summary: String - library_item_gallery: String - library_item_details: String - library_item_subitems: String - library_item_variants: String - library_item_content: String - global_return_label: String - global_subitem_of: String - global_type: String - global_width: String - global_height: String - global_thickness: String - global_binding: String - global_language: String - global_languages: String - global_page: String - global_pages: String - global_page_order: String - global_release_date: String - global_price: String - library_item_physical_size: String - library_item_type_information: String - library_item_front_matter: String - library_item_back_matter: String - library_item_type_textual: String - library_item_type_audio: String - library_item_type_game: String - library_item_type_video: String - library_item_type_other: String - library_item_open_content: String - library_item_view_scans: String - content_read_content: String - content_watch_content: String - content_listen_content: String - global_category: String - global_categories: String - global_paperback: String - global_hardcover: String - global_left_to_right: String - global_right_to_left: String - main_wiki: String - main_wiki_description: String - main_chronicles: String - main_chronicles_description: String - library_items: String - library_items_description: String - library_content: String - library_content_description: String wiki_description: String - news_description: String chronicles_description: String + news_description: String + merch_description: String gallery_description: String archives_description: String about_us_description: String - merch_description: String + page_not_found: String + default_description: String + name: String + show_subitems: String + show_primary_items: String + show_secondary_items: String + no_type: String + no_year: String + order_by: String + group_by: String + select_option_sidebar: String } type WebsiteInterface { - language: LanguageEntityResponse - main_library: String - main_library_description: String - main_news: String - main_merch: String - main_gallery: String - main_archives: String - main_about_us: String - main_licensing: String - main_copyright: String + library: String + contents: String + wiki: String + chronicles: String + library_short_description: String + contents_short_description: String + wiki_short_description: String + chronicles_short_description: String + news: String + merch: String + gallery: String + archives: String + about_us: String + licensing_notice: String + copyright_notice: String + contents_description: String + type: String + category: String + categories: String + size: String + release_date: String + release_year: String + details: String + price: String + width: String + height: String + thickness: String + subitem: String + subitems: String + subitem_of: String + variant: String + variants: String + variant_of: String + summary: String + audio: String + video: String + textual: String + game: String + other: String + return_to: String + left_to_right: String + right_to_left: String + page: String + pages: String + page_order: String + binding: String + type_information: String + front_matter: String + back_matter: String + open_content: String + read_content: String + watch_content: String + listen_content: String + view_scans: String + paperback: String + hardcover: String + ui_language: LanguageEntityResponse + languages: String + select_language: String + language: String library_description: String - library_item_summary: String - library_item_gallery: String - library_item_details: String - library_item_subitems: String - library_item_variants: String - library_item_content: String - global_return_label: String - global_subitem_of: String - global_type: String - global_width: String - global_height: String - global_thickness: String - global_binding: String - global_language: String - global_languages: String - global_page: String - global_pages: String - global_page_order: String - global_release_date: String - global_price: String - library_item_physical_size: String - library_item_type_information: String - library_item_front_matter: String - library_item_back_matter: String - library_item_type_textual: String - library_item_type_audio: String - library_item_type_game: String - library_item_type_video: String - library_item_type_other: String - library_item_open_content: String - library_item_view_scans: String - content_read_content: String - content_watch_content: String - content_listen_content: String - global_category: String - global_categories: String - global_paperback: String - global_hardcover: String - global_left_to_right: String - global_right_to_left: String - main_wiki: String - main_wiki_description: String - main_chronicles: String - main_chronicles_description: String - library_items: String - library_items_description: String - library_content: String - library_content_description: String wiki_description: String - news_description: String chronicles_description: String + news_description: String + merch_description: String gallery_description: String archives_description: String about_us_description: String - merch_description: String + page_not_found: String + default_description: String + name: String + show_subitems: String + show_primary_items: String + show_secondary_items: String + no_type: String + no_year: String + order_by: String + group_by: String + select_option_sidebar: String createdAt: DateTime updatedAt: DateTime } @@ -2819,6 +2944,7 @@ union GenericMorph = | ComponentMetadataAudio | ComponentMetadataBooks | ComponentMetadataGame + | ComponentMetadataGroup | ComponentMetadataMerch | ComponentMetadataOther | ComponentMetadataVideo @@ -2866,9 +2992,11 @@ union GenericMorph = | GamePlatform | GlossaryItem | GlossaryItemType + | GroupSubtype | Language | LibraryItem | MerchItem + | MetadataType | OtherSubtype | Post | RangedContent @@ -2963,6 +3091,12 @@ type Query { pagination: PaginationArg = {} sort: [String] = [] ): GlossaryItemTypeEntityResponseCollection + groupSubtype(id: ID): GroupSubtypeEntityResponse + groupSubtypes( + filters: GroupSubtypeFiltersInput + pagination: PaginationArg = {} + sort: [String] = [] + ): GroupSubtypeEntityResponseCollection language(id: ID): LanguageEntityResponse languages( filters: LanguageFiltersInput @@ -2981,6 +3115,12 @@ type Query { pagination: PaginationArg = {} sort: [String] = [] ): MerchItemEntityResponseCollection + metadataType(id: ID): MetadataTypeEntityResponse + metadataTypes( + filters: MetadataTypeFiltersInput + pagination: PaginationArg = {} + sort: [String] = [] + ): MetadataTypeEntityResponseCollection otherSubtype(id: ID): OtherSubtypeEntityResponse otherSubtypes( filters: OtherSubtypeFiltersInput @@ -3116,6 +3256,12 @@ type Mutation { data: GlossaryItemTypeInput! ): GlossaryItemTypeEntityResponse deleteGlossaryItemType(id: ID!): GlossaryItemTypeEntityResponse + createGroupSubtype(data: GroupSubtypeInput!): GroupSubtypeEntityResponse + updateGroupSubtype( + id: ID! + data: GroupSubtypeInput! + ): GroupSubtypeEntityResponse + deleteGroupSubtype(id: ID!): GroupSubtypeEntityResponse createLanguage(data: LanguageInput!): LanguageEntityResponse updateLanguage(id: ID!, data: LanguageInput!): LanguageEntityResponse deleteLanguage(id: ID!): LanguageEntityResponse @@ -3125,6 +3271,12 @@ type Mutation { createMerchItem(data: MerchItemInput!): MerchItemEntityResponse updateMerchItem(id: ID!, data: MerchItemInput!): MerchItemEntityResponse deleteMerchItem(id: ID!): MerchItemEntityResponse + createMetadataType(data: MetadataTypeInput!): MetadataTypeEntityResponse + updateMetadataType( + id: ID! + data: MetadataTypeInput! + ): MetadataTypeEntityResponse + deleteMetadataType(id: ID!): MetadataTypeEntityResponse createOtherSubtype(data: OtherSubtypeInput!): OtherSubtypeEntityResponse updateOtherSubtype( id: ID! diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 1c511aa..c3ff027 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -191,6 +191,7 @@ function getGroups( groupType.set(langui.textual, []); groupType.set(langui.video, []); groupType.set(langui.other, []); + groupType.set(langui.group, []); groupType.set(langui.no_type, []); items.map((item) => { if (item.attributes.metadata.length > 0) { @@ -208,26 +209,28 @@ function getGroups( groupType.get(langui.video)?.push(item); break; case "ComponentMetadataOther": + groupType.get(langui.other)?.push(item); + break; + case "ComponentMetadataGroup": switch ( - item.attributes.metadata[0].subtype.data.attributes.slug + item.attributes.metadata[0].subitems_type.data.attributes.slug ) { - case "audio-case": + case "audio": groupType.get(langui.audio)?.push(item); break; - - case "video-case": + case "video": groupType.get(langui.video)?.push(item); break; - - case "game-case": + case "game": groupType.get(langui.game)?.push(item); break; - - default: - groupType.get(langui.other)?.push(item); + case "textual": + groupType.get(langui.textual)?.push(item); + break; + case "mixed": + groupType.get(langui.group)?.push(item); break; } - break; } } else { @@ -280,7 +283,7 @@ function filterItems( if ( showSubitems && item.attributes.metadata.length > 0 && - item.attributes.metadata[0].__typename === "ComponentMetadataOther" && + item.attributes.metadata[0].__typename === "ComponentMetadataGroup" && (item.attributes.metadata[0].subtype.data.attributes.slug === "variant-set" || item.attributes.metadata[0].subtype.data.attributes.slug === diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index acaf0a7..6d9c5b5 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -71,6 +71,8 @@ export function prettyItemType( return langui.game; case "ComponentMetadataVideo": return langui.video; + case "ComponentMetadataGroup": + return langui.group; case "ComponentMetadataOther": return langui.other; default: @@ -82,21 +84,32 @@ export function prettyItemSubType(metadata: { __typename: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["metadata"][number]["__typename"]; subtype?: any; platforms?: any; + subitems_type?: any; }): string { switch (metadata.__typename) { case "ComponentMetadataAudio": case "ComponentMetadataBooks": case "ComponentMetadataVideo": - case "ComponentMetadataOther": { return metadata.subtype.data.attributes.titles.length > 0 ? metadata.subtype.data.attributes.titles[0].title : prettySlug(metadata.subtype.data.attributes.slug); - } case "ComponentMetadataGame": return metadata.platforms.data.length > 0 ? metadata.platforms.data[0].attributes.short : ""; + case "ComponentMetadataGroup": { + const firstPart = + metadata.subtype.data.attributes.titles.length > 0 + ? metadata.subtype.data.attributes.titles[0].title + : prettySlug(metadata.subtype.data.attributes.slug); + + const secondPart = + metadata.subitems_type.data.attributes.titles.length > 0 + ? metadata.subitems_type.data.attributes.titles[0].title + : prettySlug(metadata.subitems_type.data.attributes.slug); + return `${secondPart} ${firstPart})`; + } default: return ""; } From e80b2b2ab69bb1735f4b811cc38fa7692baf0225 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:18:34 +0100 Subject: [PATCH 09/91] Quick fix for the last commit --- src/pages/library/[slug].tsx | 115 +++++------------------------------ src/queries/helpers.ts | 2 +- 2 files changed, 16 insertions(+), 101 deletions(-) diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 235eb31..8261f4d 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -51,7 +51,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { const isVariantSet = item.metadata.length > 0 && - item.metadata[0].__typename === "ComponentMetadataOther" && + item.metadata[0].__typename === "ComponentMetadataGroup" && item.metadata[0].subtype.data.attributes.slug === "variant-set"; sortContent(item.contents); @@ -184,9 +184,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
-

- {langui.details} -

+

{langui.details}

{item.metadata.length > 0 ? (
@@ -256,9 +254,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { {item.metadata.length > 0 ? ( <> -

- {langui.type_information} -

+

{langui.type_information}

{item.metadata[0].__typename === "ComponentMetadataBooks" ? ( <> @@ -312,21 +308,8 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { "ComponentMetadataGame" ? ( <> ) : item.metadata[0].__typename === - "ComponentMetadataOther" ? ( - <> -
-

{langui.type}:

- - {item.metadata[0].subtype.data.attributes.titles - .length > 0 - ? item.metadata[0].subtype.data.attributes.titles[0] - .title - : prettySlug( - item.metadata[0].subtype.data.attributes.slug - )} - -
- + "ComponentMetadataGroup" ? ( + <> ) : ( "" )} @@ -344,9 +327,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { className="grid place-items-center gap-8 w-full" >

- {isVariantSet - ? langui.variants - : langui.subitems} + {isVariantSet ? langui.variants : langui.subitems}

{item.subitems.data.map((subitem) => ( @@ -549,7 +530,7 @@ function useTesting(props: LibrarySlugProps) { ); } else { if ( - libraryItem.metadata[0].__typename === "ComponentMetadataOther" && + libraryItem.metadata[0].__typename === "ComponentMetadataGroup" && (libraryItem.metadata[0].subtype.data.attributes.slug === "relation-set" || libraryItem.metadata[0].subtype.data.attributes.slug === @@ -599,80 +580,14 @@ function useTesting(props: LibrarySlugProps) { } else { // This is a normal item - if (libraryItem.metadata[0].__typename === "ComponentMetadataOther") { - if ( - libraryItem.metadata[0].subtype.data.attributes.slug === - "audio-case" - ) { - let hasAudioSubItem = false; - libraryItem.subitems.data.map((subitem) => { - if ( - subitem.attributes.metadata.length > 0 && - subitem.attributes.metadata[0].__typename === - "ComponentMetadataAudio" - ) - hasAudioSubItem = true; - }); - if (!hasAudioSubItem) { - prettyTestError( - router, - "Audio-case item doesn't have an audio-typed subitem", - ["libraryItem"], - libraryItemURL - ); - } - } else if ( - libraryItem.metadata[0].subtype.data.attributes.slug === "game-case" - ) { - let hasGameSubItem = false; - libraryItem.subitems.data.map((subitem) => { - if ( - subitem.attributes.metadata.length > 0 && - subitem.attributes.metadata[0].__typename === - "ComponentMetadataGame" - ) - hasGameSubItem = true; - }); - if (!hasGameSubItem) { - prettyTestError( - router, - "Game-case item doesn't have an Game-typed subitem", - ["libraryItem"], - libraryItemURL - ); - } - } else if ( - libraryItem.metadata[0].subtype.data.attributes.slug === - "video-case" - ) { - let hasVideoSubItem = false; - libraryItem.subitems.data.map((subitem) => { - if ( - subitem.attributes.metadata.length > 0 && - subitem.attributes.metadata[0].__typename === - "ComponentMetadataVideo" - ) - hasVideoSubItem = true; - }); - if (!hasVideoSubItem) { - prettyTestError( - router, - "Video-case item doesn't have an Video-typed subitem", - ["libraryItem"], - libraryItemURL - ); - } - } else if ( - libraryItem.metadata[0].subtype.data.attributes.slug === "item-set" - ) { - if (libraryItem.subitems.data.length === 0) { - prettyTestError( - router, - "Item-set item should have subitems", - ["libraryItem"], - libraryItemURL - ); - } + if (libraryItem.metadata[0].__typename === "ComponentMetadataGroup") { + if (libraryItem.subitems.data.length === 0) { + prettyTestError( + router, + "Group-type item should have subitems", + ["libraryItem"], + libraryItemURL + ); } } diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index 6d9c5b5..c9d11c3 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -108,7 +108,7 @@ export function prettyItemSubType(metadata: { metadata.subitems_type.data.attributes.titles.length > 0 ? metadata.subitems_type.data.attributes.titles[0].title : prettySlug(metadata.subitems_type.data.attributes.slug); - return `${secondPart} ${firstPart})`; + return `${secondPart} ${firstPart}`; } default: return ""; From ae5e37c002793446d41d536820128a0d08b81854 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:21:43 +0100 Subject: [PATCH 10/91] Create node.js.yml --- .github/workflows/node.js.yml | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .github/workflows/node.js.yml diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..57e68ee --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,30 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Node.js CI + +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [12.x, 14.x, 16.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present From e4def9268a8be59cbc497a395066927b61bf1269 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:37:16 +0100 Subject: [PATCH 11/91] Update node.js.yml --- .github/workflows/node.js.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 57e68ee..40abb72 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [12.x, 14.x, 16.x] + node-version: [16.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: @@ -26,5 +26,11 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' + env: + ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} + NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} + NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} + NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} + URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} - run: npm ci - run: npm run build --if-present From d502655dff2d1af0cee95c33d722df20b8ee24ae Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:01:49 +0100 Subject: [PATCH 12/91] Update node.js.yml --- .github/workflows/node.js.yml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 40abb72..4260864 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -26,11 +26,19 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' + - name: Create .env.local file env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} + run: | + touch .env.local + echo ACCESS_TOKEN=${{ secrets.ACCESS_TOKEN }} >> .env.local + echo NEXT_PUBLIC_URL_CMS=${{ secrets.NEXT_PUBLIC_URL_CMS }} >> .env.local + echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local + echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local + echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local - run: npm ci - run: npm run build --if-present From 29faaf8051581b165dd1c85ef20f5dbd031d7cf8 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:04:36 +0100 Subject: [PATCH 13/91] Update node.js.yml --- .github/workflows/node.js.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 4260864..cfe1ff6 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -40,5 +40,6 @@ jobs: echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local + cat .env.local - run: npm ci - run: npm run build --if-present From 9ecabfc2f3c93dfbf72e797bb46c04e687d4d6fe Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:08:16 +0100 Subject: [PATCH 14/91] Update node.js.yml --- .github/workflows/node.js.yml | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index cfe1ff6..2e4dbe1 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -26,20 +26,11 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' - - name: Create .env.local file + - run: npm ci + - run: npm run build --if-present env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} - run: | - touch .env.local - echo ACCESS_TOKEN=${{ secrets.ACCESS_TOKEN }} >> .env.local - echo NEXT_PUBLIC_URL_CMS=${{ secrets.NEXT_PUBLIC_URL_CMS }} >> .env.local - echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local - echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local - echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local - cat .env.local - - run: npm ci - - run: npm run build --if-present From b95278ddbee48197fabf5fde0c85a584b1310646 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:23:52 +0100 Subject: [PATCH 15/91] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 6b245ca..c3bec14 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Accords-library.com +[![Node.js CI](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml) + ## Technologies #### [Back](https://github.com/Accords-Library/strapi.accords-library.com) From 40dc0eb57c9915bbcbafcf8de05e381d7fc7c0b6 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:39:37 +0100 Subject: [PATCH 16/91] Disable testing log on npm build --- run_accords_testing.sh | 6 ++---- src/queries/helpers.ts | 10 ++++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/run_accords_testing.sh b/run_accords_testing.sh index 5b91b7b..16243bf 100755 --- a/run_accords_testing.sh +++ b/run_accords_testing.sh @@ -1,4 +1,2 @@ -NODE_ENV=test -# npx next build | tee ./testing_logs/$(date +"%Y-%m-%d---%H-%M-%S").log - -npx next build 2> >(tee ./testing_logs/$(date +"%Y-%m-%d---%H-%M-%S").stderr.tsv) 1> >(tee ./testing_logs/$(date +"%Y-%m-%d---%H-%M-%S").stdout.tsv) \ No newline at end of file +export ENABLE_TESTING_LOG=true +npx next build 2> >(tee ./testing_logs/$(date +"%Y-%m-%d---%H-%M-%S").stderr.tsv) 1> >(tee ./testing_logs/$(date +"%Y-%m-%d---%H-%M-%S").stdout.tsv) diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index c9d11c3..b4d0c02 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -173,10 +173,12 @@ function prettyTestWritter( process.env.NEXT_PUBLIC_URL_CMS + url, ]; - if (level === TestingLevel.Warning) { - console.warn(line.join("\t")); - } else { - console.error(line.join("\t")); + if (process.env.ENABLE_TESTING_LOG) { + if (level === TestingLevel.Warning) { + console.warn(line.join("\t")); + } else { + console.error(line.join("\t")); + } } } From c1f78fc04dcf33e3327f236a60fccd96022d5d82 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 03:44:09 +0100 Subject: [PATCH 17/91] Created a component for popup windows --- src/components/AppLayout.tsx | 47 ++++++++++++++---------------------- src/components/Popup.tsx | 33 +++++++++++++++++++++++++ 2 files changed, 51 insertions(+), 29 deletions(-) create mode 100644 src/components/Popup.tsx diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index bf6c1ed..d1751be 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -12,6 +12,7 @@ import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery"; import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { ImageQuality } from "./Img"; +import Popup from "./Popup"; type AppLayoutProps = { subPanel?: React.ReactNode; @@ -218,37 +219,25 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
- {/* Language selection background */} -
{ - appLayout.setLanguagePanelOpen(false); - }} + -
-

{props.langui.select_language}

-
- {router.locales?.sort().map((locale) => ( - - ))} -
+

{props.langui.select_language}

+
+ {router.locales?.sort().map((locale) => ( + + ))}
-
+ >; + state?: boolean; + children: React.ReactNode; +}; + +export default function Popup(props: PopupProps): JSX.Element { + return ( +
+
{ + props.setState(false); + }} + /> +
+ {props.children} +
+
+ ); +} From 0467813c2c14b0e57eef4e9a489872d2f9c3de7e Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 03:44:53 +0100 Subject: [PATCH 18/91] Use state instead of anchors for Content TOC in Library Item --- src/components/Library/ContentTOCLine.tsx | 108 ++++++++++++++++++++++ src/pages/library/[slug].tsx | 89 ++---------------- 2 files changed, 114 insertions(+), 83 deletions(-) create mode 100644 src/components/Library/ContentTOCLine.tsx diff --git a/src/components/Library/ContentTOCLine.tsx b/src/components/Library/ContentTOCLine.tsx new file mode 100644 index 0000000..9001184 --- /dev/null +++ b/src/components/Library/ContentTOCLine.tsx @@ -0,0 +1,108 @@ +import Button from "components/Button"; +import Chip from "components/Chip"; +import { + GetLibraryItemQuery, + GetWebsiteInterfaceQuery, +} from "graphql/operations-types"; +import { prettyinlineTitle, prettySlug } from "queries/helpers"; +import { useState } from "react"; + +type ContentTOCLineProps = { + content: GetLibraryItemQuery["libraryItems"]["data"][number]["attributes"]["contents"]["data"][number]; + parentSlug: string; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; +}; + +export default function ContentTOCLine( + props: ContentTOCLineProps +): JSX.Element { + const content = props.content; + const langui = props.langui; + + const [opened, setOpened] = useState(false); + + return ( +
+
+ +

setOpened(!opened)}> + {content.attributes.content.data && + content.attributes.content.data.attributes.titles.length > 0 + ? prettyinlineTitle( + content.attributes.content.data.attributes.titles[0] + .pre_title, + content.attributes.content.data.attributes.titles[0].title, + content.attributes.content.data.attributes.titles[0].subtitle + ) + : prettySlug(content.attributes.slug, props.parentSlug)} +

+ +
+ {content.attributes.content.data?.attributes.categories.data.map( + (category) => ( + {category.attributes.short} + ) + )} +
+

+

+ {content.attributes.range[0].__typename === "ComponentRangePageRange" + ? content.attributes.range[0].starting_page + : ""} +

+ {content.attributes.content.data ? ( + + {content.attributes.content.data.attributes.type.data.attributes + .titles.length > 0 + ? content.attributes.content.data.attributes.type.data.attributes + .titles[0].title + : prettySlug( + content.attributes.content.data.attributes.type.data + .attributes.slug + )} + + ) : ( + "" + )} +
+
+ + subdirectory_arrow_right + + + {content.attributes.scan_set.length > 0 ? ( + + ) : ( + "" + )} + + {content.attributes.content.data ? ( + + ) : ( + "" + )} + + {content.attributes.scan_set.length === 0 && + !content.attributes.content.data + ? "The content is not available" + : ""} +
+
+ ); +} diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 8261f4d..01f1c0c 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -37,6 +37,7 @@ import InsetBox from "components/InsetBox"; import Img, { ImageQuality } from "components/Img"; import { useAppLayout } from "contexts/AppLayoutContext"; import { useRouter } from "next/router"; +import ContentTOCLine from "components/Library/ContentTOCLine"; interface LibrarySlugProps { libraryItem: GetLibraryItemQuery; @@ -347,90 +348,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

{langui.contents}

{item.contents.data.map((content) => ( -
-
- -

- {content.attributes.content.data && - content.attributes.content.data.attributes.titles - .length > 0 - ? prettyinlineTitle( - content.attributes.content.data.attributes - .titles[0].pre_title, - content.attributes.content.data.attributes - .titles[0].title, - content.attributes.content.data.attributes - .titles[0].subtitle - ) - : prettySlug(content.attributes.slug, item.slug)} -

- -
- {content.attributes.content.data?.attributes.categories.data.map( - (category) => ( - - {category.attributes.short} - - ) - )} -
-

-

- {content.attributes.range[0].__typename === - "ComponentRangePageRange" - ? content.attributes.range[0].starting_page - : ""} -

- {content.attributes.content.data ? ( - - {content.attributes.content.data.attributes.type.data - .attributes.titles.length > 0 - ? content.attributes.content.data.attributes.type.data - .attributes.titles[0].title - : prettySlug( - content.attributes.content.data.attributes.type - .data.attributes.slug - )} - - ) : ( - "" - )} -
-
- - subdirectory_arrow_right - - - {content.attributes.scan_set.length > 0 ? ( - - ) : ( - "" - )} - - {content.attributes.content.data ? ( - - ) : ( - "" - )} - - {content.attributes.scan_set.length === 0 && - !content.attributes.content.data - ? "The content is not available" - : ""} -
-
+ /> ))}
From 3ab84b35da894f4323ffe576044b2b9aa93f5aef Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 03:48:24 +0100 Subject: [PATCH 19/91] Fixed problem where the Library item thumbnail is too big on mobile --- src/pages/library/[slug].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 01f1c0c..89ed785 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -111,7 +111,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { const contentPanel = (
-
+
{item.thumbnail.data ? ( Date: Sun, 6 Mar 2022 04:13:18 +0100 Subject: [PATCH 20/91] ReturnButton are now displayed on mobile and desktop are different places --- .../PanelComponents/ReturnButton.tsx | 30 +++++++++++++++++-- src/pages/404.tsx | 11 +++++-- src/pages/contents/[slug]/index.tsx | 21 +++++++++++-- src/pages/contents/[slug]/read.tsx | 15 ++++++++-- src/pages/library/[slug].tsx | 22 +++++++++++--- src/pages/wiki/chronology.tsx | 7 ++--- 6 files changed, 87 insertions(+), 19 deletions(-) diff --git a/src/components/PanelComponents/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx index c208c2b..35cbc26 100644 --- a/src/components/PanelComponents/ReturnButton.tsx +++ b/src/components/PanelComponents/ReturnButton.tsx @@ -1,4 +1,5 @@ import Button from "components/Button"; +import HorizontalLine from "components/HorizontalLine"; import { useAppLayout } from "contexts/AppLayoutContext"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; @@ -6,14 +7,37 @@ type ReturnButtonProps = { href: string; title: string; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; + displayOn: ReturnButtonType; + horizontalLine?: boolean; + className?: string; }; +export enum ReturnButtonType { + Mobile, + Desktop, + Both, +} + export default function ReturnButton(props: ReturnButtonProps): JSX.Element { const appLayout = useAppLayout(); return ( - +
+ + {props.horizontalLine && } +
); } diff --git a/src/pages/404.tsx b/src/pages/404.tsx index c54d2b5..5e312fd 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -4,7 +4,9 @@ import { getWebsiteInterface } from "graphql/operations"; import { GetStaticProps } from "next"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import AppLayout from "components/AppLayout"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; type FourOhFourProps = { langui: GetWebsiteInterfaceQuery; @@ -15,7 +17,12 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element { const contentPanel = (

404 - {langui.page_not_found}

- + ); return ( diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index 144ecda..f8b78cd 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -14,7 +14,9 @@ import HorizontalLine from "components/HorizontalLine"; import ThumbnailHeader from "components/Content/ThumbnailHeader"; import AppLayout from "components/AppLayout"; import SubPanel from "components/Panels/SubPanel"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; import { prettyinlineTitle, prettySlug } from "queries/helpers"; type ContentIndexProps = { @@ -27,12 +29,25 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { const langui = props.langui.websiteInterfaces.data[0].attributes; const subPanel = ( - - + + ); const contentPanel = ( +
diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index f6dd015..7f27b8f 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -12,7 +12,9 @@ import { import ContentPanel from "components/Panels/ContentPanel"; import HorizontalLine from "components/HorizontalLine"; import SubPanel from "components/Panels/SubPanel"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; import ThumbnailHeader from "components/Content/ThumbnailHeader"; import AppLayout from "components/AppLayout"; import Markdawn from "components/Markdown/Markdawn"; @@ -46,10 +48,10 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { href={`/contents/${content.slug}`} title={"Content"} langui={langui} + displayOn={ReturnButtonType.Desktop} + horizontalLine /> - - {content.text_set.length > 0 ? (

@@ -138,6 +140,13 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { ); const contentPanel = ( +
diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 89ed785..6b7da04 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -26,7 +26,9 @@ import { sortContent, } from "queries/helpers"; import SubPanel from "components/Panels/SubPanel"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; import NavOption from "components/PanelComponents/NavOption"; import Chip from "components/Chip"; import Button from "components/Button"; @@ -59,8 +61,13 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { const subPanel = ( - - +
+
-
+
{item.thumbnail.data ? ( - - - {props.chronologyEras.chronologyEras.data.map((era) => ( Date: Sun, 6 Mar 2022 04:36:26 +0100 Subject: [PATCH 21/91] Menus on mobile can now be closed using a button --- src/components/AppLayout.tsx | 56 ++++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index d1751be..dd36bcf 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -125,27 +125,6 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { - {/* Navbar */} -
- appLayout.setMainPanelOpen(true)} - > - menu - -

{props.navTitle}

- appLayout.setSubPanelOpen(true)} - > - {props.subPanel && !turnSubIntoContent - ? props.subPanelIcon - ? props.subPanelIcon - : "tune" - : ""} - -
- {/* Content panel */}
@@ -219,6 +198,35 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
+ {/* Navbar */} +
+ { + appLayout.setMainPanelOpen(!appLayout.mainPanelOpen); + appLayout.setSubPanelOpen(false); + }} + > + {appLayout.mainPanelOpen ? "close" : "menu"} + +

{props.navTitle}

+ { + appLayout.setSubPanelOpen(!appLayout.subPanelOpen); + appLayout.setMainPanelOpen(false); + }} + > + {props.subPanel && !turnSubIntoContent + ? appLayout.subPanelOpen + ? "close" + : props.subPanelIcon + ? props.subPanelIcon + : "tune" + : ""} + +
+ Date: Sun, 6 Mar 2022 04:49:51 +0100 Subject: [PATCH 22/91] Update node.js.yml --- .github/workflows/node.js.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 2e4dbe1..a7f6d4e 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -4,8 +4,8 @@ name: Node.js CI on: - push: - branches: [ main ] +# push: +# branches: [ main ] pull_request: branches: [ main ] From 250adfc746b03f287c8cfca8a414231cba62a895 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 16:50:17 +0100 Subject: [PATCH 23/91] Added setting menu with textsize and font selection --- package-lock.json | 11 +++ package.json | 1 + src/components/AppLayout.tsx | 112 +++++++++++++++++++++++++++- src/components/Panels/MainPanel.tsx | 15 ++-- src/contexts/AppLayoutContext.tsx | 39 +++++++++- src/hooks/useDarkMode.ts | 3 +- src/pages/_app.tsx | 5 +- src/tailwind.css | 3 +- tailwind.config.js | 35 ++++++++- 9 files changed, 205 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5628ae9..11e6734 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "dependencies": { "@fontsource/material-icons": "^4.5.2", "@fontsource/material-icons-rounded": "^4.5.2", + "@fontsource/opendyslexic": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", "markdown-to-jsx": "^7.1.6", @@ -199,6 +200,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz", "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w==" }, + "node_modules/@fontsource/opendyslexic": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz", + "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA==" + }, "node_modules/@fontsource/vollkorn": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz", @@ -3800,6 +3806,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz", "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w==" }, + "@fontsource/opendyslexic": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz", + "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA==" + }, "@fontsource/vollkorn": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz", diff --git a/package.json b/package.json index 5044c59..ce9877c 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "@fontsource/material-icons": "^4.5.2", "@fontsource/material-icons-rounded": "^4.5.2", + "@fontsource/opendyslexic": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", "markdown-to-jsx": "^7.1.6", diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index dd36bcf..0167b28 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -13,6 +13,7 @@ import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { ImageQuality } from "./Img"; import Popup from "./Popup"; +import { useEffect } from "react"; type AppLayoutProps = { subPanel?: React.ReactNode; @@ -91,8 +92,22 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { ? props.description : props.langui.default_description; + useEffect(() => { + document.getElementsByTagName("html")[0].style.fontSize = `${ + (appLayout.fontSize || 1) * 100 + }%`; + }); + return ( -
+
+ +

Settings

+ +

Theme

+
+ + + +
+ +

Font size

+
+ + + +
+ +

Font

+ + + + diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index eac6321..00cf882 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -5,13 +5,18 @@ import React, { ReactNode, useContext } from "react"; export interface AppLayoutState { subPanelOpen: boolean | undefined; languagePanelOpen: boolean | undefined; + configPanelOpen: boolean | undefined; mainPanelReduced: boolean | undefined; mainPanelOpen: boolean | undefined; darkMode: boolean | undefined; + selectedThemeMode: boolean | undefined; + fontSize: number | undefined; + dyslexic: boolean | undefined; setSubPanelOpen: React.Dispatch>; setLanguagePanelOpen: React.Dispatch< React.SetStateAction >; + setConfigPanelOpen: React.Dispatch>; setMainPanelReduced: React.Dispatch< React.SetStateAction >; @@ -20,20 +25,29 @@ export interface AppLayoutState { setSelectedThemeMode: React.Dispatch< React.SetStateAction >; + setFontSize: React.Dispatch>; + setDyslexic: React.Dispatch>; } const initialState: AppLayoutState = { subPanelOpen: false, languagePanelOpen: false, + configPanelOpen: false, mainPanelReduced: false, mainPanelOpen: false, darkMode: false, + selectedThemeMode: false, + fontSize: 1, + dyslexic: false, setSubPanelOpen: () => {}, setLanguagePanelOpen: () => {}, setMainPanelReduced: () => {}, setMainPanelOpen: () => {}, setDarkMode: () => {}, setSelectedThemeMode: () => {}, + setConfigPanelOpen: () => {}, + setFontSize: () => {}, + setDyslexic: () => {}, }; const AppContext = React.createContext(initialState); @@ -57,6 +71,10 @@ export const AppContextProvider = (props: Props) => { boolean | undefined >("languagePanelOpen", initialState.languagePanelOpen); + const [configPanelOpen, setConfigPanelOpen] = useStateWithLocalStorage< + boolean | undefined + >("configPanelOpen", initialState.configPanelOpen); + const [mainPanelReduced, setMainPanelReduced] = useStateWithLocalStorage< boolean | undefined >("mainPanelReduced", initialState.mainPanelReduced); @@ -65,9 +83,17 @@ export const AppContextProvider = (props: Props) => { boolean | undefined >("mainPanelOpen", initialState.mainPanelOpen); - const [darkMode, setDarkMode, setSelectedThemeMode] = useDarkMode( - "darkMode", - initialState.darkMode + const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] = + useDarkMode("darkMode", initialState.darkMode); + + const [fontSize, setFontSize] = useStateWithLocalStorage( + "fontSize", + initialState.fontSize + ); + + const [dyslexic, setDyslexic] = useStateWithLocalStorage( + "dyslexic", + initialState.dyslexic ); return ( @@ -75,15 +101,22 @@ export const AppContextProvider = (props: Props) => { value={{ subPanelOpen, languagePanelOpen, + configPanelOpen, mainPanelReduced, mainPanelOpen, darkMode, + selectedThemeMode, + fontSize, + dyslexic, setSubPanelOpen, setLanguagePanelOpen, + setConfigPanelOpen, setMainPanelReduced, setMainPanelOpen, setDarkMode, setSelectedThemeMode, + setFontSize, + setDyslexic, }} > {props.children} diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts index 94a7c19..4705942 100644 --- a/src/hooks/useDarkMode.ts +++ b/src/hooks/useDarkMode.ts @@ -6,6 +6,7 @@ export default function useDarkMode( key: string, initialValue: boolean | undefined ): [ + boolean | undefined, boolean | undefined, React.Dispatch>, React.Dispatch> @@ -23,5 +24,5 @@ export default function useDarkMode( if (selectedThemeMode === false) setDarkMode(prefersDarkMode); }, [selectedThemeMode, prefersDarkMode, setDarkMode]); - return [darkMode, setDarkMode, setSelectedThemeMode]; + return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode]; } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ac12d3d..1d10540 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,14 +2,15 @@ import type { AppProps } from "next/app"; import "tailwind.css"; import "@fontsource/zen-maru-gothic/500.css"; import "@fontsource/vollkorn/700.css"; +import "@fontsource/opendyslexic/400.css" import "@fontsource/material-icons"; import { AppContextProvider } from "contexts/AppLayoutContext"; -export default function AccordsLibraryApp(appProps: AppProps) { +export default function AccordsLibraryApp(props: AppProps) { return ( - + ); } diff --git a/src/tailwind.css b/src/tailwind.css index 6eea261..477fdd7 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -78,9 +78,8 @@ } .prose blockquote { - @apply border-l-dark + @apply border-l-dark; } - } @layer components { diff --git a/tailwind.config.js b/tailwind.config.js index f099e48..4a84db7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,6 +18,17 @@ const breakDektop = { min: "60rem" }; const breakMobile = { max: "60rem" }; const breakThin = { max: "25rem" }; +const fontStandard = { + body: "Zen Maru Gothic", + headers: "Vollkorn", + monospace: "monospace", +}; +const fontDyslexic = { + body: "OpenDyslexic", + headers: "OpenDyslexic", + monospace: "monospace", +}; + /* END CONFIG */ function withOpacity(variableName) { @@ -41,9 +52,11 @@ module.exports = { black: withOpacity("--theme-color-black"), }, fontFamily: { - body: ["Zen Maru Gothic"], - headers: ["Vollkorn"], - monospace: ["monospace"], + body: ["var(--theme-font-body)"], + headers: ["var(--theme-font-headers)"], + monospace: ["var(--theme-font-monospace)"], + openDyslexic: ["OpenDyslexic"], + zenMaruGothic: ["Zen Maru Gothic"], }, screens: { desktop: breakDektop, @@ -61,7 +74,6 @@ module.exports = { plugins: [ require("@tailwindcss/typography"), - // Colored Dropshadow plugin(function ({ addUtilities }) { addUtilities({ ".set-theme-light": { @@ -85,6 +97,21 @@ module.exports = { }); }), + plugin(function ({ addUtilities }) { + addUtilities({ + ".set-theme-font-standard": { + "--theme-font-body": fontStandard.body, + "--theme-font-headers": fontStandard.headers, + "--theme-font-monospace": fontStandard.monospace, + }, + ".set-theme-font-dyslexic": { + "--theme-font-body": fontDyslexic.body, + "--theme-font-headers": fontDyslexic.headers, + "--theme-font-monospace": fontStandard.monospace, + }, + }); + }), + plugin(function ({ addVariant, e }) { addVariant("webkit-scrollbar", ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { From f5c661c6237fa5975b91820c29281862580bd225 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 18:23:10 +0100 Subject: [PATCH 24/91] Added currency selection and auto-convertion --- src/components/AppLayout.tsx | 210 ++++++++++-------- .../Library/LibraryItemsPreview.tsx | 16 +- src/components/Select.tsx | 2 +- src/contexts/AppLayoutContext.tsx | 11 + src/graphql/operation.graphql | 17 ++ src/graphql/operations-types.ts | 23 ++ src/graphql/operations.ts | 9 + src/graphql/schema.graphql | 59 +---- src/pages/library/[slug].tsx | 11 +- src/pages/library/index.tsx | 10 +- src/queries/helpers.ts | 26 ++- 11 files changed, 241 insertions(+), 153 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 0167b28..fd5e979 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -13,7 +13,8 @@ import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { ImageQuality } from "./Img"; import Popup from "./Popup"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; +import Select from "./Select"; type AppLayoutProps = { subPanel?: React.ReactNode; @@ -96,7 +97,20 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { document.getElementsByTagName("html")[0].style.fontSize = `${ (appLayout.fontSize || 1) * 100 }%`; - }); + }, [appLayout.fontSize]); + + const currencyOptions = ["EUR", "USD", "CAD", "JPY"]; + const [currencySelect, setCurrencySelect] = useState(-1); + + useEffect(() => { + appLayout.currency && + setCurrencySelect(currencyOptions.indexOf(appLayout.currency)); + }, [appLayout.currency]); + + useEffect(() => { + currencySelect >= 0 && + appLayout.setCurrency(currencyOptions[currencySelect]); + }, [currencySelect]); return (

Settings

-

Theme

-
- - - -
+
+
+

Theme

+
+ + + +
+
-

Font size

-
- - - -
+
+

Currency

+
+ appLayout.setPlayerName(e.target.value)} + /> +
diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index 8212ad4..38bf661 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -1,3 +1,4 @@ +import { useAppLayout } from "contexts/AppLayoutContext"; import Markdown from "markdown-to-jsx"; import SceneBreak from "./SceneBreak"; @@ -7,6 +8,8 @@ type ScenBreakProps = { }; export default function Markdawn(props: ScenBreakProps): JSX.Element { + const appLayout = useAppLayout(); + if (props.text) { return ( {return {""}} + component: () => { + return ( + + {appLayout.playerName ? appLayout.playerName : ""} + + ); + }, }, }, }} @@ -27,4 +36,4 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { ); } return <>; -} \ No newline at end of file +} diff --git a/src/components/Select.tsx b/src/components/Select.tsx index c11ca95..3b2546d 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -49,7 +49,7 @@ export default function Select(props: SelectProps): JSX.Element { {index !== props.state && (
{ setOpened(false); diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index fd7bc74..c5f82b3 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -13,6 +13,7 @@ export interface AppLayoutState { fontSize: number | undefined; dyslexic: boolean | undefined; currency: string | undefined; + playerName: string | undefined; setSubPanelOpen: React.Dispatch>; setLanguagePanelOpen: React.Dispatch< React.SetStateAction @@ -29,6 +30,7 @@ export interface AppLayoutState { setFontSize: React.Dispatch>; setDyslexic: React.Dispatch>; setCurrency: React.Dispatch>; + setPlayerName: React.Dispatch>; } const initialState: AppLayoutState = { @@ -42,6 +44,7 @@ const initialState: AppLayoutState = { fontSize: 1, dyslexic: false, currency: "USD", + playerName: "", setSubPanelOpen: () => {}, setLanguagePanelOpen: () => {}, setMainPanelReduced: () => {}, @@ -52,6 +55,7 @@ const initialState: AppLayoutState = { setFontSize: () => {}, setDyslexic: () => {}, setCurrency: () => {}, + setPlayerName: () => {}, }; const AppContext = React.createContext(initialState); @@ -105,6 +109,10 @@ export const AppContextProvider = (props: Props) => { initialState.currency ); + const [playerName, setPlayerName] = useStateWithLocalStorage< + string | undefined + >("playerName", initialState.playerName); + return ( { fontSize, dyslexic, currency, + playerName, setSubPanelOpen, setLanguagePanelOpen, setConfigPanelOpen, @@ -128,6 +137,7 @@ export const AppContextProvider = (props: Props) => { setFontSize, setDyslexic, setCurrency, + setPlayerName, }} > {props.children} diff --git a/src/tailwind.css b/src/tailwind.css index 477fdd7..e1aa100 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -80,6 +80,20 @@ .prose blockquote { @apply border-l-dark; } + + /* INPUT */ + + input { + @apply rounded-full p-2 text-center bg-light outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] text-dark hover:bg-mid transition-all; + } + + input::placeholder { + @apply text-dark opacity-60; + } + + input:focus-visible { + @apply outline-none bg-mid shadow-inner-sm; + } } @layer components { From a04e25a1ad79d6eea5a038d6a47ca5ad48d3465e Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 7 Mar 2022 13:29:39 +0100 Subject: [PATCH 27/91] Added more localized texts --- src/components/AppLayout.tsx | 33 ++++++++--------- src/components/RecorderChip.tsx | 11 ++++-- src/graphql/operation.graphql | 26 ++++++++++++++ src/graphql/operations-types.ts | 26 ++++++++++++++ src/pages/contents/[slug]/index.tsx | 18 ++++++++-- src/pages/contents/[slug]/read.tsx | 56 +++++++++++++++++++++-------- src/pages/library/[slug].tsx | 10 +++--- 7 files changed, 138 insertions(+), 42 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 7fc8e42..2b2b97e 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -29,6 +29,7 @@ type AppLayoutProps = { }; export default function AppLayout(props: AppLayoutProps): JSX.Element { + const langui = props.langui; const router = useRouter(); const isMobile = useMediaMobile(); const isCoarse = useMediaCoarse(); @@ -91,7 +92,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { const metaDescription = props.description ? props.description - : props.langui.default_description; + : langui.default_description; useEffect(() => { document.getElementsByTagName("html")[0].style.fontSize = `${ @@ -166,9 +167,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {

❮

-

- {props.langui.select_option_sidebar} -

+

{langui.select_option_sidebar}

)} @@ -220,7 +219,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { className={`${mainPanelClass} border-r-[1px] mobile:bottom-20 border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light texture-paper-dots ${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`} > - +
{/* Main panel minimize button*/} @@ -270,7 +269,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { state={appLayout.languagePanelOpen} setState={appLayout.setLanguagePanelOpen} > -

{props.langui.select_language}

+

{langui.select_language}

{router.locales?.sort().map((locale) => (
-

Currency

+

{langui.currency}

appLayout.setPlayerName(e.target.value)} + onInput={(e) => + appLayout.setPlayerName((e.target as HTMLInputElement).value) + } />
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx index af0c644..404ca8e 100644 --- a/src/components/RecorderChip.tsx +++ b/src/components/RecorderChip.tsx @@ -1,15 +1,20 @@ import Chip from "components/Chip"; -import { GetContentTextQuery } from "graphql/operations-types"; +import { + GetContentTextQuery, + GetWebsiteInterfaceQuery, +} from "graphql/operations-types"; import Img, { ImageQuality } from "./Img"; import ReactDOMServer from "react-dom/server"; type RecorderChipProps = { className?: string; recorder: GetContentTextQuery["contents"]["data"][number]["attributes"]["text_set"][number]["transcribers"]["data"][number]; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function RecorderChip(props: RecorderChipProps): JSX.Element { const recorder = props.recorder; + const langui = props.langui; return ( {recorder.attributes.languages.data.length > 0 && (
-

Languages:

+

{langui.languages}:

{recorder.attributes.languages.data.map((language) => ( {language.attributes.code.toUpperCase()} @@ -38,7 +43,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element { )} {recorder.attributes.pronouns && (
-

Pronouns:

+

{langui.pronouns}:

{recorder.attributes.pronouns}
)} diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 42162e5..07d03cc 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -83,6 +83,32 @@ query getWebsiteInterface($language_code: String) { group_by select_option_sidebar group + settings + theme + light + auto + dark + font_size + player_name + currency + font + calculated + status_incomplete + status_draft + status_review + status_done + incomplete + draft + review + done + status + transcribers + translators + proofreaders + transcript_notice + translation_notice + source_language + pronouns } } } diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index f355568..65d7804 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -165,6 +165,32 @@ export type GetWebsiteInterfaceQuery = { group_by: string; select_option_sidebar: string; group: string; + settings: string; + theme: string; + light: string; + auto: string; + dark: string; + font_size: string; + player_name: string; + currency: string; + font: string; + calculated: string; + status_incomplete: string; + status_draft: string; + status_review: string; + status_done: string; + incomplete: string; + draft: string; + review: string; + done: string; + status: string; + transcribers: string; + translators: string; + proofreaders: string; + transcript_notice: string; + translation_notice: string; + source_language: string; + pronouns: string; }; }>; }; diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index f8b78cd..fcf141d 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -36,7 +36,6 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { displayOn={ReturnButtonType.Desktop} horizontalLine /> - ); const contentPanel = ( @@ -96,9 +95,22 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { langui={langui} contentPanel={contentPanel} subPanel={subPanel} - description={ - content.titles.length > 0 ? content.titles[0].description : undefined + description={`${langui.type}: ${ + content.type.data.attributes.titles.length > 0 + ? content.type.data.attributes.titles[0].title + : prettySlug(content.type.data.attributes.slug) } + ${langui.categories}: ${ + content.categories.data.length > 0 && + content.categories.data + .map((category) => { + return category.attributes.short; + }) + .join(" | ") + } + + ${content.titles.length > 0 ? content.titles[0].description : undefined} + `} /> ); } diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index 7f27b8f..6b30fc0 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -57,14 +57,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {

{content.text_set[0].source_language.data.attributes.code === router.locale - ? "This content is a transcript" - : "This content is a fan-translation"} + ? langui.transcript_notice + : langui.translation_notice}

{content.text_set[0].source_language.data.attributes.code !== router.locale && (
-

Source language:

+

{langui.source_language}:

@@ -283,7 +282,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { "" )} - {item.metadata.length > 0 ? ( + {item.metadata.length > 0 && + item.metadata[0].__typename !== "ComponentMetadataGroup" && + item.metadata[0].__typename !== "ComponentMetadataOther" ? ( <>

{langui.type_information}

@@ -338,9 +339,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { ) : item.metadata[0].__typename === "ComponentMetadataGame" ? ( <> - ) : item.metadata[0].__typename === - "ComponentMetadataGroup" ? ( - <> ) : ( "" )} From 36803b4b1ffa623610126b31eb9851d335d44ab8 Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 7 Mar 2022 15:50:00 +0100 Subject: [PATCH 28/91] Use getAppStaticProps to globally define props for all pages --- src/components/AppLayout.tsx | 40 ++++---- src/graphql/operation.graphql | 13 +++ src/graphql/operations-types.ts | 19 ++++ src/graphql/operations.ts | 9 ++ src/pages/404.tsx | 31 ++----- src/pages/_document.tsx | 1 + src/pages/about-us/index.tsx | 32 ++----- src/pages/archives/index.tsx | 32 ++----- src/pages/chronicles/index.tsx | 32 ++----- src/pages/contents/[slug]/index.tsx | 63 +++++-------- src/pages/contents/[slug]/read.tsx | 58 +++++------- src/pages/contents/index.tsx | 104 ++++++++++----------- src/pages/editor.tsx | 30 +++--- src/pages/gallery/index.tsx | 28 ++---- src/pages/index.tsx | 37 ++------ src/pages/library/[slug].tsx | 138 ++++++++++++---------------- src/pages/library/index.tsx | 90 +++++++----------- src/pages/merch/index.tsx | 35 ++----- src/pages/news/index.tsx | 34 ++----- src/pages/wiki/chronology.tsx | 84 ++++++++--------- src/pages/wiki/index.tsx | 37 ++------ src/queries/getAppStaticProps.ts | 44 +++++++++ 22 files changed, 429 insertions(+), 562 deletions(-) create mode 100644 src/queries/getAppStaticProps.ts diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 2b2b97e..a295b3f 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -15,21 +15,21 @@ import { ImageQuality } from "./Img"; import Popup from "./Popup"; import { useEffect, useState } from "react"; import Select from "./Select"; +import { AppStaticProps } from "queries/getAppStaticProps"; -type AppLayoutProps = { +interface AppLayoutProps extends AppStaticProps { subPanel?: React.ReactNode; subPanelIcon?: string; contentPanel?: React.ReactNode; - langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; title?: string; navTitle: string; thumbnail?: StrapiImage; description?: string; extra?: React.ReactNode; -}; +} export default function AppLayout(props: AppLayoutProps): JSX.Element { - const langui = props.langui; + const { langui, currencies, languages, subPanel, contentPanel } = props; const router = useRouter(); const isMobile = useMediaMobile(); const isCoarse = useMediaCoarse(); @@ -42,7 +42,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { if (SwipeEventData.velocity < sensibilitySwipe) return; if (appLayout.mainPanelOpen) { appLayout.setMainPanelOpen(false); - } else if (props.subPanel && props.contentPanel) { + } else if (subPanel && contentPanel) { appLayout.setSubPanelOpen(true); } }, @@ -63,13 +63,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]" }`; let contentPanelClass = ""; - if (props.subPanel) { + if (subPanel) { contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ appLayout.mainPanelReduced ? "desktop:left-[26rem]" : "desktop:left-[40rem]" }`; - } else if (props.contentPanel) { + } else if (contentPanel) { contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ appLayout.mainPanelReduced ? "desktop:left-[6rem]" @@ -77,7 +77,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { }`; } - const turnSubIntoContent = props.subPanel && !props.contentPanel; + const turnSubIntoContent = subPanel && !contentPanel; const titlePrefix = "Accord’s Library"; const metaImage: OgImage = props.thumbnail @@ -100,7 +100,9 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { }%`; }, [appLayout.fontSize]); - const currencyOptions = ["EUR", "USD", "CAD", "JPY"]; + const currencyOptions = currencies.map((currency) => { + return currency.attributes.code; + }); const [currencySelect, setCurrencySelect] = useState(-1); useEffect(() => { @@ -161,8 +163,8 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
- {props.contentPanel ? ( - props.contentPanel + {contentPanel ? ( + contentPanel ) : (
@@ -197,7 +199,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Sub panel */} - {props.subPanel ? ( + {subPanel ? (
- {props.subPanel} + {subPanel}
) : ( "" @@ -255,7 +257,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { appLayout.setMainPanelOpen(false); }} > - {props.subPanel && !turnSubIntoContent + {subPanel && !turnSubIntoContent ? appLayout.subPanelOpen ? "close" : props.subPanelIcon @@ -271,15 +273,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { >

{langui.select_language}

- {router.locales?.sort().map((locale) => ( + {languages.map((language) => ( ))}
diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 07d03cc..a671a29 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -1100,3 +1100,16 @@ query getCurrencies { } } } + +query getLanguages { + languages { + data { + id + attributes { + name + code + localized_name + } + } + } +} diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index 65d7804..ea1f9ae 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -1465,3 +1465,22 @@ export type GetCurrenciesQuery = { }>; }; }; + +export type GetLanguagesQueryVariables = Exact<{ [key: string]: never }>; + +export type GetLanguagesQuery = { + __typename: "Query"; + languages: { + __typename: "LanguageEntityResponseCollection"; + data: Array<{ + __typename: "LanguageEntity"; + id: string; + attributes: { + __typename: "Language"; + name: string; + code: string; + localized_name: string; + }; + }>; + }; +}; diff --git a/src/graphql/operations.ts b/src/graphql/operations.ts index e8a78f3..28541db 100644 --- a/src/graphql/operations.ts +++ b/src/graphql/operations.ts @@ -15,6 +15,8 @@ import { GetCurrenciesQueryVariables, GetErasQuery, GetErasQueryVariables, + GetLanguagesQuery, + GetLanguagesQueryVariables, GetLibraryItemQuery, GetLibraryItemQueryVariables, GetLibraryItemsPreviewQuery, @@ -132,3 +134,10 @@ export async function getCurrencies( const query = getQueryFromOperations("getCurrencies"); return await graphQL(query, JSON.stringify(variables)); } + +export async function getLanguages( + variables: GetLanguagesQueryVariables +): Promise { + const query = getQueryFromOperations("getLanguages"); + return await graphQL(query, JSON.stringify(variables)); +} diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 5e312fd..8357e42 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,19 +1,15 @@ -import Link from "next/link"; import ContentPanel from "components/Panels/ContentPanel"; -import { getWebsiteInterface } from "graphql/operations"; import { GetStaticProps } from "next"; -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import AppLayout from "components/AppLayout"; import ReturnButton, { ReturnButtonType, } from "components/PanelComponents/ReturnButton"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type FourOhFourProps = { - langui: GetWebsiteInterfaceQuery; -}; +interface FourOhFourProps extends AppStaticProps {} export default function FourOhFour(props: FourOhFourProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; const contentPanel = (

404 - {langui.page_not_found}

@@ -25,21 +21,14 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element { /> ); - return ( - - ); + return ; } export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: FourOhFourProps = { - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - return { props: {} }; + const props: FourOhFourProps = { + ...(await getAppStaticProps(context)), + }; + return { + props: props, + }; }; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 506d91b..a8304bc 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -16,6 +16,7 @@ class MyDocument extends Document { return ( + ); return ( - + ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: AboutUsProps = { - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - return { props: {} }; + const props: AboutUsProps = { + ...(await getAppStaticProps(context)), + }; + return { + props: props, + }; }; diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx index 88fc0a2..3b3a262 100644 --- a/src/pages/archives/index.tsx +++ b/src/pages/archives/index.tsx @@ -1,16 +1,13 @@ import SubPanel from "components/Panels/SubPanel"; import PanelHeader from "components/PanelComponents/PanelHeader"; -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetStaticProps } from "next"; -import { getWebsiteInterface } from "graphql/operations"; import AppLayout from "components/AppLayout"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type ArchivesProps = { - langui: GetWebsiteInterfaceQuery; -}; +interface ArchivesProps extends AppStaticProps {} export default function Archives(props: ArchivesProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; const subPanel = ( ); return ( - + ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: ArchivesProps = { - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - return { props: {} }; + const props: ArchivesProps = { + ...(await getAppStaticProps(context)), + }; + return { + props: props, + }; }; diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx index 2ef7522..53eaa78 100644 --- a/src/pages/chronicles/index.tsx +++ b/src/pages/chronicles/index.tsx @@ -1,16 +1,13 @@ import SubPanel from "components/Panels/SubPanel"; import PanelHeader from "components/PanelComponents/PanelHeader"; -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetStaticProps } from "next"; -import { getWebsiteInterface } from "graphql/operations"; import AppLayout from "components/AppLayout"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type ChroniclesProps = { - langui: GetWebsiteInterfaceQuery; -}; +interface ChroniclesProps extends AppStaticProps {} export default function Chronicles(props: ChroniclesProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; const subPanel = ( ); return ( - + ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: ChroniclesProps = { - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - return { props: {} }; + const props: ChroniclesProps = { + ...(await getAppStaticProps(context)), + }; + return { + props: props, + }; }; diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index fcf141d..1c9726d 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -1,13 +1,6 @@ import { GetStaticPaths, GetStaticProps } from "next"; -import { - getContent, - getContentsSlugs, - getWebsiteInterface, -} from "graphql/operations"; -import { - GetContentQuery, - GetWebsiteInterfaceQuery, -} from "graphql/operations-types"; +import { getContent, getContentsSlugs } from "graphql/operations"; +import { GetContentQuery } from "graphql/operations-types"; import ContentPanel from "components/Panels/ContentPanel"; import Button from "components/Button"; import HorizontalLine from "components/HorizontalLine"; @@ -18,15 +11,14 @@ import ReturnButton, { ReturnButtonType, } from "components/PanelComponents/ReturnButton"; import { prettyinlineTitle, prettySlug } from "queries/helpers"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type ContentIndexProps = { - content: GetContentQuery; - langui: GetWebsiteInterfaceQuery; -}; +interface ContentIndexProps extends AppStaticProps { + content: GetContentQuery["contents"]["data"][number]["attributes"]; +} export default function ContentIndex(props: ContentIndexProps): JSX.Element { - const content = props.content.contents.data[0].attributes; - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { content, langui } = props; const subPanel = ( 0 ? content.titles[0].description : undefined} `} + {...props} /> ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.params) { - if (context.params.slug && context.locale) { - if (context.params.slug instanceof Array) - context.params.slug = context.params.slug.join(""); - - const props: ContentIndexProps = { - content: await getContent({ - slug: context.params.slug, - language_code: context.locale, - }), - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - } - return { props: {} }; + const props: ContentIndexProps = { + ...(await getAppStaticProps(context)), + content: ( + await getContent({ + slug: context.params?.slug?.toString() || "", + language_code: context.locale || "en", + }) + ).contents.data[0].attributes, + }; + return { + props: props, + }; }; export const getStaticPaths: GetStaticPaths = async (context) => { - type Path = { - params: { - slug: string; - }; - locale: string; - }; + type Path = { params: { slug: string }; locale: string }; const data = await getContentsSlugs({}); const paths: Path[] = []; diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index 6b30fc0..8dc58cb 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -1,13 +1,8 @@ import { GetStaticPaths, GetStaticProps } from "next"; -import { - getContentsSlugs, - getContentText, - getWebsiteInterface, -} from "graphql/operations"; +import { getContentsSlugs, getContentText } from "graphql/operations"; import { Enum_Componentsetstextset_Status, GetContentTextQuery, - GetWebsiteInterfaceQuery, } from "graphql/operations-types"; import ContentPanel from "components/Panels/ContentPanel"; import HorizontalLine from "components/HorizontalLine"; @@ -30,16 +25,16 @@ import { useRouter } from "next/router"; import Chip from "components/Chip"; import ReactTooltip from "react-tooltip"; import RecorderChip from "components/RecorderChip"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -interface ContentReadProps { - content: GetContentTextQuery; - langui: GetWebsiteInterfaceQuery; +interface ContentReadProps extends AppStaticProps { + content: GetContentTextQuery["contents"]["data"][number]["attributes"]; + contentId: GetContentTextQuery["contents"]["data"][number]["id"]; } export default function ContentRead(props: ContentReadProps): JSX.Element { useTesting(props); - const content = props.content.contents.data[0].attributes; - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui, content } = props; const router = useRouter(); const subPanel = ( @@ -212,7 +207,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { : prettySlug(content.slug) } thumbnail={content.thumbnail.data?.attributes} - langui={langui} contentPanel={contentPanel} subPanel={subPanel} extra={extra} @@ -232,31 +226,26 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { ${content.titles.length > 0 ? content.titles[0].description : undefined} `} + {...props} /> ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.params) { - if (context.params.slug && context.locale) { - if (context.params.slug instanceof Array) - context.params.slug = context.params.slug.join(""); - - const props: ContentReadProps = { - content: await getContentText({ - slug: context.params.slug, - language_code: context.locale, - }), - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - } - return { props: {} }; + const content = ( + await getContentText({ + slug: context.params?.slug?.toString() || "", + language_code: context.locale || "en", + }) + ).contents.data[0]; + const props: ContentReadProps = { + ...(await getAppStaticProps(context)), + content: content.attributes, + contentId: content.id, + }; + return { + props: props, + }; }; export const getStaticPaths: GetStaticPaths = async (context) => { @@ -282,11 +271,10 @@ export const getStaticPaths: GetStaticPaths = async (context) => { export function useTesting(props: ContentReadProps) { const router = useRouter(); - const content = props.content.contents.data[0].attributes; + const { content, contentId } = props; const contentURL = - "/admin/content-manager/collectionType/api::content.content/" + - props.content.contents.data[0].id; + "/admin/content-manager/collectionType/api::content.content/" + contentId; if (router.locale === "en") { if (content.categories.data.length === 0) { diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx index 0c9eed5..d899665 100644 --- a/src/pages/contents/index.tsx +++ b/src/pages/contents/index.tsx @@ -3,25 +3,56 @@ import SubPanel from "components/Panels/SubPanel"; import ContentPanel, { ContentPanelWidthSizes, } from "components/Panels/ContentPanel"; -import { - GetContentsQuery, - GetWebsiteInterfaceQuery, -} from "graphql/operations-types"; -import { getContents, getWebsiteInterface } from "graphql/operations"; +import { GetContentsQuery } from "graphql/operations-types"; +import { getContents } from "graphql/operations"; import PanelHeader from "components/PanelComponents/PanelHeader"; import AppLayout from "components/AppLayout"; import LibraryContentPreview from "components/Library/LibraryContentPreview"; import { prettyinlineTitle } from "queries/helpers"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type LibraryProps = { - contents: GetContentsQuery; - langui: GetWebsiteInterfaceQuery; -}; +interface LibraryProps extends AppStaticProps { + contents: GetContentsQuery["contents"]["data"]; +} export default function Library(props: LibraryProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; + const subPanel = ( + + + + ); + const contentPanel = ( + +
+ {props.contents.map((item) => ( + + ))} +
+ + ); + return ( + + ); +} - props.contents.contents.data.sort((a, b) => { +export const getStaticProps: GetStaticProps = async (context) => { + const contents = ( + await getContents({ + language_code: context.locale || "en", + }) + ).contents.data; + + contents.sort((a, b) => { const titleA = a.attributes.titles.length > 0 ? prettyinlineTitle( @@ -41,48 +72,11 @@ export default function Library(props: LibraryProps): JSX.Element { return titleA.localeCompare(titleB); }); - const subPanel = ( - - - - ); - const contentPanel = ( - -
- {props.contents.contents.data.map((item) => ( - - ))} -
- - ); - return ( - - ); -} - -export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: LibraryProps = { - contents: await getContents({ - language_code: context.locale, - }), - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } else { - return { props: {} }; - } + const props: LibraryProps = { + ...(await getAppStaticProps(context)), + contents: contents, + }; + return { + props: props, + }; }; diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx index a7f5444..825ed90 100644 --- a/src/pages/editor.tsx +++ b/src/pages/editor.tsx @@ -1,20 +1,17 @@ import ContentPanel, { ContentPanelWidthSizes, } from "components/Panels/ContentPanel"; -import { getWebsiteInterface } from "graphql/operations"; import { GetStaticProps } from "next"; -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import AppLayout from "components/AppLayout"; import { useCallback, useState } from "react"; import Markdawn from "components/Markdown/Markdawn"; import Script from "next/script"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type EditorProps = { - langui: GetWebsiteInterfaceQuery; -}; +interface EditorProps extends AppStaticProps {} export default function Editor(props: EditorProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; const handleInput = useCallback((e) => { setMarkdown(e.target.value); @@ -45,12 +42,14 @@ export default function Editor(props: EditorProps): JSX.Element { onInput={handleInput} className="bg-mid rounded-xl p-8 w-full font-monospace" value={markdown} + title="Input textarea" />

Convert text to markdown