diff --git a/Frontend/src/Components/Matching/MatchPopup.jsx b/Frontend/src/Components/Matching/MatchPopup.jsx index 0f678fd1..fb7745d4 100644 --- a/Frontend/src/Components/Matching/MatchPopup.jsx +++ b/Frontend/src/Components/Matching/MatchPopup.jsx @@ -5,12 +5,14 @@ import './MatchPopup.css'; // Ensure this path is correct import { LoadPopup } from './LoadPopup'; import { getUserId } from '../../User/UserState'; import { useNavigate } from 'react-router-dom'; +import { NotSuccessOutput } from './NotSuccessOutput'; const MatchPopup = ({ isOpen, isClose }) => { const [goToLoadPopup, setGoToLoadPopup] = useState(false); const [showSuccessOutput, setShowSuccessOutput] = useState(false); const [collaboratorId, setCollaboratorId] = useState(null); const navigate = useNavigate(); + const [showNotSuccessOutput, setShowNotSuccessOutput] = useState(false); // States for the matching criteria const [chosenDifficulty, setChosenDifficulty] = useState("None"); @@ -56,12 +58,15 @@ const MatchPopup = ({ isOpen, isClose }) => { } else { console.log("No match found"); setShowSuccessOutput(false); // SuccessOutput popup does not show + setShowNotSuccessOutput(true); // Triggers the NotSuccessOutput popup + } // setGoToLoadPopup(false); // Close the loading popup }) .catch(error => { console.error("Error finding a match: ", error); setGoToLoadPopup(false); // Close the loading popup + setShowNotSuccessOutput(true); // Triggers the NotSuccessOutput popup }); }; @@ -120,6 +125,8 @@ const MatchPopup = ({ isOpen, isClose }) => { {showSuccessOutput && setShowSuccessOutput(false)} />} + {showNotSuccessOutput && + setShowNotSuccessOutput(false)} />} ); } diff --git a/Frontend/src/Components/Matching/NotSuccessOutput.jsx b/Frontend/src/Components/Matching/NotSuccessOutput.jsx new file mode 100644 index 00000000..86bd7934 --- /dev/null +++ b/Frontend/src/Components/Matching/NotSuccessOutput.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './Output.css'; +import error_icon from '../Assets/cross.png'; + +export const NotSuccessOutput = ({ isOpen, isClose }) => { + if (isOpen) { + return ( +
+
+

Not Match Found!

+ Error icon +

Try Again!

+
+ +
+
+
+ ); + } + return null; +}; +