feat(frontend): recently added on discover

also improves modal requests by not waiting for result from radarr/sonarr

src/components/Discover/index.tsx

@@ -6,13 +6,17 @@ import { MediaRequest } from '../../../server/entity/MediaRequest';
 import RequestCard from '../TitleCard/RequestCard';
 import Slider from '../Slider';
 import Link from 'next/link';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { LanguageContext } from '../../context/LanguageContext';
+import type Media from '../../../server/entity/Media';
+import type { MediaResultsResponse } from '../../../server/routes/media';
 
 const messages = defineMessages({
   recentrequests: 'Recent Requests',
   popularmovies: 'Popular Movies',
   populartv: 'Popular Series',
+  recentlyAdded: 'Recently Added',
+  nopending: 'No Pending Requests',
 });
 
 interface MovieDiscoverResult {
@@ -30,6 +34,7 @@ interface TvDiscoverResult {
 }
 
 const Discover: React.FC = () => {
+  const intl = useIntl();
   const { locale } = useContext(LanguageContext);
   const { data: movieData, error: movieError } = useSWR<MovieDiscoverResult>(
     `/api/v1/discover/movies?language=${locale}`
@@ -38,12 +43,53 @@ const Discover: React.FC = () => {
     `/api/v1/discover/tv?language=${locale}`
   );
 
+  const { data: media, error: mediaError } = useSWR<MediaResultsResponse>(
+    '/api/v1/media?filter=available&take=20'
+  );
+
   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">
+          <Link href="/recent">
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>
+                <FormattedMessage {...messages.recentlyAdded} />
+              </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="requests"
+        isLoading={!media && !mediaError}
+        isEmpty={!!media && !mediaError && media.results.length === 0}
+        items={media?.results?.map((item) => (
+          <RequestCard
+            key={`media-slider-item-${item.id}`}
+            tmdbId={item.tmdbId}
+            type={item.mediaType}
+          />
+        ))}
+      />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/requests">
@@ -80,6 +126,7 @@ const Discover: React.FC = () => {
             type={request.media.mediaType}
           />
         ))}
+        emptyMessage={intl.formatMessage(messages.nopending)}
       />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">