refactor(frontend): move slider blocks from home page into reusable component

src/components/Discover/index.tsx

@@ -4,6 +4,7 @@ import type { MovieResult, TvResult } from '../../../server/models/Search';
 import TitleCard from '../TitleCard';
 import { MediaRequest } from '../../../server/entity/MediaRequest';
 import RequestCard from '../TitleCard/RequestCard';
+import Slider from '../Slider';
 
 interface MovieDiscoverResult {
   page: number;
@@ -40,34 +41,18 @@ const Discover: React.FC = () => {
           </h2>
         </div>
       </div>
-      <div
-        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
-        style={{ height: 295 }}
-      >
-        {requests?.map((request) => (
-          <div
-            key={request.id}
-            className="first:px-4 last:px-4 px-2 inline-block"
-          >
-            <RequestCard tmdbId={request.mediaId} type={request.mediaType} />
-          </div>
-        ))}
-        {!requests &&
-          !requestError &&
-          [...Array(10)].map((_item, i) => (
-            <div
-              key={`placeholder-${i}`}
-              className="first:px-4 last:px-4 px-2 inline-block"
-            >
-              <TitleCard.Placeholder />
-            </div>
+      <Slider
+        key="requests"
+        isLoading={!requests && !requestError}
+        isEmpty={!!requests && !requestError && requests.length === 0}
+        items={requests?.map((request) => (
+          <RequestCard
+            key={`request-slider-item-${request.id}`}
+            tmdbId={request.mediaId}
+            type={request.mediaType}
+          />
         ))}
-        {requests && !requestError && requests.length === 0 && (
-          <div className="text-center text-white mt-32">
-            No Requests found :(
-          </div>
-        )}
-      </div>
+      />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
@@ -75,16 +60,13 @@ const Discover: React.FC = () => {
           </h2>
         </div>
       </div>
-      <div
-        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
-        style={{ height: 295 }}
-      >
-        {movieData?.results.map((title) => (
-          <div
-            key={title.id}
-            className="first:px-4 last:px-4 px-2 inline-block"
-          >
+      <Slider
+        key="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.request?.status}
@@ -95,19 +77,8 @@ const Discover: React.FC = () => {
             mediaType={title.mediaType}
             requestId={title.request?.id}
           />
-          </div>
         ))}
-        {!movieData &&
-          !movieError &&
-          [...Array(10)].map((_item, i) => (
-            <div
-              key={`placeholder-${i}`}
-              className="first:px-4 last:px-4 px-2 inline-block"
-            >
-              <TitleCard.Placeholder />
-            </div>
-          ))}
-      </div>
+      />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-4">
         <div className="flex-1 min-w-0">
           <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
@@ -115,16 +86,13 @@ const Discover: React.FC = () => {
           </h2>
         </div>
       </div>
-      <div
-        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
-        style={{ height: 295 }}
-      >
-        {tvData?.results.map((title) => (
-          <div
-            key={title.id}
-            className="first:px-4 last:px-4 px-2 inline-block"
-          >
+      <Slider
+        key="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.request?.status}
@@ -135,19 +103,8 @@ const Discover: React.FC = () => {
             mediaType={title.mediaType}
             requestId={title.request?.id}
           />
-          </div>
         ))}
-        {!tvData &&
-          !tvError &&
-          [...Array(10)].map((_item, i) => (
-            <div
-              key={`placeholder-${i}`}
-              className="first:px-4 last:px-4 px-2 inline-block"
-            >
-              <TitleCard.Placeholder />
-            </div>
-          ))}
-      </div>
+      />
     </>
   );
 };

src/components/Slider/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import TitleCard from '../TitleCard';
+
+interface SliderProps {
+  key: string;
+  items?: JSX.Element[];
+  isLoading: boolean;
+  isEmpty: boolean;
+}
+
+const Slider: React.FC<SliderProps> = ({ key, items, isLoading, isEmpty }) => {
+  return (
+    <div
+      className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
+      style={{ height: 295 }}
+    >
+      {items?.map((item, index) => (
+        <div
+          key={`${key}-${index}`}
+          className="first:px-4 last:px-4 px-2 inline-block"
+        >
+          {item}
+        </div>
+      ))}
+      {isLoading &&
+        [...Array(10)].map((_item, i) => (
+          <div
+            key={`placeholder-${i}`}
+            className="first:px-4 last:px-4 px-2 inline-block"
+          >
+            <TitleCard.Placeholder />
+          </div>
+        ))}
+      {isEmpty && (
+        <div className="text-center text-white mt-32">No Results</div>
+      )}
+    </div>
+  );
+};
+
+export default Slider;