feat(frontend): add full cast page for movies and series

package.json

@@ -9,7 +9,7 @@
     "build": "yarn build:next && yarn build:server",
     "lint": "eslint \"./server/**/*.{ts,tsx}\" \"./src/**/*.{ts,tsx}\"",
     "start": "NODE_ENV=production node dist/index.js",
-    "i18n:extract": "extract-messages -l=en,ja,fr,nb_NO,de,ru,nl -o src/i18n/locale -d en --flat true --overwriteDefault false './src/**/!(*.test).{ts,tsx}'",
+    "i18n:extract": "extract-messages -l=en -o src/i18n/locale -d en --flat true --overwriteDefault false './src/**/!(*.test).{ts,tsx}'",
     "migration:generate": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:generate",
     "migration:run": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:run",
     "format": "prettier --write ."

src/components/Common/Header/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 interface HeaderProps {
   extraMargin?: number;
-  subtext?: string;
+  subtext?: React.ReactNode;
 }
 
 const Header: React.FC<HeaderProps> = ({

src/components/MovieDetails/MovieCast/index.tsx

@@ -0,0 +1,66 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { useContext } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import { MovieDetails } from '../../../../server/models/Movie';
+import { LanguageContext } from '../../../context/LanguageContext';
+import Error from '../../../pages/_error';
+import Header from '../../Common/Header';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import PersonCard from '../../PersonCard';
+
+const messages = defineMessages({
+  fullcast: 'Full Cast',
+});
+
+const MovieCast: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+  const { locale } = useContext(LanguageContext);
+  const { data, error } = useSWR<MovieDetails>(
+    `/api/v1/movie/${router.query.movieId}?language=${locale}`
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={404} />;
+  }
+
+  return (
+    <>
+      <Header
+        subtext={
+          <Link href={`/movie/${data.id}`}>
+            <a className="hover:underline">{data.title}</a>
+          </Link>
+        }
+      >
+        {intl.formatMessage(messages.fullcast)}
+      </Header>
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
+        {data?.credits.cast.map((person) => {
+          return (
+            <li
+              key={person.id}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <PersonCard
+                name={person.name}
+                personId={person.id}
+                subName={person.character}
+                profilePath={person.profilePath}
+                canExpand
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+};
+
+export default MovieCast;

src/components/PersonDetails/index.tsx

@@ -56,7 +56,7 @@ const PersonDetails: React.FC = () => {
 
   return (
     <>
-      <div className="flex mt-8 mb-8 flex-col md:flex-row items-center">
+      <div className="flex mt-8 mb-8 flex-col md:flex-row items-center md:items-start">
         {data.profilePath && (
           <div
             style={{

src/components/TvDetails/TvCast/index.tsx

@@ -0,0 +1,66 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { useContext } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import type { TvDetails } from '../../../../server/models/Tv';
+import { LanguageContext } from '../../../context/LanguageContext';
+import Error from '../../../pages/_error';
+import Header from '../../Common/Header';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import PersonCard from '../../PersonCard';
+
+const messages = defineMessages({
+  fullseriescast: 'Full Series Cast',
+});
+
+const TvCast: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+  const { locale } = useContext(LanguageContext);
+  const { data, error } = useSWR<TvDetails>(
+    `/api/v1/tv/${router.query.tvId}?language=${locale}`
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={404} />;
+  }
+
+  return (
+    <>
+      <Header
+        subtext={
+          <Link href={`/tv/${data.id}`}>
+            <a className="hover:underline">{data.name}</a>
+          </Link>
+        }
+      >
+        {intl.formatMessage(messages.fullseriescast)}
+      </Header>
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
+        {data?.credits.cast.map((person) => {
+          return (
+            <li
+              key={person.id}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <PersonCard
+                name={person.name}
+                personId={person.id}
+                subName={person.character}
+                profilePath={person.profilePath}
+                canExpand
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+};
+
+export default TvCast;

src/i18n/locale/en.json

@@ -18,6 +18,7 @@
   "components.Layout.UserDropdown.signout": "Sign Out",
   "components.Layout.alphawarning": "This is ALPHA software. Almost everything is bound to be nearly broken and/or unstable. Please report issues to the Overseerr GitHub!",
   "components.Login.signinplex": "Sign in to continue",
+  "components.MovieDetails.MovieCast.fullcast": "Full Cast",
   "components.MovieDetails.approve": "Approve",
   "components.MovieDetails.available": "Available",
   "components.MovieDetails.budget": "Budget",
@@ -224,6 +225,7 @@
   "components.Slider.noresults": "No Results",
   "components.TitleCard.movie": "Movie",
   "components.TitleCard.tvshow": "Series",
+  "components.TvDetails.TvCast.fullseriescast": "Full Series Cast",
   "components.TvDetails.approve": "Approve",
   "components.TvDetails.approverequests": "Approve {requestCount} {requestCount, plural, one {Request} other {Requests}}",
   "components.TvDetails.available": "Available",

src/pages/movie/[movieId]/cast.tsx

@@ -0,0 +1,9 @@
+import { NextPage } from 'next';
+import React from 'react';
+import MovieCast from '../../../components/MovieDetails/MovieCast';
+
+const MovieCastPage: NextPage = () => {
+  return <MovieCast />;
+};
+
+export default MovieCastPage;

src/pages/tv/[tvId]/cast.tsx

@@ -0,0 +1,9 @@
+import { NextPage } from 'next';
+import React from 'react';
+import TvCast from '../../../components/TvDetails/TvCast';
+
+const TvCastPage: NextPage = () => {
+  return <TvCast />;
+};
+
+export default TvCastPage;