feat(frontend): discover tv/movies full page

Also adds ListView component for infinite scrolling pages

server/models/Search.ts

@@ -80,7 +80,8 @@ export const mapTvResult = (
   id: tvResult.id,
   firstAirDate: tvResult.first_air_Date,
   genreIds: tvResult.genre_ids,
-  mediaType: tvResult.media_type,
+  // Some results from tmdb dont return the mediaType so we force it here!
+  mediaType: tvResult.media_type || 'tv',
   name: tvResult.name,
   originCountry: tvResult.origin_country,
   originalLanguage: tvResult.original_language,

src/components/Common/ListView/index.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  TvResult,
+  MovieResult,
+  PersonResult,
+} from '../../../../server/models/Search';
+import TitleCard from '../../TitleCard';
+import useVerticalScroll from '../../../hooks/useVerticalScroll';
+
+interface ListViewProps {
+  items?: (TvResult | MovieResult | PersonResult)[];
+  isEmpty?: boolean;
+  isLoading?: boolean;
+  onScrollBottom: () => void;
+}
+
+const ListView: React.FC<ListViewProps> = ({
+  items,
+  isEmpty,
+  isLoading,
+  onScrollBottom,
+}) => {
+  useVerticalScroll(onScrollBottom, !isLoading);
+  return (
+    <>
+      {isEmpty && (
+        <div className="w-full mt-64 text-2xl text-center text-cool-gray-400">
+          No Results
+        </div>
+      )}
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+        {items?.map((title) => {
+          let titleCard: React.ReactNode;
+
+          switch (title.mediaType) {
+            case 'movie':
+              titleCard = (
+                <TitleCard
+                  id={title.id}
+                  image={title.posterPath}
+                  status={title.request?.status}
+                  summary={title.overview}
+                  title={title.title}
+                  userScore={title.voteAverage}
+                  year={title.releaseDate}
+                  mediaType={title.mediaType}
+                  requestId={title.request?.id}
+                />
+              );
+              break;
+            case 'tv':
+              titleCard = (
+                <TitleCard
+                  id={title.id}
+                  image={title.posterPath}
+                  status={title.request?.status}
+                  summary={title.overview}
+                  title={title.name}
+                  userScore={title.voteAverage}
+                  year={title.firstAirDate}
+                  mediaType={title.mediaType}
+                  requestId={title.request?.id}
+                />
+              );
+              break;
+            case 'person':
+              titleCard = <div>{title.name}</div>;
+              break;
+          }
+
+          return (
+            <li
+              key={title.id}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              {titleCard}
+            </li>
+          );
+        })}
+        {isLoading &&
+          [...Array(10)].map((_item, i) => (
+            <li
+              key={`placeholder-${i}`}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <TitleCard.Placeholder />
+            </li>
+          ))}
+      </ul>
+    </>
+  );
+};
+
+export default ListView;

src/components/Discover/DiscoverMovies.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useSWRInfinite } from 'swr';
+import { MovieResult } from '../../../server/models/Search';
+import ListView from '../Common/ListView';
+
+interface SearchResult {
+  page: number;
+  totalResults: number;
+  totalPages: number;
+  results: MovieResult[];
+}
+
+const DiscoverMovies: React.FC = () => {
+  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}`;
+    },
+    {
+      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[]
+  );
+
+  return (
+    <>
+      <div className="md:flex md:items-center md:justify-between mb-8 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">
+            Discover Movies
+          </h2>
+        </div>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverMovies;

src/components/Discover/DiscoverTv.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useSWRInfinite } from 'swr';
+import { TvResult } from '../../../server/models/Search';
+import ListView from '../Common/ListView';
+
+interface SearchResult {
+  page: number;
+  totalResults: number;
+  totalPages: number;
+  results: TvResult[];
+}
+
+const DiscoverTv: React.FC = () => {
+  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}`;
+    },
+    {
+      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 TvResult[]);
+
+  return (
+    <>
+      <div className="md:flex md:items-center md:justify-between mb-8 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">
+            Discover Series
+          </h2>
+        </div>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverTv;

src/components/MovieDetails/index.tsx

@@ -67,7 +67,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   }
   return (
     <div
-      className="bg-cover bg-center -mx-4 -mt-2 px-8 pt-4 "
+      className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "
       style={{
         height: 493,
         backgroundImage: `linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

src/components/Search/index.tsx

@@ -6,8 +6,7 @@ import {
   PersonResult,
 } from '../../../server/models/Search';
 import { useSWRInfinite } from 'swr';
-import useVerticalScroll from '../../hooks/useVerticalScroll';
+import ListView from '../Common/ListView';
-import TitleCard from '../TitleCard';
 
 interface SearchResult {
   page: number;
@@ -38,9 +37,9 @@ const Search: React.FC = () => {
     isLoadingInitialData ||
     (size > 0 && data && typeof data[size - 1] === 'undefined');
 
-  useVerticalScroll(() => {
+  const fetchMore = () => {
     setSize(size + 1);
-  }, !isLoadingMore && !isLoadingInitialData);
+  };
 
   if (error) {
     return <div>{error}</div>;
@@ -76,71 +75,14 @@ const Search: React.FC = () => {
           </span>
         </div>
       </div>
-      {!isLoadingInitialData && titles?.length === 0 && (
+      <ListView
-        <div className="w-full mt-64 text-2xl text-center text-cool-gray-400">
+        items={titles}
-          No Results
+        isEmpty={!isLoadingInitialData && titles?.length === 0}
-        </div>
+        isLoading={
-      )}
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
-      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-        {titles?.map((title) => {
-          let titleCard: React.ReactNode;
-
-          switch (title.mediaType) {
-            case 'movie':
-              titleCard = (
-                <TitleCard
-                  id={title.id}
-                  image={title.posterPath}
-                  status={title.request?.status}
-                  summary={title.overview}
-                  title={title.title}
-                  userScore={title.voteAverage}
-                  year={title.releaseDate}
-                  mediaType={title.mediaType}
-                  requestId={title.request?.id}
-                />
-              );
-              break;
-            case 'tv':
-              titleCard = (
-                <TitleCard
-                  id={title.id}
-                  image={title.posterPath}
-                  status={title.request?.status}
-                  summary={title.overview}
-                  title={title.name}
-                  userScore={title.voteAverage}
-                  year={title.firstAirDate}
-                  mediaType={title.mediaType}
-                  requestId={title.request?.id}
-                />
-              );
-              break;
-            case 'person':
-              titleCard = <div>{title.name}</div>;
-              break;
         }
-
+        onScrollBottom={fetchMore}
-          return (
+      />
-            <li
-              key={title.id}
-              className="col-span-1 flex flex-col text-center items-center"
-            >
-              {titleCard}
-            </li>
-          );
-        })}
-        {(isLoadingInitialData ||
-          (isLoadingMore && (titles?.length ?? 0) > 0)) &&
-          [...Array(10)].map((_item, i) => (
-            <li
-              key={`placeholder-${i}`}
-              className="col-span-1 flex flex-col text-center items-center"
-            >
-              <TitleCard.Placeholder />
-            </li>
-          ))}
-      </ul>
     </>
   );
 };

src/components/Slider/index.tsx

@@ -19,7 +19,7 @@ const Slider: React.FC<SliderProps> = ({
       {items?.map((item, index) => (
         <div
           key={`${sliderKey}-${index}`}
-          className="first:px-4 last:px-4 px-2 inline-block"
+          className="first:pl-4 last:pr-4 px-2 inline-block"
         >
           {item}
         </div>
@@ -28,7 +28,7 @@ const Slider: React.FC<SliderProps> = ({
         [...Array(10)].map((_item, i) => (
           <div
             key={`placeholder-${i}`}
-            className="first:px-4 last:px-4 px-2 inline-block"
+            className="first:pl-4 last:pr-4 px-2 inline-block"
           >
             <TitleCard.Placeholder />
           </div>

src/components/TitleCard/Placeholder.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 const Placeholder: React.FC = () => {
   return (
-    <div
+    <div className="relative animate-pulse rounded-lg bg-cool-gray-700 w-36 sm:w-36 md:w-44 ">
-      style={{ width: 180, height: 270 }}
+      <div className="w-full" style={{ paddingBottom: '150%' }} />
-      className="animate-pulse rounded-lg bg-cool-gray-700"
+    </div>
-    />
   );
 };
 

src/pages/discover/movies.tsx

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

src/pages/discover/tv.tsx

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