2022-09-11 19:37:24 +05:30
|
|
|
// external
|
2022-10-30 19:18:12 -04:00
|
|
|
import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next'
|
|
|
|
|
import { useRouter } from 'next/router'
|
2022-09-11 19:37:24 +05:30
|
|
|
// local
|
2022-10-30 19:18:12 -04:00
|
|
|
import Meta from '../../../components/Meta/Meta'
|
|
|
|
|
import Layout from '../../../layouts/Layout'
|
|
|
|
|
import title from '../../../utils/fetchers/title'
|
2022-09-11 19:37:24 +05:30
|
|
|
// components
|
2022-10-30 19:18:12 -04:00
|
|
|
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'
|
2022-09-11 19:37:24 +05:30
|
|
|
// misc
|
2022-10-30 19:18:12 -04:00
|
|
|
import Title from '../../../interfaces/shared/title'
|
|
|
|
|
import { AppError } from '../../../interfaces/shared/error'
|
2022-09-11 19:37:24 +05:30
|
|
|
// styles
|
2022-10-30 19:18:12 -04:00
|
|
|
import styles from '../../../styles/modules/pages/title/title.module.scss'
|
|
|
|
|
import Head from 'next/head'
|
2022-10-31 17:37:36 -04:00
|
|
|
import { getProxiedIMDbImgUrl } from '../../../utils/helpers'
|
2022-09-11 19:37:24 +05:30
|
|
|
|
2022-10-30 19:18:12 -04:00
|
|
|
type Props = { data: Title; error: null } | { error: AppError; data: null }
|
2022-09-11 19:37:24 +05:30
|
|
|
|
|
|
|
|
// TO-DO: make a wrapper page component to display errors, if present in props
|
|
|
|
|
const TitleInfo = ({ data, error }: Props) => {
|
2022-10-30 19:18:12 -04:00
|
|
|
const router = useRouter()
|
2022-09-11 19:37:24 +05:30
|
|
|
|
|
|
|
|
if (error)
|
2022-10-30 19:18:12 -04:00
|
|
|
return <ErrorInfo message={error.message} statusCode={error.statusCode} />
|
2022-09-11 19:37:24 +05:30
|
|
|
|
|
|
|
|
const info = {
|
|
|
|
|
meta: data.meta,
|
|
|
|
|
keywords: data.keywords,
|
|
|
|
|
details: data.details,
|
|
|
|
|
boxOffice: data.boxOffice,
|
|
|
|
|
technicalSpecs: data.technicalSpecs,
|
|
|
|
|
accolades: data.accolades,
|
2022-10-30 19:18:12 -04:00
|
|
|
}
|
2022-09-11 19:37:24 +05:30
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Meta
|
|
|
|
|
title={`${data.basic.title} (${
|
|
|
|
|
data.basic.releaseYear?.start || data.basic.type.name
|
|
|
|
|
})`}
|
|
|
|
|
description={data.basic.plot || undefined}
|
|
|
|
|
/>
|
2022-10-30 19:18:12 -04:00
|
|
|
<Head>
|
|
|
|
|
<meta
|
|
|
|
|
title="og:image"
|
2022-10-31 17:37:36 -04:00
|
|
|
content={
|
|
|
|
|
data.basic.poster?.url
|
|
|
|
|
? getProxiedIMDbImgUrl(data.basic.poster?.url)
|
|
|
|
|
: '/icon-512.png'
|
|
|
|
|
}
|
2022-10-30 19:18:12 -04:00
|
|
|
/>
|
|
|
|
|
</Head>
|
2022-09-11 19:37:24 +05:30
|
|
|
<Layout className={styles.title}>
|
|
|
|
|
<Basic data={data.basic} className={styles.basic} />
|
|
|
|
|
<Media className={styles.media} media={data.media} router={router} />
|
|
|
|
|
<Cast className={styles.cast} cast={data.cast} />
|
|
|
|
|
<div className={styles.textarea}>
|
|
|
|
|
<DidYouKnow data={data.didYouKnow} />
|
|
|
|
|
<Reviews reviews={data.reviews} router={router} />
|
|
|
|
|
</div>
|
|
|
|
|
<Info className={styles.infoarea} info={info} router={router} />
|
|
|
|
|
<MoreLikeThis className={styles.related} data={data.moreLikeThis} />
|
|
|
|
|
</Layout>
|
|
|
|
|
</>
|
2022-10-30 19:18:12 -04:00
|
|
|
)
|
|
|
|
|
}
|
2022-09-11 19:37:24 +05:30
|
|
|
|
|
|
|
|
// TO-DO: make a getServerSideProps wrapper for handling errors
|
2022-10-30 19:18:12 -04:00
|
|
|
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
|
|
|
|
const titleId = ctx.params!.titleId as string
|
2022-09-11 19:37:24 +05:30
|
|
|
|
|
|
|
|
try {
|
2022-10-30 19:18:12 -04:00
|
|
|
const data = await title(titleId)
|
2022-09-11 19:37:24 +05:30
|
|
|
|
2022-10-30 19:18:12 -04:00
|
|
|
return { props: { data, error: null } }
|
2022-09-11 19:37:24 +05:30
|
|
|
} catch (error: any) {
|
2022-10-30 19:18:12 -04:00
|
|
|
const { message, statusCode } = error
|
|
|
|
|
ctx.res.statusCode = statusCode
|
|
|
|
|
ctx.res.statusMessage = message
|
2022-09-11 19:37:24 +05:30
|
|
|
|
2022-10-30 19:18:12 -04:00
|
|
|
return { props: { error: { message, statusCode }, data: null } }
|
2022-09-11 19:37:24 +05:30
|
|
|
}
|
2022-10-30 19:18:12 -04:00
|
|
|
}
|
2022-09-11 19:37:24 +05:30
|
|
|
|
2022-10-30 19:18:12 -04:00
|
|
|
export default TitleInfo
|
2022-09-11 19:37:24 +05:30
|
|
|
|
|
|
|
|
// could've used getStaticProps instead of getServerSideProps, but meh.
|
|
|
|
|
/*
|
|
|
|
|
export const getStaticProps: GetStaticProps = async ctx => {
|
|
|
|
|
const titleId = ctx.params!.titleId as string;
|
|
|
|
|
try {
|
|
|
|
|
const data = await title(titleId);
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: { data, error: null },
|
|
|
|
|
revalidate: 60 * 60 * 24, // 1 day
|
|
|
|
|
};
|
|
|
|
|
} catch (error) {
|
|
|
|
|
// console.log(error);
|
|
|
|
|
|
|
|
|
|
return { notFound: true };
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const getStaticPaths: GetStaticPaths = () => {
|
|
|
|
|
return {
|
|
|
|
|
paths: [{ params: { titleId: 'tt0133093' } }],
|
|
|
|
|
fallback: 'blocking',
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
*/
|
