ptb-fe/pages/app/pelaporan/index.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Link from "next/link";
import { Row, Col, Button } from "reactstrap";
import { getPelaporan } from "@/actions/pelaporan";
import { getGraph, getExcel } from "@/actions/graph";
import CaseProgress from "@/components/Pelaporan/CaseProgress";
import TableLaporan from "@/components/Pelaporan/TableLaporan";
import { connect } from "react-redux";
import Loader from "@/components/Common/Loader";
import Router from "next/router";

class Pelaporan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pelaporan: {},
      graph: {},
      tahun: new Date().getFullYear(),
      newLaporan: [],
    };
  }

  componentDidMount = async () => {
    const pelaporan = await getPelaporan(this.props.token);
    const graph = await getGraph(this.props.token, {
      laporanTahun: true,
      newLaporan: true,
      jumlahLaporan: true,
    });
    const newLaporan = graph.data.newLaporan;
    this.setState({ pelaporan, graph, newLaporan });
  };

  nextButton = async () => {
    const tahun = this.state.tahun + 1;
    const graph = await getGraph(this.props.token, {
      laporanTahun: true,
      jumlahLaporan: true,
      tahun,
    });
    this.setState({ graph, tahun });
  };

  prevButton = async () => {
    const tahun = this.state.tahun - 1;
    const graph = await getGraph(this.props.token, {
      laporanTahun: true,
      jumlahLaporan: true,
      tahun,
    });
    this.setState({ graph, tahun });
  };

  shouldComponentUpdate = (prevProps, prevState) => {
    if (prevState.graph !== this.state.graph) return true;
  };

  excel = () => {
    const url = getExcel(this.props.token, "Laporan", {
      tahun: this.state.tahun,
    });
    Router.push(url);
  };

  render() {
    const { pelaporan, graph, newLaporan } = this.state;

    return (
      <ContentWrapper>
        <div className="content-heading">
          <span className="font-color-white">Pelaporan</span>
          <div className="ml-auto"></div>
          <Link href="/app/penjadwalan">
            <Button className="btn-header" color>
              <h4 className="font-color-white">Penjadwalan &gt;</h4>
            </Button>
          </Link>
        </div>
        <Row>
          <Col lg="4">
            {graph?.data ? (
              <CaseProgress
                data={graph.data}
                nextButton={this.nextButton}
                prevButton={this.prevButton}
                tahun={this.state.tahun}
                newLaporan={newLaporan}
                excel={this.excel}
              />
            ) : (
              <Loader />
            )}
          </Col>
          <Col lg="8">
            <div className="mb-3 d-flex">
              {/* <div className="margin-left-auto">
								<Link href="/app/pelaporan/search">
									<Button className="color-3e3a8e" color="purple">Laporan Baru</Button>
								</Link>
							</div> */}
            </div>
            {pelaporan?.data ? (
              <TableLaporan
                listData={pelaporan.data}
                to="/app/pelaporan/detail"
                linkName="Detail"
              />
            ) : (
              <Loader />
            )}
          </Col>
        </Row>
      </ContentWrapper>
    );
  }
}

const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(Pelaporan);