|
|
@@ -1,33 +1,34 @@
|
|
|
// external
|
|
|
-import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next';
|
|
|
-import { useRouter } from 'next/router';
|
|
|
+import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next'
|
|
|
+import { useRouter } from 'next/router'
|
|
|
// local
|
|
|
-import Meta from '../../../components/Meta/Meta';
|
|
|
-import Layout from '../../../layouts/Layout';
|
|
|
-import title from '../../../utils/fetchers/title';
|
|
|
+import Meta from '../../../components/Meta/Meta'
|
|
|
+import Layout from '../../../layouts/Layout'
|
|
|
+import title from '../../../utils/fetchers/title'
|
|
|
// components
|
|
|
-import ErrorInfo from '../../../components/Error/ErrorInfo';
|
|
|
-import Basic from '../../../components/title/Basic';
|
|
|
-import Media from '../../../components/title/Media';
|
|
|
-import Cast from '../../../components/title/Cast';
|
|
|
-import DidYouKnow from '../../../components/title/DidYouKnow';
|
|
|
-import Info from '../../../components/title/Info';
|
|
|
-import Reviews from '../../../components/title/Reviews';
|
|
|
-import MoreLikeThis from '../../../components/title/MoreLikeThis';
|
|
|
+import ErrorInfo from '../../../components/Error/ErrorInfo'
|
|
|
+import Basic from '../../../components/title/Basic'
|
|
|
+import Media from '../../../components/title/Media'
|
|
|
+import Cast from '../../../components/title/Cast'
|
|
|
+import DidYouKnow from '../../../components/title/DidYouKnow'
|
|
|
+import Info from '../../../components/title/Info'
|
|
|
+import Reviews from '../../../components/title/Reviews'
|
|
|
+import MoreLikeThis from '../../../components/title/MoreLikeThis'
|
|
|
// misc
|
|
|
-import Title from '../../../interfaces/shared/title';
|
|
|
-import { AppError } from '../../../interfaces/shared/error';
|
|
|
+import Title from '../../../interfaces/shared/title'
|
|
|
+import { AppError } from '../../../interfaces/shared/error'
|
|
|
// styles
|
|
|
-import styles from '../../../styles/modules/pages/title/title.module.scss';
|
|
|
+import styles from '../../../styles/modules/pages/title/title.module.scss'
|
|
|
+import Head from 'next/head'
|
|
|
|
|
|
-type Props = { data: Title; error: null } | { error: AppError; data: null };
|
|
|
+type Props = { data: Title; error: null } | { error: AppError; data: null }
|
|
|
|
|
|
// TO-DO: make a wrapper page component to display errors, if present in props
|
|
|
const TitleInfo = ({ data, error }: Props) => {
|
|
|
- const router = useRouter();
|
|
|
+ const router = useRouter()
|
|
|
|
|
|
if (error)
|
|
|
- return <ErrorInfo message={error.message} statusCode={error.statusCode} />;
|
|
|
+ return <ErrorInfo message={error.message} statusCode={error.statusCode} />
|
|
|
|
|
|
const info = {
|
|
|
meta: data.meta,
|
|
|
@@ -36,7 +37,7 @@ const TitleInfo = ({ data, error }: Props) => {
|
|
|
boxOffice: data.boxOffice,
|
|
|
technicalSpecs: data.technicalSpecs,
|
|
|
accolades: data.accolades,
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
@@ -46,7 +47,12 @@ const TitleInfo = ({ data, error }: Props) => {
|
|
|
})`}
|
|
|
description={data.basic.plot || undefined}
|
|
|
/>
|
|
|
-
|
|
|
+ <Head>
|
|
|
+ <meta
|
|
|
+ title="og:image"
|
|
|
+ content={data.media.images.images[0].url || '/icon-512.png'}
|
|
|
+ />
|
|
|
+ </Head>
|
|
|
<Layout className={styles.title}>
|
|
|
<Basic data={data.basic} className={styles.basic} />
|
|
|
<Media className={styles.media} media={data.media} router={router} />
|
|
|
@@ -59,27 +65,27 @@ const TitleInfo = ({ data, error }: Props) => {
|
|
|
<MoreLikeThis className={styles.related} data={data.moreLikeThis} />
|
|
|
</Layout>
|
|
|
</>
|
|
|
- );
|
|
|
-};
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
// TO-DO: make a getServerSideProps wrapper for handling errors
|
|
|
-export const getServerSideProps: GetServerSideProps = async ctx => {
|
|
|
- const titleId = ctx.params!.titleId as string;
|
|
|
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
|
|
+ const titleId = ctx.params!.titleId as string
|
|
|
|
|
|
try {
|
|
|
- const data = await title(titleId);
|
|
|
+ const data = await title(titleId)
|
|
|
|
|
|
- return { props: { data, error: null } };
|
|
|
+ return { props: { data, error: null } }
|
|
|
} catch (error: any) {
|
|
|
- const { message, statusCode } = error;
|
|
|
- ctx.res.statusCode = statusCode;
|
|
|
- ctx.res.statusMessage = message;
|
|
|
+ const { message, statusCode } = error
|
|
|
+ ctx.res.statusCode = statusCode
|
|
|
+ ctx.res.statusMessage = message
|
|
|
|
|
|
- return { props: { error: { message, statusCode }, data: null } };
|
|
|
+ return { props: { error: { message, statusCode }, data: null } }
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
|
|
|
-export default TitleInfo;
|
|
|
+export default TitleInfo
|
|
|
|
|
|
// could've used getStaticProps instead of getServerSideProps, but meh.
|
|
|
/*
|
httpjamesm