disables create req when already pending req exists

nakul-krishnakumar · Nov 2, 2024 · c80cd0c · c80cd0c
1 parent 7ad62c6
commit c80cd0c
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git a/app/src/components/StudentHome/StudentHome.css b/app/src/components/StudentHome/StudentHome.css
@@ -47,6 +47,7 @@
 }
 
 .std-req-btn {
+    color: #F0ECE5;
     background-color: #161A30;
     width: clamp(100px, 20vw ,150px);
     height: clamp(15px, 10vw, 40px);
@@ -56,11 +57,17 @@
     font-weight: 600;
 }
 
+
 .std-req-btn:hover {
     cursor: pointer;
     background-color: #343a5e;
 }
 
+.std-req-btn:disabled {
+    cursor: not-allowed;
+    background-color: #343a5e;
+}
+
 .std-table-cap {
     color: #161A30;
     font-size: large;

diff --git a/app/src/components/StudentHome/StudentHome.jsx b/app/src/components/StudentHome/StudentHome.jsx
@@ -9,6 +9,7 @@ const StudentHome = (props) => {
     const [modal, setModal] = useState(false);
     const [appData, setAppData] = useState([]);
     const [order, setOrder] = useState(true); //if order true, then sorting in ascending order
+    const [disableBtn, setDisableBtn] = useState(false);
 
     // SET SORTING ORDER
     const handleOrder = () => {
@@ -30,12 +31,29 @@ const StudentHome = (props) => {
             .catch((err) => console.error(err));
     };
 
+    const checkPendingReq = async (userID) => {
+        await axios
+        .post("http://localhost:5000/api/student/checkpending", {
+            userID: userID,
+        })
+        .then(result => {
+            console.log(result);
+            setDisableBtn(result.data)
+        })
+    }
+
     useEffect(() => {
         if (props.userID) {
             fetchUser(props.userID, order);
         }
     }, [props.userID, order]);
 
+    useEffect(() => {
+        if (props.userID) {
+            checkPendingReq(props.userID);
+        }
+    }, [props.userID]);
+
     // Disable body scroll when modal is open
     useEffect(() => {
         if (modal) {
@@ -53,6 +71,7 @@ const StudentHome = (props) => {
     const toggleModal = () => {
         setModal(!modal);
         fetchUser(props.userID);
+        checkPendingReq(props.userID);
     };
 
     return (
@@ -94,10 +113,10 @@ const StudentHome = (props) => {
                                 </div>
                             </div>
                         </div>
-                        <div className="std-req-btn flex" onClick={toggleModal}>
+                        <button className="std-req-btn flex" onClick={toggleModal} disabled={disableBtn}>
                             <i className="fa-solid fa-plus fa-sm"></i>
                             <span>New Request</span>
-                        </div>
+                        </button>
                     </div>
 
                     <span className="std-table-cap">Your Requests</span>

diff --git a/server/routes/student.js b/server/routes/student.js
@@ -65,4 +65,38 @@ router.post("/fetchreq", async (req, res) => {
 
 })
 
+// ROUTE 3: api/student/checkpending
+router.post("/checkpending", async (req, res) => {
+    const { userID } = req.body;
+    console.log("userid", userID); //testing
+
+    // FETCHING FROM DATABASE
+    try {
+        const { data, error } = await db
+        .from('application')
+        .select('*')
+        .eq('student_id', userID)
+        .eq('app_status', 'Pending');
+
+        console.log(data);
+
+        if (error) {
+            console.error("Error fetching applications:", error);
+            return res.status(500).json({ error: "Failed to fetch requests" });
+        } else {
+            console.log("Length Of the Data From DB: ", data.length);
+            if (data.length === 0) {
+                return res.status(200).send(false);
+            } else {
+                return res.status(200).send(true);
+            }
+        }
+
+    } catch (err) {
+        console.error("Unexpected error:", err);
+        return res.status(500).json({ error: "An unexpected error occurred" });
+    }
+
+})
+
 module.exports = router;