feat(frontend): add header styling to movie/tv recommendation and similar list views

src/components/Common/Header/index.tsx

@@ -2,9 +2,14 @@ import React from 'react';
 
 interface HeaderProps {
   extraMargin?: number;
+  subtext?: string;
 }
 
-const Header: React.FC<HeaderProps> = ({ children, extraMargin = 0 }) => {
+const Header: React.FC<HeaderProps> = ({
+  children,
+  extraMargin = 0,
+  subtext,
+}) => {
   return (
     <div className="md:flex md:items-center md:justify-between mt-8 mb-8">
       <div className={`flex-1 min-w-0 mx-${extraMargin}`}>
@@ -13,6 +18,7 @@ const Header: React.FC<HeaderProps> = ({ children, extraMargin = 0 }) => {
             {children}
           </span>
         </h2>
+        {subtext && <div className="text-cool-gray-400 mt-2">{subtext}</div>}
       </div>
     </div>
   );

src/components/MovieDetails/MovieRecommendations.tsx

@@ -1,8 +1,17 @@
-import React from 'react';
-import { useSWRInfinite } from 'swr';
-import { MovieResult } from '../../../server/models/Search';
+import React, { useContext } from 'react';
+import useSWR, { useSWRInfinite } from 'swr';
+import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { useRouter } from 'next/router';
+import Header from '../Common/Header';
+import type { MovieDetails } from '../../../server/models/Movie';
+import { LanguageContext } from '../../context/LanguageContext';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+const messages = defineMessages({
+  recommendations: 'Recommendations',
+  recommendationssubtext: 'If you liked {title}, you might also like...',
+});
 
 interface SearchResult {
   page: number;
@@ -12,7 +21,12 @@ interface SearchResult {
 }
 
 const MovieRecommendations: React.FC = () => {
+  const intl = useIntl();
   const router = useRouter();
+  const { locale } = useContext(LanguageContext);
+  const { data: movieData, error: movieError } = useSWR<MovieDetails>(
+    `/api/v1/movie/${router.query.movieId}?language=${locale}`
+  );
   const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
     (pageIndex: number, previousPageData: SearchResult | null) => {
       if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -52,13 +66,17 @@ const MovieRecommendations: React.FC = () => {
 
   return (
     <>
-      <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
-        <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
-            Recommendations
-          </h2>
-        </div>
-      </div>
+      <Header
+        subtext={
+          movieData && !movieError
+            ? intl.formatMessage(messages.recommendationssubtext, {
+                title: movieData.title,
+              })
+            : ''
+        }
+      >
+        <FormattedMessage {...messages.recommendations} />
+      </Header>
       <ListView
         items={titles}
         isEmpty={isEmpty}

src/components/MovieDetails/MovieSimilar.tsx

@@ -1,8 +1,17 @@
-import React from 'react';
-import { useSWRInfinite } from 'swr';
-import { MovieResult } from '../../../server/models/Search';
+import React, { useContext } from 'react';
+import useSWR, { useSWRInfinite } from 'swr';
+import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { useRouter } from 'next/router';
+import Header from '../Common/Header';
+import { LanguageContext } from '../../context/LanguageContext';
+import type { MovieDetails } from '../../../server/models/Movie';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+const messages = defineMessages({
+  similar: 'Similar Titles',
+  similarsubtext: 'Other movies similar to {title}',
+});
 
 interface SearchResult {
   page: number;
@@ -13,6 +22,11 @@ interface SearchResult {
 
 const MovieSimilar: React.FC = () => {
   const router = useRouter();
+  const intl = useIntl();
+  const { locale } = useContext(LanguageContext);
+  const { data: movieData, error: movieError } = useSWR<MovieDetails>(
+    `/api/v1/movie/${router.query.movieId}?language=${locale}`
+  );
   const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
     (pageIndex: number, previousPageData: SearchResult | null) => {
       if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -52,13 +66,17 @@ const MovieSimilar: React.FC = () => {
 
   return (
     <>
-      <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
-        <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
-            Similar Titles
-          </h2>
-        </div>
-      </div>
+      <Header
+        subtext={
+          movieData && !movieError
+            ? intl.formatMessage(messages.similarsubtext, {
+                title: movieData.title,
+              })
+            : undefined
+        }
+      >
+        <FormattedMessage {...messages.similar} />
+      </Header>
       <ListView
         items={titles}
         isEmpty={isEmpty}

src/components/TvDetails/TvRecommendations.tsx

@@ -1,9 +1,17 @@
 import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import useSWR, { useSWRInfinite } from 'swr';
 import type { TvResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { useRouter } from 'next/router';
 import { LanguageContext } from '../../context/LanguageContext';
+import Header from '../Common/Header';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { TvDetails } from '../../../server/models/Tv';
+
+const messages = defineMessages({
+  recommendations: 'Recommendations',
+  recommendationssubtext: 'If you liked {title}, you might also like...',
+});
 
 interface SearchResult {
   page: number;
@@ -13,8 +21,12 @@ interface SearchResult {
 }
 
 const TvRecommendations: React.FC = () => {
-  const { locale } = useContext(LanguageContext);
   const router = useRouter();
+  const intl = useIntl();
+  const { locale } = useContext(LanguageContext);
+  const { data: tvData, error: tvError } = useSWR<TvDetails>(
+    `/api/v1/tv/${router.query.tvId}?language=${locale}`
+  );
   const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
     (pageIndex: number, previousPageData: SearchResult | null) => {
       if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -51,13 +63,17 @@ const TvRecommendations: React.FC = () => {
 
   return (
     <>
-      <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
-        <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
-            Recommendations
-          </h2>
-        </div>
-      </div>
+      <Header
+        subtext={
+          tvData && !tvError
+            ? intl.formatMessage(messages.recommendationssubtext, {
+                title: tvData.name,
+              })
+            : ''
+        }
+      >
+        <FormattedMessage {...messages.recommendations} />
+      </Header>
       <ListView
         items={titles}
         isEmpty={isEmpty}

src/components/TvDetails/TvSimilar.tsx

@@ -1,9 +1,17 @@
 import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
-import { MovieResult } from '../../../server/models/Search';
+import useSWR, { useSWRInfinite } from 'swr';
+import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { useRouter } from 'next/router';
 import { LanguageContext } from '../../context/LanguageContext';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import type { TvDetails } from '../../../server/models/Tv';
+import Header from '../Common/Header';
+
+const messages = defineMessages({
+  similar: 'Similar Series',
+  similarsubtext: 'Other series similar to {title}',
+});
 
 interface SearchResult {
   page: number;
@@ -14,7 +22,11 @@ interface SearchResult {
 
 const TvSimilar: React.FC = () => {
   const router = useRouter();
+  const intl = useIntl();
   const { locale } = useContext(LanguageContext);
+  const { data: tvData, error: tvError } = useSWR<TvDetails>(
+    `/api/v1/tv/${router.query.tvId}?language=${locale}`
+  );
   const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
     (pageIndex: number, previousPageData: SearchResult | null) => {
       if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -54,13 +66,17 @@ const TvSimilar: React.FC = () => {
 
   return (
     <>
-      <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
-        <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
-            Similar Series
-          </h2>
-        </div>
-      </div>
+      <Header
+        subtext={
+          tvData && !tvError
+            ? intl.formatMessage(messages.similarsubtext, {
+                title: tvData.name,
+              })
+            : undefined
+        }
+      >
+        <FormattedMessage {...messages.similar} />
+      </Header>
       <ListView
         items={titles}
         isEmpty={isEmpty}

src/i18n/locale/en.json

@@ -8,6 +8,7 @@
   "components.Discover.recentrequests": "Recent Requests",
   "components.Discover.trending": "Trending",
   "components.Discover.upcoming": "Upcoming Movies",
+  "components.Discover.upcomingmovies": "Upcoming Movies",
   "components.Layout.LanguagePicker.changelanguage": "Change Language",
   "components.Layout.SearchInput.searchPlaceholder": "Search Movies & TV",
   "components.Layout.Sidebar.dashboard": "Discover",
@@ -23,11 +24,13 @@
   "components.MovieDetails.overviewunavailable": "Overview unavailable",
   "components.MovieDetails.pending": "Pending",
   "components.MovieDetails.recommendations": "Recommendations",
+  "components.MovieDetails.recommendationssubtext": "If you liked {title}, you might also like...",
   "components.MovieDetails.releasedate": "Release Date",
   "components.MovieDetails.request": "Request",
   "components.MovieDetails.revenue": "Revenue",
   "components.MovieDetails.runtime": "{minutes} minutes",
   "components.MovieDetails.similar": "Similar Titles",
+  "components.MovieDetails.similarsubtext": "Other movies similar to {title}",
   "components.MovieDetails.status": "Status",
   "components.MovieDetails.unavailable": "Unavailable",
   "components.MovieDetails.userrating": "User Rating",
@@ -71,9 +74,11 @@
   "components.TvDetails.overviewunavailable": "Overview unavailable",
   "components.TvDetails.pending": "Pending",
   "components.TvDetails.recommendations": "Recommendations",
+  "components.TvDetails.recommendationssubtext": "If you liked {title}, you might also like...",
   "components.TvDetails.request": "Request",
   "components.TvDetails.requestmore": "Request More",
   "components.TvDetails.similar": "Similar Series",
+  "components.TvDetails.similarsubtext": "Other series similar to {title}",
   "components.TvDetails.status": "Status",
   "components.TvDetails.unavailable": "Unavailable",
   "components.TvDetails.userrating": "User Rating",

src/i18n/locale/ja.json

@@ -8,6 +8,7 @@
   "components.Discover.recentrequests": "最近のリクエスト",
   "components.Discover.trending": "",
   "components.Discover.upcoming": "",
+  "components.Discover.upcomingmovies": "",
   "components.Layout.LanguagePicker.changelanguage": "言語",
   "components.Layout.SearchInput.searchPlaceholder": "作品名で検索",
   "components.Layout.Sidebar.dashboard": "ホーム",
@@ -23,11 +24,13 @@
   "components.MovieDetails.overviewunavailable": "",
   "components.MovieDetails.pending": "リクエスト中",
   "components.MovieDetails.recommendations": "オススメの作品",
+  "components.MovieDetails.recommendationssubtext": "",
   "components.MovieDetails.releasedate": "公開日",
   "components.MovieDetails.request": "リクエストする",
   "components.MovieDetails.revenue": "製作費",
   "components.MovieDetails.runtime": "{minutes}分",
   "components.MovieDetails.similar": "関連作品",
+  "components.MovieDetails.similarsubtext": "",
   "components.MovieDetails.status": "状態",
   "components.MovieDetails.unavailable": "",
   "components.MovieDetails.userrating": "ユーザー評価",
@@ -71,9 +74,11 @@
   "components.TvDetails.overviewunavailable": "",
   "components.TvDetails.pending": "",
   "components.TvDetails.recommendations": "",
+  "components.TvDetails.recommendationssubtext": "",
   "components.TvDetails.request": "",
   "components.TvDetails.requestmore": "",
   "components.TvDetails.similar": "",
+  "components.TvDetails.similarsubtext": "",
   "components.TvDetails.status": "",
   "components.TvDetails.unavailable": "",
   "components.TvDetails.userrating": "",