60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
import { GetStaticProps } from "next";
|
|
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
|
|
import { PanelHeader } from "components/PanelComponents/PanelHeader";
|
|
import { SubPanel } from "components/Containers/SubPanel";
|
|
import { getReadySdk } from "graphql/sdk";
|
|
import { GetChroniclesChaptersQuery } from "graphql/generated";
|
|
import { getOpenGraph } from "helpers/openGraph";
|
|
import { HorizontalLine } from "components/HorizontalLine";
|
|
import { useFormat } from "hooks/useFormat";
|
|
import { getFormat } from "helpers/i18n";
|
|
import { ChroniclesLists } from "components/Chronicles/ChroniclesLists";
|
|
|
|
/*
|
|
* ╭────────╮
|
|
* ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
|
|
*/
|
|
|
|
interface Props extends AppLayoutRequired {
|
|
chapters: NonNullable<GetChroniclesChaptersQuery["chroniclesChapters"]>["data"];
|
|
}
|
|
|
|
const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
|
|
const { format } = useFormat();
|
|
|
|
const subPanel = (
|
|
<SubPanel>
|
|
<PanelHeader
|
|
icon="schedule"
|
|
title={format("chronicles")}
|
|
description={format("chronicles_description")}
|
|
/>
|
|
<HorizontalLine />
|
|
<ChroniclesLists chapters={chapters} />
|
|
</SubPanel>
|
|
);
|
|
|
|
return <AppLayout subPanel={subPanel} {...otherProps} />;
|
|
};
|
|
export default Chronicles;
|
|
|
|
/*
|
|
* ╭──────────────────────╮
|
|
* ───────────────────────────────────╯ NEXT DATA FETCHING ╰──────────────────────────────────────
|
|
*/
|
|
|
|
export const getStaticProps: GetStaticProps = async (context) => {
|
|
const sdk = getReadySdk();
|
|
const { format } = getFormat(context.locale);
|
|
const chronicles = await sdk.getChroniclesChapters();
|
|
if (!chronicles.chroniclesChapters?.data) return { notFound: true };
|
|
|
|
const props: Props = {
|
|
chapters: chronicles.chroniclesChapters.data,
|
|
openGraph: getOpenGraph(format, format("chronicles")),
|
|
};
|
|
return {
|
|
props: props,
|
|
};
|
|
};
|