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">

src/components/RequestModal/MovieRequestModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import Modal from '../Common/Modal';
 import { useUser } from '../../hooks/useUser';
 import { Permission } from '../../../server/lib/permissions';
@@ -35,6 +35,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
   onUpdating,
   ...props
 }) => {
+  const [isUpdating, setIsUpdating] = useState(false);
   const { addToast } = useToasts();
   const { data, error } = useSWR<MovieDetails>(`/api/v1/movie/${tmdbId}`, {
     revalidateOnMount: true,
@@ -42,10 +43,14 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
   const intl = useIntl();
   const { user, hasPermission } = useUser();
 
-  const sendRequest = useCallback(async () => {
+  useEffect(() => {
     if (onUpdating) {
-      onUpdating(true);
+      onUpdating(isUpdating);
     }
+  }, [isUpdating, onUpdating]);
+
+  const sendRequest = useCallback(async () => {
+    setIsUpdating(true);
     const response = await axios.post<MediaRequest>('/api/v1/request', {
       mediaId: data?.id,
       mediaType: 'movie',
@@ -61,18 +66,14 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         </span>,
         { appearance: 'success', autoDismiss: true }
       );
-      if (onUpdating) {
-        onUpdating(false);
-      }
+      setIsUpdating(false);
     }
-  }, [data, onComplete, onUpdating, addToast]);
+  }, [data, onComplete, addToast]);
 
   const activeRequest = data?.mediaInfo?.requests?.[0];
 
   const cancelRequest = async () => {
-    if (onUpdating) {
-      onUpdating(true);
-    }
+    setIsUpdating(true);
     const response = await axios.delete<MediaRequest>(
       `/api/v1/request/${activeRequest?.id}`
     );
@@ -87,9 +88,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         </span>,
         { appearance: 'success', autoDismiss: true }
       );
-      if (onUpdating) {
-        onUpdating(false);
-      }
+      setIsUpdating(false);
     }
   };
 
@@ -109,8 +108,9 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         backgroundClickable
         onCancel={onCancel}
         onOk={isOwner ? () => cancelRequest() : undefined}
+        okDisabled={isUpdating}
         title={`Pending request for ${data?.title}`}
-        okText={'Cancel Request'}
+        okText={isUpdating ? 'Cancelling...' : 'Cancel Request'}
         okButtonType={'danger'}
         cancelText="Close"
         iconSvg={<DownloadIcon className="w-6 h-6" />}
@@ -128,8 +128,9 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       backgroundClickable
       onCancel={onCancel}
       onOk={sendRequest}
+      okDisabled={isUpdating}
       title={`Request ${data?.title}`}
-      okText={'Request'}
+      okText={isUpdating ? 'Requesting...' : 'Request'}
       okButtonType={'primary'}
       iconSvg={<DownloadIcon className="w-6 h-6" />}
       {...props}

src/components/Slider/index.tsx

@@ -2,12 +2,18 @@ import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useSpring } from 'react-spring';
 import TitleCard from '../TitleCard';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+const messages = defineMessages({
+  noresults: 'No Results',
+});
 
 interface SliderProps {
   sliderKey: string;
   items?: JSX.Element[];
   isLoading: boolean;
   isEmpty: boolean;
+  emptyMessage?: string;
 }
 
 enum Direction {
@@ -20,6 +26,7 @@ const Slider: React.FC<SliderProps> = ({
   items,
   isLoading,
   isEmpty,
+  emptyMessage,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollPos, setScrollPos] = useState({ isStart: true, isEnd: false });
@@ -208,7 +215,13 @@ const Slider: React.FC<SliderProps> = ({
             </div>
           ))}
         {isEmpty && (
-          <div className="text-center text-white mt-16 mb-16">No Results</div>
+          <div className="text-center text-white mt-16 mb-16">
+            {emptyMessage ? (
+              emptyMessage
+            ) : (
+              <FormattedMessage {...messages.noresults} />
+            )}
+          </div>
         )}
       </div>
     </div>