Skip to content

Commit

Permalink
Search engine2 (#14)
Browse files Browse the repository at this point in the history 
* refactor searchbar

* search without using graphql
  • Loading branch information
@januschung
januschung authored Jun 23, 2024
1 parent 5ffde16 commit 99be6e2
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 184 deletions.
113 changes: 59 additions & 54 deletions src/components/JobApplicationList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { useQuery } from "@apollo/client";
import React, { useState } from 'react';

import { useMutation } from '@apollo/client';
import React, { useState, useEffect } from 'react';
import { useQuery, useMutation } from '@apollo/client';
import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';
import CommentRoundedIcon from '@mui/icons-material/CommentRounded';
import DeleteIcon from '@mui/icons-material/Delete';
Expand All @@ -21,100 +19,107 @@ import Loading from '../components/Loading';
import { DELETE_JOB_APPLICATION } from '../graphql/mutation';
import { GET_JOB_APPLICATIONS } from '../graphql/query';




export default function JobApplicationList() {

export default function JobApplicationList({ searchTerm }) {
const [open, setOpen] = useState(false);
const [jobApplication, setJobApplication] = useState("")

function handleOpen(jobApplication) {

setJobApplication(jobApplication)
setOpen(true);
console.log("edit companyName: " + jobApplication.companyName)
console.log("passing jobApplication info: " + jobApplication.companyName)
}

const handleClose = () => setOpen(false);
const [jobApplication, setJobApplication] = useState("");
const [localData, setLocalData] = useState([]);

const { error, data, loading } = useQuery(GET_JOB_APPLICATIONS, {
fetchPolicy: 'network-only'
});

console.log({ error, data, loading });

const [deleteJobApplication] = useMutation(DELETE_JOB_APPLICATION, {
refetchQueries: [
{query: GET_JOB_APPLICATIONS}
]
refetchQueries: [{ query: GET_JOB_APPLICATIONS }]
});

function handleDeleteJobApplication(id) {
if(window.confirm('Are you sure you want to delete?')) {
console.log("delete id: " + id)
useEffect(() => {
if (data) {
setLocalData(data.allJobApplication);
}
}, [data]);

const handleOpen = (jobApplication) => {
setJobApplication(jobApplication);
setOpen(true);
}

const handleClose = () => setOpen(false);

const handleDeleteJobApplication = (id) => {
if (window.confirm('Are you sure you want to delete?')) {
deleteJobApplication({
variables: {
id: id
}
})
variables: { id }
}).then(() => {
setLocalData(localData.filter(jobApp => jobApp.id !== id));
});
}
}

function containsIgnoreCase(str, searchTerm) {
if (searchTerm) {
return str.toLowerCase().includes(searchTerm.toLowerCase());
} else {
return str.toLowerCase().includes(searchTerm);
}
}

if (loading) return <Loading/>
const filteredData = localData.filter(jobApp =>
containsIgnoreCase(jobApp.companyName, searchTerm) ||
containsIgnoreCase(jobApp.description, searchTerm) ||
containsIgnoreCase(jobApp.jobTitle, searchTerm)
);

if (error) return <div>something went wrong</div>


if (loading) return <Loading />;
if (error) return <div>Something went wrong</div>;

return (
<div>
<main>
<JobApplicationDialog jobApplication={jobApplication} handleClose={handleClose} open={open} setOpen={setOpen}/>
<Container sx={{ py: 8 }} maxWidth="lg">
<Grid container spacing={4}>

{data.allJobApplication.map(jobApplication => {
return <Grid item key={jobApplication.id} xs={12} sm={6} md={4}>
<Card
sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
>
{filteredData.map(jobApplication => (
<Grid item key={jobApplication.id} xs={12} sm={6} md={4}>
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<CardContent>
<Typography sx={{ fontSize: 12 }} color="text.secondary" gutterBottom>
<CalendarMonthRoundedIcon fontSize="inherit"/> {jobApplication.appliedDate}
<CalendarMonthRoundedIcon fontSize="inherit"/> {jobApplication.appliedDate}
</Typography>
<Typography variant="h5" component="div">
{jobApplication.companyName}
{jobApplication.companyName}
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
{jobApplication.jobTitle}
{jobApplication.jobTitle}
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
<MonetizationOnIcon fontSize="inherit"/>{jobApplication.salaryRange}
<MonetizationOnIcon fontSize="inherit"/>{jobApplication.salaryRange}
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
Status: {jobApplication.status}
Status: {jobApplication.status}
</Typography>
</CardContent>
</CardContent>
<CardContent sx={{ flexGrow: 1 }}>
<Typography color="text.secondary">
<CommentRoundedIcon fontSize="inherit"/>
<br/>
{jobApplication.description}
<CommentRoundedIcon fontSize="inherit"/>
<br/>
{jobApplication.description}
</Typography>
<Typography color="text.secondary">
<LinkRoundedIcon fontSize="inherit"/> <Link href={jobApplication.jobUrl} underline="hover" color="inherit">job link</Link>
<LinkRoundedIcon fontSize="inherit"/> <Link href={jobApplication.jobUrl} underline="hover" color="inherit">job link</Link>
</Typography>
<CardActions>
<Button size="small" color="info" variant="outlined" startIcon={<ReadMoreIcon />} onClick={() => handleOpen(jobApplication)}>Edit</Button>
<Button size="small" color="warning" variant="outlined" startIcon={<DeleteIcon />} onClick={() => handleDeleteJobApplication(jobApplication.id)}>Delete</Button>
<Button size="small" color="warning" variant="outlined" startIcon={<DeleteIcon />} onClick={() => handleDeleteJobApplication(jobApplication.id)}>Delete</Button>
</CardActions>
</CardContent>
</Card>
</Grid>
})}
))}
</Grid>
</Container>
</main>
</div>
)
}
);
}
Loading

0 comments on commit 99be6e2

Please sign in to comment.