From 676b73318e378a84784adbf927d2a78a82a16d74 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Tue, 8 Feb 2022 05:52:22 +0100
Subject: [PATCH] Added more info on library items

---
 .../Library/LibraryItemComponent.tsx          |  29 ++-
 src/graphql/operation.graphql                 |   2 +-
 src/pages/library/[slug].tsx                  | 213 +++++++++++-------
 src/pages/library/index.tsx                   |   2 +-
 src/queries/helpers.ts                        |  20 +-
 5 files changed, 167 insertions(+), 99 deletions(-)

diff --git a/src/components/Library/LibraryItemComponent.tsx b/src/components/Library/LibraryItemComponent.tsx
index fdafa8c..df51c63 100644
--- a/src/components/Library/LibraryItemComponent.tsx
+++ b/src/components/Library/LibraryItemComponent.tsx
@@ -10,47 +10,44 @@ export type LibraryItemComponentProps = {
 export default function LibraryItemComponent(
   props: LibraryItemComponentProps
 ): JSX.Element {
+  const item = props.item.attributes;
 
   return (
-    <Link href={"/library/" + props.item.attributes.slug} passHref>
+    <Link href={"/library/" + item.slug} passHref>
       <div className="cursor-pointer grid items-end relative hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
         <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
-        {props.item.attributes.thumbnail.data ? (
+        {item.thumbnail.data ? (
           <Image
-            src={getAssetURL(
-              props.item.attributes.thumbnail.data.attributes.url
-            )}
-            alt={
-              props.item.attributes.thumbnail.data.attributes.alternativeText
-            }
-            height={props.item.attributes.thumbnail.data.attributes.height}
-            width={props.item.attributes.thumbnail.data.attributes.width}
+            src={getAssetURL(item.thumbnail.data.attributes.url)}
+            alt={item.thumbnail.data.attributes.alternativeText}
+            height={item.thumbnail.data.attributes.height}
+            width={item.thumbnail.data.attributes.width}
           />
         ) : (
           <div className="w-full aspect-[21/29.7]"></div>
         )}
         <div className="linearbg-1 shadow-[0_0_1em_rgb(0,0,0,0.2)] absolute bottom-0 left-0 right-0 h-auto opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left">
           <div>
-            <h2 className="text-lg leading-7">{props.item.attributes.title}</h2>
-            <h3 className="leading-3">{props.item.attributes.subtitle}</h3>
+            <h2 className="text-lg leading-7">{item.title}</h2>
+            <h3 className="leading-3">{item.subtitle}</h3>
           </div>
           <div className="grid grid-flow-col">
-            {props.item.attributes.price ? (
+            {item.price ? (
               <p className="text-sm">
                 <span className="material-icons !text-base translate-y-[.15em] mr-1">
                   event
                 </span>
-                {prettyDate(props.item.attributes.release_date)}
+                {prettyDate(item.release_date)}
               </p>
             ) : (
               ""
             )}
-            {props.item.attributes.price ? (
+            {item.price ? (
               <p className="text-sm justify-self-end">
                 <span className="material-icons !text-base translate-y-[.15em] mr-1">
                   shopping_cart
                 </span>
-                {prettyPrice(props.item.attributes.price)}
+                {prettyPrice(item.price)}
               </p>
             ) : (
               ""
diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql
index fe23367..30d6374 100644
--- a/src/graphql/operation.graphql
+++ b/src/graphql/operation.graphql
@@ -53,7 +53,7 @@ query getLibraryItemsPreview($language_code: String) {
   libraryItems(
     filters: { root_item: { eq: true } }
     pagination: { limit: -1 }
-    sort: ["slug:asc"]
+    sort: ["title:asc","subtitle:asc"]
   ) {
     data {
       id
diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx
index d18d090..e6bf5d2 100644
--- a/src/pages/library/[slug].tsx
+++ b/src/pages/library/[slug].tsx
@@ -2,12 +2,12 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import Image from "next/image";
-import Link from "next/link";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { applyCustomAppProps } from "pages/_app";
 import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
 import { GetLibraryItemQuery } from "graphql/operations-types";
 import {
+  capitalizeString,
   convertMmToInch,
   getAssetURL,
   prettyDate,
@@ -32,9 +32,9 @@ applyCustomAppProps(Library, {
 });
 
 export default function Library(props: Props): JSX.Element {
-  const libraryItem = props.libraryItem.libraryItems.data[0];
+  const item = props.libraryItem.libraryItems.data[0].attributes;
 
-  libraryItem.attributes.contents.data.sort((a, b) => {
+  item.contents.data.sort((a, b) => {
     if (
       a.attributes.range[0].__typename === "ComponentRangePageRange" &&
       b.attributes.range[0].__typename === "ComponentRangePageRange"
@@ -55,7 +55,7 @@ export default function Library(props: Props): JSX.Element {
 
         <NavOption title="Summary" url="#summary" border={true} />
 
-        {libraryItem.attributes.gallery.data.length > 0 ? (
+        {item.gallery.data.length > 0 ? (
           <NavOption title="Gallery" url="#gallery" border={true} />
         ) : (
           ""
@@ -63,13 +63,13 @@ export default function Library(props: Props): JSX.Element {
 
         <NavOption title="Details" url="#details" border={true} />
 
-        {libraryItem.attributes.subitems.data.length > 0 ? (
+        {item.subitems.data.length > 0 ? (
           <NavOption title="Subitems" url="#subitems" border={true} />
         ) : (
           ""
         )}
 
-        {libraryItem.attributes.contents.data.length > 0 ? (
+        {item.contents.data.length > 0 ? (
           <NavOption title="Content" url="#content" border={true} />
         ) : (
           ""
@@ -79,17 +79,12 @@ export default function Library(props: Props): JSX.Element {
         <div className="grid place-items-center gap-12">
           <div className="cursor-pointer grid items-end relative hover:rounded-3xl w-96 max-w-full mb-16">
             <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
-            {libraryItem.attributes.thumbnail.data ? (
+            {item.thumbnail.data ? (
               <Image
-                src={getAssetURL(
-                  libraryItem.attributes.thumbnail.data.attributes.url
-                )}
-                alt={
-                  libraryItem.attributes.thumbnail.data.attributes
-                    .alternativeText
-                }
-                width={libraryItem.attributes.thumbnail.data.attributes.width}
-                height={libraryItem.attributes.thumbnail.data.attributes.height}
+                src={getAssetURL(item.thumbnail.data.attributes.url)}
+                alt={item.thumbnail.data.attributes.alternativeText}
+                width={item.thumbnail.data.attributes.width}
+                height={item.thumbnail.data.attributes.height}
               />
             ) : (
               <div className="w-full aspect-[21/29.7]"></div>
@@ -100,17 +95,16 @@ export default function Library(props: Props): JSX.Element {
             id="summary"
             className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
           >
-            <div className="max-w-2xl grid place-items-center gap-8">
-              {libraryItem.attributes.subitem_of.data.length > 0 ? (
+            <div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
+              {item.subitem_of.data.length > 0 ? (
                 <div className="grid place-items-center">
                   <p>Subitem of</p>
                   <Button
-                    href={`/library/${libraryItem.attributes.subitem_of.data[0].attributes.slug}`}
+                    href={`/library/${item.subitem_of.data[0].attributes.slug}`}
                   >
-                    {libraryItem.attributes.subitem_of.data[0].attributes.title}
-                    {libraryItem.attributes.subitem_of.data[0].attributes
-                      .subtitle
-                      ? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
+                    {item.subitem_of.data[0].attributes.title}
+                    {item.subitem_of.data[0].attributes.subtitle
+                      ? ` - ${item.subitem_of.data[0].attributes.subtitle}`
                       : ""}
                   </Button>
                 </div>
@@ -118,28 +112,26 @@ export default function Library(props: Props): JSX.Element {
                 ""
               )}
               <div className="grid place-items-center">
-                <h1 className="text-3xl">{libraryItem.attributes.title}</h1>
-                {libraryItem.attributes.subtitle ? (
-                  <h2 className="text-2xl">
-                    {libraryItem.attributes.subtitle}
-                  </h2>
+                <h1 className="text-3xl">{item.title}</h1>
+                {item.subtitle ? (
+                  <h2 className="text-2xl">{item.subtitle}</h2>
                 ) : (
                   ""
                 )}
               </div>
-              {libraryItem.attributes.descriptions.length > 0 ? (
-                <p>{libraryItem.attributes.descriptions[0].description}</p>
+              {item.descriptions.length > 0 ? (
+                <p>{item.descriptions[0].description}</p>
               ) : (
                 ""
               )}
             </div>
           </div>
 
-          {libraryItem.attributes.gallery.data.length > 0 ? (
+          {item.gallery.data.length > 0 ? (
             <div id="gallery" className="grid place-items-center gap-8  w-full">
               <h2 className="text-2xl">Gallery</h2>
               <div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
-                {libraryItem.attributes.gallery.data.map((galleryItem) => (
+                {item.gallery.data.map((galleryItem) => (
                   <div
                     key={galleryItem.id}
                     className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
@@ -166,61 +158,131 @@ export default function Library(props: Props): JSX.Element {
             id="details"
             className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
           >
-            <div className="max-w-2xl grid place-items-center gap-8">
-              <h2 className="text-2xl">Details</h2>
-              <div className="grid grid-flow-col place-items-center gap-8">
-                <div className="grid place-items-center">
-                  <h3>Type</h3>
-                </div>
-
-                {libraryItem.attributes.release_date ? (
+            <div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
+              <h2 className="text-2xl text-center">Details</h2>
+              <div className="grid grid-flow-col w-full place-content-between">
+                {item.metadata.length > 0 ? (
                   <div className="grid place-items-center">
-                    <h3>Release date</h3>
-                    <p>{prettyDate(libraryItem.attributes.release_date)}</p>
+                    <h3 className="text-xl">Type</h3>
+                    <Button>
+                      {item.metadata[0].__typename.substring(
+                        "ComponentMetadata".length
+                      )}
+                    </Button>
                   </div>
                 ) : (
                   ""
                 )}
 
-                {libraryItem.attributes.release_date ? (
+                {item.release_date ? (
                   <div className="grid place-items-center">
-                    <h3>Price</h3>
-                    <p>{prettyPrice(libraryItem.attributes.price)}</p>
+                    <h3 className="text-xl">Release date</h3>
+                    <p>{prettyDate(item.release_date)}</p>
+                  </div>
+                ) : (
+                  ""
+                )}
+
+                {item.release_date ? (
+                  <div className="grid place-items-center">
+                    <h3 className="text-xl">Price</h3>
+                    <p>{prettyPrice(item.price)}</p>
                   </div>
                 ) : (
                   ""
                 )}
               </div>
-              <h3>Physical size</h3>
-              <div className="grid grid-flow-col place-items-center gap-8">
-                <div className="grid place-items-center">
-                  <p className="font-bold">Width</p>
-                  <p>{libraryItem.attributes.size.width} mm</p>
-                  <p>{convertMmToInch(libraryItem.attributes.size.width)} in</p>
-                </div>
-                <div className="grid place-items-center">
-                  <p className="font-bold">Height</p>
-                  <p>{libraryItem.attributes.size.height} mm</p>
-                  <p>
-                    {convertMmToInch(libraryItem.attributes.size.height)} in
-                  </p>
-                </div>
-                <div className="grid place-items-center">
-                  <p className="font-bold">Thickness</p>
-                  <p>{libraryItem.attributes.size.thickness} mm</p>
-                  <p>
-                    {convertMmToInch(libraryItem.attributes.size.thickness)} in
-                  </p>
-                </div>
-              </div>
+              {item.size ? (
+                <>
+                  <h3 className="text-xl">Physical Size</h3>
+                  <div className="grid grid-flow-col w-full place-content-between">
+                    <div className="grid place-items-start grid-flow-col gap-4">
+                      <p className="font-bold">Width:</p>
+                      <div>
+                        <p>{item.size.width} mm</p>
+                        <p>{convertMmToInch(item.size.width)} in</p>
+                      </div>
+                    </div>
+                    <div className="grid place-items-start grid-flow-col gap-4">
+                      <p className="font-bold">Height:</p>
+                      <div>
+                        <p>{item.size.height} mm</p>
+                        <p>{convertMmToInch(item.size.height)} in</p>
+                      </div>
+                    </div>
+                    {item.size.thickness ? (
+                      <div className="grid place-items-start grid-flow-col gap-4">
+                        <p className="font-bold">Thickness:</p>
+                        <div>
+                          <p>{item.size.thickness} mm</p>
+                          <p>{convertMmToInch(item.size.thickness)} in</p>
+                        </div>
+                      </div>
+                    ) : (
+                      ""
+                    )}
+                  </div>
+                </>
+              ) : (
+                ""
+              )}
+
+              {item.metadata.length > 0 ? (
+                <>
+                  <h3 className="text-xl">Type Information</h3>
+                  <div className="grid grid-cols-2 w-full place-content-between">
+                    {item.metadata[0].__typename ===
+                    "ComponentMetadataBooks" ? (
+                      <>
+                        <div className="grid place-content-start grid-flow-col gap-4">
+                          <p className="font-bold">Type:</p>
+                          <Chip>
+                            {capitalizeString(
+                              item.metadata[0].subtype.data.attributes.slug
+                            )}
+                          </Chip>
+                        </div>
+
+                        <div className="grid place-content-start grid-flow-col gap-4">
+                          <p className="font-bold">Pages:</p>
+                          <p>{item.metadata[0].page_count}</p>
+                        </div>
+
+                        <div className="grid place-content-start grid-flow-col gap-4">
+                          <p className="font-bold">Binding:</p>
+                          <p>{item.metadata[0].binding_type}</p>
+                        </div>
+
+                        <div className="grid place-content-start grid-flow-col gap-4">
+                          <p className="font-bold">Page order:</p>
+                          <p>{item.metadata[0].page_order}</p>
+                        </div>
+
+                        <div className="grid place-content-start grid-flow-col gap-4">
+                          <p className="font-bold">Languages:</p>
+                          {item.metadata[0].languages.data.map((lang) => (
+                            <p key={lang.attributes.code}>
+                              {lang.attributes.name}
+                            </p>
+                          ))}
+                        </div>
+                      </>
+                    ) : (
+                      ""
+                    )}
+                  </div>
+                </>
+              ) : (
+                ""
+              )}
             </div>
           </div>
 
-          {libraryItem.attributes.subitems.data.length > 0 ? (
+          {item.subitems.data.length > 0 ? (
             <div id="subitems" className="grid place-items-center gap-8">
               <h2 className="text-2xl">Subitems</h2>
-              <div className="grid gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
-                {libraryItem.attributes.subitems.data.map((subitem) => (
+              <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
+                {item.subitems.data.map((subitem) => (
                   <LibraryItemComponent key={subitem.id} item={subitem} />
                 ))}
               </div>
@@ -229,11 +291,11 @@ export default function Library(props: Props): JSX.Element {
             ""
           )}
 
-          {libraryItem.attributes.contents.data.length > 0 ? (
-            <div id="content" className="w-full grid place-items-center">
+          {item.contents.data.length > 0 ? (
+            <div id="content" className="w-full grid place-items-center gap-8">
               <h2 className="text-2xl">Content</h2>
               <div className="grid gap-4 w-full">
-                {libraryItem.attributes.contents.data.map((content) => (
+                {item.contents.data.map((content) => (
                   <div
                     id={content.attributes.slug}
                     key={content.id}
@@ -245,10 +307,7 @@ export default function Library(props: Props): JSX.Element {
                           {content.attributes.content.data
                             ? content.attributes.content.data.attributes
                                 .titles[0].title
-                            : prettySlug(
-                                content.attributes.slug,
-                                libraryItem.attributes.slug
-                              )}
+                            : prettySlug(content.attributes.slug, item.slug)}
                         </h3>
                       </a>
                       <div className="grid grid-flow-col gap-1">
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index ef65d32..378b19b 100644
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@@ -30,7 +30,7 @@ export default function Library(props: Props): JSX.Element {
       </SubPanel>
 
       <ContentPanel width={ContentPanelWidthSizes.large}>
-        <div className="grid gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
+        <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
           {props.libraryItems.libraryItems.data.map((item) => (
             <LibraryItemComponent key={item.id} item={item} />
           ))}
diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts
index af37722..ae9df52 100644
--- a/src/queries/helpers.ts
+++ b/src/queries/helpers.ts
@@ -1,4 +1,7 @@
-import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
+import {
+  GetLibraryItemQuery,
+  GetLibraryItemsPreviewQuery,
+} from "graphql/operations-types";
 
 export function getAssetURL(url: string): string {
   return process.env.NEXT_PUBLIC_URL_CMS + url;
@@ -27,10 +30,19 @@ export function prettyPrice(
 
 export function prettySlug(slug: string, parentSlug?: string): string {
   if (parentSlug && slug.startsWith(parentSlug))
-    slug = slug.substring(parentSlug.length + 1);
-  let words = slug.split("-");
+  slug = slug.substring(parentSlug.length + 1);
+  return capitalizeString(slug.replace(new RegExp("-", 'g'), " "))
+  return slug;
+}
+
+export function capitalizeString(string:string):string {
+  function capitalizeWord(word: string): string {
+    return word.charAt(0).toUpperCase() + word.substring(1);
+  }
+
+  let words = string.split(" ");
   words = words.map(
-    (word) => (word = word.charAt(0).toUpperCase() + word.substring(1))
+    (word) => (word = capitalizeWord(word))
   );
   return words.join(" ");
 }