text: import React, { useState } from "react";
  import { Link } from "react-router-dom";
  import { isAuthenticated } from "../auth/helper";
  import Base from "../core/Base";
  import { createCategory } from "./helper/adminapicall";
  
  const AddCategory = () => {
    const [name, setName] = useState("");
    const [error, setError] = useState(false);
    const [success, setSuccess] = useState(false);
  
    const { user, token } = isAuthenticated();
  
    const goBack = () => {
      return (
        <div className="mt-3">
          <Link className="btn btn-sm btn-secondary mb-3" to="/admin/dashboard">
            Admin Home
          </Link>
        </div>
      );
    };
  
    const handleChange = (name) => (event) => {
      setError("");
      setName(event.target.value);
      setSuccess(false);
    };
  
    const onSubmit = (event) => {
      event.preventDefault();
      setError("");
      setSuccess(false);
  
      // Backend Request fired
      createCategory(user._id, token, { name })
        .then((data) => {
          if (data.error) {
            setError(data.error);
            //console.log(data.err);
          } else {
            setError("");
            setSuccess(true);
            //console.log(data);
            setName("");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
  
    const successMessage = () => {
      if( success ) {
        //console.log(success);
        return <h4 className="text-success">Category Created successful</h4>
      }
    };
  
    const warningMessage = () => {
      if( error ) {
        //console.log(error);
        return <h4 className="text-danger">Failed to Create Category</h4>
      }
    };
  
    const myCategoryForm = () => (
      <form>
        <div className="form-group">
          <p className="lead">Enter the Category</p>
          <input
            type="text"
            className="form-control my-3"
            onChange={handleChange}
            value={name}
            autoFocus
            required
            placeholder="For example: Summer"
          />
          <button onClick={onSubmit} className="btn btn-outline-info">
            Create Category
          </button>
        </div>
      </form>
    );
  
    return (
      <Base
        title="Create a Category"
        description="Add a new Category for T-shirts"
        className="container bg-info p-4"
      >
        <div className="row bg-white rounded">
          <div className="col-md-8 offset-md-2">
            {successMessage()}
            {warningMessage()}
            {myCategoryForm()}
            {goBack()}
          </div>
        </div>
      </Base>
    );
  };
  
  export default AddCategory;
  