Fix Criteria-less match me

Prevent modal from showing up unless difficulty and language is set

Author: qiaoen17

Frontend/src/components/Sidebar.jsx

@@ -4,9 +4,10 @@ import Button from 'react-bootstrap/Button';
 import Card from 'react-bootstrap/Card';
 import Form from 'react-bootstrap/Form';
 import Modal from "react-bootstrap/Modal";
-import Matching from "./Matching";
-import SuccessfulMatch from "./SuccessfulMatch";
-import UnsuccessfulMatch from "./UnsuccessfulMatch";
+import Matching from "./matching/Matching";
+import SuccessfulMatch from "./matching/SuccessfulMatch";
+import UnsuccessfulMatch from "./matching/UnsuccessfulMatch";
+import CriteriaDisplay from './matching/CriteriaDisplay';
 const { getUserFromToken } = require('./user/userAvatarBox');
 
 function Sidebar() {
@@ -60,8 +61,8 @@ function Sidebar() {
     }, []);
 
     const handleMatch = () => {
-        setShowMatching(true);
         if (ws && difficulty && language) {
+            setShowMatching(true);
             ws.send(JSON.stringify({ userId, difficulty, language })); // Send to server
         } else {
             alert('Please select a difficulty and language.');
@@ -94,6 +95,10 @@ function Sidebar() {
                 <option value="Java">Java</option>
                 <option value="C++">C++</option>
             </Form.Select>
+
+            {/* Display Criteria Selected*/}
+            <CriteriaDisplay difficulty={difficulty} language={language}></CriteriaDisplay>
+
             <Button variant="primary" onClick={handleMatch}>Match me!</Button>
 
             {/* Modals */}

Frontend/src/components/Matching.jsx renamed to Frontend/src/components/matching/Matching.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import CloseButton from 'react-bootstrap/esm/CloseButton';
-import '../css/Matching.css'; 
+import '../../css/Matching.css'; 
 
 function Matching({ handleClose }) {
     const [seconds, setSeconds] = useState(0);
@@ -26,7 +26,7 @@ function Matching({ handleClose }) {
             <div className="matching-text">
                 <h2>Matching you....</h2>
                 <p>{`${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</p>
-                <button className='btn btn-primary btn-sm' onClick={handleClose} >Cancel</button>
+                {/*<button className='btn btn-primary btn-sm' onClick={handleClose} >Cancel</button>*/}
             </div>
         </div>
     );

Frontend/src/components/SuccessfulMatch.jsx renamed to Frontend/src/components/matching/SuccessfulMatch.jsx

@@ -8,7 +8,7 @@ function UnsuccessfulMatch({ handleClose }) {
             <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'>Match me again</button>*/}
             </div>
         </div>
     );