Merge pull request #398 from NIAEFEUP/feature/accept-direct-exchange

User can click to accept direct exchange it received in the frontend

src/api/services/exchangeRequestService.ts

@@ -100,13 +100,24 @@ const verifyExchangeRequest = async (token: string): Promise<boolean>=> {
   });
 }
 
+const acceptDirectExchangeRequest = async (id: number) => {
+  return fetch(`${api.BACKEND_URL}/exchange/direct/${id}`, {
+    method: "PUT",
+    credentials: "include",
+    headers: {
+      "X-CSRFToken": api.getCSRFToken(),
+    },
+  });
+}
+
 const exchangeRequestService = {
   submitExchangeRequest,
   retrieveMarketplaceRequest,
   retrieveRequestCardMetadata,
   adminRejectExchangeRequest,
   adminAcceptExchangeRequest,
-  verifyExchangeRequest
+  verifyExchangeRequest,
+  acceptDirectExchangeRequest
 }
 
-export default exchangeRequestService;
+export default exchangeRequestService;

src/components/auth/LoginButton.tsx

@@ -16,4 +16,4 @@ export const LoginButton = ({ expanded = false }: Props) => {
     </a>
   </Button >
 
-}
+}

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

@@ -84,6 +84,8 @@ export const CommonRequestCard = ({
       }
     );
 
+    if(!exchangeSchedule) return;
+
     if (anySelected) {
       request.options.forEach((option) => {
         if (updatedOptions.get(option.course_info.acronym) === true) {

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

@@ -7,6 +7,10 @@ import { Button } from "../../../../ui/button";
 import { Card, CardContent, CardFooter } from "../../../../ui/card";
 import { CommonCardHeader } from "./CommonCardHeader";
 import { ListRequestChanges } from "./ListRequestChanges";
+import useAcceptDirectExchange from "../../../../../hooks/exchange/useAcceptDirectExchange";
+import { MoonLoader } from "react-spinners";
+import { exchangeErrorToText } from "../../../../../utils/error";
+import { useToast } from "../../../../ui/use-toast";
 
 type Props = {
     request: DirectExchangeRequest
@@ -20,6 +24,10 @@ export const ReceivedRequestCard = ({
 
     const { user } = useContext(SessionContext);
 
+    const { toast } = useToast();
+
+    const { trigger: acceptDirectExchange, isMutating: isAcceptingDirectExchange } = useAcceptDirectExchange(request.id);
+
     useEffect(() => {
         if (request.type === "directexchange") request.options = request.options.filter((option) => option.participant_nmec === user?.username);
     }, [request]);
@@ -66,8 +74,32 @@ export const ReceivedRequestCard = ({
                                 <Button
                                     type="submit"
                                     className="success-button hover:bg-white"
+                                    onClick={async (e) => {
+                                        e.preventDefault();
+
+                                        const res = await acceptDirectExchange();
+                                        const json = await res.json();
+
+                                        if (res.ok) {
+                                            toast({
+                                                title: "Troca aceita com sucesso!",
+                                                description: "A troca foi aceita com sucesso.",
+                                                variant: "default",
+                                            });
+                                        }
+                                        else {
+                                            toast({
+                                                title: "Erro ao aceitar troca.",
+                                                description: exchangeErrorToText[json["error"]],
+                                                variant: "destructive",
+                                            });
+                                        }
+                                    }}  
                                 >
-                                    Aceitar
+                                    {isAcceptingDirectExchange 
+                                        ? <MoonLoader size={20} />
+                                        : <span>Aceitar</span>
+                                    }
                                 </Button>
                             }
                         </form>

src/hooks/exchange/useAcceptDirectExchange.tsx

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