feat: add genre/studio/network view to Discover results (#1067)

* feat: add genres view to movie/series Discover results

* feat: add studio/network view to movie/series Discover results

* fix: remove with_release_type filter, since it is removing valid/desired results

src/components/Discover/DiscoverMovies.tsx

@@ -1,16 +1,23 @@
 import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import useSWR, { useSWRInfinite } from 'swr';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { LanguageContext } from '../../context/LanguageContext';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+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';
 
 const messages = defineMessages({
   discovermovies: 'Popular Movies',
+  genreMovies: '{genre} Movies',
+  studioMovies: '{studio} Movies',
 });
 
 interface SearchResult {
@@ -21,16 +28,27 @@ interface SearchResult {
 }
 
 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}`;
+      return `/api/v1/discover/movies?page=${pageIndex + 1}&language=${locale}${
+        genre ? `&genre=${genre.id}` : ''
+      }${studio ? `&studio=${studio.id}` : ''}`;
     },
     {
       initialSize: 3,
@@ -68,13 +86,17 @@ const DiscoverMovies: React.FC = () => {
   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);
+
   return (
     <>
-      <PageTitle title={intl.formatMessage(messages.discovermovies)} />
+      <PageTitle title={title} />
       <div className="mt-1 mb-5">
-        <Header>
-          <FormattedMessage {...messages.discovermovies} />
-        </Header>
+        <Header>{title}</Header>
       </div>
       <ListView
         items={titles}