shoc-frontend/src/pages/address/components/Form.js

import React, { useState } from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import CloseIcon from "@mui/icons-material/Close";
import FormStyles from "./Form.Styles";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import useForm from "../../../hooks/useForm";
import { formValidation } from "../_utility";
import SubmitButtonWithLoader from "../../../components/SubmitButtonWithLoader";
import { form_text_builder, API_SUCCESS_MESSAGE } from "../../../constants";

const ItemForm = ({
  userItem,
  mode,
  open,
  setOpen,
  apiCall,
  setApiStatus,
}) => {
  const [isFormLoading, setIsFormLoading] = useState(false);
  const [isFormSubmit, setIsFormSubmit] = useState(false);
  const classes = FormStyles();
  const { PRIMARY_TEXT, SECONDARY_TEXT, BUTTON_TEXT } = form_text_builder(mode);
  const { values, errors, handleChangeKV, handleSubmit } = useForm({
    initialValues: userItem,
    onSubmit(values) {
      setIsFormLoading(true);
      apiCall(values)
        .then((response) => {
          setApiStatus({
            status: 'success',
            message: API_SUCCESS_MESSAGE,
            show: true,
          });
          handleClose();
        })
        .catch((e) => {
          setApiStatus({
            status: "failed",
            message: e.message,
            show: true,
          });
          handleClose();
        });
    },
    validate: (formValues) => {
      if (isFormSubmit) setIsFormSubmit(false);

      return formValidation(formValues);
    },
  });
  const handleClose = () => {
    setOpen({ open: false });
  };

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      {values && (
        <Dialog fullWidth maxWidth={"sm"} open={open} onClose={handleClose}>
          <DialogTitle className={classes.header}>
            <Typography className={classes.title}>Address</Typography>
            <IconButton onClick={handleClose} style={{ marginLeft: "auto" }}>
              <CloseIcon />
            </IconButton>
          </DialogTitle>
          <Box component="form" onSubmit={handleSubmit} noValidate>
            <DialogContent>
              <DialogContentText className={classes.title}>
                {PRIMARY_TEXT.replace("Item", "Address")}
              </DialogContentText>
              <TextField
                id="Title"
                label="Name"
                variant="outlined"
                style={{ width: '100%' }}
                margin="normal"
                required
                name="Title"
                value={values.title}
                onChange={(event) => {
                  const { value } = event.target;
                  handleChangeKV("title", value);
                }}
                error={!!errors.LastName}
                helperText={errors.LastName}
              />      
              <TextField
                id="Name"
                label="Address"
                variant="outlined"
                style={{ width: '100%' }}
                margin="normal"
                required
                name="Name"
                value={values.name}
                onChange={(event) => {
                  const { value } = event.target;
                  handleChangeKV("name", value);
                }}
                error={!!errors.FirstName}
                helperText={errors.FirstName}
              />     
            </DialogContent>
            <DialogActions>
              <Button onClick={handleClose}>Cancel</Button>
              <SubmitButtonWithLoader
                buttonText={BUTTON_TEXT}
                loading={isFormLoading}
              />
            </DialogActions>
          </Box>
        </Dialog>
      )}
    </div>
  );
};

export default ItemForm;