text: import React, { useState, useEffect } from "react";
  import Layout from "../core/Layout";
  import { isAuthenticated } from "../auth";
  import { Redirect } from "react-router-dom";
  import { read, update, updateUser } from "./apiUser";
  
  const Profile = ({ match }) => {
    const [values, setValues] = useState({
      name: "",
      email: "",
      password: "",
      error: false,
      success: false,
    });
  
    const { token } = isAuthenticated(); // eslint-disable-next-line
    const { name, email, password, error, success } = values;
  
    const init = (userId) => {
      // console.log(userId);
      read(userId, token).then((data) => {
        if (data.error) {
          setValues({ ...values, error: true });
        } else {
          setValues({ ...values, name: data.name, email: data.email });
        }
      });
    };
  
    useEffect(() => {
      init(match.params.userId); // eslint-disable-next-line
    }, []);
  
    const handleChange = (name) => (e) => {
      setValues({ ...values, error: false, [name]: e.target.value });
    };
  
    const clickSubmit = (e) => {
      e.preventDefault();
      update(match.params.userId, token, { name, email, password }).then(
        (data) => {
          if (data.error) {
            console.lgo(data.error);
          } else {
            updateUser(data, () => {
              setValues({
                ...values,
                name: data.name,
                email: data.email,
                success: true,
              });
            });
          }
        }
      );
    };
  
    const redirectUser = (success) => {
      if (success) {
        return <Redirect to="/" />;
      }
    };
  
    const profileUpdate = (name, email, password) => (
      <form align="left" className="card w-50 w-sm-100">
        <div className="card-body">
          <div className="form-group">
            <label className="text-muted">Name</label>
            <input
              type="text"
              onChange={handleChange("name")}
              className="form-control"
              value={name}
            />
          </div>
          <div className="form-group">
            <label className="text-muted">Email</label>
            <input
              type="email"
              onChange={handleChange("email")}
              className="form-control"
              value={email}
            />
          </div>
          <div className="form-group">
            <label className="text-muted">Password</label>
            <input
              type="password"
              onChange={handleChange("password")}
              className="form-control"
              value={password}
            />
          </div>
  
          <button onClick={clickSubmit} className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    );
  
    return (
      <Layout
        title="Profile"
        description="Update your profile"
        className="container"
      >
        <div align="center" className="my-4">
          <h2 className="mb-4">Profile update</h2>
          {profileUpdate(name, email, password)}
          {redirectUser(success)}
        </div>
      </Layout>
    );
  };
  
  export default Profile;
  