feat(frontend): initial modal

src/components/DeclineRequestModal/index.tsx

@@ -0,0 +1,66 @@
+import { Transition } from '@headlessui/react';
+import { useState } from 'react';
+import Modal from '@app/components/Common/Modal';
+import useSWR from 'swr';
+import type { MovieDetails } from '@server/models/Movie';
+import { useIntl } from 'react-intl';
+import globalMessages from '@app/i18n/globalMessages';
+
+interface DeclineRequestModalProps {
+  show: boolean;
+  tmdbId: number;
+  onDecline?: (declineMessage: string) => void;
+  onCancel?: () => void;
+}
+
+const DeclineRequestModal = ({
+  show,
+  tmdbId,
+  onDecline,
+  onCancel,
+}: DeclineRequestModalProps) => {
+  const intl = useIntl();
+  const [declineMessage, setDeclineMessage] = useState('');
+  const { data, error } = useSWR<MovieDetails>(`/api/v1/movie/${tmdbId}`, {
+    revalidateOnMount: true,
+  });
+
+  const handleDecline = () => {
+    if (onDecline) {
+      onDecline(declineMessage);
+    }
+  };
+
+  return (
+    <Transition
+      as="div"
+      enter="transition-opacity duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      show={show}
+    >
+      <Modal
+        loading={!data && !error}
+        title="Decline Request"
+        subTitle={data?.title}
+        onCancel={onCancel}
+        onOk={handleDecline}
+        okText={intl.formatMessage(globalMessages.decline)}
+        okButtonType="danger"
+        cancelText={intl.formatMessage(globalMessages.cancel)}
+        backdrop={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data?.backdropPath}`}
+        >
+        <textarea
+          value={declineMessage}
+          onChange={(e) => setDeclineMessage(e.target.value)}
+          placeholder="Optional decline message"
+        />
+      </Modal>
+    </Transition>
+  );
+};
+
+export default DeclineRequestModal;

src/components/RequestList/RequestItem/index.tsx

@@ -2,6 +2,7 @@ import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import CachedImage from '@app/components/Common/CachedImage';
 import ConfirmButton from '@app/components/Common/ConfirmButton';
+import DeclineRequestModal from '@app/components/DeclineRequestModal';
 import RequestModal from '@app/components/RequestModal';
 import StatusBadge from '@app/components/StatusBadge';
 import useDeepLinks from '@app/hooks/useDeepLinks';
@@ -283,6 +284,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
   const intl = useIntl();
   const { user, hasPermission } = useUser();
   const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeclineModal, setShowDeclineModal] = useState(false);
   const url =
     request.type === 'movie'
       ? `/api/v1/movie/${request.media.tmdbId}`
@@ -306,6 +308,16 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
 
   const [isRetrying, setRetrying] = useState(false);
 
+  const declineRequest = async (declineMessage: string) => {
+    const response = await axios.post(`/api/v1/request/${request.id}/decline`, {
+      message: declineMessage,
+    });
+
+    if (response) {
+      revalidate();
+    }
+  }
+
   const modifyRequest = async (type: 'approve' | 'decline') => {
     const response = await axios.post(`/api/v1/request/${request.id}/${type}`);
 
@@ -375,6 +387,16 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
           setShowEditModal(false);
         }}
       />
+      <DeclineRequestModal
+        show={showDeclineModal}
+        tmdbId={request.media.tmdbId}
+        onDecline={(declineMessage) => {
+          declineRequest(declineMessage);
+          setShowDeclineModal(false);
+        }
+        }
+        onCancel={() => setShowDeclineModal(false)}
+      />
       <div className="relative flex w-full flex-col justify-between overflow-hidden rounded-xl bg-gray-800 py-4 text-gray-400 shadow-md ring-1 ring-gray-700 xl:h-28 xl:flex-row">
         {title.backdropPath && (
           <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
@@ -648,7 +670,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                   <Button
                     className="w-full"
                     buttonType="danger"
-                    onClick={() => modifyRequest('decline')}
+                    onClick={() => setShowDeclineModal(true)}
                   >
                     <XMarkIcon />
                     <span>{intl.formatMessage(globalMessages.decline)}</span>