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;