Merge pull request #83 from techstartucalgary/Bernard/JobApply

Bernard/job apply

Author: Anidion

frontend/src/components/CreateJobModal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import {
   Button,
   Typography,
@@ -8,66 +8,19 @@ import {
   Slider,
   FormControlLabel,
   Switch,
-  Autocomplete,
 } from "@mui/material";
 
 import "../styles/Modal.css";
 
-const skills = ["Python", "Java", "SQL", "JavaScript", "C++", "C#", "C"];
-
 function CreateJobModal(props) {
-  const [isEditing, setIsEditing] = useState(false);
   const [showSalary, setShowSalary] = useState(false);
   const [salary, setSalary] = useState([0, 0]);
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [location, setLocation] = useState("");
-  const [company_name, setCompanyName] = useState("");
   const [showGenericError, setShowGenericError] = useState(false);
 
-  const [selectedSkills, setSelectedSkills] = useState([]);
-
-  useEffect(() => {
-    if (props.job) {
-      setIsEditing(true);
-      setTitle(props.job.title);
-      setDescription(props.job.description);
-      setLocation(props.job.location);
-      setCompanyName(props.job.company_name);
-      if (props.job.min_salary) {
-        setShowSalary(true);
-        setSalary([props.job.min_salary, props.job.max_salary]);
-      }
-    }
-  }, [props]);
-
   const handleSalaryChange = (e, newValue) => {
     setSalary(newValue);
   };
 
-  const handleSkillSelection = (event, value) => {
-    setSelectedSkills(value);
-  };
-
-  const submitJobSkills = async (jobId, skills) => {
-    await fetch(`https://chapi.techstartucalgary.com/jobs/skills/${jobId}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
-      },
-      body: JSON.stringify(skills.map((skill) => ({ skill }))),
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Skills update failed");
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-      });
-  };
-
   const submitNewJob = async (event) => {
     event.preventDefault();
     const formData = new FormData(event.target);
@@ -81,62 +34,33 @@ function CreateJobModal(props) {
       title,
       description,
       location,
+      company_name,
       min_salary,
       max_salary,
-      company_name,
-      skills: selectedSkills.map((skill) => ({ skill })),
     };
 
-    if (isEditing) {
-      await fetch(`https://chapi.techstartucalgary.com/jobs/${props.job.id}`, {
-        method: "PATCH",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${localStorage.getItem("access_token")}`,
-        },
-        body: JSON.stringify(data),
-      })
-        .then(async (response) => {
-          if (!response.ok) {
-            if (response.status === 401) {
-              window.location.href = "#/signin";
-            } else {
-              setShowGenericError(true);
-            }
-            throw new Error("Job creation failed");
+    await fetch("https://chapi.techstartucalgary.com/jobs", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+      body: JSON.stringify(data),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          if (response.status === 401) {
+            window.location.href = "#/signin";
+          } else {
+            setShowGenericError(true);
           }
-          await submitJobSkills(props.job.id, selectedSkills);
-          cancelModal();
-        })
-        .catch((error) => {
-          console.error(error);
-        });
-    } else {
-      await fetch("https://chapi.techstartucalgary.com/jobs", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${localStorage.getItem("access_token")}`,
-        },
-        body: JSON.stringify(data),
+          throw new Error("Job creation failed");
+        }
+        props.closeModal();
       })
-        .then(async (response) => {
-          if (!response.ok) {
-            if (response.status === 401) {
-              window.location.href = "#/signin";
-            } else {
-              setShowGenericError(true);
-            }
-            throw new Error("Job creation failed");
-          }
-          const jobData = await response.json();
-          await submitJobSkills(jobData.id, selectedSkills);
-          props.closeModal();
-        })
-        .catch((error) => {
-          console.error(error);
-        });
-    }
+      .catch((error) => {
+        console.error(error);
+      });
   };
 
   const formatCurrency = (num) => {
@@ -147,63 +71,19 @@ function CreateJobModal(props) {
     });
   };
 
-  const cancelModal = () => {
-    setTitle("");
-    setDescription("");
-    setLocation("");
-    setCompanyName("");
-    setShowSalary(false);
-    setShowGenericError(false);
-    setSalary([0, 0]);
-    setIsEditing(false);
-    props.closeModal();
-  };
-
   return (
     <Dialog open={props.open} fullWidth>
-      <DialogTitle>
-        {isEditing ? "Update Existing Job" : "Create New Job"}
-      </DialogTitle>
-
-      <form id="jobForm" className="form" onSubmit={submitNewJob}>
-        <TextField
-          name="title"
-          label="Job Title"
-          onChange={(e) => setTitle(e.target.value)}
-          value={title}
-          required
-        />
+      <DialogTitle>Create New Job</DialogTitle>
+      <form className="form" onSubmit={submitNewJob}>
+        <TextField name="title" label="Job Title" required />
+        <TextField name="company_name" label="Company Name" required />
         <TextField
           name="description"
           label="Job Description"
-          onChange={(e) => setDescription(e.target.value)}
-          value={description}
           multiline
           required
         />
-        <TextField
-          name="location"
-          label="Location"
-          onChange={(e) => setLocation(e.target.value)}
-          value={location}
-          required
-        />
-        <Autocomplete
-          multiple
-          options={skills}
-          value={selectedSkills}
-          onChange={handleSkillSelection}
-          renderInput={(params) => (
-            <TextField {...params} label="Required Skills" variant="outlined" />
-          )}
-        />
-        <TextField
-          name="company_name"
-          label="Company Name"
-          onChange={(e) => setCompanyName(e.target.value)}
-          value={company_name}
-          required
-        />
+        <TextField name="location" label="Location" required />
         <FormControlLabel
           control={
             <Switch
@@ -236,11 +116,9 @@ function CreateJobModal(props) {
           )}
         </div>
         <div className="row right-align button-container">
-          <Button variant="outlined" onClick={cancelModal}>
-            Cancel
-          </Button>
+          <Button variant="outlined" /*onClick={cancelModal}*/>Cancel</Button>
           <Button type="submit" variant="contained">
-            {isEditing ? `Update Job` : `Post Job`}
+            {/*isEditing ? `Update Job` : `Post Job`*/}
           </Button>
         </div>
       </form>

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;

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>
   );
 }