From 4f575f77c0f2dcb2a371bec2d3713bd586099a1f Mon Sep 17 00:00:00 2001 From: DrMint Date: Thu, 27 Jan 2022 17:52:44 +0100 Subject: [PATCH] More content displayed on the library item pages --- .../Library/LibraryItemComponent.tsx | 36 ++-- src/graphql/operation.graphql | 13 ++ src/graphql/operations-types.ts | 16 ++ src/graphql/schema.graphql | 6 + src/pages/library/[slug].tsx | 186 ++++++++++++------ src/queries/helpers.ts | 26 +++ 6 files changed, 206 insertions(+), 77 deletions(-) diff --git a/src/components/Library/LibraryItemComponent.tsx b/src/components/Library/LibraryItemComponent.tsx index 74c52a0..fdafa8c 100644 --- a/src/components/Library/LibraryItemComponent.tsx +++ b/src/components/Library/LibraryItemComponent.tsx @@ -1,6 +1,6 @@ import Link from "next/link"; import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; -import { getAssetURL } from "queries/helpers"; +import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers"; import Image from "next/image"; export type LibraryItemComponentProps = { @@ -10,17 +10,6 @@ export type LibraryItemComponentProps = { export default function LibraryItemComponent( props: LibraryItemComponentProps ): JSX.Element { - function prettyDate( - date: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"] - ): string { - return ( - date.year + - "/" + - date.month.toString().padStart(2, "0") + - "/" + - date.day.toString().padStart(2, "0") - ); - } return ( @@ -31,7 +20,9 @@ export default function LibraryItemComponent( src={getAssetURL( props.item.attributes.thumbnail.data.attributes.url )} - alt={props.item.attributes.thumbnail.data.attributes.alternativeText} + alt={ + props.item.attributes.thumbnail.data.attributes.alternativeText + } height={props.item.attributes.thumbnail.data.attributes.height} width={props.item.attributes.thumbnail.data.attributes.width} /> @@ -44,19 +35,22 @@ export default function LibraryItemComponent(

{props.item.attributes.subtitle}

-

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

+ {props.item.attributes.price ? ( +

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

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

shopping_cart - {props.item.attributes.price.currency.data.attributes.symbol} - {props.item.attributes.price.amount} + {prettyPrice(props.item.attributes.price)}

) : ( "" diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 9f1612a..4b601c5 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -135,6 +135,19 @@ query getLibraryItem($slug: String, $language_code: String) { } } } + gallery { + data { + id + attributes { + name + alternativeText + caption + width + height + url + } + } + } release_date { year month diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index a5587f3..7a62b6f 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -231,6 +231,22 @@ export type GetLibraryItemQuery = { }; }; }; + gallery: { + __typename: "UploadFileRelationResponseCollection"; + data: Array<{ + __typename: "UploadFileEntity"; + id: string; + attributes: { + __typename: "UploadFile"; + name: string; + alternativeText: string; + caption: string; + width: number; + height: number; + url: string; + }; + }>; + }; release_date: { __typename: "ComponentBasicsDatepicker"; year: number; diff --git a/src/graphql/schema.graphql b/src/graphql/schema.graphql index 8a10333..39c1a8f 100644 --- a/src/graphql/schema.graphql +++ b/src/graphql/schema.graphql @@ -1762,6 +1762,7 @@ input LibraryItemInput { contents: [ID] release_date: ComponentBasicsDatepickerInput descriptions: [ComponentTranslationsLibraryItemsInput] + gallery: [ID] } type LibraryItem { @@ -1795,6 +1796,11 @@ type LibraryItem { pagination: PaginationArg = {} sort: [String] = [] ): [ComponentTranslationsLibraryItems] + gallery( + filters: UploadFileFiltersInput + pagination: PaginationArg = {} + sort: [String] = [] + ): UploadFileRelationResponseCollection createdAt: DateTime updatedAt: DateTime } diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 4e4cfd1..95e3349 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -8,10 +8,16 @@ import { GetStaticPaths, GetStaticProps } from "next"; import { applyCustomAppProps } from "pages/_app"; import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations"; import { GetLibraryItemQuery } from "graphql/operations-types"; -import { getAssetURL } from "queries/helpers"; +import { + convertMmToInch, + getAssetURL, + prettyDate, + prettyPrice, +} from "queries/helpers"; import SubPanel from "components/Panels/SubPanel"; import ReturnButton from "components/PanelComponents/ReturnButton"; import NavOption from "components/PanelComponents/NavOption"; +import LibraryItemComponent from "components/Library/LibraryItemComponent"; type Props = { libraryItem: GetLibraryItemQuery; @@ -63,13 +69,29 @@ export default function Library(props: Props): JSX.Element {
- + + {libraryItem.attributes.gallery.data.length > 0 ? ( + + ) : ( + "" + )} + - - + + {libraryItem.attributes.subitems.data.length > 0 ? ( + + ) : ( + "" + )} + + {libraryItem.attributes.contents.data.length > 0 ? ( + + ) : ( + "" + )} -
+
{libraryItem.attributes.thumbnail.data ? ( @@ -134,7 +156,25 @@ export default function Library(props: Props): JSX.Element {
- + {libraryItem.attributes.gallery.data.length > 0 ? ( + + ) : ( + "" + )}

Details

-
-

Type

-

Release date

-

Price

+
+
+

Type

+
+ + {libraryItem.attributes.release_date ? ( +
+

Release date

+

{prettyDate(libraryItem.attributes.release_date)}

+
+ ) : ( + "" + )} + + {libraryItem.attributes.release_date ? ( +
+

Price

+

{prettyPrice(libraryItem.attributes.price)}

+
+ ) : ( + "" + )} +
+

Physical size

+
+
+

Width

+

{libraryItem.attributes.size.width} mm

+

{convertMmToInch(libraryItem.attributes.size.width)} in

+
+
+

Height

+

{libraryItem.attributes.size.height} mm

+

+ {convertMmToInch(libraryItem.attributes.size.height)} in +

+
+
+

Thickness

+

{libraryItem.attributes.size.thickness} mm

+

+ {convertMmToInch(libraryItem.attributes.size.thickness)} in +

+
-
- {libraryItem.attributes.subitems.data.map((subitem) => ( - -
- {subitem.attributes.thumbnail.data ? ( - { - ) : ( - "" - )} -
- - ))} - -
- {libraryItem.attributes.contents.data.map((content) => ( -
-

{content.attributes.title[0].title}

-

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

-

{content.attributes.type.data.attributes.slug}

-
- ))} + {libraryItem.attributes.subitems.data.length > 0 ? ( +
+

Subitems

+
+ {libraryItem.attributes.subitems.data.map((subitem) => ( + + ))} +
-
+ ) : ( + "" + )} + + {libraryItem.attributes.contents.data.length > 0 ? ( +
+

Content

+
+ {libraryItem.attributes.contents.data.map((content) => ( +
+

{content.attributes.title[0].title}

+

+

+

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

+ +
+ ))} +
+
+ ) : ( + "" + )}
diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index 712a1e1..72104cb 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -1,3 +1,29 @@ +import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; + export function getAssetURL(url: string): string { return process.env.NEXT_PUBLIC_URL_CMS + url; +} + +export function prettyDate( + datePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"] +): string { + return ( + datePicker.year + + "/" + + datePicker.month.toString().padStart(2, "0") + + "/" + + datePicker.day.toString().padStart(2, "0") + ); +} + +export function prettyPrice( + pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"] +): string { + return ( + pricePicker.currency.data.attributes.symbol + pricePicker.amount.toLocaleString() + ); +} + +export function convertMmToInch(mm: number): string { + return (mm * 0.03937008).toPrecision(3); } \ No newline at end of file