From 7076b2d71e27b0bbb53d9824a91c23a54e925235 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sat, 1 Jan 2022 03:31:55 +0100 Subject: [PATCH] Formatted all TS files + fixed ugly code in _app --- .../Chronology/ChronologyItemComponent.tsx | 46 +++++----- .../Chronology/ChronologyYearComponent.tsx | 2 +- .../Library/LibraryItemComponent.tsx | 58 +++++++++++++ src/components/Panels/ContentPanel.tsx | 20 +++-- src/components/Panels/MainPanel.tsx | 69 ++++++++------- src/components/Panels/NavOption.tsx | 42 +++++----- src/components/Panels/ReturnButton.tsx | 22 +++-- src/components/Panels/SubPanel.tsx | 18 ++-- src/pages/404.tsx | 8 +- src/pages/_app.tsx | 56 ++++--------- src/pages/chronology/index.tsx | 12 ++- src/pages/chronology/overview.tsx | 23 ++--- src/pages/index.tsx | 13 +-- src/pages/library/[...slug].tsx | 83 +++++++++++-------- src/pages/library/index.tsx | 40 ++------- src/queries/library/[...slug].ts | 16 ++-- src/queries/library/index.ts | 8 +- .../Library/LibraryItemComponent.module.css | 3 + 18 files changed, 297 insertions(+), 242 deletions(-) create mode 100644 src/components/Library/LibraryItemComponent.tsx create mode 100644 src/styles/Library/LibraryItemComponent.module.css diff --git a/src/components/Chronology/ChronologyItemComponent.tsx b/src/components/Chronology/ChronologyItemComponent.tsx index be6c337..d725d23 100644 --- a/src/components/Chronology/ChronologyItemComponent.tsx +++ b/src/components/Chronology/ChronologyItemComponent.tsx @@ -11,7 +11,7 @@ export type ChronologyItemComponentProps = { export default function ChronologyItemComponent( props: ChronologyItemComponentProps -) { +): JSX.Element { function generateAnchor( year: number, month: number, @@ -87,30 +87,28 @@ export default function ChronologyItemComponent(
{props.item.attributes.events.map((event: ChronologyItemsEvent) => (
- {event.translations.map( - (translation) => ( - <> - {translation.title ?

{translation.title}

: ""} + {event.translations.map((translation) => ( + <> + {translation.title ?

{translation.title}

: ""} - {translation.description ? ( -

1 ? styles.bulletItem : "" - } - > - {translation.description} -

- ) : ( - "" - )} - {translation.note ? ( - {"Notes: " + translation.note} - ) : ( - "" - )} - - ) - )} + {translation.description ? ( +

1 ? styles.bulletItem : "" + } + > + {translation.description} +

+ ) : ( + "" + )} + {translation.note ? ( + {"Notes: " + translation.note} + ) : ( + "" + )} + + ))}

{event.source.data diff --git a/src/components/Chronology/ChronologyYearComponent.tsx b/src/components/Chronology/ChronologyYearComponent.tsx index 165b30c..5dd0954 100644 --- a/src/components/Chronology/ChronologyYearComponent.tsx +++ b/src/components/Chronology/ChronologyYearComponent.tsx @@ -8,7 +8,7 @@ type ChronologyYearComponentProps = { export default function ChronologyYearComponent( props: ChronologyYearComponentProps -) { +): JSX.Element { return (

+
+

+ {prettyTitleSubtitle( + props.item.attributes.title, + props.item.attributes.subtitle + )} +

+

{prettyDate(props.item.attributes.release_date)}

+ + {props.item.attributes.thumbnail.data ? ( + { + ) : ( + "" + )} +
+ + ); +} diff --git a/src/components/Panels/ContentPanel.tsx b/src/components/Panels/ContentPanel.tsx index 0aeace8..061a9fd 100644 --- a/src/components/Panels/ContentPanel.tsx +++ b/src/components/Panels/ContentPanel.tsx @@ -1,12 +1,14 @@ -import styles from 'styles/Panels/ContentPanel.module.css' -import panelStyles from 'styles/Panels/Panels.module.css' +import styles from "styles/Panels/ContentPanel.module.css"; +import panelStyles from "styles/Panels/Panels.module.css"; -export default function ContentPanel({children}) { +type ContentPanelProps = { + children: React.ReactNode; +}; + +export default function ContentPanel(props: ContentPanelProps): JSX.Element { return ( -
-
- {children} -
+
+
{props.children}
- ) -} \ No newline at end of file + ); +} diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 26c7280..6adf609 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -1,40 +1,37 @@ -import Link from 'next/link' -import styles from 'styles/Panels/MainPanel.module.css' -import panelStyles from 'styles/Panels/Panels.module.css' -import NavOption from 'components/Panels/NavOption' - -export default function MainPanel() { +import Link from "next/link"; +import styles from "styles/Panels/MainPanel.module.css"; +import panelStyles from "styles/Panels/Panels.module.css"; +import NavOption from "components/Panels/NavOption"; +export default function MainPanel(): JSX.Element { return ( - -
- +

Accord's Library

- +
- - - - - - +
-

This website’s content is made available under CC-BY-SA unless otherwise noted.

+

+ This website’s content is made available under{" "} + CC-BY-SA{" "} + unless otherwise noted. +

@@ -78,12 +75,20 @@ export default function MainPanel() {
-

Accord’s Library is not affiliated with or endorsed by SQUARE ENIX CO. LTD. All game assets and promotional materials belongs to © SQUARE ENIX CO. LTD.

+

+ Accord’s Library is not affiliated with or endorsed by SQUARE + ENIX CO. LTD. All game assets and promotional materials belongs to © + SQUARE ENIX CO. LTD. +

- - + + + + + +
- ) -} \ No newline at end of file + ); +} diff --git a/src/components/Panels/NavOption.tsx b/src/components/Panels/NavOption.tsx index 3be719f..279a07b 100644 --- a/src/components/Panels/NavOption.tsx +++ b/src/components/Panels/NavOption.tsx @@ -1,28 +1,28 @@ -import { useRouter } from 'next/router' -import styles from 'styles/Panels/NavOption.module.css' -import Link from 'next/link' +import { useRouter } from "next/router"; +import styles from "styles/Panels/NavOption.module.css"; +import Link from "next/link"; type NavOptionProps = { - url: string, - icon?: string, - title: string, - subtitle?: string - border?: boolean -} + url: string; + icon?: string; + title: string; + subtitle?: string; + border?: boolean; +}; -export default function NavOption(pageProps: NavOptionProps) { +export default function NavOption(pageProps: NavOptionProps): JSX.Element { const router = useRouter(); - let classNames = [styles.menuOption] - if (router.asPath.startsWith(pageProps.url)) classNames.push(styles.active) - if (pageProps.icon) classNames.push(styles.icon) - if (pageProps.border === true) classNames.push(styles.border) + let classNames = [styles.menuOption]; + if (router.asPath.startsWith(pageProps.url)) classNames.push(styles.active); + if (pageProps.icon) classNames.push(styles.icon); + if (pageProps.border === true) classNames.push(styles.border); return ( -
- {pageProps.icon && } -

{pageProps.title}

- {pageProps.subtitle &&

{pageProps.subtitle}

} -
+
+ {pageProps.icon && } +

{pageProps.title}

+ {pageProps.subtitle &&

{pageProps.subtitle}

} +
- ) -} \ No newline at end of file + ); +} diff --git a/src/components/Panels/ReturnButton.tsx b/src/components/Panels/ReturnButton.tsx index 3fa195f..72cb202 100644 --- a/src/components/Panels/ReturnButton.tsx +++ b/src/components/Panels/ReturnButton.tsx @@ -1,17 +1,15 @@ -import styles from 'styles/Panels/ReturnButton.module.css' -import Link from 'next/link' +import styles from "styles/Panels/ReturnButton.module.css"; +import Link from "next/link"; type ReturnButtonProps = { - url: string, - title: string -} + url: string; + title: string; +}; -export default function ReturnButton(pageProps: ReturnButtonProps) { +export default function ReturnButton(props: ReturnButtonProps): JSX.Element { return ( - - + + - ) -} \ No newline at end of file + ); +} diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx index e658eb3..7f737bc 100644 --- a/src/components/Panels/SubPanel.tsx +++ b/src/components/Panels/SubPanel.tsx @@ -1,10 +1,14 @@ -import styles from 'styles/Panels/SubPanel.module.css' -import panelStyles from 'styles/Panels/Panels.module.css' +import styles from "styles/Panels/SubPanel.module.css"; +import panelStyles from "styles/Panels/Panels.module.css"; -export default function SubPanel({children}) { +type SubPanelProps = { + children: React.ReactNode; +}; + +export default function SubPanel(props: SubPanelProps): JSX.Element { return ( -
- {children} +
+ {props.children}
- ) -} \ No newline at end of file + ); +} diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 9412417..5789b0d 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,7 +1,13 @@ import Link from "next/link"; import ContentPanel from "components/Panels/ContentPanel"; +import { applyCustomAppProps } from "./_app"; -export default function FourOhFour() { +applyCustomAppProps(FourOhFour, { + useSubPanel: false, + useContentPanel: true, +}); + +export default function FourOhFour(): JSX.Element { return (

404 - Page Not Found

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 5d27eba..401eb10 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,46 +3,24 @@ import Head from "next/head"; import MainPanel from "components/Panels/MainPanel"; import "styles/globals.css"; -function AccordsLibraryApp({ Component, pageProps }: AppProps) { - /* [BIG HACK] - Yes this is probably terrible, I'm trying to apply a different style to my appContainer div - depending on if the page uses a subpanel or contentpanel, or both, or neither. This is because - I want the first column to be always 20rem, the second one to be 20rem when it's the subbar, but - 1fr if it's the content... - - Anyway, there is probably a much better way to do this, it it might backfire in my face in the future - Much love, +export type CustomAppProps = { + useSubPanel: boolean; + useContentPanel: boolean; +}; - Mint - */ - - const componentProcessed = Component(pageProps); - let useSubPanel = false; - let useContentPanel = false; - - const children = componentProcessed.props.children; - - if (Array.isArray(children)) { - children.forEach((child) => { - if (child.type.name === "SubPanel") { - useSubPanel = true; - } else if (child.type.name === "ContentPanel") { - useContentPanel = true; - } - }); - } else { - if (children.type.name === "SubPanel") { - useSubPanel = true; - } else if (children.type.name === "ContentPanel") { - useContentPanel = true; - } - } +export function applyCustomAppProps( + page: Function, + customAppProps: CustomAppProps +) { + page.customAppProps = customAppProps; +} +export default function AccordsLibraryApp(appProps: AppProps) { let additionalClasses = ""; - if (useSubPanel) additionalClasses += " withSubPanel"; - if (useContentPanel) additionalClasses += " withContentPanel"; - - /* [End of BIG HACK] */ + if (appProps.Component.customAppProps.useSubPanel) + additionalClasses += " withSubPanel"; + if (appProps.Component.customAppProps.useContentPanel) + additionalClasses += " withContentPanel"; const siteTitle = "Accord's Library - Discover • Analyse • Translate • Archive"; @@ -71,9 +49,7 @@ function AccordsLibraryApp({ Component, pageProps }: AppProps) { - {componentProcessed} +
); } - -export default AccordsLibraryApp; diff --git a/src/pages/chronology/index.tsx b/src/pages/chronology/index.tsx index ce3f1ff..25a0f0c 100644 --- a/src/pages/chronology/index.tsx +++ b/src/pages/chronology/index.tsx @@ -1,8 +1,13 @@ -import type { NextPage } from "next"; import SubPanel from "components/Panels/SubPanel"; import NavOption from "components/Panels/NavOption"; +import { applyCustomAppProps } from "pages/_app"; -const Chronology: NextPage = () => { +applyCustomAppProps(Chronology, { + useSubPanel: true, + useContentPanel: false, +}); + +export default function Chronology(): JSX.Element { return ( <> @@ -37,5 +42,4 @@ const Chronology: NextPage = () => { ); -}; -export default Chronology; +} diff --git a/src/pages/chronology/overview.tsx b/src/pages/chronology/overview.tsx index 3d1377a..ed2a2af 100644 --- a/src/pages/chronology/overview.tsx +++ b/src/pages/chronology/overview.tsx @@ -11,14 +11,19 @@ import { ChronologyEra, ChronologyItemsEvent, } from "queries/chronology/overview"; +import { applyCustomAppProps } from "pages/_app"; type Props = { chronologyItems: ChronologyItem[]; chronologyEras: ChronologyEra[]; }; -export default function ChronologyOverview(props: Props): JSX.Element { +applyCustomAppProps(ChronologyOverview, { + useSubPanel: true, + useContentPanel: true, +}); +export default function ChronologyOverview(props: Props): JSX.Element { // Group by year the Chronology items let chronologyItemYearGroups: ChronologyItem[][] = []; props.chronologyItems.map((item: ChronologyItem) => { @@ -27,7 +32,7 @@ export default function ChronologyOverview(props: Props): JSX.Element { } else { chronologyItemYearGroups[item.attributes.year].push(item); } - }); + }); return ( <> @@ -80,15 +85,11 @@ export default function ChronologyOverview(props: Props): JSX.Element { }); })} - {chronologyItemYearGroups.map((items: ChronologyItem[], index: number) => { - return ( - - ) - - })} + {chronologyItemYearGroups.map( + (items: ChronologyItem[], index: number) => { + return ; + } + )} ); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b80a6ea..cc6bf89 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,12 @@ -import type { NextPage } from "next"; import ContentPanel from "components/Panels/ContentPanel"; +import { applyCustomAppProps } from "./_app"; -const Home: NextPage = () => { +applyCustomAppProps(Home, { + useSubPanel: false, + useContentPanel: true, +}); + +export default function Home(): JSX.Element { return ( <> @@ -129,6 +134,4 @@ const Home: NextPage = () => { ); -}; - -export default Home; +} diff --git a/src/pages/library/[...slug].tsx b/src/pages/library/[...slug].tsx index 8404c21..fc791dd 100644 --- a/src/pages/library/[...slug].tsx +++ b/src/pages/library/[...slug].tsx @@ -6,16 +6,22 @@ import { getBreadcrumbs, getLibraryItemsSkeleton, LibraryItem, - LibrarySubItem + LibrarySubItem, } from "queries/library/[...slug]"; import Image from "next/image"; import Link from "next/link"; import { GetStaticProps } from "next"; +import { applyCustomAppProps } from "pages/_app"; type Props = { libraryItem: LibraryItem; }; +applyCustomAppProps(Library, { + useSubPanel: false, + useContentPanel: true, +}); + export default function Library(props: Props): JSX.Element { const router = useRouter(); return ( @@ -35,28 +41,33 @@ export default function Library(props: Props): JSX.Element { height={props.libraryItem.attributes.thumbnail.data.attributes.height} /> - {props.libraryItem.attributes.subitems.data.map((subitem: LibrarySubItem) => ( - -
- {subitem.attributes.thumbnail.data ? ( - {subitem.attributes.thumbnail.data.attributes.alternativeText} - ) : ( - "" - )} -
- - ))} - - + {props.libraryItem.attributes.subitems.data.map( + (subitem: LibrarySubItem) => ( + +
+ {subitem.attributes.thumbnail.data ? ( + { + ) : ( + "" + )} +
+ + ) + )} ); @@ -66,15 +77,15 @@ export const getStaticProps: GetStaticProps = async (context) => { if (context.params && Array.isArray(context.params.slug) && context.locale) { return { props: { - libraryItem: (await getLibraryItem(context.params.slug, context.locale)), + libraryItem: await getLibraryItem(context.params.slug, context.locale), }, }; } - return {props: {}}; -} + return { props: {} }; +}; export async function getStaticPaths() { - const paths = (await getAllSlugs()); + const paths = await getAllSlugs(); return { paths, fallback: false, @@ -85,16 +96,16 @@ async function getAllSlugs() { type Path = { params: { slug: string[]; - } - } - - const data = (await getLibraryItemsSkeleton()); - const paths:Path[] = []; + }; + }; + + const data = await getLibraryItemsSkeleton(); + const paths: Path[] = []; data.map((item) => { const breadcrumbs = getBreadcrumbs([], item); breadcrumbs.map((breadcrumb) => { - paths.push({params: {slug: breadcrumb}}) - }) - }) - return paths; + paths.push({ params: { slug: breadcrumb } }); + }); + }); + return paths; } diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 308a16d..d8f3e2b 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -2,14 +2,18 @@ import { GetStaticProps } from "next"; import SubPanel from "components/Panels/SubPanel"; import ContentPanel from "components/Panels/ContentPanel"; import { LibraryItem, getLibraryItems } from "queries/library/index"; -import { BasicDate, getAssetURL } from "queries/helpers"; -import Image from "next/image"; -import Link from "next/link"; +import LibraryItemComponent from "components/Library/LibraryItemComponent"; +import { applyCustomAppProps } from "pages/_app"; type Props = { libraryItems: LibraryItem[]; }; +applyCustomAppProps(Library, { + useSubPanel: true, + useContentPanel: true, +}); + export default function Library(props: Props): JSX.Element { return ( <> @@ -26,25 +30,7 @@ export default function Library(props: Props): JSX.Element { {props.libraryItems.map((item: LibraryItem) => ( - -
-

- {prettyTitleSubtitle(item.attributes.title, item.attributes.subtitle)} -

-

{prettyDate(item.attributes.release_date)}

- - {item.attributes.thumbnail.data ? ( - {item.attributes.thumbnail.data.attributes.alternativeText} - ) : ( - "" - )} -
- + ))} @@ -58,13 +44,3 @@ export const getStaticProps: GetStaticProps = async (context) => { }, }; }; - -function prettyTitleSubtitle(title: string, subtitle: string): string { - let result = title; - if (subtitle !== null) result += " - " + subtitle; - return result; -} - -function prettyDate(date: BasicDate): string { - return date.year + "/" + date.month + "/" + date.day; -} \ No newline at end of file diff --git a/src/queries/library/[...slug].ts b/src/queries/library/[...slug].ts index 5a328b7..6e7c56a 100644 --- a/src/queries/library/[...slug].ts +++ b/src/queries/library/[...slug].ts @@ -1,9 +1,15 @@ -import { BasicDate, BasicPrice, BasicSize, queryGraphQL, UploadImage } from "queries/helpers"; +import { + BasicDate, + BasicPrice, + BasicSize, + queryGraphQL, + UploadImage, +} from "queries/helpers"; export type LibraryItemSkeleton = { attributes: { slug: string; - subitems: { + subitems: { data: LibraryItemSkeleton[]; }; }; @@ -63,7 +69,6 @@ export function getBreadcrumbs( return result; } - export type LibraryItem = { id: string; attributes: { @@ -90,14 +95,13 @@ export type LibrarySubItem = { subtitle: string; slug: string; thumbnail: UploadImage; - } -} + }; +}; export async function getLibraryItem( slug: string[], language_code: string | undefined ): Promise { - return ( await queryGraphQL( ` diff --git a/src/queries/library/index.ts b/src/queries/library/index.ts index 0a61b5a..6d1162b 100644 --- a/src/queries/library/index.ts +++ b/src/queries/library/index.ts @@ -1,4 +1,10 @@ -import { UploadImage, queryGraphQL, BasicPrice, BasicDate, BasicSize } from "queries/helpers"; +import { + UploadImage, + queryGraphQL, + BasicPrice, + BasicDate, + BasicSize, +} from "queries/helpers"; export type LibraryItem = { id: string; diff --git a/src/styles/Library/LibraryItemComponent.module.css b/src/styles/Library/LibraryItemComponent.module.css new file mode 100644 index 0000000..2ec8c88 --- /dev/null +++ b/src/styles/Library/LibraryItemComponent.module.css @@ -0,0 +1,3 @@ +.libraryItem { + cursor: pointer; +} \ No newline at end of file