refactor: move genre/studio/network calls into their own endpoints

this commit also adds a `useDiscover` hook to help with creating discover pages with less repeating
code

src/components/Discover/DiscoverMovieGenre/index.tsx

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

src/components/Discover/DiscoverMovies.tsx

@@ -1,18 +1,11 @@
-import React, { useContext } from 'react';
-import useSWR, { useSWRInfinite } from 'swr';
+import React from 'react';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
-import { LanguageContext } from '../../context/LanguageContext';
 import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
-import { useRouter } from 'next/router';
-import {
-  TmdbStudio,
-  TmdbGenre,
-} from '../../../server/api/themoviedb/interfaces';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   discovermovies: 'Popular Movies',
@@ -20,77 +13,24 @@ const messages = defineMessages({
   studioMovies: '{studio} Movies',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: MovieResult[];
-}
-
 const DiscoverMovies: React.FC = () => {
-  const router = useRouter();
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
 
-  const { data: genres } = useSWR<TmdbGenre[]>('/api/v1/genres/movie');
-  const genre = genres?.find((g) => g.id === Number(router.query.genreId));
-
-  const { data: studio } = useSWR<TmdbStudio>(
-    `/api/v1/studio/${router.query.studioId}`
-  );
-
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
-
-      return `/api/v1/discover/movies?page=${pageIndex + 1}&language=${locale}${
-        genre ? `&genre=${genre.id}` : ''
-      }${studio ? `&studio=${studio.id}` : ''}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult>('/api/v1/discover/movies');
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as MovieResult[]
-  );
-
-  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 < 20);
-
-  const title = genre
-    ? intl.formatMessage(messages.genreMovies, { genre: genre.name })
-    : studio
-    ? intl.formatMessage(messages.studioMovies, { studio: studio.name })
-    : intl.formatMessage(messages.discovermovies);
+  const title = intl.formatMessage(messages.discovermovies);
 
   return (
     <>

src/components/Discover/DiscoverNetwork/index.tsx

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

src/components/Discover/DiscoverStudio/index.tsx

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

src/components/Discover/DiscoverTv.tsx

@@ -1,18 +1,11 @@
-import React, { useContext } from 'react';
-import useSWR, { useSWRInfinite } from 'swr';
+import React from 'react';
 import type { TvResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';
-import { LanguageContext } from '../../context/LanguageContext';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
-import { useRouter } from 'next/router';
-import {
-  TmdbGenre,
-  TmdbNetwork,
-} from '../../../server/api/themoviedb/interfaces';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   discovertv: 'Popular Series',
@@ -20,76 +13,24 @@ const messages = defineMessages({
   networkSeries: '{network} Series',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: TvResult[];
-}
-
 const DiscoverTv: React.FC = () => {
-  const router = useRouter();
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
 
-  const { data: genres } = useSWR<TmdbGenre[]>('/api/v1/genres/tv');
-  const genre = genres?.find((g) => g.id === Number(router.query.genreId));
-
-  const { data: network } = useSWR<TmdbNetwork>(
-    `/api/v1/network/${router.query.networkId}`
-  );
-
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
-
-      return `/api/v1/discover/tv?page=${pageIndex + 1}&language=${locale}${
-        genre ? `&genre=${genre.id}` : ''
-      }${network ? `&network=${network.id}` : ''}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<TvResult>('/api/v1/discover/tv');
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as TvResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        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 < 20);
-
-  const title = genre
-    ? intl.formatMessage(messages.genreSeries, { genre: genre.name })
-    : network
-    ? intl.formatMessage(messages.networkSeries, { network: network.name })
-    : intl.formatMessage(messages.discovertv);
+  const title = intl.formatMessage(messages.discovertv);
 
   return (
     <>

src/components/Discover/DiscoverTvGenre/index.tsx

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

src/components/Discover/DiscoverTvUpcoming.tsx

@@ -1,74 +1,33 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import React from 'react';
 import type { TvResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';
-import { LanguageContext } from '../../context/LanguageContext';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   upcomingtv: 'Upcoming Series',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: TvResult[];
-}
-
 const DiscoverTvUpcoming: React.FC = () => {
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
 
-      return `/api/v1/discover/tv/upcoming?page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<TvResult>('/api/v1/discover/tv/upcoming');
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as TvResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        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 < 20);
-
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.upcomingtv)} />

src/components/Discover/Trending.tsx

@@ -1,79 +1,38 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import React from 'react';
 import type {
   MovieResult,
   TvResult,
   PersonResult,
 } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
-import { LanguageContext } from '../../context/LanguageContext';
 import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   trending: 'Trending',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: (MovieResult | TvResult | PersonResult)[];
-}
-
 const Trending: React.FC = () => {
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
-
-      return `/api/v1/discover/trending?page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult | TvResult | PersonResult>(
+    '/api/v1/discover/trending'
   );
 
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
-
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as (MovieResult | TvResult | PersonResult)[]
-  );
-
-  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 < 20);
-
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.trending)} />

src/components/Discover/Upcoming.tsx

@@ -1,74 +1,33 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import React from 'react';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
-import { LanguageContext } from '../../context/LanguageContext';
 import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   upcomingmovies: 'Upcoming Movies',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: MovieResult[];
-}
-
 const UpcomingMovies: React.FC = () => {
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
 
-      return `/api/v1/discover/movies/upcoming?page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult>('/api/v1/discover/movies/upcoming');
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as MovieResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        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 < 20);
-
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.upcomingmovies)} />

src/hooks/useDiscover.ts

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

src/i18n/globalMessages.ts

@@ -23,6 +23,7 @@ const globalMessages = defineMessages({
   edit: 'Edit',
   experimental: 'Experimental',
   advanced: 'Advanced',
+  loading: 'Loading…',
 });
 
 export default globalMessages;

src/pages/discover/movies/genre/[genreId]/index.tsx

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

src/pages/discover/movies/studio/[studioId]/index.tsx

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

src/pages/discover/tv/genre/[genreId]/index.tsx

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

src/pages/discover/tv/network/[networkId]/index.tsx

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