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/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 (
     <>