text: import React, { useState, useEffect } from 'react';
  import { useHistory, useLocation, Link } from 'react-router-dom'
  import { loadEntityList, createEntity } from '../../mixins/ApiMixin';
  import {
      CButton,
      CCard,
      CCardBody,
      CCardHeader,
      CCol,
      CModal,
      CModalBody,
      CModalFooter,
      CModalHeader,
      CModalTitle,
      CRow,
      CInput,
      CInputGroup,
      CInputGroupPrepend,
      CInputGroupText,
      CLabel,
      CFormGroup,
      CSelect
  } from '@coreui/react'
  
  import CIcon from '@coreui/icons-react'
  
  
  const BusinessPicker = () => {
      const history = useHistory()
      const [txnNewBusiness, setTxnNewBusiness] = useState(false);
      const initialFormValues = {
          name: "",
          category_id: "",
      };
      const initialErrors = {
          name: [],
          category_id: [],
      };
      const [categoryList, setCategoryList] = useState([]);
      const [businessList, setBusinessList] = useState([]);
      const [businessDetails, setBusinessDetails] = useState(initialFormValues);
      const [errors, setErrors] = useState(initialErrors);
  
      const HandleChange = ({ target }) => {
          setBusinessDetails({ ...businessDetails, [target.name]: target.value })
      }
  
      const SaveBusiness = () => {
          createEntity('business', businessDetails).then((response) => {
              console.log(response.data);
              history.push('/business/edit/' + response.data.id);
              // dispatch(toastAction.toastNotify({ title: "Success", message: "User Created Successfully", type: "success" }));
              // history.goBack();
          }).catch(error => {
              // setErrors(error.response.data.errors);
              let errorData = error.response.data.errors;
              setErrors({ ...initialErrors, ...errorData })
          });;
      };
  
      useEffect(() => {
          let params = { isActive: 1 };
          loadEntityList('category', params).then((response) => {
              // console.log(response);
              setCategoryList(response.data.data);
          }).catch(error => {
              console.log(error);
          });
  
          loadEntityList('user/business', params).then((response) => {
              console.log(response.data);
              setBusinessList(response.data);
          }).catch(error => {
              console.log(error);
          });
      }, []);
  
      return (
          <div>
              i am a startup page for business account
              {/* <Link className="nav-link" to="/business/new">New Business</Link> */}
              <div className="controls">
                  <CButton color="info" onClick={() => setTxnNewBusiness(!txnNewBusiness)} className="mr-1">Create New Business</CButton>
              </div>
              {/* {
                  txnNewBusiness ? (
                      <div>
                          i am true
                      </div>
                  ) : (
                          <div>
                              i am false
                          </div>
                      )
              } */}
              <div>
                  <h3>My Business</h3>
                  {
                      businessList.map(function (business, i) {
                          return (
                              <div key={business.id}>
                                  <button onClick={() => history.push(`/business/edit/${business.id}`)}>
                                      {business.name}
                                  </button>
                              </div>
                          )
                      })
                  }
              </div>
              <CModal
                  show={txnNewBusiness}
                  onClose={() => setTxnNewBusiness(!txnNewBusiness)}
                  color="info"
                  size=""
              >
                  <CModalHeader closeButton>
                      <CModalTitle>Basic Business Information</CModalTitle>
                  </CModalHeader>
                  <CModalBody>
                      <CFormGroup>
                          <CLabel htmlFor="name">Name</CLabel>
                          <CInput type="text" placeholder="Business Name" name="name" value={businessDetails.name} onChange={HandleChange} />
                      </CFormGroup>
                      <CFormGroup>
                          <CLabel htmlFor="name">Category</CLabel>
                          <CSelect name="category_id" value={businessDetails.category_id} onChange={HandleChange}>
                              <option value="" >Select Category</option>
                              {
                                  categoryList.map(function (item, i) {
                                      return (<option key={item.id} value={item.id} >{item.name}</option>)
                                  })
                              }
                          </CSelect>
                      </CFormGroup>
                  </CModalBody>
                  <CModalFooter>
                      <CButton color="info" onClick={() => SaveBusiness()}>Continue</CButton>
                      <CButton color="secondary" onClick={() => setTxnNewBusiness(!info)}>Cancel</CButton>
                  </CModalFooter>
              </CModal>
  
          </div >
      )
  };
  
  export default BusinessPicker;