PTB-fe/components/Riwayat/TableRiwayat.js

import Datatable from "@/components/Tables/Datatable";
import Link from "next/link";
import moment from "moment";
import React, { Component } from "react";
import { getLog2 } from "@/actions/log";
import { connect } from "react-redux";
import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";


import Datetime from "react-datetime";

class TableRiwayat extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataRiwayat: "",
            dataRiwayatsort:"",
            fromDate: "",
            toDate: "",
            updateTable: false
        };
    }
    componentDidMount = async () => {
        const { token } = this.props;

        const dataRiwayat = await getLog2(this.props.token)
        this.setState({ dataRiwayat });
    }
    onFilter = async () => {
        // const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
        // const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
        // const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
        // this.setState({ dataRiwayat });
        this.setState({ updateTable: true });
        setTimeout(() => {
            this.setState({ updateTable: false });
        }, 1);

    }
    componentDidUpdate = async () => {
        const dataRiwayatsort = this.state
        if (this.state.updateTable === true) {
            const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
            const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
            const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
            this.setState({ dataRiwayatsort });
            // this.setState({ dataRiwayat });
        }
    }


    render() {
        console.log(this.state.dataRiwayat)
        return (
            <div className="card b ">

                <div className="card-body card-over">
                    <span className=" ml-2 float-left">
                        <label className="col-form-label">Range Filter : </label>

                        <span className=" mr-2 ml-4">
                            <Datetime
                                timeFormat={false}
                                inputProps={{ className: "form-control" }}
                                closeOnSelect={true}
                                value={this.state.fromDate ? moment(this.state.fromDate).format("DD-MM-YYYY") : "DD/MM/YYYY"}
                                onChange={(fromDate) => {
                                    this.setState({ fromDate })
                                }}
                            />
                        </span>
                        <span>
                            <Datetime
                                timeFormat={false}
                                inputProps={{ className: "form-control" }}
                                closeOnSelect={true}
                                value={this.state.toDate ? moment(this.state.toDate).format("DD-MM-YYYY") : "DD/MM/YYYY"}
                                onChange={(toDate) => {
                                    this.setState({ toDate })
                                }}
                            />
                        </span>
                        <Button color="info" className=" mt-4" onClick={this.onFilter}>Filter</Button>

                    </span>
                    {this.state.dataRiwayat && (
                        <Datatable options={{
                            searching: true, 
                            aLengthMenu: [500],
                            paging: false,
                            scrollX: true, scrollY: "370px",
                            bordered: true,
                            "pageLength": 10
                        }}>
                            <table className="table w-100" data-order='[[3, "desc"]]'>
                                <thead>
                                    <tr>
                                        <th>Timestamp</th>
                                        <th>Username</th>
                                        <th>IPv4</th>
                                        <th>Menu</th>
                                        <th>Deskripsi</th>
                                        {/* <th>Created</th> */}
                                    </tr>
                                </thead>
                                <tbody>
                                    {this.state.dataRiwayat && this.state.dataRiwayat.data?.map(value => (
                                        <tr>
                                            <td style={{ width: 175 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.createdAt && (moment(value.createdAt).format("DD-MM-YYYY, HH:mm"))}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td >
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.user?.nama}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.ipv4}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td >
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.menu}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td style={{ minWidth: 350 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.aktivitas}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    ))}

                                </tbody>
                            </table>
                        </Datatable>
                    )}
                </div>
            </div >
        );
    }
}
const mapStateToProps = (state) => ({ token: state.token });
export default connect(mapStateToProps)(TableRiwayat);