Finished with applicants job list and application.

Author: Bobinho100

frontend/src/components/CreateJobModal.jsx

@@ -116,11 +116,11 @@ function CreateJobModal(props) {
           )}
         </div>
         <div className="row right-align button-container">
-          <Button variant="outlined" onClick={cancelModal}>
+          <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,54 @@
+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>
+                <Typography>Applied Jobs</Typography>
+                {appliedJobs.map((appliedJob) => (
+                    <JobPost
+                     key = {appliedJob.id}
+                     job = {appliedJob.job}
+                     disabled = {true}
+                    
+                    
+                    />
+                )) }
+
+            </div>
+        ):(
+
+            <Typography>No found Job</Typography>
+        )}
+
+    </div>
+  )
+}
+
+export default JobApply

frontend/src/components/JobPost.jsx

@@ -1,9 +1,18 @@
 import React from "react";
+import { useState } from "react";
 import { Button, Typography } from "@mui/material";
 
 import "../styles/JobPost.css";
 
+
 function JobPost(props) {
+
+  const [apply, setApply] = useState(false)
+
+
+
+
+
   const formatCurrency = (num) => {
     return num.toLocaleString("en-US", {
       style: "currency",
@@ -12,6 +21,40 @@ function JobPost(props) {
     });
   };
 
+  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,8 +80,15 @@ function JobPost(props) {
           </Typography>
         );
       })}
-      <Button variant="contained" className="applyButton">
-        <Typography>Apply</Typography>
+      <Button
+       variant="contained" 
+       href=""  className="applyButton"
+       disabled = {apply}
+       onClick = {applyHandler}
+       
+       >
+        {apply ? <Typography>Applying...</Typography> : <Typography>Apply</Typography>}
+       
       </Button>
     </div>
   );

frontend/src/pages/ApplicantHome.jsx

@@ -4,13 +4,18 @@ 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">
@@ -22,15 +27,27 @@ function ApplicantHome() {
         <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>
   );
 }

frontend/src/styles/JobPost.css

@@ -3,11 +3,17 @@
   border-radius: 15px;
   margin-bottom: 10px;
   padding: 20px;
-  width: 100%;
+  width: 50% !important;
+  flex-direction: column;
+  
+ 
+  
 }
 
 .jobContainer * {
   margin-bottom: 10px;
+  
+  
 }
 
 .jobTitle {
@@ -37,3 +43,37 @@
   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 ;
+    
+    
+  }
+
+
+
+}