mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-06 14:47:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sct
2020-11-17 12:49:30 +00:00
parent 94eaaf96b4
commit f5f2545520
7 changed files with 123 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/MovieDetails/MovieRecommendations.tsx
View File

@@ -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}

38
src/components/MovieDetails/MovieSimilar.tsx
View File

@@ -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}