please help me to fix this error
Tags: errors
Published: 2020-06-27 20:21:05

import React, { useState } from "react";

import "./AddUser.css";
import {
  validate,
  validatorRequire,
  validatorNumber,
} from "../../shared/util/validator";
import { Link } from "react-router-dom";
import * as userService from "./service";

const AddUser = () => {
  const [formState, setFormaState] = useState({
    errors: [],
    users: [],
  });
  // class addUser extends Component {
  //   componentDidMount() {
  //     userService
  //       .getUsers()
  //       .then((response) => this.setFormaState({ users: response.data }));
  //   }
  // }
  //   componentDidMount() {

  // }
  const addUserSubmitHandler = (event) => {
    event.preventDefault();
    const errors = validateForm();

    if (errors.length) {
      alert("gikhare sag");
      setFormaState({ ...formState, errors });
      return;
    }
    userService.addUser(formState.user);
    setFormaState({ errors: [], users: userService.getUsers() });
  };

  const validators = {
    code: [validatorRequire(), validatorNumber()],
    fname: [validatorRequire()],
    lname: [validatorRequire()],
    phone: [validatorRequire(), validatorNumber()],
    fee: [validatorRequire(), validatorNumber()],
  };

  const farsiNames = {
    code: "کد",
    fname: "نام",
    lname: "نام خانوادگی",
    phone: "شماره تماس",
    fee: "دستمزد",
  };

  const changeHandler = (e) => {
    const user = {};
    const name = e.target.name;
    const value = e.target.value;
    user[name] = value;
    const errors = validate(value, validators[name], farsiNames[name]);
    setFormaState({
      ...formState,
      user: { ...formState.user, ...user },
      errors,
    });
  };
  const validateForm = () => {
    let errors = [];
    const fields = Object.keys(farsiNames);
    for (let field of fields) {
      const fieldErrors = validate(
        formState.user ? formState.user[field] : undefined,
        validators[field],
        farsiNames[field]
      );
      errors = errors.concat(fieldErrors);
    }

    return errors;
  };

  return (
    <form onSubmit={addUserSubmitHandler}>
      {formState.errors.map((error, index) => (
        <div className="text-danger" key={index}>
          {error}
        </div>
      ))}
      <div className="row container mt-5">
        <input
          element="input"
          type="text"
          id="code"
          name="code"
          className="code form-control m-2 col-md-1 d-block"
          placeholder="کد"
          onChange={changeHandler}
        />

        <input
          element="input"
          type="text"
          id="fname"
          name="fname"
          className="fname form-control m-2 col-md-2 d-block"
          placeholder="نام"
          onChange={changeHandler}
        />
        <input
          element="input"
          type="text"
          id="lname"
          name="lname"
          className="lname form-control m-2 col-md-2 "
          placeholder="نام خانوادگی"
          onChange={changeHandler}
        />
        <input
          element="input"
          type="text"
          id="phone"
          name="phone"
          className="phone form-control m-2 col-md-3"
          placeholder="شماره تماس"
          onChange={changeHandler}
        />
        <input
          element="input"
          type="text"
          id="fee"
          name="fee"
          className="fee form-control col-md-3 m-2 p-3"
          placeholder="دستمزد"
          validators={[validatorRequire]}
          onChange={changeHandler}
        />
      </div>

      <button className="btn btn-success mx-auto d-block mt-5">
        اضافه کردن
      </button>

      <div className="container mt-5">
        <table className="table table-striped">
          <thead>
            <tr>
              <th scope="col">ردیف</th>
              <th scope="col">{farsiNames.code}</th>
              <th scope="col">{farsiNames.fname}</th>
              <th scope="col">{farsiNames.lname}</th>
              <th scope="col">{farsiNames.phone}</th>
              <th scope="col">{farsiNames.fee}</th>
            </tr>
          </thead>

          <tbody>
            {formState.users.map((user, index) => {
              return (
                <tr key={index}>
                  <th scope="row">{index + 1}</th>
                  <td>{user.code}</td>
                  <td>{user.fname}</td>
                  <td>{user.lname}</td>
                  <td>{user.phone}</td>
                  <td>{user.fee}</td>
                  <td>
                    <Link to={"/userfee/" + user.code}>
                      <span role="button" className="btn btn-primary btn-sm">
                        Edit
                      </span>
                    </Link>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </form>
  );
};
export default AddUser;