feat(ui): request list item & request card improvements (#1532)

* feat(ui): add additional request card buttons

* feat(ui): add year to request list items & request cards

* fix(ui): do not show edit button conditionally, and don't hide modifiedBy user

* revert: do not unhide season list for reg users on mobile

src/components/RequestCard/index.tsx

@@ -1,9 +1,16 @@
-import { CheckIcon, TrashIcon, XIcon } from '@heroicons/react/solid';
+import {
+  CheckIcon,
+  PencilIcon,
+  RefreshIcon,
+  TrashIcon,
+  XIcon,
+} from '@heroicons/react/solid';
 import axios from 'axios';
 import Link from 'next/link';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
 import {
   MediaRequestStatus,
@@ -18,10 +25,12 @@ import { withProperties } from '../../utils/typeHelpers';
 import Badge from '../Common/Badge';
 import Button from '../Common/Button';
 import CachedImage from '../Common/CachedImage';
+import RequestModal from '../RequestModal';
 import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
   seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
+  failedretry: 'Something went wrong while retrying the request.',
   mediaerror: 'The associated title for this request is no longer available.',
   deleterequest: 'Delete Request',
 });
@@ -89,7 +98,10 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
     triggerOnce: true,
   });
   const intl = useIntl();
-  const { hasPermission } = useUser();
+  const { user, hasPermission } = useUser();
+  const { addToast } = useToasts();
+  const [isRetrying, setRetrying] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
   const url =
     request.type === 'movie'
       ? `/api/v1/movie/${request.media.tmdbId}`
@@ -113,6 +125,30 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
     }
   };
 
+  const deleteRequest = async () => {
+    await axios.delete(`/api/v1/request/${request.id}`);
+    mutate('/api/v1/request?filter=all&take=10&sort=modified&skip=0');
+  };
+
+  const retryRequest = async () => {
+    setRetrying(true);
+
+    try {
+      const response = await axios.post(`/api/v1/request/${request.id}/retry`);
+
+      if (response) {
+        revalidate();
+      }
+    } catch (e) {
+      addToast(intl.formatMessage(messages.failedretry), {
+        autoDismiss: true,
+        appearance: 'error',
+      });
+    } finally {
+      setRetrying(false);
+    }
+  };
+
   useEffect(() => {
     if (title && onTitleData) {
       onTitleData(request.id, title);
@@ -136,6 +172,19 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
   }
 
   return (
+    <>
+      <RequestModal
+        show={showEditModal}
+        tmdbId={request.media.tmdbId}
+        type={request.type}
+        is4k={request.is4k}
+        editRequest={request}
+        onCancel={() => setShowEditModal(false)}
+        onComplete={() => {
+          revalidate();
+          setShowEditModal(false);
+        }}
+      />
       <div className="relative flex p-4 overflow-hidden text-gray-400 bg-gray-800 bg-center bg-cover shadow rounded-xl w-72 sm:w-96 ring-1 ring-gray-700">
         {title.backdropPath && (
           <div className="absolute inset-0 z-0">
@@ -155,6 +204,12 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
           </div>
         )}
         <div className="relative z-10 flex flex-col flex-1 min-w-0 pr-4">
+          <div className="hidden text-xs text-white sm:flex">
+            {(isMovie(title) ? title.releaseDate : title.firstAirDate)?.slice(
+              0,
+              4
+            )}
+          </div>
           <Link
             href={
               request.type === 'movie'
@@ -162,10 +217,14 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                 : `/tv/${requestData.media.tmdbId}`
             }
           >
-          <a className="pb-0.5 sm:pb-1 overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
+            <a className="overflow-hidden text-base text-white sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
               {isMovie(title) ? title.title : title.name}
             </a>
           </Link>
+          {hasPermission(
+            [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
+            { type: 'or' }
+          ) && (
             <div className="card-field">
               <Link href={`/users/${requestData.requestedBy.id}`}>
                 <a className="flex items-center group">
@@ -180,8 +239,9 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                 </a>
               </Link>
             </div>
+          )}
           {!isMovie(title) && request.seasons.length > 0 && (
-          <div className="sm:flex items-center my-0.5 sm:my-1 text-sm hidden">
+            <div className="items-center my-0.5 sm:my-1 text-sm hidden sm:flex">
               <span className="mr-2 font-medium">
                 {intl.formatMessage(messages.seasons, {
                   seasonCount:
@@ -237,9 +297,42 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
               />
             )}
           </div>
+          <div className="flex items-end flex-1 space-x-2">
+            {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
+              MediaStatus.UNKNOWN &&
+              requestData.status !== MediaRequestStatus.DECLINED &&
+              hasPermission(Permission.MANAGE_REQUESTS) && (
+                <Button
+                  buttonType="primary"
+                  buttonSize="sm"
+                  disabled={isRetrying}
+                  onClick={() => retryRequest()}
+                >
+                  <RefreshIcon
+                    className={isRetrying ? 'animate-spin' : ''}
+                    style={{ marginRight: '0', animationDirection: 'reverse' }}
+                  />
+                  <span className="hidden ml-1.5 sm:block">
+                    {intl.formatMessage(globalMessages.retry)}
+                  </span>
+                </Button>
+              )}
+            {requestData.status !== MediaRequestStatus.PENDING &&
+              hasPermission(Permission.MANAGE_REQUESTS) && (
+                <Button
+                  buttonType="danger"
+                  buttonSize="sm"
+                  onClick={() => deleteRequest()}
+                >
+                  <TrashIcon style={{ marginRight: '0' }} />
+                  <span className="hidden ml-1.5 sm:block">
+                    {intl.formatMessage(globalMessages.delete)}
+                  </span>
+                </Button>
+              )}
             {requestData.status === MediaRequestStatus.PENDING &&
               hasPermission(Permission.MANAGE_REQUESTS) && (
-            <div className="flex items-end flex-1 space-x-2">
+                <>
                   <Button
                     buttonType="success"
                     buttonSize="sm"
@@ -260,8 +353,42 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                       {intl.formatMessage(globalMessages.decline)}
                     </span>
                   </Button>
-            </div>
+                </>
               )}
+            {requestData.status === MediaRequestStatus.PENDING &&
+              !hasPermission(Permission.MANAGE_REQUESTS) &&
+              requestData.requestedBy.id === user?.id &&
+              (requestData.type === 'tv' ||
+                hasPermission(Permission.REQUEST_ADVANCED)) && (
+                <Button
+                  buttonType="primary"
+                  buttonSize="sm"
+                  onClick={() => setShowEditModal(true)}
+                  className={`${
+                    hasPermission(Permission.MANAGE_REQUESTS) ? 'sm:hidden' : ''
+                  }`}
+                >
+                  <PencilIcon style={{ marginRight: '0' }} />
+                  <span className="hidden ml-1.5 sm:block">
+                    {intl.formatMessage(globalMessages.edit)}
+                  </span>
+                </Button>
+              )}
+            {requestData.status === MediaRequestStatus.PENDING &&
+              !hasPermission(Permission.MANAGE_REQUESTS) &&
+              requestData.requestedBy.id === user?.id && (
+                <Button
+                  buttonType="danger"
+                  buttonSize="sm"
+                  onClick={() => deleteRequest()}
+                >
+                  <XIcon style={{ marginRight: '0' }} />
+                  <span className="hidden ml-1.5 sm:block">
+                    {intl.formatMessage(globalMessages.cancel)}
+                  </span>
+                </Button>
+              )}
+          </div>
         </div>
         <Link
           href={
@@ -285,6 +412,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
           </a>
         </Link>
       </div>
+    </>
   );
 };
 

src/components/RequestList/RequestItem/index.tsx

@@ -32,6 +32,7 @@ const messages = defineMessages({
   seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
   failedretry: 'Something went wrong while retrying the request.',
   requested: 'Requested',
+  requesteddate: 'Requested',
   modified: 'Modified',
   modifieduserdate: '{date} by {user}',
   mediaerror: 'The associated title for this request is no longer available.',
@@ -219,7 +220,12 @@ const RequestItem: React.FC<RequestItemProps> = ({
               </a>
             </Link>
             <div className="flex flex-col justify-center pl-2 overflow-hidden xl:pl-4">
-              <div className="card-field">
+              <div className="pt-0.5 sm:pt-1 text-xs text-white">
+                {(isMovie(title)
+                  ? title.releaseDate
+                  : title.firstAirDate
+                )?.slice(0, 4)}
+              </div>
               <Link
                 href={
                   requestData.type === 'movie'
@@ -231,21 +237,6 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   {isMovie(title) ? title.title : title.name}
                 </a>
               </Link>
-              </div>
-              <div className="card-field">
-                <Link href={`/users/${requestData.requestedBy.id}`}>
-                  <a className="flex items-center group">
-                    <img
-                      src={requestData.requestedBy.avatar}
-                      alt=""
-                      className="avatar-sm"
-                    />
-                    <span className="text-sm text-gray-300 truncate group-hover:underline">
-                      {requestData.requestedBy.displayName}
-                    </span>
-                  </a>
-                </Link>
-              </div>
               {!isMovie(title) && request.seasons.length > 0 && (
                 <div className="card-field">
                   <span className="card-field-name">
@@ -276,7 +267,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
               )}
             </div>
           </div>
-          <div className="z-10 flex flex-col justify-center w-full pr-4 mt-4 ml-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+          <div className="z-10 flex flex-col justify-center w-full pr-4 mt-4 ml-4 overflow-hidden text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
             <div className="card-field">
               <span className="card-field-name">
                 {intl.formatMessage(globalMessages.status)}
@@ -308,24 +299,69 @@ const RequestItem: React.FC<RequestItemProps> = ({
               )}
             </div>
             <div className="card-field">
+              {hasPermission(
+                [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
+                { type: 'or' }
+              ) ? (
+                <>
                   <span className="card-field-name">
                     {intl.formatMessage(messages.requested)}
                   </span>
-              <span className="text-gray-300">
+                  <span className="flex text-sm text-gray-300 truncate">
-                {intl.formatDate(requestData.createdAt, {
+                    {intl.formatMessage(messages.modifieduserdate, {
-                  year: 'numeric',
+                      date: (
-                  month: 'long',
+                        <FormattedRelativeTime
-                  day: 'numeric',
+                          value={Math.floor(
+                            (new Date(requestData.createdAt).getTime() -
+                              Date.now()) /
+                              1000
+                          )}
+                          updateIntervalInSeconds={1}
+                          numeric="auto"
+                        />
+                      ),
+                      user: (
+                        <Link href={`/users/${requestData.requestedBy.id}`}>
+                          <a className="flex items-center truncate group">
+                            <img
+                              src={requestData.requestedBy.avatar}
+                              alt=""
+                              className="ml-1.5 avatar-sm"
+                            />
+                            <span className="text-sm truncate group-hover:underline">
+                              {requestData.requestedBy.displayName}
+                            </span>
+                          </a>
+                        </Link>
+                      ),
                     })}
                   </span>
+                </>
+              ) : (
+                <>
+                  <span className="card-field-name">
+                    {intl.formatMessage(messages.requesteddate)}
+                  </span>
+                  <span className="flex text-sm text-gray-300 truncate">
+                    <FormattedRelativeTime
+                      value={Math.floor(
+                        (new Date(requestData.createdAt).getTime() -
+                          Date.now()) /
+                          1000
+                      )}
+                      updateIntervalInSeconds={1}
+                      numeric="auto"
+                    />
+                  </span>
+                </>
+              )}
             </div>
+            {requestData.modifiedBy && (
               <div className="card-field">
                 <span className="card-field-name">
                   {intl.formatMessage(messages.modified)}
                 </span>
-              <span className="truncate">
+                <span className="flex text-sm text-gray-300 truncate">
-                {requestData.modifiedBy ? (
-                  <span className="flex text-sm text-gray-300">
                   {intl.formatMessage(messages.modifieduserdate, {
                     date: (
                       <FormattedRelativeTime
@@ -340,7 +376,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                     ),
                     user: (
                       <Link href={`/users/${requestData.modifiedBy.id}`}>
-                          <a className="flex items-center group">
+                        <a className="flex items-center truncate group">
                           <img
                             src={requestData.modifiedBy.avatar}
                             alt=""
@@ -354,11 +390,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
                     ),
                   })}
                 </span>
-                ) : (
-                  <span className="text-sm text-gray-300">N/A</span>
-                )}
-              </span>
               </div>
+            )}
           </div>
         </div>
         <div className="z-10 flex flex-col justify-center w-full pl-4 pr-4 mt-4 space-y-2 xl:mt-0 xl:items-end xl:w-96 xl:pl-0">

src/i18n/locale/en.json

@@ -168,6 +168,7 @@
   "components.RequestButton.viewrequest": "View Request",
   "components.RequestButton.viewrequest4k": "View 4K Request",
   "components.RequestCard.deleterequest": "Delete Request",
+  "components.RequestCard.failedretry": "Something went wrong while retrying the request.",
   "components.RequestCard.mediaerror": "The associated title for this request is no longer available.",
   "components.RequestCard.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
   "components.RequestList.RequestItem.cancelRequest": "Cancel Request",
@@ -178,6 +179,7 @@
   "components.RequestList.RequestItem.modified": "Modified",
   "components.RequestList.RequestItem.modifieduserdate": "{date} by {user}",
   "components.RequestList.RequestItem.requested": "Requested",
+  "components.RequestList.RequestItem.requesteddate": "Requested",
   "components.RequestList.RequestItem.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
   "components.RequestList.requests": "Requests",
   "components.RequestList.showallrequests": "Show All Requests",

src/styles/globals.css

@@ -198,7 +198,7 @@ img.avatar-sm {
 }
 
 .card-field {
-  @apply flex items-center py-0.5 sm:py-1 text-sm;
+  @apply flex items-center py-0.5 sm:py-1 text-sm truncate;
 }
 
 .card-field-name {