2020-08-22 20:25:57 +00:00
|
|
|
import * as React from 'react';
|
|
|
|
|
|
|
|
|
|
import Head from 'next/head';
|
|
|
|
|
import Link from 'next/link';
|
|
|
|
|
|
|
|
|
|
import ListGroup from 'react-bootstrap/ListGroup';
|
|
|
|
|
import { Breadcrumb } from 'react-bootstrap';
|
|
|
|
|
import { useIntl } from 'react-intl';
|
|
|
|
|
import { FormattedMessage } from '../components/localization';
|
|
|
|
|
import { VideoOnDemandIndex } from '../util/datatypes/VideoOnDemandIdentifier';
|
|
|
|
|
import { getIndex } from '../util/api';
|
2021-01-04 16:31:36 +00:00
|
|
|
import { GetServerSideProps, NextPage } from 'next';
|
2020-08-22 20:25:57 +00:00
|
|
|
|
2021-01-04 16:31:36 +00:00
|
|
|
interface HomeProps {
|
|
|
|
|
index: VideoOnDemandIndex
|
|
|
|
|
}
|
2020-08-22 20:25:57 +00:00
|
|
|
|
2021-01-04 16:31:36 +00:00
|
|
|
export const getServerSideProps: GetServerSideProps<HomeProps> = async () => {
|
|
|
|
|
// Fetch VOD IDs and announcements
|
2020-08-22 20:25:57 +00:00
|
|
|
return {
|
|
|
|
|
props: {
|
2021-01-04 16:31:36 +00:00
|
|
|
index: await getIndex(),
|
2020-08-22 20:25:57 +00:00
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2021-01-04 16:31:36 +00:00
|
|
|
const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
|
2020-08-22 20:25:57 +00:00
|
|
|
const intl = useIntl();
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>
|
|
|
|
|
{intl.formatMessage({
|
|
|
|
|
id: 'App.title',
|
|
|
|
|
description: 'The full title of the website',
|
|
|
|
|
defaultMessage: 'Games Done Quick Instant Archive',
|
|
|
|
|
})}
|
|
|
|
|
</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
|
|
|
|
|
|
|
|
|
<Breadcrumb>
|
|
|
|
|
<Link passHref href="/">
|
|
|
|
|
<Breadcrumb.Item active>
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="Breadcrumb.homeTitle"
|
|
|
|
|
defaultMessage="GDQ Instant Archive"
|
|
|
|
|
description="Root node text in breadcrumb"
|
|
|
|
|
/>
|
|
|
|
|
</Breadcrumb.Item>
|
|
|
|
|
</Link>
|
|
|
|
|
</Breadcrumb>
|
|
|
|
|
|
|
|
|
|
<h1>
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="Home.introText1"
|
|
|
|
|
defaultMessage="Instant access to your favorite VODs of Games Done Quick!"
|
|
|
|
|
/>
|
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="Home.introText2"
|
|
|
|
|
defaultMessage="This website collects all the broadcasted runs and allows streaming and downloading them."
|
|
|
|
|
/>
|
|
|
|
|
</p>
|
|
|
|
|
|
2021-01-03 17:44:30 +00:00
|
|
|
{
|
2021-01-03 20:00:09 +00:00
|
|
|
announcements.map((text, id) => (
|
|
|
|
|
<p key={id}>
|
|
|
|
|
<b>Announcement:</b> {text}
|
2021-01-03 17:44:30 +00:00
|
|
|
</p>
|
|
|
|
|
))
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-22 20:25:57 +00:00
|
|
|
<ListGroup>
|
|
|
|
|
{ids.map(({ id, title }) => (
|
|
|
|
|
<Link key={id} passHref href="/[id]" as={`/${id}`}>
|
|
|
|
|
<ListGroup.Item action>
|
|
|
|
|
<h5>{title}</h5>
|
|
|
|
|
</ListGroup.Item>
|
|
|
|
|
</Link>
|
|
|
|
|
))}
|
|
|
|
|
</ListGroup>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2021-01-04 16:31:36 +00:00
|
|
|
|
|
|
|
|
export default Home;
|
