108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { Box, Link, Typography, Avatar, Grid, SxProps, CardActions } from '@mui/material';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
Divider,
|
|
useTheme,
|
|
} from '@mui/material';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import { useMediaQuery } from '@mui/material';
|
|
import { JobFull } from 'types/types';
|
|
import { CopyBubble } from "components/CopyBubble";
|
|
import { rest } from 'lodash';
|
|
import { AIBanner } from 'components/ui/AIBanner';
|
|
import { useAuth } from 'hooks/AuthContext';
|
|
import { DeleteConfirmation } from '../DeleteConfirmation';
|
|
|
|
interface JobInfoProps {
|
|
job: JobFull;
|
|
sx?: SxProps;
|
|
action?: string;
|
|
elevation?: number;
|
|
variant?: "small" | "normal" | null
|
|
};
|
|
|
|
const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
|
|
const { job } = props;
|
|
const { user, apiClient } = useAuth();
|
|
const {
|
|
sx,
|
|
action = '',
|
|
elevation = 1,
|
|
variant = "normal"
|
|
} = props;
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
const isAdmin = user?.isAdmin;
|
|
|
|
const deleteJob = async (jobId: string | undefined) => {
|
|
if (jobId) {
|
|
await apiClient.deleteJob(jobId);
|
|
}
|
|
}
|
|
|
|
if (!job) {
|
|
return <Box>No user loaded.</Box>;
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
elevation={elevation}
|
|
sx={{
|
|
display: "flex",
|
|
borderColor: 'transparent',
|
|
borderWidth: 2,
|
|
borderStyle: 'solid',
|
|
transition: 'all 0.3s ease',
|
|
flexDirection: "column",
|
|
...sx
|
|
}}
|
|
{...rest}
|
|
>
|
|
<CardContent sx={{ display: "flex", flexGrow: 1, p: 3, height: '100%', flexDirection: 'column', alignItems: 'stretch', position: "relative" }}>
|
|
{variant !== "small" && <>
|
|
{job.location &&
|
|
<Typography variant="body2" sx={{ mb: 1 }}>
|
|
<strong>Location:</strong> {job.location.city}, {job.location.state || job.location.country}
|
|
</Typography>
|
|
}
|
|
{job.title &&
|
|
<Typography variant="body2" sx={{ mb: 1 }}>
|
|
<strong>Title:</strong> {job.title}
|
|
</Typography>
|
|
}
|
|
{/* {job.datePosted &&
|
|
<Typography variant="body2" sx={{ mb: 1 }}>
|
|
<strong>Posted:</strong> {job.datePosted.toISOString()}
|
|
</Typography>
|
|
} */}
|
|
{job.company &&
|
|
<Typography variant="body2" sx={{ mb: 1 }}>
|
|
<strong>Company:</strong> {job.company}
|
|
</Typography>
|
|
}
|
|
{job.summary && <Typography variant="body2">
|
|
<strong>Summary:</strong> {job.summary}
|
|
</Typography>
|
|
}
|
|
</>}
|
|
</CardContent>
|
|
<CardActions>
|
|
{isAdmin &&
|
|
<DeleteConfirmation
|
|
onDelete={() => { deleteJob(job.id); }}
|
|
sx={{ minWidth: 'auto', px: 2, maxHeight: "min-content", color: "red" }}
|
|
action="delete"
|
|
label="job"
|
|
title="Delete job"
|
|
icon=<DeleteIcon />
|
|
message={`Are you sure you want to delete ${job.id}? This action cannot be undone.`}
|
|
/>}
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { JobInfo };
|