feat(frontend): new design for request card

renamed old requestcard to TmdbTitleCard

src/components/Common/ButtonWithDropdown/index.tsx

@@ -77,10 +77,10 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
         )}
         <Transition
           show={isOpen}
-          enter="transition ease-out duration-100"
+          enter="transition ease-out duration-100 opacity-0"
           enterFrom="transform opacity-0 scale-95"
           enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
+          leave="transition ease-in duration-75 opacity-100"
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >

src/components/Discover/index.tsx

@@ -8,13 +8,14 @@ import type {
 import TitleCard from '../TitleCard';
 import PersonCard from '../PersonCard';
 import { MediaRequest } from '../../../server/entity/MediaRequest';
-import RequestCard from '../TitleCard/RequestCard';
+import TmdbTitleCard from '../TitleCard/TmdbTitleCard';
 import Slider from '../Slider';
 import Link from 'next/link';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { LanguageContext } from '../../context/LanguageContext';
 import type Media from '../../../server/entity/Media';
 import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';
+import RequestCard from '../RequestCard';
 
 const messages = defineMessages({
   recentrequests: 'Recent Requests',
@@ -89,7 +90,7 @@ const Discover: React.FC = () => {
         isLoading={!media && !mediaError}
         isEmpty={!!media && !mediaError && media.results.length === 0}
         items={media?.results?.map((item) => (
-          <RequestCard
+          <TmdbTitleCard
             key={`media-slider-item-${item.id}`}
             tmdbId={item.tmdbId}
             type={item.mediaType}
@@ -128,10 +129,10 @@ const Discover: React.FC = () => {
         items={requests?.map((request) => (
           <RequestCard
             key={`request-slider-item-${request.id}`}
-            tmdbId={request.media.tmdbId}
+            request={request}
-            type={request.media.mediaType}
           />
         ))}
+        placeholder={<RequestCard.Placeholder />}
         emptyMessage={intl.formatMessage(messages.nopending)}
       />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">

src/components/RequestCard/index.tsx

@@ -0,0 +1,167 @@
+import React, { useContext, useState } from 'react';
+import type { MediaRequest } from '../../../server/entity/MediaRequest';
+import type { TvDetails } from '../../../server/models/Tv';
+import type { MovieDetails } from '../../../server/models/Movie';
+import useSWR from 'swr';
+import { LanguageContext } from '../../context/LanguageContext';
+import {
+  MediaStatus,
+  MediaRequestStatus,
+} from '../../../server/constants/media';
+import Badge from '../Common/Badge';
+import { useUser, Permission } from '../../hooks/useUser';
+import axios from 'axios';
+import Button from '../Common/Button';
+import { withProperties } from '../../utils/typeHelpers';
+
+const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
+  return (movie as MovieDetails).title !== undefined;
+};
+
+const RequestCardPlaceholder: React.FC = () => {
+  return (
+    <div className="w-96 relative animate-pulse rounded-lg bg-gray-700 p-4">
+      <div className="w-28">
+        <div className="w-full" style={{ paddingBottom: '150%' }} />
+      </div>
+    </div>
+  );
+};
+
+interface RequestCardProps {
+  request: MediaRequest;
+}
+
+const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
+  const { hasPermission } = useUser();
+  const { locale } = useContext(LanguageContext);
+  const url =
+    request.type === 'movie'
+      ? `/api/v1/movie/${request.media.tmdbId}`
+      : `/api/v1/tv/${request.media.tmdbId}`;
+  const { data: title, error } = useSWR<MovieDetails | TvDetails>(
+    `${url}?language=${locale}`
+  );
+  const { data: requestData, error: requestError, revalidate } = useSWR<
+    MediaRequest
+  >(`/api/v1/request/${request.id}`, {
+    initialData: request,
+  });
+
+  const modifyRequest = async (type: 'approve' | 'decline') => {
+    const response = await axios.get(`/api/v1/request/${request.id}/${type}`);
+
+    if (response) {
+      revalidate();
+    }
+  };
+
+  if (!title && !error) {
+    return <RequestCardPlaceholder />;
+  }
+
+  if (!requestData && !requestError) {
+    return <RequestCardPlaceholder />;
+  }
+
+  if (!title || !requestData) {
+    return <RequestCardPlaceholder />;
+  }
+
+  return (
+    <div
+      className="relative w-72 sm:w-96 p-4 bg-gray-800 rounded-md flex bg-cover bg-center text-gray-400"
+      style={{
+        backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
+      }}
+    >
+      <div className="flex-1 pr-4 min-w-0 flex flex-col">
+        <h2 className="text-base sm:text-lg overflow-ellipsis overflow-hidden whitespace-nowrap text-white">
+          {isMovie(title) ? title.title : title.name}
+        </h2>
+        <div className="text-xs sm:text-sm">
+          Requested by {requestData.requestedBy.username}
+        </div>
+        <div className="mt-1 sm:mt-2">
+          {requestData.media.status === MediaStatus.AVAILABLE && (
+            <Badge badgeType="success">Available</Badge>
+          )}
+          {requestData.media.status === MediaStatus.PROCESSING && (
+            <Badge badgeType="danger">Unavailable</Badge>
+          )}
+          {requestData.media.status === MediaStatus.PENDING && (
+            <Badge badgeType="warning">Pending</Badge>
+          )}
+        </div>
+        {request.seasons.length > 0 && (
+          <div className="hidden mt-2 text-sm sm:flex items-center">
+            <span className="mr-2">Seasons</span>
+            {request.seasons.map((season) => (
+              <span key={`season-${season.id}`} className="mr-2">
+                <Badge>{season.seasonNumber}</Badge>
+              </span>
+            ))}
+          </div>
+        )}
+        {requestData.status === MediaRequestStatus.PENDING &&
+          hasPermission(Permission.MANAGE_REQUESTS) && (
+            <div className="flex-1 flex items-end">
+              <span className="mr-2">
+                <Button
+                  buttonType="success"
+                  buttonSize="sm"
+                  onClick={() => modifyRequest('approve')}
+                >
+                  <svg
+                    className="w-4 h-4 mr-0 sm:mr-1"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <span className="hidden sm:block">Approve</span>
+                </Button>
+              </span>
+              <span>
+                <Button
+                  buttonType="danger"
+                  buttonSize="sm"
+                  onClick={() => modifyRequest('decline')}
+                >
+                  <svg
+                    className="w-4 h-4 mr-0 sm:mr-1"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <span className="hidden sm:block">Decline</span>
+                </Button>
+              </span>
+            </div>
+          )}
+      </div>
+      <div className="flex-shrink-0 w-20 sm:w-28">
+        <img
+          src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
+          alt=""
+          className="w-20 sm:w-28 rounded-md shadow-sm"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default withProperties(RequestCard, {
+  Placeholder: RequestCardPlaceholder,
+});

src/components/Slider/index.tsx

@@ -14,6 +14,7 @@ interface SliderProps {
   isLoading: boolean;
   isEmpty: boolean;
   emptyMessage?: string;
+  placeholder?: ReactNode;
 }
 
 enum Direction {
@@ -27,6 +28,7 @@ const Slider: React.FC<SliderProps> = ({
   isLoading,
   isEmpty,
   emptyMessage,
+  placeholder = <TitleCard.Placeholder />,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollPos, setScrollPos] = useState({ isStart: true, isEnd: false });
@@ -204,14 +206,20 @@ const Slider: React.FC<SliderProps> = ({
         onScroll={onScroll}
       >
         {items?.map((item, index) => (
-          <div key={`${sliderKey}-${index}`} className="px-2 inline-block">
+          <div
+            key={`${sliderKey}-${index}`}
+            className="px-2 inline-block align-top"
+          >
             {item}
           </div>
         ))}
         {isLoading &&
           [...Array(10)].map((_item, i) => (
-            <div key={`placeholder-${i}`} className="px-2 inline-block">
+            <div
-              <TitleCard.Placeholder />
+              key={`placeholder-${i}`}
+              className="px-2 inline-block align-top"
+            >
+              {placeholder}
             </div>
           ))}
         {isEmpty && (

src/components/TitleCard/TmdbTitleCard.tsx

@@ -14,7 +14,7 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
   return (movie as MovieDetails).title !== undefined;
 };
 
-const RequestCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
+const TmdbTitleCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
   const { locale } = useContext(LanguageContext);
   const url =
     type === 'movie' ? `/api/v1/movie/${tmdbId}` : `/api/v1/tv/${tmdbId}`;
@@ -55,4 +55,4 @@ const RequestCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
   );
 };
 
-export default RequestCard;
+export default TmdbTitleCard;