fix(holiday): remove special holiday slider

src/components/Discover/Holiday/index.tsx

@@ -1,70 +0,0 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
-import type { MovieResult } from '../../../../server/models/Search';
-import ListView from '../../Common/ListView';
-import { LanguageContext } from '../../../context/LanguageContext';
-import Header from '../../Common/Header';
-
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: MovieResult[];
-}
-
-const Holiday: React.FC = () => {
-  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/keyword/207317/movies?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);
-  };
-
-  if (error) {
-    return <div>{error}</div>;
-  }
-
-  const titles = data?.reduce(
-    (a, v) => [...a, ...v.results],
-    [] as MovieResult[]
-  );
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
-
-  return (
-    <>
-      <Header>Happy Holidays!</Header>
-      <ListView
-        items={titles}
-        isEmpty={isEmpty}
-        isLoading={
-          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
-        }
-        isReachingEnd={isReachingEnd}
-        onScrollBottom={fetchMore}
-      />
-    </>
-  );
-};
-
-export default Holiday;

src/components/Discover/index.tsx

@@ -63,12 +63,6 @@ const Discover: React.FC = () => {
   } = useSWR<MovieDiscoverResult>(
     `/api/v1/discover/movies/upcoming?language=${locale}`
   );
-  const {
-    data: holUpcomingData,
-    error: holUpcomingError,
-  } = useSWR<MovieDiscoverResult>(
-    `/api/v1/discover/keyword/207317/movies?language=${locale}`
-  );
 
   const { data: trendingData, error: trendingError } = useSWR<MixedResult>(
     `/api/v1/discover/trending?language=${locale}`
@@ -87,9 +81,9 @@ const Discover: React.FC = () => {
 
   return (
     <>
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
         <div className="flex-1 min-w-0">
-          <div className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+          <div 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.recentlyAdded} />
             </span>
@@ -108,10 +102,10 @@ const Discover: React.FC = () => {
           />
         ))}
       />
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
         <div className="flex-1 min-w-0">
           <Link href="/requests">
-            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <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.recentrequests} />
               </span>
@@ -146,61 +140,10 @@ const Discover: React.FC = () => {
         placeholder={<RequestCard.Placeholder />}
         emptyMessage={intl.formatMessage(messages.nopending)}
       />
-      {/* Special Temporary Slider */}
+      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
-        <div className="flex-1 min-w-0">
-          <Link href="/discover/holiday">
-            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
-              <span>
-                <span role="img" aria-label="Christmas Tree" className="mr-2">
-                  🎄
-                </span>
-                Happy Holidays!
-                <span role="img" aria-label="Christmas Tree" className="ml-2">
-                  🎄
-                </span>
-              </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="holiday"
-        isLoading={!holUpcomingData && !holUpcomingError}
-        isEmpty={false}
-        items={holUpcomingData?.results.map((title) => (
-          <TitleCard
-            key={`holiday-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}
-          />
-        ))}
-      />
-      {/* End Special Temporary Slider */}
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/discover/movies/upcoming">
-            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <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>
@@ -240,10 +183,10 @@ const Discover: React.FC = () => {
           />
         ))}
       />
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+      <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 text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <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>
@@ -308,10 +251,10 @@ const Discover: React.FC = () => {
           }
         })}
       />
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+      <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 text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <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>
@@ -351,10 +294,10 @@ const Discover: React.FC = () => {
           />
         ))}
       />
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-4">
+      <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 text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <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>

src/pages/discover/holiday.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { NextPage } from 'next';
-import Holiday from '../../components/Discover/Holiday';
-
-const HolidayPage: NextPage = () => {
-  return <Holiday />;
-};
-
-export default HolidayPage;