accords-library.com/src/pages/chronicles/index.tsx

77 lines
3.1 KiB
TypeScript
Raw Normal View History

2022-07-07 23:42:38 +00:00
import { GetStaticProps } from "next";
2022-07-23 08:24:13 +00:00
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
import { PanelHeader } from "components/PanelComponents/PanelHeader";
2022-10-29 14:22:49 +00:00
import { SubPanel } from "components/Containers/SubPanel";
2022-07-18 00:04:13 +00:00
import { getReadySdk } from "graphql/sdk";
import { GetChroniclesChaptersQuery } from "graphql/generated";
import { filterHasAttributes } from "helpers/asserts";
2022-07-18 00:04:13 +00:00
import { prettySlug } from "helpers/formatters";
2022-07-23 08:24:13 +00:00
import { getOpenGraph } from "helpers/openGraph";
2022-08-15 22:17:26 +00:00
import { TranslatedChroniclesList } from "components/Chronicles/ChroniclesList";
import { HorizontalLine } from "components/HorizontalLine";
2022-08-27 15:03:05 +00:00
import { getLangui } from "graphql/fetchLocalData";
2023-01-30 17:29:47 +00:00
import { useFormat } from "hooks/useFormat";
/*
*
* PAGE
*/
2022-08-27 15:03:05 +00:00
interface Props extends AppLayoutRequired {
chapters: NonNullable<GetChroniclesChaptersQuery["chroniclesChapters"]>["data"];
2022-07-18 00:04:13 +00:00
}
2022-08-27 15:03:05 +00:00
const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
2023-01-30 17:29:47 +00:00
const { format } = useFormat();
const subPanel = (
<SubPanel>
<PanelHeader
icon="schedule"
2023-01-30 17:29:47 +00:00
title={format("chronicles")}
description={format("chronicles_description")}
/>
<HorizontalLine />
<div className="grid gap-16">
{filterHasAttributes(chapters, ["attributes.chronicles", "id"] as const).map((chapter) => (
<TranslatedChroniclesList
key={chapter.id}
chronicles={chapter.attributes.chronicles.data}
translations={filterHasAttributes(chapter.attributes.titles, [
"language.data.attributes.code",
] as const).map((translation) => ({
title: translation.title,
language: translation.language.data.attributes.code,
}))}
fallback={{ title: prettySlug(chapter.attributes.slug) }}
/>
))}
</div>
</SubPanel>
);
2022-06-22 22:39:59 +00:00
2022-08-27 15:03:05 +00:00
return <AppLayout subPanel={subPanel} {...otherProps} />;
};
export default Chronicles;
/*
*
* NEXT DATA FETCHING
*/
export const getStaticProps: GetStaticProps = async (context) => {
2022-07-18 00:04:13 +00:00
const sdk = getReadySdk();
2022-08-27 15:03:05 +00:00
const langui = getLangui(context.locale);
2022-07-18 00:04:13 +00:00
const chronicles = await sdk.getChroniclesChapters();
if (!chronicles.chroniclesChapters?.data) return { notFound: true };
2022-08-27 15:03:05 +00:00
2022-04-03 08:34:21 +00:00
const props: Props = {
2022-07-18 00:04:13 +00:00
chapters: chronicles.chroniclesChapters.data,
2022-08-27 15:03:05 +00:00
openGraph: getOpenGraph(langui, langui.chronicles ?? "Chronicles"),
};
return {
props: props,
};
};