PTB-fe/components/Riwayat/TableRiwayat.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Container, Progress } from "reactstrap";
import { getLog2 } from "@/actions/log";
import { connect } from "react-redux";
import moment from "moment";

let ReactDataGrid = null;
class TableRiwayat extends Component {
	state = {
		dataGridReady: false,
		dataRiwayat: {},
		rows: [],
		originalRows: null,
	};

	constructor(props, context) {
		super(props, context);

		this._columns = [
			{
				key: "timelapse",
				name: "Timelapse",
				sortable: true,
				// width: 150
			},
			{
				key: "username",
				name: "Username",
				sortable: true,
				// width: 200
			},
			{
				key: "ipv4",
				name: "IPv4",
				sortable: true,
				// width: 120
			},
			{
				key: "menu",
				name: "Menu",
				sortable: true,
				// width: 200
			},
			{
				key: "deskripsi",
				name: "Deskripsi",
				sortable: true,
				width: 400
			},
		];
	}

	async componentDidMount() {
		const { token } = this.props;
		const dataRiwayat = await getLog2(token);
		this.setState({ dataRiwayat });
		ReactDataGrid = require("react-data-grid");
		this.setState({
			dataGridReady: true,
		});

		let originalRows = this.createRows(1000);
		let rows = originalRows.slice(0);
		this.setState({ rows, originalRows });
	}

	getRandomDate = (start, end) => {
		return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
	};
	getover = (e) => {
		return <div className=" getover"><span className="getover">{e}</span></div>
	}

	createRows = () => {
		let rows = [];
		const { dataRiwayat } = this.state;
		if (dataRiwayat) {
			dataRiwayat.data.forEach((e) => {
				rows.push({
					deskripsi: (e.aktivitas),
					complete: Math.min(100, Math.round(Math.random() * 110)),
					ipv4: e.ipv4 || "-",
					menu: e.menu || "-",
					username: e.user?.nama || "-",
					timelapse: this.getover(moment(e.createdAt).format("DD-MM-YYYY, hh:mm a")),
					completeDate: this.getRandomDate(new Date(), new Date(2021, 0, 1)),
				});
			});
		}

		return rows;
	};

	rowGetter = (i) => this.state.rows[i];

	handleGridSort = (sortColumn, sortDirection) => {
		const comparer = (a, b) => {
			if (sortDirection === "ASC") {
				return a[sortColumn] > b[sortColumn] ? 1 : -1;
			} else if (sortDirection === "DESC") {
				return a[sortColumn] < b[sortColumn] ? 1 : -1;
			}
		};

		const rows = sortDirection === "NONE" ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);

		this.setState({ rows });
	};

	render() {
		return (
			<ContentWrapper>
				<Container fluid>{this.state.dataGridReady && <ReactDataGrid onGridSort={this.handleGridSort} columns={this._columns} rowGetter={this.rowGetter} rowsCount={this.state.rows.length} />}</Container>
				<div align="center">
					<span>Riwayat Pengguna</span>
				</div>
			</ContentWrapper>
		);
	}
}

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