Merge pull request #414 from NIAEFEUP/feature/allow-user-cancel-excha…

…nges-they-sent

feat: cancel exchange request

src/@types/index.d.ts

@@ -131,6 +131,7 @@ export type MarketplaceRequest = {
   classes?: Array<ClassInfo>,
   pending_motive?: DirectExchangePendingMotive,
   accepted: boolean,
+  canceled: boolean
 }
 
 export type DirectExchangeRequest = {

src/api/services/exchangeRequestService.ts

@@ -120,6 +120,16 @@ const acceptDirectExchangeRequest = async (id: number) => {
   });
 }
 
+const cancelMarketplaceRequest = async (id: number) => {
+  return fetch(`${api.BACKEND_URL}/exchange/marketplace/${id}/cancel/`, {
+    method: "PUT",
+    credentials: "include",
+    headers: {
+      "X-CSRFToken": api.getCSRFToken(),
+    },
+  });
+}
+
 const exchangeRequestService = {
   submitExchangeRequest,
   retrieveMarketplaceRequest,
@@ -128,7 +138,8 @@ const exchangeRequestService = {
   adminAcceptExchangeRequest,
   adminMarkRequestAsAwaitingInformation,
   verifyExchangeRequest,
-  acceptDirectExchangeRequest
+  acceptDirectExchangeRequest,
+  cancelMarketplaceRequest
 }
 
 export default exchangeRequestService;

src/components/exchange/requests/view/cards/CommonCardHeader.tsx

@@ -33,7 +33,7 @@ export const CommonCardHeader = ({
     useEffect(() => {
         if (!showRequestStatus) return;
 
-        if ((request as DirectExchangeRequest).canceled) {
+        if (request.canceled) {
             setRequestStatus(StudentRequestCardStatus.CANCELED);
             return;
         }

src/components/exchange/requests/view/cards/MineRequestCard.tsx

@@ -5,15 +5,24 @@ import SessionContext from "../../../../../contexts/SessionContext";
 import { Card, CardContent, CardFooter } from "../../../../ui/card"
 import { CommonCardHeader } from "./CommonCardHeader";
 import { ListRequestChanges } from "./ListRequestChanges";
+import { Button } from "../../../../ui/button";
+import useCancelMarketplaceExchange from "../../../../../hooks/exchange/useCancelMarketplaceExchange";
+import { MoonLoader } from "react-spinners";
+import { StudentRequestCardStatus } from "../../../../../utils/requests";
 
 type Props = {
     request: MarketplaceRequest
 }
 
 export const MineRequestCard = ({ request }: Props) => {
-    const { open, setOpen, selectedOptions, setSelectedOptions, setSelectAll, togglePreview } = useContext(ExchangeRequestCommonContext);
+    const {
+        open, setOpen, selectedOptions, setSelectedOptions, setSelectAll, togglePreview,
+        setRequestStatus
+    } = useContext(ExchangeRequestCommonContext);
     const [hovered, setHovered] = useState<boolean>(false);
 
+    const { trigger: cancelMarketplaceExchange, isMutating: cancelingMarketplaceExchange } = useCancelMarketplaceExchange(request.id);
+
     const { user } = useContext(SessionContext);
 
     return <Card
@@ -49,20 +58,19 @@ export const MineRequestCard = ({ request }: Props) => {
             )}
         </CardContent>
         <CardFooter className={open ? "" : "hidden"}>
-            {/* <div className="flex flex-row justify-between w-full items-center"> */}
-            {/*     <form className="flex flex-row gap-2"> */}
-            {/*         {!request.accepted && request.pending_motive === DirectExchangePendingMotive.USER_DID_NOT_ACCEPT && */}
-            {/*             <Button */}
-            {/*                 type="submit" */}
-            {/*                 className="success-button hover:bg-white" */}
-            {/*             > */}
-            {/*                 Aceitar */}
-            {/*             </Button> */}
-            {/*         } */}
-            {/*     </form> */}
-            {/* </div> */}
-
+            {(!request.canceled || !request.accepted) && <Button
+                variant="destructive"
+                onClick={async () => {
+                    await cancelMarketplaceExchange();
+                    setRequestStatus(StudentRequestCardStatus.CANCELED)
+                }}
+            >
+                {cancelingMarketplaceExchange
+                    ? <MoonLoader size={20} />
+                    : "Cancelar"
+                }
+            </Button>
+            }
         </CardFooter>
-
     </Card>
 }

src/hooks/exchange/useCancelMarketplaceExchange.tsx

@@ -0,0 +1,22 @@
+import useSWRMutation from "swr/mutation";
+import exchangeRequestService from "../../api/services/exchangeRequestService";
+
+export default (id: number) => {
+    const submit = async () => {
+       return await exchangeRequestService.cancelMarketplaceRequest(id);
+    }
+
+    const { error, trigger, isMutating } = useSWRMutation(
+        `${id}`,
+        submit
+    );
+
+    return {
+        error,
+        trigger,
+        isMutating
+    };
+};
+
+
+