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

84 lines
3.4 KiB
TypeScript
Raw Normal View History

2022-07-07 23:42:38 +00:00
import { GetStaticProps } from "next";
import { useMemo } from "react";
2022-07-23 08:24:13 +00:00
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
import { PanelHeader } from "components/PanelComponents/PanelHeader";
import { SubPanel } from "components/Panels/SubPanel";
2022-05-22 14:24:16 +00:00
import { Icon } from "components/Ico";
2022-07-18 00:04:13 +00:00
import { getReadySdk } from "graphql/sdk";
import { GetChroniclesChaptersQuery } from "graphql/generated";
import { filterHasAttributes } from "helpers/others";
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";
import { useLocalData } from "contexts/LocalDataContext";
/*
*
* 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 => {
const { langui } = useLocalData();
2022-06-22 22:39:59 +00:00
const subPanel = useMemo(
() => (
<SubPanel>
<PanelHeader
icon={Icon.WatchLater}
title={langui.chronicles}
description={langui.chronicles_description}
/>
<HorizontalLine />
2022-07-18 00:04:13 +00:00
<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) }}
/>
)
)}
2022-07-18 00:04:13 +00:00
</div>
2022-06-22 22:39:59 +00:00
</SubPanel>
),
2022-07-18 00:04:13 +00:00
[chapters, langui]
);
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,
};
};