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 React from 'react';
|
||||||
import { NextPage } from 'next';
|
import { NextPage } from 'next';
|
||||||
import DiscoverMovies from '../../../../../components/Discover/DiscoverMovies';
|
import DiscoverMovieGenre from '../../../../../components/Discover/DiscoverMovieGenre';
|
||||||
|
|
||||||
const DiscoverMoviesGenrePage: NextPage = () => {
|
const DiscoverMoviesGenrePage: NextPage = () => {
|
||||||
return <DiscoverMovies />;
|
return <DiscoverMovieGenre />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DiscoverMoviesGenrePage;
|
export default DiscoverMoviesGenrePage;
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { NextPage } from 'next';
|
import { NextPage } from 'next';
|
||||||
import DiscoverMovies from '../../../../../components/Discover/DiscoverMovies';
|
import DiscoverMovieStudio from '../../../../../components/Discover/DiscoverStudio';
|
||||||
|
|
||||||
const DiscoverMoviesStudioPage: NextPage = () => {
|
const DiscoverMoviesStudioPage: NextPage = () => {
|
||||||
return <DiscoverMovies />;
|
return <DiscoverMovieStudio />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DiscoverMoviesStudioPage;
|
export default DiscoverMoviesStudioPage;
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { NextPage } from 'next';
|
import { NextPage } from 'next';
|
||||||
import DiscoverTv from '../../../../../components/Discover/DiscoverTv';
|
import DiscoverTvGenre from '../../../../../components/Discover/DiscoverTvGenre';
|
||||||
|
|
||||||
const DiscoverTvGenrePage: NextPage = () => {
|
const DiscoverTvGenrePage: NextPage = () => {
|
||||||
return <DiscoverTv />;
|
return <DiscoverTvGenre />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DiscoverTvGenrePage;
|
export default DiscoverTvGenrePage;
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { NextPage } from 'next';
|
import { NextPage } from 'next';
|
||||||
import DiscoverTv from '../../../../../components/Discover/DiscoverTv';
|
import DiscoverNetwork from '../../../../../components/Discover/DiscoverNetwork';
|
||||||
|
|
||||||
const DiscoverTvNetworkPage: NextPage = () => {
|
const DiscoverTvNetworkPage: NextPage = () => {
|
||||||
return <DiscoverTv />;
|
return <DiscoverNetwork />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DiscoverTvNetworkPage;
|
export default DiscoverTvNetworkPage;
|
||||||
|
|||||||
Loading…
Reference in new issue