Added grouping for Contents

src/pages/contents/index.tsx

@@ -8,15 +8,30 @@ import { getContents } from "graphql/operations";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import AppLayout from "components/AppLayout";
 import LibraryContentPreview from "components/Library/LibraryContentPreview";
-import { prettyinlineTitle } from "queries/helpers";
+import { prettyinlineTitle, prettySlug } from "queries/helpers";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import Select from "components/Select";
+import { useEffect, useState } from "react";
 
-interface LibraryProps extends AppStaticProps {
+interface ContentsProps extends AppStaticProps {
   contents: GetContentsQuery["contents"]["data"];
 }
 
-export default function Library(props: LibraryProps): JSX.Element {
+type GroupContentItems = Map<string, GetContentsQuery["contents"]["data"]>;
-  const { langui } = props;
+
+export default function Contents(props: ContentsProps): JSX.Element {
+  const { langui, contents } = props;
+
+  const [groupingMethod, setGroupingMethod] = useState<number>(-1);
+
+  const [groups, setGroups] = useState<GroupContentItems>(
+    getGroups(groupingMethod, contents)
+  );
+
+  useEffect(() => {
+    setGroups(getGroups(groupingMethod, contents));
+  }, [langui, groupingMethod, contents]);
+
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -24,15 +39,45 @@ export default function Library(props: LibraryProps): JSX.Element {
         title={langui.contents}
         description={langui.contents_description}
       />
+
+      <div className="flex flex-row gap-2 place-items-center">
+        <p className="flex-shrink-0">{langui.group_by}:</p>
+        <Select
+          className="w-full"
+          options={[langui.category, langui.type]}
+          state={groupingMethod}
+          setState={setGroupingMethod}
+          allowEmpty
+        />
+      </div>
     </SubPanel>
   );
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
-      <div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
+      {[...groups].map(([name, items]) => (
-        {props.contents.map((item) => (
+        <>
-          <LibraryContentPreview key={item.id} item={item.attributes} />
+          {items.length > 0 && (
-        ))}
+            <>
-      </div>
+              {name && (
+                <h2
+                  key={"h2" + name}
+                  className="text-2xl pb-2 pt-10 first-of-type:pt-0"
+                >
+                  {name}
+                </h2>
+              )}
+              <div
+                key={"items" + name}
+                className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
+              >
+                {items.map((item) => (
+                  <LibraryContentPreview key={item.id} item={item.attributes} />
+                ))}
+              </div>
+            </>
+          )}
+        </>
+      ))}
     </ContentPanel>
   );
   return (
@@ -72,7 +117,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
     return titleA.localeCompare(titleB);
   });
 
-  const props: LibraryProps = {
+  const props: ContentsProps = {
     ...(await getAppStaticProps(context)),
     contents: contents,
   };
@@ -80,3 +125,61 @@ export const getStaticProps: GetStaticProps = async (context) => {
     props: props,
   };
 };
+
+function getGroups(
+  groupByType: number,
+  items: ContentsProps["contents"]
+): GroupContentItems {
+  switch (groupByType) {
+    case 0:
+      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: GroupContentItems = new Map();
+      items.map((item) => {
+        const type =
+          item.attributes.type.data.attributes.titles.length > 0
+            ? item.attributes.type.data.attributes.titles[0].title
+            : prettySlug(item.attributes.type.data.attributes.slug);
+
+        if (!groupType.has(type)) groupType.set(type, []);
+        groupType.get(type)?.push(item);
+      });
+
+      return groupType;
+
+    default:
+      const groupDefault: GroupContentItems = new Map();
+      groupDefault.set("", items);
+      return groupDefault;
+  }
+}

src/pages/library/index.tsx

@@ -113,9 +113,16 @@ export default function Library(props: LibraryProps): JSX.Element {
         <>
           {items.length > 0 && (
             <>
-              <h2 className="text-2xl pb-2 pt-10 first-of-type:pt-0">{name}</h2>
+              {name && (
+                <h2
+                  key={"h2" + name}
+                  className="text-2xl pb-2 pt-10 first-of-type:pt-0"
+                >
+                  {name}
+                </h2>
+              )}
               <div
-                key={name}
+                key={"items" + name}
                 className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"
               >
                 {items.map((item) => (