From 9a630d29daf83a46161ca58b52204bea58b6ca05 Mon Sep 17 00:00:00 2001 From: DrMint Date: Wed, 16 Feb 2022 17:09:46 +0100 Subject: [PATCH] Replaced Data and Hubs with Wiki --- .../Library/LibraryContentPreview.tsx | 48 ++++++++ ...mComponent.tsx => LibraryItemsPreview.tsx} | 13 +- .../Library/LibraryMediaPreview.tsx | 67 ++++++++++ src/components/Panels/MainPanel.tsx | 9 +- src/components/Panels/SubPanel.tsx | 2 +- src/graphql/operation.graphql | 88 +++++++++++++ src/graphql/operations-types.ts | 116 ++++++++++++++++++ src/graphql/operations.ts | 10 ++ src/pages/library/content/index.tsx | 74 +++++++++++ src/pages/library/index.tsx | 44 +++---- src/pages/library/{ => items}/[slug].tsx | 10 +- src/pages/library/items/index.tsx | 77 ++++++++++++ src/pages/{data => wiki}/chronology.tsx | 0 src/pages/{data => wiki}/index.tsx | 48 +++----- 14 files changed, 527 insertions(+), 79 deletions(-) create mode 100644 src/components/Library/LibraryContentPreview.tsx rename src/components/Library/{LibraryItemComponent.tsx => LibraryItemsPreview.tsx} (87%) create mode 100644 src/components/Library/LibraryMediaPreview.tsx create mode 100644 src/pages/library/content/index.tsx rename src/pages/library/{ => items}/[slug].tsx (96%) create mode 100644 src/pages/library/items/index.tsx rename src/pages/{data => wiki}/chronology.tsx (100%) rename src/pages/{data => wiki}/index.tsx (51%) diff --git a/src/components/Library/LibraryContentPreview.tsx b/src/components/Library/LibraryContentPreview.tsx new file mode 100644 index 0000000..3501fb7 --- /dev/null +++ b/src/components/Library/LibraryContentPreview.tsx @@ -0,0 +1,48 @@ +import Link from "next/link"; +import { GetContentsQuery } from "graphql/operations-types"; +import { getAssetURL, prettySlug } from "queries/helpers"; +import Image from "next/image"; + +export type LibraryContentPreviewProps = { + item: { + slug: GetContentsQuery["contents"]["data"][number]["attributes"]["slug"]; + thumbnail: GetContentsQuery["contents"]["data"][number]["attributes"]["thumbnail"]; + titles: GetContentsQuery["contents"]["data"][number]["attributes"]["titles"]; + }; +}; + +export default function LibraryContentPreview( + props: LibraryContentPreviewProps +): JSX.Element { + const item = props.item; + + return ( + +
+ {item.thumbnail.data ? ( + {item.thumbnail.data.attributes.alternativeText} + ) : ( +
+ )} +
+
+ {item.titles.length > 0 ? ( + <> +

{item.titles[0].pre_title}

+

{item.titles[0].title}

+

{item.titles[0].subtitle}

+ + ) : ( +

{prettySlug(item.slug)}

+ )} +
+
+
+ + ); +} diff --git a/src/components/Library/LibraryItemComponent.tsx b/src/components/Library/LibraryItemsPreview.tsx similarity index 87% rename from src/components/Library/LibraryItemComponent.tsx rename to src/components/Library/LibraryItemsPreview.tsx index 38d9549..8bd4df5 100644 --- a/src/components/Library/LibraryItemComponent.tsx +++ b/src/components/Library/LibraryItemsPreview.tsx @@ -3,7 +3,7 @@ import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers"; import Image from "next/image"; -export type LibraryItemComponentProps = { +export type LibraryItemsPreviewProps = { item: { slug: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["slug"]; thumbnail: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["thumbnail"]; @@ -14,13 +14,13 @@ export type LibraryItemComponentProps = { }; }; -export default function LibraryItemComponent( - props: LibraryItemComponentProps +export default function LibraryItemsPreview( + props: LibraryItemsPreviewProps ): JSX.Element { const item = props.item; return ( - +
{item.thumbnail.data ? ( {item.subtitle}
- {item.price ? ( + {item.release_date ? (

event - {item.release_date ? prettyDate(item.release_date) : ""} + {prettyDate(item.release_date)}

) : ( "" @@ -64,3 +64,4 @@ export default function LibraryItemComponent( ); } + diff --git a/src/components/Library/LibraryMediaPreview.tsx b/src/components/Library/LibraryMediaPreview.tsx new file mode 100644 index 0000000..ec531d6 --- /dev/null +++ b/src/components/Library/LibraryMediaPreview.tsx @@ -0,0 +1,67 @@ +import Link from "next/link"; +import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; +import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers"; +import Image from "next/image"; + +export type LibraryContentPreviewProps = { + item: { + slug: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["slug"]; + thumbnail: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["thumbnail"]; + title: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["title"]; + subtitle: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["subtitle"]; + price?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"]; + release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"]; + }; +}; + +export default function LibraryContentPreview( + props: LibraryContentPreviewProps +): JSX.Element { + const item = props.item; + + return ( + +
+ {item.thumbnail.data ? ( + {item.thumbnail.data.attributes.alternativeText} + ) : ( +
+ )} +
+
+

{item.title}

+

{item.subtitle}

+
+
+ {item.release_date ? ( +

+ + event + + {prettyDate(item.release_date)} +

+ ) : ( + "" + )} + {item.price ? ( +

+ + shopping_cart + + {prettyPrice(item.price)} +

+ ) : ( + "" + )} +
+
+
+ + ); +} + diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 5289ba5..ebbe3e4 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -49,10 +49,10 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { /> - +
{props.children}
); diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 4cbcf10..b23d660 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -478,6 +478,94 @@ query getContentsSlugs { } } +query getContents($language_code: String) { + contents(pagination: { limit: -1 }) { + data { + id + attributes { + slug + titles(filters: { language: { code: { eq: $language_code } } }) { + pre_title + title + subtitle + } + categories { + data { + id + attributes { + short + } + } + } + type { + data { + attributes { + slug + titles(filters: { language: { code: { eq: $language_code } } }) { + title + } + } + } + } + ranged_contents { + data { + id + attributes { + slug + scan_set { + id + } + library_item { + data { + attributes { + slug + title + subtitle + thumbnail { + data { + attributes { + name + alternativeText + caption + width + height + url + } + } + } + } + } + } + } + } + } + text_set { + id + } + video_set { + id + } + audio_set { + id + } + thumbnail { + data { + attributes { + name + alternativeText + caption + width + height + url + } + } + } + } + } + } +} + + query getContent($slug: String, $language_code: String) { contents(filters: { slug: { eq: $slug } }) { data { diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index 7547006..f963b98 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -673,6 +673,122 @@ export type GetContentQueryVariables = Exact<{ language_code: InputMaybe; }>; +export type GetContentsQueryVariables = Exact<{ + language_code: InputMaybe; +}>; + +export type GetContentsQuery = { + __typename: "Query"; + contents: { + __typename: "ContentEntityResponseCollection"; + data: Array<{ + __typename: "ContentEntity"; + id: string; + attributes: { + __typename: "Content"; + slug: string; + titles: Array<{ + __typename: "ComponentTranslationsTitle"; + pre_title: string ; + title: string; + subtitle: string ; + } > ; + categories: { + __typename: "CategoryRelationResponseCollection"; + data: Array<{ + __typename: "CategoryEntity"; + id: string ; + attributes: { __typename: "Category"; short: string } ; + }>; + } ; + type: { + __typename: "ContentTypeEntityResponse"; + data: { + __typename: "ContentTypeEntity"; + attributes: { + __typename: "ContentType"; + slug: string; + titles: Array<{ + __typename: "ComponentTranslationsSimpleTitle"; + title: string; + } > ; + } ; + } ; + } ; + ranged_contents: { + __typename: "RangedContentRelationResponseCollection"; + data: Array<{ + __typename: "RangedContentEntity"; + id: string ; + attributes: { + __typename: "RangedContent"; + slug: string; + scan_set: Array<{ + __typename: "ComponentSetsScanSet"; + id: string; + } > ; + library_item: { + __typename: "LibraryItemEntityResponse"; + data: { + __typename: "LibraryItemEntity"; + attributes: { + __typename: "LibraryItem"; + slug: string; + title: string; + subtitle: string ; + thumbnail: { + __typename: "UploadFileEntityResponse"; + data: { + __typename: "UploadFileEntity"; + attributes: { + __typename: "UploadFile"; + name: string; + alternativeText: string ; + caption: string ; + width: number ; + height: number ; + url: string; + } ; + } ; + } ; + } ; + } ; + } ; + } ; + }>; + } ; + text_set: Array<{ + __typename: "ComponentSetsTextSet"; + id: string; + } > ; + video_set: Array<{ + __typename: "ComponentSetsVideoSet"; + id: string; + } > ; + audio_set: Array<{ + __typename: "ComponentSetsAudioSet"; + id: string; + } > ; + thumbnail: { + __typename: "UploadFileEntityResponse"; + data: { + __typename: "UploadFileEntity"; + attributes: { + __typename: "UploadFile"; + name: string; + alternativeText: string ; + caption: string ; + width: number ; + height: number ; + url: string; + } ; + } ; + } ; + } ; + }>; + } ; +}; + export type GetContentQuery = { __typename: "Query"; contents: { diff --git a/src/graphql/operations.ts b/src/graphql/operations.ts index 615bedf..4245797 100644 --- a/src/graphql/operations.ts +++ b/src/graphql/operations.ts @@ -5,6 +5,8 @@ import { GetChronologyItemsQueryVariables, GetContentQuery, GetContentQueryVariables, + GetContentsQuery, + GetContentsQueryVariables, GetContentsSlugsQuery, GetContentsSlugsQueryVariables, GetContentTextQuery, @@ -101,6 +103,14 @@ export async function getContentsSlugs( return await graphQL(query, JSON.stringify(variables)); } + +export async function getContents( + variables: GetContentsQueryVariables +): Promise { + const query = getQueryFromOperations("getContents"); + return await graphQL(query, JSON.stringify(variables)); +} + export async function getContent( variables: GetContentQueryVariables ): Promise { diff --git a/src/pages/library/content/index.tsx b/src/pages/library/content/index.tsx new file mode 100644 index 0000000..4559a6a --- /dev/null +++ b/src/pages/library/content/index.tsx @@ -0,0 +1,74 @@ +import { GetStaticProps } from "next"; +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 PanelHeader from "components/PanelComponents/PanelHeader"; +import AppLayout from "components/AppLayout"; +import ReturnButton from "components/PanelComponents/ReturnButton"; +import HorizontalLine from "components/HorizontalLine"; +import LibraryContentPreview from "components/Library/LibraryContentPreview"; + +type LibraryProps = { + contents: GetContentsQuery; + langui: GetWebsiteInterfaceQuery; +}; + +export default function Library(props: LibraryProps): JSX.Element { + const langui = props.langui.websiteInterfaces.data[0].attributes; + 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: {} }; + } +}; diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index d863540..cfccaba 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -1,22 +1,16 @@ import { GetStaticProps } from "next"; import SubPanel from "components/Panels/SubPanel"; -import ContentPanel, { - ContentPanelWidthSizes, -} from "components/Panels/ContentPanel"; -import LibraryItemComponent from "components/Library/LibraryItemComponent"; import { - GetLibraryItemsPreviewQuery, GetWebsiteInterfaceQuery, } from "graphql/operations-types"; import { - getLibraryItemsPreview, getWebsiteInterface, } from "graphql/operations"; import PanelHeader from "components/PanelComponents/PanelHeader"; import AppLayout from "components/AppLayout"; +import NavOption from "components/PanelComponents/NavOption"; type LibraryProps = { - libraryItems: GetLibraryItemsPreviewQuery; langui: GetWebsiteInterfaceQuery; }; @@ -27,35 +21,29 @@ export default function Library(props: LibraryProps): JSX.Element { + + ); - const contentPanel = ( - -
- {props.libraryItems.libraryItems.data.map((item) => ( - - ))} -
- - ); - return ( - - ); + + return ; } export const getStaticProps: GetStaticProps = async (context) => { if (context.locale) { const props: LibraryProps = { - libraryItems: await getLibraryItemsPreview({ - language_code: context.locale, - }), langui: await getWebsiteInterface({ language_code: context.locale, }), diff --git a/src/pages/library/[slug].tsx b/src/pages/library/items/[slug].tsx similarity index 96% rename from src/pages/library/[slug].tsx rename to src/pages/library/items/[slug].tsx index b6d9874..ab68a15 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/items/[slug].tsx @@ -25,11 +25,11 @@ import { import SubPanel from "components/Panels/SubPanel"; import ReturnButton from "components/PanelComponents/ReturnButton"; import NavOption from "components/PanelComponents/NavOption"; -import LibraryItemComponent from "components/Library/LibraryItemComponent"; import Chip from "components/Chip"; import Button from "components/Button"; import HorizontalLine from "components/HorizontalLine"; import AppLayout from "components/AppLayout"; +import LibraryMediaPreview from "components/Library/LibraryItemsPreview"; type LibrarySlugProps = { libraryItem: GetLibraryItemQuery; @@ -42,8 +42,8 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { const subPanel = ( @@ -370,7 +370,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

{langui.library_item_variants}

{item.subitems.data.map((variant) => ( - @@ -382,7 +382,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

{langui.library_item_subitems}

{item.subitems.data.map((subitem) => ( - diff --git a/src/pages/library/items/index.tsx b/src/pages/library/items/index.tsx new file mode 100644 index 0000000..b371898 --- /dev/null +++ b/src/pages/library/items/index.tsx @@ -0,0 +1,77 @@ +import { GetStaticProps } from "next"; +import SubPanel from "components/Panels/SubPanel"; +import ContentPanel, { + ContentPanelWidthSizes, +} from "components/Panels/ContentPanel"; +import { + GetLibraryItemsPreviewQuery, + GetWebsiteInterfaceQuery, +} from "graphql/operations-types"; +import { + getLibraryItemsPreview, + getWebsiteInterface, +} from "graphql/operations"; +import PanelHeader from "components/PanelComponents/PanelHeader"; +import AppLayout from "components/AppLayout"; +import ReturnButton from "components/PanelComponents/ReturnButton"; +import HorizontalLine from "components/HorizontalLine"; +import LibraryItemsPreview from "components/Library/LibraryItemsPreview"; + +type LibraryProps = { + libraryItems: GetLibraryItemsPreviewQuery; + langui: GetWebsiteInterfaceQuery; +}; + +export default function Library(props: LibraryProps): JSX.Element { + const langui = props.langui.websiteInterfaces.data[0].attributes; + const subPanel = ( + + + + + + ); + const contentPanel = ( + +
+ {props.libraryItems.libraryItems.data.map((item) => ( + + ))} +
+ + ); + return ( + + ); +} + +export const getStaticProps: GetStaticProps = async (context) => { + if (context.locale) { + const props: LibraryProps = { + libraryItems: await getLibraryItemsPreview({ + language_code: context.locale, + }), + langui: await getWebsiteInterface({ + language_code: context.locale, + }), + }; + return { + props: props, + }; + } else { + return { props: {} }; + } +}; diff --git a/src/pages/data/chronology.tsx b/src/pages/wiki/chronology.tsx similarity index 100% rename from src/pages/data/chronology.tsx rename to src/pages/wiki/chronology.tsx diff --git a/src/pages/data/index.tsx b/src/pages/wiki/index.tsx similarity index 51% rename from src/pages/data/index.tsx rename to src/pages/wiki/index.tsx index 237f15f..0377db0 100644 --- a/src/pages/data/index.tsx +++ b/src/pages/wiki/index.tsx @@ -1,61 +1,41 @@ import SubPanel from "components/Panels/SubPanel"; -import NavOption from "components/PanelComponents/NavOption"; import PanelHeader from "components/PanelComponents/PanelHeader"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetStaticProps } from "next"; import { getWebsiteInterface } from "graphql/operations"; +import ContentPanel from "components/Panels/ContentPanel"; import AppLayout from "components/AppLayout"; -type DataProps = { +type WikiProps = { langui: GetWebsiteInterfaceQuery; }; -export default function Data(props: DataProps): JSX.Element { +export default function Hubs(props: WikiProps): JSX.Element { const langui = props.langui.websiteInterfaces.data[0].attributes; const subPanel = ( - - - - - - - - ); + const contentPanel = Hello; - return ; + return ( + + ); } export const getStaticProps: GetStaticProps = async (context) => { if (context.locale) { - const props: DataProps = { + const props: WikiProps = { langui: await getWebsiteInterface({ language_code: context.locale, }),