text: import React, { lazy, useEffect, useState } from 'react'
  import { useHistory, useLocation } from 'react-router-dom'
  import { useDispatch } from "react-redux";
  import {
      CBadge,
      CCard,
      CCardBody,
      CCardHeader,
      CCol,
      CDataTable,
      CRow,
      CPagination,
      CButton,
      CFormGroup,
      CLabel,
      CInput
  } from '@coreui/react'
  import CIcon from '@coreui/icons-react';
  import axios from 'axios';
  
  //api mixin
  import { loadEntityList, deleteEntity } from '../../mixins/ApiMixin';
  
  //redux action
  import * as toastAction from "../../store/actions/toast";
  
  const ResourceCategory = () => {
      const dispatch = useDispatch();
      const [resourceCategoryData, setResourceCategoryData] = useState([]);
  
      const history = useHistory()
      const queryPage = useLocation().search.match(/page=([0-9]+)/, '')
      const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1)
      const [page, setPage] = useState(currentPage);
      const [totalPage, setTotalPage] = useState(0);
      const [editMode, setEditMode] = useState(false);
  
      const pageChange = newPage => {
          let tempPage = newPage == 0 ? 1 : newPage;
          currentPage !== newPage && history.push(`/resource-category?page=${tempPage}`)
      }
  
      useEffect(() => {
          currentPage !== page && setPage(currentPage)
          history.push(`/resource-category?page=${currentPage}`);
      }, [currentPage])
  
      const deleteUser = (id) => {
          deleteEntity('resource-category', id).then((response) => {
              // resourceData.map)(_)
              dispatch(toastAction.toastNotify({ title: "Success", message: "User Deleted Successfully", type: "success" }));
              let filteredLength = resourceCategoryData.filter(user => user.id != id).length;
              setResourceCategoryData(resourceCategoryData.filter(user => user.id != id));
              setTotalPage(Math.ceil(filteredLength / 10));
          }).catch(error => {
              console.log(error);
          });
      };
  
      useEffect(() => {
          let params = { isActive: 1 };
          loadEntityList('resource-category', params).then((response) => {
              // console.log(response);
              setResourceCategoryData(response.data.data);
              setTotalPage(Math.ceil(response.data.data.length / 10));
          }).catch(error => {
              console.log(error);
          });
      }, []);
  
      // useEffect(() => {
      //    console.log(resourceCategoryData);
      // }, [resourceCategoryData]);
      const createToken = () => {
          axios.get(`web/api/v1/creattoken`)
              .then((response) => {
                  console.log(response);
                  resolve(response);
              }).catch(error => {
                  reject(error);
              });
      };
  
      return (
          <div className="row">
              <div className="col-12">
                  <CCard>
                      <CCardHeader>
                          <div className="d-flex">
                              <div className="mr-auto">
                                  ResourceCategory List
                                  <small className="text-muted"> example</small>
                              </div>
                              <div>
                                  <CButton block color="success" onClick={() => history.push(`/resource-category/add`)}>Add New</CButton>
                              </div>
                          </div>
                      </CCardHeader>
                      <CCardBody>
                          <CDataTable
                              items={resourceCategoryData}
                              fields={[
                                  { key: 'name', _classes: 'font-weight-bold' },
                                  'slug', 'image_url', 'banner_url', { key: 'Actions', _classes: 'text-center' },
                              ]}
                              hover
                              striped
                              itemsPerPage={10}
                              activePage={page}
                              // clickableRows
                              // onRowClick={(item) => history.push(`/resource-category/${item.id}`)}
                              scopedSlots={{
                                  'image_url':
                                      (item) => (
                                          <td>
                                              {
                                                  (item.image_url) ? <img height="50px" width="50px" src={item.image_url} /> : 'No Logo'
                                              }
                                          </td>
                                      ),
                                  'banner_url':
                                      (item) => (
                                          <td>
                                              {
                                                  (item.banner_url) ? <img height="50px" width="50px" src={item.banner_url} /> : 'No Image Banner'
                                              }
                                          </td>
                                      ),
                                  'Actions':
                                      (item) => (
                                          <td className="text-center">
                                              <button className="btn btn-primary mx-1" onClick={() => history.push(`/resource-category/edit/${item.id}`)}><CIcon
                                                  name="cil-pencil"
                                              /></button>
                                              <button className="btn btn-danger mx-1" onClick={() => deleteUser(item.id)}><CIcon
                                                  name="cil-trash"
                                              /></button>
                                          </td>
                                      )
                              }}
                          />
                          <CPagination
                              activePage={page}
                              onActivePageChange={pageChange}
                              pages={totalPage}
                              doubleArrows={false}
                              align="center"
                          />
                      </CCardBody>
                  </CCard>
              </div >
          </div >
      )
  }
  
  export default ResourceCategory
  