src/components/Library/LibraryItemsPreview.tsx

@@ -16,6 +16,7 @@ export type LibraryItemsPreviewProps = {
     title: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["title"];
     subtitle: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["subtitle"];
     price?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"];
+    categories: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["categories"];
     release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"];
     metadata?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["metadata"];
   };
@@ -55,6 +56,15 @@ export default function LibraryItemsPreview(
             <h2 className="mobile:text-sm text-lg leading-5">{item.title}</h2>
             <h3 className="mobile:text-xs leading-3">{item.subtitle}</h3>
           </div>
+
+          <div className="w-full grid grid-flow-col gap-1 overflow-x-scroll webkit-scrollbar:w-0 [scrollbar-width:none] place-content-start">
+            {item.categories.data.map((category) => (
+              <Chip key={category.id} className="text-sm">
+                {category.attributes.short}
+              </Chip>
+            ))}
+          </div>
+
           {item.release_date || item.price ? (
             <div className="grid grid-flow-col w-full">
               {item.release_date ? (

src/graphql/operation.graphql

@@ -205,6 +205,15 @@ query getLibraryItemsPreview($language_code: String) {
             }
           }
         }
+        categories {
+          data {
+            id
+            attributes {
+              name
+              short
+            }
+          }
+        }
         metadata {
           __typename
           ... on ComponentMetadataBooks {
@@ -666,6 +675,7 @@ query getLibraryItem($slug: String, $language_code: String) {
                       data {
                         id
                         attributes {
+                          name
                           short
                         }
                       }
@@ -736,6 +746,7 @@ query getContents($language_code: String) {
           data {
             id
             attributes {
+              name
               short
             }
           }

src/graphql/operations-types.ts

@@ -317,6 +317,18 @@ export type GetLibraryItemsPreviewQuery = {
             };
           };
         };
+        categories: {
+          __typename: "CategoryRelationResponseCollection";
+          data: Array<{
+            __typename: "CategoryEntity";
+            id: string;
+            attributes: {
+              __typename: "Category";
+              name: string;
+              short: string;
+            };
+          }>;
+        };
         metadata: Array<
           | {
               __typename: "ComponentMetadataAudio";
@@ -897,6 +909,7 @@ export type GetLibraryItemQuery = {
                         id: string;
                         attributes: {
                           __typename: "Category";
+                          name: string;
                           short: string;
                         };
                       }>;
@@ -982,7 +995,11 @@ export type GetContentsQuery = {
           data: Array<{
             __typename: "CategoryEntity";
             id: string;
-            attributes: { __typename: "Category"; short: string };
+            attributes: {
+              __typename: "Category";
+              name: string;
+              short: string;
+            };
           }>;
         };
         type: {

src/pages/library/index.tsx

@@ -56,7 +56,7 @@ export default function Library(props: LibraryProps): JSX.Element {
 
   useEffect(() => {
     setSortedItem(sortBy(sortingMethod, filteredItems, currencies));
-  }, [filteredItems, sortingMethod]);
+  }, [currencies, filteredItems, sortingMethod]);
 
   useEffect(() => {
     setGroups(getGroups(langui, groupingMethod, sortedItems));
@@ -163,7 +163,37 @@ function getGroups(
 ): GroupLibraryItems {
   switch (groupByType) {
     case 0:
-      return new Map();
+      const typeGroup = new Map();
+      typeGroup.set("Drakengard 1", []);
+      typeGroup.set("Drakengard 1.3", []);
+      typeGroup.set("Drakengard 2", []);
+      typeGroup.set("Drakengard 3", []);
+      typeGroup.set("Drakengard 4", []);
+      typeGroup.set("NieR Gestalt", []);
+      typeGroup.set("NieR Replicant", []);
+      typeGroup.set("NieR Replicant ver.1.22474487139...", []);
+      typeGroup.set("NieR:Automata", []);
+      typeGroup.set("NieR Re[in]carnation", []);
+      typeGroup.set("SINoALICE", []);
+      typeGroup.set("Voice of Cards", []);
+      typeGroup.set("Final Fantasy XIV", []);
+      typeGroup.set("Thou Shalt Not Die", []);
+      typeGroup.set("Bakuken", []);
+      typeGroup.set("YoRHa", []);
+      typeGroup.set("YoRHa Boys", []);
+      typeGroup.set("No category", []);
+
+      items.map((item) => {
+        if (item.attributes.categories.data.length === 0) {
+          typeGroup.get("No category")?.push(item);
+        } else {
+          item.attributes.categories.data.map((category) => {
+            typeGroup.get(category.attributes.name)?.push(item);
+          });
+        }
+      });
+
+      return typeGroup;
 
     case 1:
       const groupType: GroupLibraryItems = new Map();