Merge pull request #97 from CS3219-AY2324S1/matching-cancel

Matching cancel

Author: Jai2501

Frontend/src/Components/Matching/LoadPopup.jsx

@@ -1,21 +1,52 @@
-import React from 'react';
-import {Oval} from 'react-loader-spinner';
-import './LoadPopup.css'; 
+import React, { useState, useEffect } from 'react'; 
+import { Oval } from 'react-loader-spinner'; 
+import axios from 'axios'; 
+import './LoadPopup.css';  
 
-export const LoadPopup= ({isOpen, isClose}) => {
-  if (isOpen) {
-    return (
-      <div className="load-overlay">
-          <div className="load-popup">
-              <h3>Finding you a match...</h3>
-              <div className="spinner">
-                  <Oval className = "spinner"/>
-              </div> 
-              <div >
-                  <button onClick={isClose} className="cancel-match">Cancel Matching</button>
-              </div>    
-        </div>
-      </div>
-    );
-  }
+export const LoadPopup = ({ isOpen, isClose, userId, onMatchCancelled }) => { 
+  const [buttonEnabled, setButtonEnabled] = useState(false); 
+
+  useEffect(() => {
+    setButtonEnabled(false); 
+    const timer = setTimeout(() => { 
+      setButtonEnabled(true); 
+    }, 5000); 
+
+    return () => clearTimeout(timer);
+  }, [isOpen]);
+
+  const handleCancelMatching = () => { 
+    setButtonEnabled(false); 
+
+    const URL = `http://localhost:3004/home/${userId}/matching`;
+    axios.delete(URL) 
+      .then(response => { 
+        if (response.status !== 200) { 
+          throw new Error(response.data.message); 
+        } 
+        console.log(response.data.message); 
+        onMatchCancelled(); // Inform the parent component that the match is cancelled
+      }) 
+      .catch(error => { 
+        console.error("Error canceling the match: ", error); 
+        setButtonEnabled(true); 
+      }) 
+  }; 
+
+  if (isOpen) { 
+    return ( 
+      <div className="load-overlay"> 
+        <div className="load-popup"> 
+          <h3>Finding you a match...</h3> 
+          <div className="spinner"> 
+            <Oval className="spinner"/> 
+          </div>  
+          <div> 
+            <button onClick={handleCancelMatching} disabled={!buttonEnabled} className="cancel-match">Cancel Matching</button> 
+          </div>     
+        </div> 
+      </div> 
+    ); 
+  } 
+  return null;
 };

Frontend/src/Components/Matching/MatchPopup.jsx

@@ -20,6 +20,11 @@ const MatchPopup = ({ isOpen, isClose }) => {
     const [chosenProficiency, setChosenProficiency] = useState("None");
     const [chosenTopic, setChosenTopic] = useState("None");
 
+    const handleMatchCancellation = () => {
+        setGoToLoadPopup(false);
+        setShowNotSuccessOutput(true);
+      };
+
     const initiateMatching = () => {
 
         // Show the loading popup
@@ -121,7 +126,7 @@ const MatchPopup = ({ isOpen, isClose }) => {
                 </div>
                 <button className="match-button" onClick={initiateMatching}>Match</button>
                 </div>
-                {goToLoadPopup && <LoadPopup isOpen={true} isClose={() => setGoToLoadPopup(false)} />}
+                {goToLoadPopup && <LoadPopup isOpen={true} isClose={() => setGoToLoadPopup(false)} userId={getUserId()} onMatchCancelled={handleMatchCancellation} />}
 
                 {showSuccessOutput && 
                 <SuccessOutput isOpen={true} isClose={() => setShowSuccessOutput(false)} />}

Frontend/src/Components/Matching/NotSuccessOutput.jsx

@@ -7,7 +7,7 @@ export const NotSuccessOutput = ({ isOpen, isClose }) => {
         return (
             <div className="output-overlay">
                 <div className="output-popup">
-                    <h3>Not Match Found!</h3>
+                    <h3>No Match Found!</h3>
                     <img src={error_icon} className="image" alt="Error icon" />
                     <p>Try Again!</p>
                     <div>