refactor(frontend): move discovery sliders into reusable MediaSlider component

src/components/Discover/index.tsx

@@ -1,20 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import useSWR from 'swr';
-import type {
-  MovieResult,
-  TvResult,
-  PersonResult,
-} from '../../../server/models/Search';
-import TitleCard from '../TitleCard';
-import PersonCard from '../PersonCard';
 import TmdbTitleCard from '../TitleCard/TmdbTitleCard';
 import Slider from '../Slider';
 import Link from 'next/link';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { LanguageContext } from '../../context/LanguageContext';
 import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';
 import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
 import RequestCard from '../RequestCard';
+import MediaSlider from '../MediaSlider';
 
 const messages = defineMessages({
   recentrequests: 'Recent Requests',
@@ -26,47 +19,8 @@ const messages = defineMessages({
   trending: 'Trending',
 });
 
-interface MovieDiscoverResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: MovieResult[];
-}
-
-interface TvDiscoverResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: TvResult[];
-}
-
-interface MixedResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: (TvResult | MovieResult | PersonResult)[];
-}
-
 const Discover: React.FC = () => {
   const intl = useIntl();
-  const { locale } = useContext(LanguageContext);
-  const { data: movieData, error: movieError } = useSWR<MovieDiscoverResult>(
-    `/api/v1/discover/movies?language=${locale}`
-  );
-  const { data: tvData, error: tvError } = useSWR<TvDiscoverResult>(
-    `/api/v1/discover/tv?language=${locale}`
-  );
-
-  const {
-    data: movieUpcomingData,
-    error: movieUpcomingError,
-  } = useSWR<MovieDiscoverResult>(
-    `/api/v1/discover/movies/upcoming?language=${locale}`
-  );
-
-  const { data: trendingData, error: trendingError } = useSWR<MixedResult>(
-    `/api/v1/discover/trending?language=${locale}`
-  );
 
   const { data: media, error: mediaError } = useSWR<MediaResultsResponse>(
     '/api/v1/media?filter=available&take=20&sort=mediaAdded'
@@ -140,202 +94,29 @@ const Discover: React.FC = () => {
         placeholder={<RequestCard.Placeholder />}
         emptyMessage={intl.formatMessage(messages.nopending)}
       />
-      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
-        <div className="flex-1 min-w-0">
-          <Link href="/discover/movies/upcoming">
-            <a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
-              <span>
-                <FormattedMessage {...messages.upcoming} />
-              </span>
-              <svg
-                className="w-6 h-6 ml-2"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
-      </div>
-      <Slider
+      <MediaSlider
         sliderKey="upcoming"
-        isLoading={!movieUpcomingData && !movieUpcomingError}
-        isEmpty={false}
-        items={movieUpcomingData?.results.map((title) => (
-          <TitleCard
-            key={`upcoming-movie-slider-${title.id}`}
-            id={title.id}
-            image={title.posterPath}
-            status={title.mediaInfo?.status}
-            summary={title.overview}
-            title={title.title}
-            userScore={title.voteAverage}
-            year={title.releaseDate}
-            mediaType={title.mediaType}
-          />
-        ))}
+        title={intl.formatMessage(messages.upcoming)}
+        linkUrl="/discover/movies/upcoming"
+        url="/api/v1/discover/movies/upcoming"
       />
-      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
-        <div className="flex-1 min-w-0">
-          <Link href="/discover/trending">
-            <a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
-              <span>
-                <FormattedMessage {...messages.trending} />
-              </span>
-              <svg
-                className="w-6 h-6 ml-2"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
-      </div>
-      <Slider
+      <MediaSlider
         sliderKey="trending"
-        isLoading={!trendingData && !trendingError}
-        isEmpty={false}
-        items={trendingData?.results.map((title) => {
-          switch (title.mediaType) {
-            case 'movie':
-              return (
-                <TitleCard
-                  id={title.id}
-                  image={title.posterPath}
-                  status={title.mediaInfo?.status}
-                  summary={title.overview}
-                  title={title.title}
-                  userScore={title.voteAverage}
-                  year={title.releaseDate}
-                  mediaType={title.mediaType}
-                />
-              );
-            case 'tv':
-              return (
-                <TitleCard
-                  id={title.id}
-                  image={title.posterPath}
-                  status={title.mediaInfo?.status}
-                  summary={title.overview}
-                  title={title.name}
-                  userScore={title.voteAverage}
-                  year={title.firstAirDate}
-                  mediaType={title.mediaType}
-                />
-              );
-            case 'person':
-              return (
-                <PersonCard
-                  personId={title.id}
-                  name={title.name}
-                  profilePath={title.profilePath}
-                />
-              );
-          }
-        })}
+        title={intl.formatMessage(messages.trending)}
+        url="/api/v1/discover/trending"
+        linkUrl="/discover/trending"
       />
-      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
-        <div className="flex-1 min-w-0">
-          <Link href="/discover/movies">
-            <a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
-              <span>
-                <FormattedMessage {...messages.popularmovies} />
-              </span>
-              <svg
-                className="w-6 h-6 ml-2"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
-      </div>
-      <Slider
-        sliderKey="movies"
-        isLoading={!movieData && !movieError}
-        isEmpty={false}
-        items={movieData?.results.map((title) => (
-          <TitleCard
-            key={`popular-movie-slider-${title.id}`}
-            id={title.id}
-            image={title.posterPath}
-            status={title.mediaInfo?.status}
-            summary={title.overview}
-            title={title.title}
-            userScore={title.voteAverage}
-            year={title.releaseDate}
-            mediaType={title.mediaType}
-          />
-        ))}
+      <MediaSlider
+        sliderKey="popular-movies"
+        title={intl.formatMessage(messages.popularmovies)}
+        url="/api/v1/discover/movies"
+        linkUrl="/discover/movies"
       />
-      <div className="mt-4 mb-4 md:flex md:items-center md:justify-between">
-        <div className="flex-1 min-w-0">
-          <Link href="/discover/tv">
-            <a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
-              <span>
-                <FormattedMessage {...messages.populartv} />
-              </span>
-              <svg
-                className="w-6 h-6 ml-2"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
-      </div>
-      <Slider
-        sliderKey="tv"
-        isLoading={!tvData && !tvError}
-        isEmpty={false}
-        items={tvData?.results.map((title) => (
-          <TitleCard
-            key={`popular-tv-slider-${title.id}`}
-            id={title.id}
-            image={title.posterPath}
-            status={title.mediaInfo?.status}
-            summary={title.overview}
-            title={title.name}
-            userScore={title.voteAverage}
-            year={title.firstAirDate}
-            mediaType={title.mediaType}
-          />
-        ))}
+      <MediaSlider
+        sliderKey="popular-tv"
+        title={intl.formatMessage(messages.populartv)}
+        url="/api/v1/discover/tv"
+        linkUrl="/discover/tv"
       />
     </>
   );