feat(frontend): request card / recent requests

server/routes/request.ts

@@ -11,9 +11,18 @@ requestRoutes.get('/', async (req, res, next) => {
   const requestRepository = getRepository(MediaRequest);
   try {
     const requests = req.user?.hasPermission(Permission.MANAGE_REQUESTS)
-      ? await requestRepository.find()
+      ? await requestRepository.find({
+          order: {
+            id: 'DESC',
+          },
+          take: 20,
+        })
       : await requestRepository.find({
           where: { requestedBy: { id: req.user?.id } },
+          order: {
+            id: 'DESC',
+          },
+          take: 20,
         });
 
     return res.status(200).json(requests);

src/components/Discover/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import useSWR from 'swr';
 import type { MovieResult, TvResult } from '../../../server/models/Search';
 import TitleCard from '../TitleCard';
+import { MediaRequest } from '../../../server/entity/MediaRequest';
+import RequestCard from '../TitleCard/RequestCard';
 
 interface MovieDiscoverResult {
   page: number;
@@ -25,8 +27,47 @@ const Discover: React.FC = () => {
     '/api/v1/discover/tv'
   );
 
+  const { data: requests, error: requestError } = useSWR<MediaRequest[]>(
+    '/api/v1/request'
+  );
+
   return (
     <>
+      <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">
+            Recent Requests
+          </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>
+          ))}
+        {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">

src/components/TitleCard/RequestCard.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import useSWR from 'swr';
+import type { MovieDetails } from '../../../server/models/Movie';
+import type { TvDetails } from '../../../server/models/Tv';
+import TitleCard from '.';
+
+interface TmdbTitleCardProps {
+  tmdbId: number;
+  type: 'movie' | 'tv';
+}
+
+const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
+  return (movie as MovieDetails).title !== undefined;
+};
+
+const RequestCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
+  const url =
+    type === 'movie' ? `/api/v1/movie/${tmdbId}` : `/api/v1/tv/${tmdbId}`;
+  const { data: title, error } = useSWR<MovieDetails | TvDetails>(url);
+
+  if (!title && !error) {
+    return <TitleCard.Placeholder />;
+  }
+
+  if (!title) {
+    return <TitleCard.Placeholder />;
+  }
+
+  return isMovie(title) ? (
+    <TitleCard
+      id={title.id}
+      image={title.posterPath}
+      status={title.request?.status}
+      summary={title.overview}
+      title={title.title}
+      userScore={title.voteAverage}
+      year={title.releaseDate}
+      mediaType={'movie'}
+      requestId={title.request?.id}
+    />
+  ) : (
+    <TitleCard
+      id={title.id}
+      image={title.posterPath}
+      status={title.request?.status}
+      summary={title.overview}
+      title={title.name}
+      userScore={title.voteAverage}
+      year={title.firstAirDate}
+      mediaType={'tv'}
+      requestId={title.request?.id}
+    />
+  );
+};
+
+export default RequestCard;

src/components/TitleCard/index.tsx

@@ -13,7 +13,7 @@ import MovieRequestModal from '../RequestModal/MovieRequestModal';
 interface TitleCardProps {
   id: number;
   image?: string;
-  summary: string;
+  summary?: string;
   year: string;
   title: string;
   userScore: number;