MigratorProject-frontend/src/components/root/Pages/Migrations/HistoricalSingle.js

import React, { useState, useEffect } from "react";
import { callAPI } from "../../../actions/API";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import * as ReactBootstrap from "react-bootstrap";
import filterFactory from "react-bootstrap-table2-filter";
import ToolkitProvider, {
  Search,
  CSVExport,
} from "react-bootstrap-table2-toolkit";

const HistoricalSingle = () => {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const { SearchBar } = Search;
  const { ExportCSVButton } = CSVExport;
  const sizePerPageRenderer = ({
    options,
    currSizePerPage,
    onSizePerPageChange,
  }) => (
    <div className="btn-group" role="group">
      {options.map((option) => {
        const isSelect = currSizePerPage === `${option.page}`;
        return (
          <button
            key={option.text}
            type="button"
            onClick={() => onSizePerPageChange(option.page)}
            className={`btn ${isSelect ? "btn-secondary" : "btn-success"}`}
          >
            {option.text}
          </button>
        );
      })}
    </div>
  );

  const getListData = async () => {
    try {
      const data = await callAPI.get("/all/");
      console.log(data);
      setList(data.data);
      setLoading(true);
    } catch (e) {
      console.log(e);
    }
  };
  const options = {
    paginationSize: 4,
    pageStartIndex: 0,
    // alwaysShowAllBtns: true, // Always show next and previous button
    // withFirstAndLast: false, // Hide the going to First and Last page button
    // hideSizePerPage: true, // Hide the sizePerPage dropdown always
    // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
    firstPageText: "First",
    prePageText: "Back",
    nextPageText: "Next",
    lastPageText: "Last",
    nextPageTitle: "First page",
    prePageTitle: "Pre page",
    firstPageTitle: "Next page",
    lastPageTitle: "Last page",
    showTotal: true,
    disablePageTitle: true,
    sizePerPageList: [
      {
        text: "50",
        value: 50,
      },
      {
        text: "100",
        value: 100,
      },
    ],
    sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
  };
  const columns = [
    { dataField: "id", text: "ID", hidden: true },
    { dataField: "submit_time", text: "Submit Time", sort: true },
    {
      dataField: "domain",
      text: "Domain",
      sort: true,
      formatter: (cell, row) => <a href={"reports/" + row.id}> {cell} </a>,
    },
    { dataField: "booked_date", text: "Booked Date", sort: true },
    { dataField: "booked_time", text: "Booked Time", sort: true },
    { dataField: "original_server", text: "Original Server", sort: true },
    { dataField: "new_server", text: "New Server", sort: true },
    { dataField: "username", text: "Username", sort: true },
    { dataField: "brand", text: "Brand", sort: true },
    { dataField: "ticket_id", text: "TicketID", sort: true },
    { dataField: "migration_status", text: "Status", sort: true },
    { dataField: "agent_booked", text: "Agent initials", sort: true },
    { dataField: "additional_domains", text: "Additional Domains", sort: true },
    { dataField: "migration_type", text: "Type", sort: true },
    { dataField: "term_date", text: "Termination Date", sort: true },
    { dataField: "notes", text: "Notes", sort: true },
    {
      dataField: "report",
      text: "Show Detailed Report",
      formatter: (cell, row) => <a href={cell + row.id}> {cell} </a>,
    },
  ];

  useEffect(() => {
    getListData();
  }, []);

  return (
    <div className="HistoricalSingle">
      {loading ? (
        <ToolkitProvider
          keyField="name"
          data={list}
          columns={columns}
          search
          exportCSV
        >
          {(props) => (
            <div>
              <div className="serSec">
                <h3 className="hdrOne"></h3>
                <SearchBar {...props.searchProps} />
              </div>

              <div className="table-responsive">
                <BootstrapTable
                  {...props.baseProps}
                  filter={filterFactory()}
                  pagination={paginationFactory(options)}
                  striped
                  hover
                  condensed
                />
              </div>
              <ExportCSVButton {...props.csvProps}>
                Export CSV!!
              </ExportCSVButton>
            </div>
          )}
        </ToolkitProvider>
      ) : (
        <ReactBootstrap.Spinner animation="border" />
      )}
    </div>
  );
};

export default HistoricalSingle;