Using the new datamodel for library content

src/components/Button.tsx

@@ -10,7 +10,7 @@ export default function Button(props: ButtonProps): JSX.Element {
   const button = (
     <div
       className={
-        "grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 py-2 transition-colors hover:text-light hover:bg-dark" +
+        "grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 pt-[0.4rem] pb-[0.5rem] transition-colors hover:text-light hover:bg-dark" +
         " " +
         props.className
       }

src/components/Chip.tsx

@@ -7,7 +7,7 @@ export default function Chip(props: ChipProps): JSX.Element {
   return (
     <div
       className={
-        "grid place-content-center place-items-center text-xs py-0.5 px-1.5 border-[1px] rounded-full opacity-70" +
+        "grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70" +
         " " +
         props.className
       }

src/components/Panels/MainPanel.tsx

@@ -21,7 +21,7 @@ export default function MainPanel(): JSX.Element {
           </Link>
           <div className="relative mt-5">
             {router.locale ? (
-              <Button className="absolute right-0 top-[-1.3em] text-xs py-0.5 px-2.5">
+              <Button className="absolute right-0 top-[-1.3em] text-xs !py-0.5 !px-2.5">
                 {router.locale.toUpperCase()}
               </Button>
             ) : (

src/graphql/operation.graphql

@@ -285,62 +285,11 @@ query getLibraryItem($slug: String, $language_code: String) {
             }
           }
         }
-        contents {
+        contents(pagination: { limit: -1 }) {
           data {
             id
             attributes {
               slug
-              title(filters: { language: { code: { eq: $language_code } } }) {
-                title
-              }
-              type {
-                data {
-                  attributes {
-                    slug
-                  }
-                }
-              }
-              categories {
-                data {
-                  id
-                  attributes {
-                    name
-                    short
-                  }
-                }
-              }
-              scan_set {
-                data {
-                  id
-                  attributes {
-                    slug
-                  }
-                }
-              }
-              text_set {
-                data {
-                  id
-                  attributes {
-                    slug
-                  }
-                }
-              }
-              audio_set {
-                data {
-                  id
-                  attributes {
-                    slug
-                  }
-                }
-              }
-              video_set {
-                data {
-                  id
-                  attributes {
-                    slug
-                  }
-                }
-              }
               range {
                 __typename
                 ... on ComponentRangePageRange {
@@ -352,6 +301,45 @@ query getLibraryItem($slug: String, $language_code: String) {
                   ending_time
                 }
               }
+              scan_set {
+                id
+              }
+              content {
+                data {
+                  attributes {
+                    slug
+                    categories {
+                      data {
+                        id
+                        attributes {
+                          short
+                        }
+                      }
+                    }
+                    type {
+                      data {
+                        attributes {
+                          slug
+                        }
+                      }
+                    }
+                    titles(
+                      filters: { language: { code: { eq: $language_code } } }
+                    ) {
+                      title
+                    }
+                    text_set {
+                      id
+                    }
+                    video_set {
+                      id
+                    }
+                    audio_set {
+                      id
+                    }
+                  }
+                }
+              }
             }
           }
         }

src/graphql/operations-types.ts

@@ -49,6 +49,15 @@ export enum Enum_Componentmetadatavideo_Resolution {
   QuadHd_2160p = "QuadHD_2160p",
 }
 
+export enum Enum_Componenttranslationschronologyitem_Status {
+  Incomplete = 'Incomplete',
+  Draft = 'Draft',
+  Review = 'Review',
+  Done = 'Done'
+}
+
+// __________________________________________________________________
+
 export type GetErasQueryVariables = Exact<{
   language_code: InputMaybe<Scalars["String"]>;
 }>;
@@ -98,10 +107,7 @@ export type GetChronologyItemsQuery = {
             __typename: "SourceEntityResponse";
             data: {
               __typename: "SourceEntity";
-              attributes: {
+              attributes: { __typename: "Source"; name: string };
-                __typename: "Source";
-                name: string;
-              };
             };
           };
           translations: Array<{
@@ -109,7 +115,7 @@ export type GetChronologyItemsQuery = {
             title: string;
             description: string;
             note: string;
-            status: string;
+            status: Enum_Componenttranslationschronologyitem_Status;
           }>;
         }>;
       };
@@ -435,71 +441,13 @@ export type GetLibraryItemQuery = {
           }>;
         };
         contents: {
-          __typename: "LibraryContentRelationResponseCollection";
+          __typename: "RangedContentRelationResponseCollection";
           data: Array<{
-            __typename: "LibraryContentEntity";
+            __typename: "RangedContentEntity";
             id: string;
             attributes: {
-              __typename: "LibraryContent";
+              __typename: "RangedContent";
               slug: string;
-              title: Array<{
-                __typename: "ComponentTranslationsLibraryContent";
-                title: string;
-              }>;
-              type: {
-                __typename: "ContentTypeEntityResponse";
-                data: {
-                  __typename: "ContentTypeEntity";
-                  attributes: {
-                    __typename: "ContentType";
-                    slug: string;
-                  };
-                };
-              };
-              categories: {
-                __typename: "CategoryRelationResponseCollection";
-                data: Array<{
-                  __typename: "CategoryEntity";
-                  id: string;
-                  attributes: {
-                    __typename: "Category";
-                    name: string;
-                    short: string;
-                  };
-                }>;
-              };
-              scan_set: {
-                __typename: "ScanSetEntityResponse";
-                data: {
-                  __typename: "ScanSetEntity";
-                  id: string;
-                  attributes: { __typename: "ScanSet"; slug: string };
-                };
-              };
-              text_set: {
-                __typename: "TextSetEntityResponse";
-                data: {
-                  __typename: "TextSetEntity";
-                  id: string;
-                  attributes: { __typename: "TextSet"; slug: string };
-                };
-              };
-              audio_set: {
-                __typename: "AudioSetEntityResponse";
-                data: {
-                  __typename: "AudioSetEntity";
-                  id: string;
-                  attributes: { __typename: "AudioSet"; slug: string };
-                };
-              };
-              video_set: {
-                __typename: "VideoSetEntityResponse";
-                data: {
-                  __typename: "VideoSetEntity";
-                  id: string;
-                  attributes: { __typename: "VideoSet"; slug: string };
-                };
-              };
               range: Array<
                 | {
                     __typename: "ComponentRangePageRange";
@@ -511,14 +459,64 @@ export type GetLibraryItemQuery = {
                     starting_time: any;
                     ending_time: any;
                   }
-                | { __typename: "ComponentRangeGameAspect" }
                 | { __typename: "ComponentRangeOther" }
                 | { __typename: "Error" }
               >;
+              scan_set: Array<{
+                __typename: "ComponentSetsScanSet";
+                id: string;
+              }>;
+              content: {
+                __typename: "ContentEntityResponse";
+                data: {
+                  __typename: "ContentEntity";
+                  attributes: {
+                    __typename: "Content";
+                    slug: 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: "ComponentTranslationsTitle";
+                      title: string;
+                    }>;
+                    text_set: Array<{
+                      __typename: "ComponentSetsTextSet";
+                      id: string;
+                    }>;
+                    video_set: Array<{
+                      __typename: "ComponentSetsVideoSet";
+                      id: string;
+                    }>;
+                    audio_set: Array<{
+                      __typename: "ComponentSetsAudioSet";
+                      id: string;
+                    }>;
+                  };
+                };
+              };
             };
           }>;
         };
       };
     }>;
   };
-};
+};

src/graphql/operations.ts

@@ -5,10 +5,6 @@ import {
   GetChronologyItemsQueryVariables,
   GetErasQuery,
   GetErasQueryVariables,
-  GetLibraryContentQuery,
-  GetLibraryContentQueryVariables,
-  GetLibraryContentsSlugsQuery,
-  GetLibraryContentsSlugsQueryVariables,
   GetLibraryItemQuery,
   GetLibraryItemQueryVariables,
   GetLibraryItemsPreviewQuery,

src/pages/library/[slug].tsx

@@ -12,6 +12,7 @@ import {
   getAssetURL,
   prettyDate,
   prettyPrice,
+  prettySlug,
 } from "queries/helpers";
 import SubPanel from "components/Panels/SubPanel";
 import ReturnButton from "components/PanelComponents/ReturnButton";
@@ -240,14 +241,24 @@ export default function Library(props: Props): JSX.Element {
                   >
                     <div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_9em] ">
                       <a href={`#${content.attributes.slug}`}>
-                        <h3>{content.attributes.title[0].title}</h3>
+                        <h3>
+                          {content.attributes.content.data
+                            ? content.attributes.content.data.attributes
+                                .titles[0].title
+                            : prettySlug(
+                                content.attributes.slug,
+                                libraryItem.attributes.slug
+                              )}
+                        </h3>
                       </a>
                       <div className="grid grid-flow-col gap-1">
-                        {content.attributes.categories.data.map((category) => (
+                        {content.attributes.content.data?.attributes.categories.data.map(
-                          <Chip key={category.id}>
+                          (category) => (
-                            {category.attributes.short}
+                            <Chip key={category.id}>
-                          </Chip>
+                              {category.attributes.short}
-                        ))}
+                            </Chip>
+                          )
+                        )}
                       </div>
                       <p className="border-b-2 h-4 w-full border-black border-dotted opacity-30"></p>
                       <p>
@@ -256,18 +267,25 @@ export default function Library(props: Props): JSX.Element {
                           ? content.attributes.range[0].starting_page
                           : ""}
                       </p>
-                      <Chip className="place-self-end">
+                      {content.attributes.content.data ? (
-                        {content.attributes.type.data.attributes.slug}
+                        <Chip className="place-self-end">
-                      </Chip>
+                          {
+                            content.attributes.content.data.attributes.type.data
+                              .attributes.slug
+                          }
+                        </Chip>
+                      ) : (
+                        ""
+                      )}
                     </div>
                     <div className="grid grid-flow-col place-content-start place-items-center gap-2">
                       <span className="material-icons text-dark">
                         subdirectory_arrow_right
                       </span>
 
-                      {content.attributes.scan_set.data ? (
+                      {content.attributes.scan_set.length > 0 ? (
                         <Button
-                          href={`/scans/${content.attributes.scan_set.data.attributes.slug}`}
+                          href={`content/${content.attributes.content.data.attributes.slug}/scans/`}
                         >
                           View scan
                         </Button>
@@ -275,9 +293,10 @@ export default function Library(props: Props): JSX.Element {
                         ""
                       )}
 
-                      {content.attributes.text_set.data ? (
+                      {content.attributes.content.data?.attributes.text_set
+                        .length > 0 ? (
                         <Button
-                          href={`/read/${content.attributes.text_set.data.attributes.slug}`}
+                          href={`content/${content.attributes.content.data.attributes.slug}/read/`}
                         >
                           Read content
                         </Button>
@@ -285,9 +304,10 @@ export default function Library(props: Props): JSX.Element {
                         ""
                       )}
 
-                      {content.attributes.audio_set.data ? (
+                      {content.attributes.content.data?.attributes.audio_set
+                        .length > 0 ? (
                         <Button
-                          href={`/listen/${content.attributes.audio_set.data.attributes.slug}`}
+                          href={`content/${content.attributes.content.data.attributes.slug}/listen/`}
                         >
                           Listen content
                         </Button>
@@ -295,9 +315,10 @@ export default function Library(props: Props): JSX.Element {
                         ""
                       )}
 
-                      {content.attributes.video_set.data ? (
+                      {content.attributes.content.data?.attributes.video_set
+                        .length > 0 ? (
                         <Button
-                          href={`/watch/${content.attributes.video_set.data.attributes.slug}`}
+                          href={`content/${content.attributes.content.data.attributes.slug}/watch/`}
                         >
                           View content
                         </Button>
@@ -305,10 +326,14 @@ export default function Library(props: Props): JSX.Element {
                         ""
                       )}
 
-                      {!content.attributes.scan_set.data &&
+                      {content.attributes.scan_set.length === 0 &&
-                      !content.attributes.text_set.data &&
+                      (!content.attributes.content.data ||
-                      !content.attributes.audio_set.data &&
+                        (content.attributes.content.data.attributes.text_set
-                      !content.attributes.video_set.data
+                          .length === 0 &&
+                          content.attributes.content.data.attributes.audio_set
+                            .length === 0 &&
+                          content.attributes.content.data.attributes.video_set
+                            .length === 0))
                         ? "The content is not available"
                         : ""}
                     </div>

src/queries/helpers.ts

@@ -20,10 +20,21 @@ export function prettyPrice(
   pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"]
 ): string {
   return (
-    pricePicker.currency.data.attributes.symbol + pricePicker.amount.toLocaleString()
+    pricePicker.currency.data.attributes.symbol +
+    pricePicker.amount.toLocaleString()
   );
 }
 
+export function prettySlug(slug: string, parentSlug?: string): string {
+  if (parentSlug && slug.startsWith(parentSlug))
+    slug = slug.substring(parentSlug.length + 1);
+  let words = slug.split("-");
+  words = words.map(
+    (word) => (word = word.charAt(0).toUpperCase() + word.substring(1))
+  );
+  return words.join(" ");
+}
+
 export function convertMmToInch(mm: number): string {
   return (mm * 0.03937008).toPrecision(3);
-}
+}