Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added more grouping options for Library and Contents #9

Merged
DrMint merged 6 commits from develop into main 2022-03-11 00:43:42 +00:00
Conversation 0 Commits 6 Files Changed 18 +122 -12
2 changed files with 122 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 35c889d389 - Show all commits

123
src/pages/contents/index.tsx
View File

@ -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 {
const { langui } = props;
type GroupContentItems = Map<string, GetContentsQuery["contents"]["data"]>;
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))]">
{props.contents.map((item) => (
<LibraryContentPreview key={item.id} item={item.attributes} />
))}
</div>
{[...groups].map(([name, items]) => (
<>
{items.length > 0 && (
<>
{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;
}
}

11
src/pages/library/index.tsx
View File

@ -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) => (