Untitled

import React, { Fragment, useEffect, useState } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import GroupsIcon from "@mui/icons-material/Groups";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
import AssignmentOutlinedIcon from "@mui/icons-material/AssignmentOutlined";
import { injectIntl } from "react-intl";
import CounterWidget from "../Counter/CounterWidget";
import messages from "./messages";
import styles from "./widget-jss";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { getTaskLife } from "../../api/auth";
import "./Task.css";

function CounterIconWidget(props) {
  const { classes, intl, data } = props;

  const count = data;

  if (data === null) {
    return null;
  }

  const [tasklife, setTaskelife] = useState([]);

  useEffect(() => {
    getTaskLife()
      .then((taskelife) => {
        setTaskelife(taskelife);
        props.sendTakeData(taskelife.length ?? 0);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className={classes.rootCounterFull}>
      <Grid container spacing={2}>
        <Fragment>
          <Grid item xs={6} md={3}>
            <Link to={"/app/clients"} className={classes.link_text} id="counterw">
              <CounterWidget
                color="secondary-dark"
                start={0}
                end={count.clients}
                duration={3}
                title={intl.formatMessage(messages.Clients)}
              >
                <GroupsIcon className={classes.counterIcon} />
              </CounterWidget>
            </Link>
          </Grid>
          <Grid item xs={6} md={3}>
            <Link className={classes.link_text} to={"/app/leads"} id="counterw1">
              <CounterWidget
                color="secondary-main"
                start={0}
                end={count.prospect}
                duration={3}
                title={intl.formatMessage(messages.Leads)}
              >
                <AccountCircleIcon className={classes.counterIcon} />
              </CounterWidget>
            </Link>
          </Grid>
          <Grid item xs={6} md={3}>
            <Link className={classes.link_text} to={"/app/full-task"} id="counterw2">
              <CounterWidget
                color="secondary-main"
                start={0}
                end={tasklife ? tasklife.length : 0}
                duration={3}
                title={intl.formatMessage(messages.Tasks)}
              >
                <AssignmentOutlinedIcon className={classes.counterIcon} />
              </CounterWidget>
            </Link>
          </Grid>
          <Grid item xs={6} md={3}>
            <Link className={classes.link_text} to={"/app/prospect"} id="counterw3">
              <CounterWidget
                color="secondary-main"
                start={0}
                end={count.potential}
                duration={3}
                title={intl.formatMessage(messages.requestp_rojects)}
              >
                <CalendarMonthIcon className={classes.counterIcon} />
              </CounterWidget>
            </Link>
          </Grid>
        </Fragment>
      </Grid>
    </div>
  );
}

CounterIconWidget.defaultProps = {
  data: {
    clients: 0,
    prospect: 0,
    potential: 0,
    task: 0,
    development: 0,
    call: 0,
    task_done: 0,
    follow_us: 0,
    ticket: 0,
    sign_on_clients: 0,
    get_calls_made: 0,
    tickets_submitted: 0,
    articles_to_platforms: 0,
    documents: 0,
  },
};

CounterIconWidget.propTypes = {
  classes: PropTypes.object.isRequired,
  intl: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => {
  return {
    data: state.dashboardReducer.data,
    ...state,
  };
};

export default connect(mapStateToProps)(
  withStyles(styles)(injectIntl(CounterIconWidget))
);