this commit also adds a `useDiscover` hook to help with creating discover pages with less repeating codepull/1093/head
sct
4 years ago
parent
ed0a7fbdf5
commit
63c122e5e0
@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import type { MovieResult } from '../../../../server/models/Search';
|
||||
import ListView from '../../Common/ListView';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import Header from '../../Common/Header';
|
||||
import PageTitle from '../../Common/PageTitle';
|
||||
import { useRouter } from 'next/router';
|
||||
import globalMessages from '../../../i18n/globalMessages';
|
||||
import useDiscover from '../../../hooks/useDiscover';
|
||||
import Error from '../../../pages/_error';
|
||||
|
||||
const messages = defineMessages({
|
||||
genreMovies: '{genre} Movies',
|
||||
});
|
||||
|
||||
const DiscoverMovieGenre: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const intl = useIntl();
|
||||
|
||||
const {
|
||||
isLoadingInitialData,
|
||||
isEmpty,
|
||||
isLoadingMore,
|
||||
isReachingEnd,
|
||||
titles,
|
||||
fetchMore,
|
||||
error,
|
||||
firstResultData,
|
||||
} = useDiscover<MovieResult, { genre: { id: number; name: string } }>(
|
||||
`/api/v1/discover/movies/genre/${router.query.genreId}`
|
||||
);
|
||||
|
||||
if (error) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
const title = isLoadingInitialData
|
||||
? intl.formatMessage(globalMessages.loading)
|
||||
: intl.formatMessage(messages.genreMovies, {
|
||||
genre: firstResultData?.genre.name,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title={title} />
|
||||
<div className="mt-1 mb-5">
|
||||
<Header>{title}</Header>
|
||||
</div>
|
||||
<ListView
|
||||
items={titles}
|
||||
isEmpty={isEmpty}
|
||||
isLoading={
|
||||
isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
|
||||
}
|
||||
isReachingEnd={isReachingEnd}
|
||||
onScrollBottom={fetchMore}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DiscoverMovieGenre;
|
||||
@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import type { TvResult } from '../../../../server/models/Search';
|
||||
import ListView from '../../Common/ListView';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import Header from '../../Common/Header';
|
||||
import PageTitle from '../../Common/PageTitle';
|
||||
import { useRouter } from 'next/router';
|
||||
import globalMessages from '../../../i18n/globalMessages';
|
||||
import useDiscover from '../../../hooks/useDiscover';
|
||||
import Error from '../../../pages/_error';
|
||||
import { TvNetwork } from '../../../../server/models/common';
|
||||
|
||||
const messages = defineMessages({
|
||||
networkSeries: '{network} Series',
|
||||
});
|
||||
|
||||
const DiscoverTvNetwork: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const intl = useIntl();
|
||||
|
||||
const {
|
||||
isLoadingInitialData,
|
||||
isEmpty,
|
||||
isLoadingMore,
|
||||
isReachingEnd,
|
||||
titles,
|
||||
fetchMore,
|
||||
error,
|
||||
firstResultData,
|
||||
} = useDiscover<TvResult, { network: TvNetwork }>(
|
||||
`/api/v1/discover/tv/network/${router.query.networkId}`
|
||||
);
|
||||
|
||||
if (error) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
const title = isLoadingInitialData
|
||||
? intl.formatMessage(globalMessages.loading)
|
||||
: intl.formatMessage(messages.networkSeries, {
|
||||
network: firstResultData?.network.name,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title={title} />
|
||||
<div className="mt-1 mb-5">
|
||||
<Header>
|
||||
{firstResultData?.network.logoPath ? (
|
||||
<div className="flex justify-center mb-6">
|
||||
<img
|
||||
src={`//image.tmdb.org/t/p/w780_filter(negate,000,666)/${firstResultData?.network.logoPath}`}
|
||||
alt=""
|
||||
className="text-white max-h-24 sm:max-h-32"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
</Header>
|
||||
</div>
|
||||
<ListView
|
||||
items={titles}
|
||||
isEmpty={isEmpty}
|
||||
isLoading={
|
||||
isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
|
||||
}
|
||||
isReachingEnd={isReachingEnd}
|
||||
onScrollBottom={fetchMore}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DiscoverTvNetwork;
|
||||
@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import type { MovieResult } from '../../../../server/models/Search';
|
||||
import ListView from '../../Common/ListView';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import Header from '../../Common/Header';
|
||||
import PageTitle from '../../Common/PageTitle';
|
||||
import { useRouter } from 'next/router';
|
||||
import globalMessages from '../../../i18n/globalMessages';
|
||||
import useDiscover from '../../../hooks/useDiscover';
|
||||
import Error from '../../../pages/_error';
|
||||
import { ProductionCompany } from '../../../../server/models/common';
|
||||
|
||||
const messages = defineMessages({
|
||||
studioMovies: '{studio} Movies',
|
||||
});
|
||||
|
||||
const DiscoverMovieStudio: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const intl = useIntl();
|
||||
|
||||
const {
|
||||
isLoadingInitialData,
|
||||
isEmpty,
|
||||
isLoadingMore,
|
||||
isReachingEnd,
|
||||
titles,
|
||||
fetchMore,
|
||||
error,
|
||||
firstResultData,
|
||||
} = useDiscover<MovieResult, { studio: ProductionCompany }>(
|
||||
`/api/v1/discover/movies/studio/${router.query.studioId}`
|
||||
);
|
||||
|
||||
if (error) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
const title = isLoadingInitialData
|
||||
? intl.formatMessage(globalMessages.loading)
|
||||
: intl.formatMessage(messages.studioMovies, {
|
||||
studio: firstResultData?.studio.name,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title={title} />
|
||||
<div className="mt-1 mb-5">
|
||||
<Header>
|
||||
{firstResultData?.studio.logoPath ? (
|
||||
<div className="flex justify-center mb-6">
|
||||
<img
|
||||
src={`//image.tmdb.org/t/p/w780_filter(negate,000,666)/${firstResultData?.studio.logoPath}`}
|
||||
alt=""
|
||||
className="text-white max-h-24 sm:max-h-32"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
</Header>
|
||||
</div>
|
||||
<ListView
|
||||
items={titles}
|
||||
isEmpty={isEmpty}
|
||||
isLoading={
|
||||
isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
|
||||
}
|
||||
isReachingEnd={isReachingEnd}
|
||||
onScrollBottom={fetchMore}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DiscoverMovieStudio;
|
||||
@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import type { TvResult } from '../../../../server/models/Search';
|
||||
import ListView from '../../Common/ListView';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import Header from '../../Common/Header';
|
||||
import PageTitle from '../../Common/PageTitle';
|
||||
import { useRouter } from 'next/router';
|
||||
import globalMessages from '../../../i18n/globalMessages';
|
||||
import useDiscover from '../../../hooks/useDiscover';
|
||||
import Error from '../../../pages/_error';
|
||||
|
||||
const messages = defineMessages({
|
||||
genreSeries: '{genre} Series',
|
||||
});
|
||||
|
||||
const DiscoverTvGenre: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const intl = useIntl();
|
||||
|
||||
const {
|
||||
isLoadingInitialData,
|
||||
isEmpty,
|
||||
isLoadingMore,
|
||||
isReachingEnd,
|
||||
titles,
|
||||
fetchMore,
|
||||
error,
|
||||
firstResultData,
|
||||
} = useDiscover<TvResult, { genre: { id: number; name: string } }>(
|
||||
`/api/v1/discover/tv/genre/${router.query.genreId}`
|
||||
);
|
||||
|
||||
if (error) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
const title = isLoadingInitialData
|
||||
? intl.formatMessage(globalMessages.loading)
|
||||
: intl.formatMessage(messages.genreSeries, {
|
||||
genre: firstResultData?.genre.name,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title={title} />
|
||||
<div className="mt-1 mb-5">
|
||||
<Header>{title}</Header>
|
||||
</div>
|
||||
<ListView
|
||||
items={titles}
|
||||
isEmpty={isEmpty}
|
||||
isLoading={
|
||||
isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
|
||||
}
|
||||
isReachingEnd={isReachingEnd}
|
||||
onScrollBottom={fetchMore}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DiscoverTvGenre;
|
||||
@ -0,0 +1,99 @@
|
||||
import { useContext } from 'react';
|
||||
import { useSWRInfinite } from 'swr';
|
||||
import { MediaStatus } from '../../server/constants/media';
|
||||
import { LanguageContext } from '../context/LanguageContext';
|
||||
import useSettings from './useSettings';
|
||||
|
||||
export interface BaseSearchResult<T> {
|
||||
page: number;
|
||||
totalResults: number;
|
||||
totalPages: number;
|
||||
results: T[];
|
||||
}
|
||||
|
||||
interface BaseMedia {
|
||||
mediaType: string;
|
||||
mediaInfo?: {
|
||||
status: MediaStatus;
|
||||
};
|
||||
}
|
||||
|
||||
interface DiscoverResult<T, S> {
|
||||
isLoadingInitialData: boolean;
|
||||
isLoadingMore: boolean;
|
||||
fetchMore: () => void;
|
||||
isEmpty: boolean;
|
||||
isReachingEnd: boolean;
|
||||
error: unknown;
|
||||
titles: T[];
|
||||
firstResultData?: BaseSearchResult<T> & S;
|
||||
}
|
||||
|
||||
const useDiscover = <T extends BaseMedia, S = Record<string, never>>(
|
||||
endpoint: string,
|
||||
options?: Record<string, unknown>
|
||||
): DiscoverResult<T, S> => {
|
||||
const settings = useSettings();
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const { data, error, size, setSize } = useSWRInfinite<
|
||||
BaseSearchResult<T> & S
|
||||
>(
|
||||
(pageIndex: number, previousPageData) => {
|
||||
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const params: Record<string, unknown> = {
|
||||
page: pageIndex + 1,
|
||||
language: locale,
|
||||
...options,
|
||||
};
|
||||
|
||||
const finalQueryString = Object.keys(params)
|
||||
.map((paramKey) => `${paramKey}=${params[paramKey]}`)
|
||||
.join('&');
|
||||
|
||||
return `${endpoint}?${finalQueryString}`;
|
||||
},
|
||||
{
|
||||
initialSize: 3,
|
||||
}
|
||||
);
|
||||
|
||||
const isLoadingInitialData = !data && !error;
|
||||
const isLoadingMore =
|
||||
isLoadingInitialData ||
|
||||
(size > 0 && !!data && typeof data[size - 1] === 'undefined');
|
||||
|
||||
const fetchMore = () => {
|
||||
setSize(size + 1);
|
||||
};
|
||||
|
||||
let titles = (data ?? []).reduce((a, v) => [...a, ...v.results], [] as T[]);
|
||||
|
||||
if (settings.currentSettings.hideAvailable) {
|
||||
titles = titles.filter(
|
||||
(i) =>
|
||||
(i.mediaType === 'movie' || i.mediaType === 'tv') &&
|
||||
i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
|
||||
i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
|
||||
);
|
||||
}
|
||||
|
||||
const isEmpty = !isLoadingInitialData && titles?.length === 0;
|
||||
const isReachingEnd =
|
||||
isEmpty || (!!data && (data[data?.length - 1]?.results.length ?? 0) < 20);
|
||||
|
||||
return {
|
||||
isLoadingInitialData,
|
||||
isLoadingMore,
|
||||
fetchMore,
|
||||
isEmpty,
|
||||
isReachingEnd,
|
||||
error,
|
||||
titles,
|
||||
firstResultData: data?.[0],
|
||||
};
|
||||
};
|
||||
|
||||
export default useDiscover;
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { NextPage } from 'next';
|
||||
import DiscoverMovies from '../../../../../components/Discover/DiscoverMovies';
|
||||
import DiscoverMovieGenre from '../../../../../components/Discover/DiscoverMovieGenre';
|
||||
|
||||
const DiscoverMoviesGenrePage: NextPage = () => {
|
||||
return <DiscoverMovies />;
|
||||
return <DiscoverMovieGenre />;
|
||||
};
|
||||
|
||||
export default DiscoverMoviesGenrePage;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { NextPage } from 'next';
|
||||
import DiscoverMovies from '../../../../../components/Discover/DiscoverMovies';
|
||||
import DiscoverMovieStudio from '../../../../../components/Discover/DiscoverStudio';
|
||||
|
||||
const DiscoverMoviesStudioPage: NextPage = () => {
|
||||
return <DiscoverMovies />;
|
||||
return <DiscoverMovieStudio />;
|
||||
};
|
||||
|
||||
export default DiscoverMoviesStudioPage;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { NextPage } from 'next';
|
||||
import DiscoverTv from '../../../../../components/Discover/DiscoverTv';
|
||||
import DiscoverTvGenre from '../../../../../components/Discover/DiscoverTvGenre';
|
||||
|
||||
const DiscoverTvGenrePage: NextPage = () => {
|
||||
return <DiscoverTv />;
|
||||
return <DiscoverTvGenre />;
|
||||
};
|
||||
|
||||
export default DiscoverTvGenrePage;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { NextPage } from 'next';
|
||||
import DiscoverTv from '../../../../../components/Discover/DiscoverTv';
|
||||
import DiscoverNetwork from '../../../../../components/Discover/DiscoverNetwork';
|
||||
|
||||
const DiscoverTvNetworkPage: NextPage = () => {
|
||||
return <DiscoverTv />;
|
||||
return <DiscoverNetwork />;
|
||||
};
|
||||
|
||||
export default DiscoverTvNetworkPage;
|
||||
|
||||
Loading…
Reference in new issue