React Resume - uploader Website (Geekyshows)

import React from 'react' import { useState } from 'react' import { Box, Grid, Typography } from "@mui/material"; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import Avatar from '@mui/material/Avatar'; import TextField from '@mui/material/TextField'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import Select from '@mui/material/Select'; import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; import Checkbox from '@mui/material/Checkbox'; import FormGroup from '@mui/material/FormGroup'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; import MuiAlert from '@mui/material/Alert'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import Snackbar from '@mui/material/Snackbar'; import IconButton from '@mui/material/IconButton'; import CloseIcon from '@mui/icons-material/Close'; function App() { // eslint-disable-next-line  const [name, setName] = useState(""); // eslint-disable-next-line  const [email, setEmail] = useState(""); // eslint-disable-next-line  const [gender, setGender] = useState(""); const [loc, setLoc] = useState([]); const getLocation = async (e) => { const { checked, value } = e.target; console.log("1loc", loc); if (checked) { await setLoc((item) => [...item, value]); } else { await setLoc(loc.filter((e) => e !== value)); } console.log("2loc", loc); } const [error, setError] = useState({ status: false, color: "", msg: "" }) const [pimage, setpimage] = useState(""); const handlepimage = (e) => { setpimage(e.target.files[0]) } const [rdoc, setrdoc] = useState(""); const [date, setDate] = useState(null); const handleDate = (newValue) => { setDate(newValue); }; const [state, setState] = React.useState(''); const handlestate = (event) => { setState(event.target.value); }; const handleSubmit = (e) => { e.preventDefault(); const form = new FormData(); form.append("name", name); form.append("email", email); form.append("date", date); form.append("state", state); form.append("gender", gender); form.append("pjl", loc); form.append("pimage", pimage); form.append("rdoc", rdoc); if (name && email && date && state && gender && loc && pimage && rdoc) { setError({ status: true, color: "success", msg: "Form Submitted Successfully" }) setOpen(true); clearForm() } else { console.log(`name: ${form.get("name")}, email:- ${form.get("email")}, date:- ${form.get("date")}, state:- ${form.get("state")}, gender:- ${form.get("gender")}, location:- ${form.get("pjl")}, image: - ${form.get("pimage")}, doc:- ${form.get("rdoc")}`) console.log(form.get("pimage")); setError({ status: true, color: "error", msg: "All Fields are Required" }) setOpen(true); } }; const [open, setOpen] = React.useState(false); const handleClose = (event, reason) => { if (reason === 'clickaway') { return; } setOpen(false); }; // eslint-disable-next-line const action = ( <React.Fragment> <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose} > <CloseIcon fontSize="small" /> </IconButton> </React.Fragment> ); const Alert = React.forwardRef(function Alert(props, ref) { return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />; }); const clearForm = () => { setName(""); setEmail(""); setDate(null); setGender(""); setLoc([]); setpimage(""); setrdoc(""); setState(""); document.getElementById("resume-form").reset(); } const vertical = "bottom"; const horizontal = "right"; return ( <> {/* Mui snackbar */} <Snackbar open={open} anchorOrigin={{ vertical, horizontal }} autoHideDuration={7000} onClose={handleClose} key="bottomright"> <Alert onClose={handleClose} severity={error.color} sx={{ width: '100%' }}> {error.msg} </Alert> </Snackbar> <Box display="flex" justifyContent="center" sx={{ backgroundColor: "error.light", textAlign: "center" }}> <Typography variant="h3" component="div" sx={{ fontWeight: "bold", color: "white" }}> Resume Uploader </Typography> </Box> <Grid container justifyContent='center'> <Grid item xs={12} md={5}> <Box component="form" noValidate id="resume-form" sx={{ p: 3 }} onSubmit={handleSubmit}> <TextField id="name" label="Name" autoFocus variant="outlined" name="name" margin="normal" required fullWidth value={name} onChange={(e) => setName(e.target.value)} /> <TextField id="email" value={email} label="Email" variant="outlined" name="email" required fullWidth onChange={(e) => setEmail(e.target.value)} /> {/* Date time picker */} <Box mt={2}> <LocalizationProvider dateAdapter={AdapterDayjs}> <DateTimePicker label="Date&Time picker" // inputFormat="dd/mm/yyyy hh:mm a|pm" value={date} onChange={handleDate} renderInput={(params) => <TextField {...params} />} /> </LocalizationProvider> </Box> {/* Select State Component */} <FormControl fullWidth margin='normal'> <InputLabel id="demo-simple-select-label">State</InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" value={state} label="Age" onChange={handlestate} > <MenuItem value="Gujarat">Gujarat</MenuItem> <MenuItem value="Rajkot">Rajkot</MenuItem> <MenuItem value="Bangladesh">Bangladesh</MenuItem> </Select> </FormControl> {/* Gender Component */} <FormControl fullWidth margin='normal'> <FormLabel id="demo-row-radio-buttons-group-label">Gender</FormLabel> <RadioGroup row aria-labelledby="demo-row-radio-buttons-group-label" name="gender" > <FormControlLabel value="female" onChange={((e) => setGender(e.target.value))} control={<Radio />} label="Female" /> <FormControlLabel value="male" onChange={((e) => setGender(e.target.value))} control={<Radio />} label="Male" /> <FormControlLabel value="other" onChange={((e) => setGender(e.target.value))} control={<Radio />} label="Other" /> </RadioGroup> </FormControl> {/* Multiple Checkbox */} <FormControl margin="normal"> <FormLabel> Prefered Job Location</FormLabel> <FormGroup row> <FormControlLabel onChange={(e) => getLocation(e)} control={<Checkbox color='secondary' />} label="Delhi" value="Delhi" /> <FormControlLabel onChange={(e) => getLocation(e)} control={<Checkbox color='warning' />} label="Mumbai" value="Mumbai" /> <FormControlLabel onChange={getLocation} control={<Checkbox color='success' />} label="Banglore" value="Banglore" /> <FormControlLabel onChange={getLocation} control={<Checkbox color='primary' />} label="Ranchi" value="Ranchi" /> <FormControlLabel onChange={getLocation} control={<Checkbox />} label="Kolkata" value="Kolkata" /> </FormGroup> </FormControl> {/* Upload Button */} <Stack direction="row" alignItems="center" spacing={2}> <Button variant="contained" component="label"> UPLOAD PHOTO <input hidden onChange={handlepimage} accept="image/*" name='aksh' id='profile-photo' type="file" /> </Button> <Button variant="contained" component="label"> UPLOAD FILE <input hidden accept="doc/*" onChange={(e) => setrdoc(e.target.files[0])} id='resume-file' type="file" /> </Button> </Stack> {/* Submit Button */} <Button type='submit' variant='contained' sx={{ mt: 2, px: 5 }} color="error"> Submit </Button> </Box> </Grid> <Grid item xs={12} md={7} sx={{ mt: 4 }} > <Box display="flex" justifyContent="center" sx={{ backgroundColor: "info.light", }} padding="1"> <Typography variant="h5" component="div" sx={{ fontWeight: 'bold', color: "white" }}> List of Candidate </Typography> </Box> {/* Table Component */} <TableContainer component={Paper}> <Table sx={{ minWidth: 650 }} aria-label="simple table"> <TableHead> <TableRow sx={{ backgroundColor: "secondary.dark" }}> <TableCell align="center"> Name </TableCell> <TableCell align="center"> Email </TableCell> <TableCell align="center"> DOB </TableCell> <TableCell align="center"> State </TableCell> <TableCell align="center"> Gender </TableCell> <TableCell align="center"> Location </TableCell> <TableCell align="center"> Profile </TableCell> </TableRow> </TableHead> <TableBody> <TableRow key="aksh" sx={{ '&:last-child td, &:last-child th': { border: 0 } }} > <TableCell component="th" scope="row"> Aksh </TableCell> <TableCell align="center"> desaiaksh82@gmail.com </TableCell> <TableCell align="center"> 21/07/2003 </TableCell> <TableCell align="center"> Gujarat </TableCell> <TableCell align="center"> Male </TableCell> <TableCell align="center"> India </TableCell> <TableCell align="center" > <Avatar alt="Aksh desai" src="/static/images/avatar/1.jpg" /> </TableCell> </TableRow> </TableBody> </Table> </TableContainer> </Grid> </Grid> </> ); } export default App;