Skip to content

Commit

Permalink
Merge pull request #100 from WomenPlusPlus/candidate_jobs
Browse files Browse the repository at this point in the history
Candidate jobs
  • Loading branch information
JaniceShaw authored Oct 30, 2023
2 parents 297f472 + 62fc594 commit 12193a9
Show file tree
Hide file tree
Showing 12 changed files with 418 additions and 257 deletions.
58 changes: 58 additions & 0 deletions frontend/src/app/(site)/candidate/jobs/jobsList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import Grid from "@mui/material/Grid";
import React from "react";
import { Stack } from "@mui/material";
import Typography from "@mui/material/Typography";

//import { JobPostNew } from "@/app/(site)/company/jobs/types";
// import { JobPostCard } from "@/app/(site)/company/jobs/jobPostCard";
import JobCard from "@/components/site/candidateJobs/jobCard";
import { Matches } from "@/components/site/candidateProfile/candidateInterface";

interface JobPostTypes {
id: number;
job_title: string;
full_match_score: number;
// to come i hope!
job_description?: string;
job_type?: string;
work_model?: string;
start_on?: string; //or might be a date
match_percent?: number; // is full_match_score
logo_src?: string;

// job_id?: number;
// logo_src?: string;
// job_summary?: string;

// id:number;
// job_title:string;
// full_match_score:number;
// // to come i hope!
// job_description?:string;
// job_type?:string;
// work_model?:string;
// start_on?:string; //or might be a date
// match_percent:number // is full_match_score
}

interface JobListProps {
matches: JobPostTypes[];
}

const JobsList: React.FC<JobListProps> = ({ matches }) => {
return (
<Grid>
{matches.length === 0 && (
<Stack>
<Typography>No jobs found</Typography>
</Stack>
)}

{matches.map((match, index) => (
<JobCard key={match.id} job_data={match} />
))}
</Grid>
);
};

export default JobsList;
183 changes: 102 additions & 81 deletions frontend/src/app/(site)/candidate/jobs/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,88 +6,98 @@ import Typography from "@mui/material/Typography";
import JobCard from "@/components/site/candidateJobs/jobCard";
import { SearchBar } from "@/app/(site)/company/searchBar";
import { map } from "cypress/types/bluebird";
import { useState } from "react";

const jobsData = [
{
job_id: 1,
job_title: "software developer With a very long title",
match_percent: "29",
job_summary:
"Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
job_type: "Internship",
work_model: "Remote",
start_on: "08/01/2024",
logo_src: "/images/jobs/job-1.png",
},
{
job_id: 2,
job_title: "Frontend developer",
match_percent: "60",
job_summary:
"Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
job_type: "Internship",
work_model: "Hybrid",
start_on: "08/01/2024",
logo_src: "/images/jobs/job-2.png",
},
{
job_id: 3,
job_title: "Frontend developer",
match_percent: "80",
job_summary:
"Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
job_type: "Internship",
work_model: "Hybrid",
start_on: "08/01/2024",
logo_src: "",
},
{
job_id: 4,
job_title: "Frontend developer",
match_percent: "80",
job_summary:
"Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
job_type: "Internship",
work_model: "Hybrid",
start_on: "08/01/2024",
logo_src: "/images/jobs/job-3.png",
},
{
job_id: 5,
job_title: "Frontend developer",
match_percent: "72",
job_summary:
"Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
job_type: "Internship",
work_model: "Hybrid",
start_on: "08/01/2024",
logo_src: "",
},
{
job_id: 6,
job_title: "Frontend developer",
match_percent: "49",
job_summary:
"Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
job_type: "Internship",
work_model: "Hybrid",
start_on: "08/01/2024",
logo_src: "",
},
{
job_id: 7,
job_title: "Frontend developer",
match_percent: "95",
job_summary: "Lorem ipsum rs varius pharetra tortor matti",
work_model: "Hybrid",
start_on: "08/01/2024",
logo_src: "",
},
];
import { useContext, useState } from "react";
import { SignInProviderContext } from "@/components/providers/SignInProvider";
import CircularProgress from "@mui/material/CircularProgress";
import { useJobs } from "@/app/(site)/candidate/jobs/useJobs";
//import JobsList from "@/app/(site)/candidate/jobs/jobsList";
//import { getCandidateDetails } from "@/lib/getCandidateDetails";
// const jobsData = [
// {
// job_id: 1,
// job_title: "software developer With a very long title",
// match_percent: "29",
// job_summary:
// "Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
// job_type: "Internship",
// work_model: "Remote",
// start_on: "08/01/2024",
// logo_src: "/images/jobs/job-1.png",
// },
// {
// job_id: 2,
// job_title: "Frontend developer",
// match_percent: "60",
// job_summary:
// "Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
// job_type: "Internship",
// work_model: "Hybrid",
// start_on: "08/01/2024",
// logo_src: "/images/jobs/job-2.png",
// },
// {
// job_id: 3,
// job_title: "Frontend developer",
// match_percent: "80",
// job_summary:
// "Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
// job_type: "Internship",
// work_model: "Hybrid",
// start_on: "08/01/2024",
// logo_src: "",
// },
// {
// job_id: 4,
// job_title: "Frontend developer",
// match_percent: "80",
// job_summary:
// "Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
// job_type: "Internship",
// work_model: "Hybrid",
// start_on: "08/01/2024",
// logo_src: "/images/jobs/job-3.png",
// },
// {
// job_id: 5,
// job_title: "Frontend developer",
// match_percent: "72",
// job_summary:
// "Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
// job_type: "Internship",
// work_model: "Hybrid",
// start_on: "08/01/2024",
// logo_src: "",
// },
// {
// job_id: 6,
// job_title: "Frontend developer",
// match_percent: "49",
// job_summary:
// "Lorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidLorem ipsum dolor sit amet consectetur. Venenatis varius pharetra tortor mattis purus morbi convallis feugiat sed. A tincidunt orci mauris aliquet eget gravida. Tempus vel bibendum eget felis parturient varius eget.",
// job_type: "Internship",
// work_model: "Hybrid",
// start_on: "08/01/2024",
// logo_src: "",
// },
// {
// job_id: 7,
// job_title: "Frontend developer",
// match_percent: "95",
// job_summary: "Lorem ipsum rs varius pharetra tortor matti",
// work_model: "Hybrid",
// start_on: "08/01/2024",
// logo_src: "",
// },
// ];

export default function MyJobsPage() {
// const obj: CandidateDetailsInterface = {};
// const [candidateDetails, setCandidateDetails] = useState(obj);
const [searchTerm, setSearchTerm] = useState<string>("");
const signInContext = useContext(SignInProviderContext);
const { data: jobData = [], isLoading } = useJobs(
signInContext.auth?.user?.id as string,
);

return (
<Container sx={{ px: { xs: 0 } }}>
Expand All @@ -108,9 +118,20 @@ export default function MyJobsPage() {
gap: "20px",
}}
>
{jobsData.map((job, i) => {
{/* {jobsData?.map((job, i) => {
return <JobCard key={job.job_id} job_data={job} />;
})}
})} */}

{isLoading ? (
<CircularProgress />
) : (
// @ts-ignore
jobData.matches?.map((job, i) => {
return <JobCard key={job.id} job_data={job} />;
})
)}

{/* {isLoading ? <CircularProgress /> : <JobsList jobs={jobData.matches} />} */}
</Box>
</Container>
);
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/app/(site)/candidate/jobs/useJobs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { getJobsForCandidate } from "@/lib/getJobsForCandidate";

export const useJobs = (userId: string) => {

return getJobsForCandidate(userId);
};
3 changes: 2 additions & 1 deletion frontend/src/app/(site)/candidate/profile/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -349,7 +349,8 @@ export default function ProfilePage() {
<Typography>
<strong>Date of Birth</strong>
</Typography>
<Typography>{state.birth_date || ""}</Typography>

<Typography>{state.birth_date ? new Date(state.birth_date).toLocaleDateString() : ""}</Typography>
</Grid>
<Grid item sm={6}>
<Typography>
Expand Down
32 changes: 20 additions & 12 deletions frontend/src/components/site/candidateJobs/jobCard.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import { useState } from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
Expand All @@ -15,24 +16,29 @@ import IconButton from "@mui/material/IconButton";
const bgColors = ["#00A8E8", "#63E5C5", "#F28808"];
const percentColors = ["#CBF6EB", "#B1F2E2", "#7DE9CE", "#63E5C5"];
interface JobPostTypes {
job_id?: number;
logo_src?: string;
job_title?: string;
id: number;
job_title: string;
full_match_score: number;
// to come i hope!
job_description?: string;
job_type?: string;
match_percent: string;
job_summary?: string;
work_model?: string;
start_on?: string;
start_on?: string; //or might be a date
// match_percent?:number // is full_match_score
logo_src?: string;
}

interface JobCardProps {
job_data: JobPostTypes;
}

export const JobCard: React.FC<JobCardProps> = ({ job_data }) => {
const noImgBg = bgColors[Math.floor(Math.random() * 3)];
const [noImgBg, setNoImgBg] = useState(
bgColors[Math.floor(Math.random() * 3)],
);
const chipBg =
percentColors[Math.ceil(Math.round(+job_data.match_percent) * 0.04) - 1];
percentColors[Math.ceil(Math.round(+job_data.full_match_score) * 0.04) - 1];

const searchTerm = "search term coming soon";

return (
Expand All @@ -41,7 +47,9 @@ export const JobCard: React.FC<JobCardProps> = ({ job_data }) => {
sx={{ borderRadius: "16px", maxWidth: "354px", height: "510px" }}
>
{/*backgroundColor as a variable causing an error */}
<CardMedia sx={{ height: 188, maxWidth: "360px" }}>
<CardMedia
sx={{ height: 188, maxWidth: "360px", width: { xs: "360px" } }}
>
<Box
sx={{
position: "relative",
Expand Down Expand Up @@ -84,7 +92,7 @@ export const JobCard: React.FC<JobCardProps> = ({ job_data }) => {
borderRadius: "10px",
backgroundColor: `${chipBg}`,
}}
label={`${job_data.match_percent}% match`}
label={`${Math.round(job_data.full_match_score)}% match`}
/>
</Grid>
<Grid item sm={12} sx={{}}>
Expand All @@ -95,11 +103,11 @@ export const JobCard: React.FC<JobCardProps> = ({ job_data }) => {
overflow: "hidden",
}}
>
{job_data.job_summary}
{job_data.job_description || ""}
</Typography>
</Grid>
</Grid>
<Grid container sx={{ mt: 3 }}>
<Grid container sx={{ mt: 3, maxHeight:{xs:"45px"}}}>
<Grid
item
xs={4}
Expand Down
Loading

0 comments on commit 12193a9

Please sign in to comment.