Improved styling, added status to pending jobs

Author: Anidion

frontend/src/components/JobApply.jsx

@@ -26,9 +26,13 @@ const JobApply = () => {
     <div>
       {appliedJobs.length > 0 ? (
         <div>
-          <Typography>Applied Jobs</Typography>
           {appliedJobs.map((appliedJob) => (
-            <JobPost key={appliedJob.id} job={appliedJob.job} disabled={true} />
+            <JobPost
+              key={appliedJob.id}
+              job={appliedJob.job}
+              disabled={true}
+              status={appliedJob.application_status.status}
+            />
           ))}
         </div>
       ) : (

frontend/src/components/JobPost.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useState } from "react";
 import { Button, Typography } from "@mui/material";
+import { Label } from "../components/RecruiterApplicantsComponents";
 
 import "../styles/JobPost.css";
 
@@ -15,6 +16,23 @@ function JobPost(props) {
     });
   };
 
+  const getStatusColor = (status) => {
+    switch (status) {
+      case "SUBMITTED":
+        return "success";
+      case "UNDER REVIEW":
+        return "info";
+      case "UNDERGOING FURTHER SCREENING":
+        return "warning";
+      case "REJECTED":
+        return "error";
+      case "OFFER SENT":
+        return "offerSent";
+      default:
+        return "secondary";
+    }
+  };
+
   const applyHandler = async () => {
     setApply(true);
     try {
@@ -68,19 +86,23 @@ function JobPost(props) {
           </Typography>
         );
       })}
-      <Button
-        variant="contained"
-        href=""
-        className="applyButton"
-        disabled={apply}
-        onClick={applyHandler}
-      >
-        {apply ? (
-          <Typography>Applying...</Typography>
-        ) : (
-          <Typography>Apply</Typography>
-        )}
-      </Button>
+      {!props.disabled ? (
+        <Button
+          variant="contained"
+          href=""
+          className="applyButton"
+          disabled={apply}
+          onClick={applyHandler}
+        >
+          {apply ? (
+            <Typography>Applying...</Typography>
+          ) : (
+            <Typography>Apply</Typography>
+          )}
+        </Button>
+      ) : (
+        <Label color={getStatusColor(props.status)}>{props.status}</Label>
+      )}
     </div>
   );
 }

frontend/src/pages/ApplicantHome.jsx

@@ -23,31 +23,33 @@ function ApplicantHome() {
         <Typography>Update my Profile</Typography>
       </Button>
 
-      <Container className="row" sx={{ marginTop: "20px" }}>
-        <Typography align="center" variant="h5">
-          Job List
-        </Typography>
-
-        <IconButton className="toggleJobs" onClick={toggleJobs}>
-          <ArrowDropDownIcon
-            fontSize="large"
-            className={showJobs ? "rotate" : ""}
-          />
-        </IconButton>
-
-        <Typography align="left" variant="h5">
-          Applied Jobs
-        </Typography>
-        <IconButton className="toggleJobs" onClick={toggleAppliedJobs}>
-          <ArrowDropDownIcon
-            fontSize="large"
-            className={showJobs ? "rotate" : ""}
-          />
-        </IconButton>
-      </Container>
-
-      {showJobs && <JobList />}
-      {appliedList && <JobApply />}
+      <Box className="column" sx={{ marginTop: "20px" }}>
+        <div className="row">
+          <Typography align="center" variant="h5">
+            Jobs For You
+          </Typography>
+          <IconButton className="toggleJobs" onClick={toggleJobs}>
+            <ArrowDropDownIcon
+              fontSize="large"
+              className={showJobs ? "rotate" : ""}
+            />
+          </IconButton>
+        </div>
+        {showJobs && <JobList />}
+
+        <div className="row">
+          <Typography align="left" variant="h5">
+            Pending Jobs
+          </Typography>
+          <IconButton className="toggleJobs" onClick={toggleAppliedJobs}>
+            <ArrowDropDownIcon
+              fontSize="large"
+              className={appliedList ? "rotate" : ""}
+            />
+          </IconButton>
+        </div>
+        {appliedList && <JobApply />}
+      </Box>
     </Box>
   );
 }