diff --git a/src/components/Common/Header/index.tsx b/src/components/Common/Header/index.tsx index fc33bec58..1c0ec55bf 100644 --- a/src/components/Common/Header/index.tsx +++ b/src/components/Common/Header/index.tsx @@ -2,9 +2,14 @@ import React from 'react'; interface HeaderProps { extraMargin?: number; + subtext?: string; } -const Header: React.FC = ({ children, extraMargin = 0 }) => { +const Header: React.FC = ({ + children, + extraMargin = 0, + subtext, +}) => { return (
@@ -13,6 +18,7 @@ const Header: React.FC = ({ children, extraMargin = 0 }) => { {children} + {subtext &&
{subtext}
}
); diff --git a/src/components/MovieDetails/MovieRecommendations.tsx b/src/components/MovieDetails/MovieRecommendations.tsx index 26147bbb6..4d920c23d 100644 --- a/src/components/MovieDetails/MovieRecommendations.tsx +++ b/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( + `/api/v1/movie/${router.query.movieId}?language=${locale}` + ); const { data, error, size, setSize } = useSWRInfinite( (pageIndex: number, previousPageData: SearchResult | null) => { if (previousPageData && pageIndex + 1 > previousPageData.totalPages) { @@ -52,13 +66,17 @@ const MovieRecommendations: React.FC = () => { return ( <> -
-
-

- Recommendations -

-
-
+
+ +
{ const router = useRouter(); + const intl = useIntl(); + const { locale } = useContext(LanguageContext); + const { data: movieData, error: movieError } = useSWR( + `/api/v1/movie/${router.query.movieId}?language=${locale}` + ); const { data, error, size, setSize } = useSWRInfinite( (pageIndex: number, previousPageData: SearchResult | null) => { if (previousPageData && pageIndex + 1 > previousPageData.totalPages) { @@ -52,13 +66,17 @@ const MovieSimilar: React.FC = () => { return ( <> -
-
-

- Similar Titles -

-
-
+
+ +
{ - const { locale } = useContext(LanguageContext); const router = useRouter(); + const intl = useIntl(); + const { locale } = useContext(LanguageContext); + const { data: tvData, error: tvError } = useSWR( + `/api/v1/tv/${router.query.tvId}?language=${locale}` + ); const { data, error, size, setSize } = useSWRInfinite( (pageIndex: number, previousPageData: SearchResult | null) => { if (previousPageData && pageIndex + 1 > previousPageData.totalPages) { @@ -51,13 +63,17 @@ const TvRecommendations: React.FC = () => { return ( <> -
-
-

- Recommendations -

-
-
+
+ +
{ const router = useRouter(); + const intl = useIntl(); const { locale } = useContext(LanguageContext); + const { data: tvData, error: tvError } = useSWR( + `/api/v1/tv/${router.query.tvId}?language=${locale}` + ); const { data, error, size, setSize } = useSWRInfinite( (pageIndex: number, previousPageData: SearchResult | null) => { if (previousPageData && pageIndex + 1 > previousPageData.totalPages) { @@ -54,13 +66,17 @@ const TvSimilar: React.FC = () => { return ( <> -
-
-

- Similar Series -

-
-
+
+ +