diff --git a/src/components/Library/LibraryItemsPreview.tsx b/src/components/Library/LibraryItemsPreview.tsx index 718a625..a8cc035 100644 --- a/src/components/Library/LibraryItemsPreview.tsx +++ b/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 ? ( diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index a671a29..5ec508c 100644 --- a/src/graphql/operation.graphql +++ b/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 } } diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index ea1f9ae..c9d8ee3 100644 --- a/src/graphql/operations-types.ts +++ b/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: { diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index cba6882..5300af0 100644 --- a/src/pages/library/index.tsx +++ b/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();