Merge branch 'main' into RecruiterApplicants

Anidion · Anidion · commit a1eb94b9ce5c · 2023-04-28T17:05:26.000-06:00
diff --git a/backend/routers/user_profile_router.py b/backend/routers/user_profile_router.py
@@ -117,6 +117,58 @@ def get_user_profile_picture_me(
                     filename={current_user.username}_profile_picture.jpg"
             }
         )
+    
+@router.get(
+    "/users/profile/{user_id}/profile_picture",
+    status_code=status.HTTP_200_OK,
+    tags=["UserProfile"],
+    summary="Retrieve the profile picture of the user with id == user_id from the database.",
+    description="Retrieve the specified users' profile picture from the database as a jpg file.",
+    response_description="The specified users' profile picture."
+)
+def get_user_profile_picture(db: Session = Depends(dependencies.get_db),
+                             user_id: int = Path()):
+    
+    """
+    GET route to obtain a user's profile picture by user_id.
+
+    Parameters
+    ----------
+    db: Session
+        a database session
+    user_id: int
+        the user's unique identifier
+
+    Returns
+    -------
+    fastapi.Response
+        a response with the profile picture
+    """
+    
+    # Check that the user has a profile
+    dependencies.user_profile_exists(db, user_id)
+
+    user_profile = user_profile_crud.get_user_profile_by_id(db, user_id)
+
+    # Check that the user has a profile picture
+    if user_profile is not None:
+        file = user_profile.profile_picture
+
+        if file is None:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail=f"User {user_id} does not have a profile picture in the database."
+            )
+        
+        return Response(
+            content=file,
+            media_type="image/jpg",
+            headers={
+                "content-disposition": f"attachment; \
+                filename={user_profile.first_name}_profile_picture.jpg"
+            }
+        )
+
 
 @router.get(
     "/users/profile/me/resume",
@@ -166,6 +218,54 @@ def get_user_resume_me(
                     filename={current_user.username}_resume.pdf"
             }
         )
+    
+@router.get(
+    "/users/profile/{user_id}/resume",
+    status_code=status.HTTP_200_OK,
+    tags=["UserProfile"],
+    summary="Retrieve the resume of the user with id == user_id from the database.",
+    description="Retrieve the specified users' resume from the database as a pdf file.",
+    response_description="The specified users' resume."
+)
+def get_user_resume(db: Session = Depends(dependencies.get_db),
+                    user_id: int = Path()):
+    """
+    GET route to obtain the resume of the user with id == user_id.
+
+    Parameters
+    ----------
+    db: Session
+        a database session
+    user_id: int
+        the unique identifier of the user
+
+    Returns
+    -------
+    fastapi.Response
+        a response with the resume
+    """
+    
+    dependencies.user_profile_exists(db, user_id)
+
+    user_profile = user_profile_crud.get_user_profile_by_id(db, user_id)
+
+    if user_profile is not None:
+        file = user_profile.resume
+
+        if file is None:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail=f"User {user_id} does not have a resume in the database."
+            )
+        
+        return Response(
+            content=file, 
+            media_type="application/pdf",
+            headers={
+                "content-disposition": f"attachment; \
+                    filename={user_profile.first_name}_resume.pdf"
+            }
+        )
 
 @router.get(
     "/users/profile/{username}",
diff --git a/frontend/src/components/JobApply.jsx b/frontend/src/components/JobApply.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useEffect } from "react";
+import { Typography } from "@mui/material";
+import JobPost from "./JobPost";
+
+const JobApply = () => {
+  const [appliedJobs, setAppliedJobs] = useState([]);
+
+  const getAplliedJobs = async () => {
+    await fetch("https://chapi.techstartucalgary.com/applications/me", {
+      mode: "cors",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => setAppliedJobs(data))
+      .catch((error) => console.error(error));
+  };
+
+  useEffect(() => {
+    getAplliedJobs();
+  }, []);
+
+  return (
+    <div>
+      {appliedJobs.length > 0 ? (
+        <div>
+          {appliedJobs.map((appliedJob) => (
+            <JobPost
+              key={appliedJob.id}
+              job={appliedJob.job}
+              disabled={true}
+              status={appliedJob.application_status.status}
+            />
+          ))}
+        </div>
+      ) : (
+        <Typography>No found Job</Typography>
+      )}
+    </div>
+  );
+};
+
+export default JobApply;
diff --git a/frontend/src/components/JobPost.jsx b/frontend/src/components/JobPost.jsx
@@ -1,9 +1,13 @@
 import React from "react";
+import { useState } from "react";
 import { Button, Typography } from "@mui/material";
+import { Label } from "../components/RecruiterApplicantsComponents";
 
 import "../styles/JobPost.css";
 
 function JobPost(props) {
+  const [apply, setApply] = useState(false);
+
   const formatCurrency = (num) => {
     return num.toLocaleString("en-US", {
       style: "currency",
@@ -12,6 +16,51 @@ 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 {
+      const response = await fetch(
+        `https://chapi.techstartucalgary.com/applications/${props.job.id}`,
+        {
+          method: "POST",
+          mode: "cors",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+          },
+        },
+      );
+      if (response.ok) {
+        alert("Job was succesful");
+        setApply(false);
+        window.location.reload();
+      } else {
+        throw new Error("Job application failed. Please try again later");
+      }
+    } catch (error) {
+      console.error(error);
+      alert(error.message);
+      setApply(false);
+    }
+  };
+
   return (
     <div className="jobContainer">
       <Typography className="jobTitle">{props.job.title}</Typography>
@@ -37,9 +86,23 @@ function JobPost(props) {
           </Typography>
         );
       })}
-      <Button variant="contained" className="applyButton">
-        <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>
   );
 }
diff --git a/frontend/src/pages/ApplicantHome.jsx b/frontend/src/pages/ApplicantHome.jsx
@@ -4,33 +4,52 @@ import "../styles/ApplicantHome.css";
 import JobList from "../components/JobList";
 import { Button, Container, IconButton, Typography, Box } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import JobApply from "../components/JobApply";
 
 function ApplicantHome() {
   const [showJobs, setShowJobs] = useState(false);
+  const [appliedList, setAppliedList] = useState(false);
 
   const toggleJobs = () => {
     setShowJobs(!showJobs);
   };
+  const toggleAppliedJobs = () => {
+    setAppliedList(!appliedList);
+  };
 
   return (
     <Box className="appHome">
       <Button variant="outlined" href="#/editProfile">
         <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>
-      </Container>
+      <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 />}
 
-      {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>
   );
 }
diff --git a/frontend/src/styles/JobPost.css b/frontend/src/styles/JobPost.css
@@ -3,7 +3,8 @@
   border-radius: 15px;
   margin-bottom: 10px;
   padding: 20px;
-  width: 100%;
+  width: 50% !important;
+  flex-direction: column;
 }
 
 .jobContainer * {
@@ -37,3 +38,30 @@
   border-radius: 15px;
   padding: 20px;
 }
+
+@media only screen and (max-width: 600px) {
+  .jobContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 10% !important;
+  }
+
+  .descContainer {
+    padding: 5px !important;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .jobDescription {
+    font-size: 10px !important;
+    width: 100% !important;
+    text-align: center !important;
+  }
+  .jobContainer * {
+    margin-bottom: 15px;
+    width: 50% !important ;
+  }
+}
