Add functionality for "Match Me Again"

Send user to queue with the same criteria when they click match me again upon unsuccessful match

Author: qiaoen17

Frontend/src/components/Sidebar.jsx

@@ -63,6 +63,7 @@ function Sidebar() {
     const handleMatch = () => {
         if (ws && difficulty && language) {
             setShowMatching(true);
+            setShowUnsuccessfulMatch(false);
             ws.send(JSON.stringify({ userId, difficulty, language })); // Send to server
         } else {
             alert('Please select a difficulty and language.');
@@ -111,7 +112,7 @@ function Sidebar() {
             </Modal>
 
             <Modal show={showUnsuccessfulMatch} onHide={handleCloseUnsuccessfulMatch} backdrop="static" className="custom-modal" centered>
-                <UnsuccessfulMatch handleClose={handleCloseUnsuccessfulMatch}/>
+                <UnsuccessfulMatch handleClose={handleCloseUnsuccessfulMatch} handleMatch={handleMatch}/>
             </Modal>
         </Stack>
     );

Frontend/src/components/matching/UnsuccessfulMatch.jsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import CloseButton from 'react-bootstrap/esm/CloseButton';
 
-function UnsuccessfulMatch({ handleClose }) {
+function UnsuccessfulMatch({ handleClose, handleMatch}) {
     return (
         <div className="matching-container">
             <div className="close-button" onClick={handleClose}>✖</div>
             <div className="matching-text">
             <CloseButton className="close-button" onClick={handleClose}></CloseButton>
                 <h2>Sorry, we are unable to find you a match.</h2>
-                {/*<button className='btn btn-primary btn-sm'>Match me again</button>*/}
+                <button className='btn btn-primary btn-sm' onClick={handleMatch}>Match me again</button>
             </div>
         </div>
     );