bodyshop/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx

import { DownloadOutlined, SyncOutlined } from "@ant-design/icons";
import { Button, Input, Space, Table } from "antd";
import axios from "axios";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectPartnerVersion } from "../../redux/application/application.selectors";
import { alphaSort } from "../../utils/sorters";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  partnerVersion: selectPartnerVersion,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobsAvailableScan);

export function JobsAvailableScan({ partnerVersion }) {
  const [estimatesOnDisk, setEstimatesOnDisk] = useState([]);
  const [loading, setLoading] = useState(false);
  const [searchText, setSearchText] = useState("");
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: { text: "" },
  });
  const { t } = useTranslation();

  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };

  const handleImport = async (filepath) => {
    setLoading(true);
    const response = await axios.post("http://localhost:1337/import/", {
      filepath,
    });
    console.log("response", response);
    setLoading(false);
  };

  const columns = [
    {
      title: t("jobs.fields.cieca_id"),
      dataIndex: "cieca_id",
      key: "cieca_id",
      sorter: (a, b) => alphaSort(a, b),
      sortOrder:
        state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order,
    },
    {
      title: t("jobs.fields.owner"),
      dataIndex: "owner",
      key: "owner",
      ellipsis: true,
      sorter: (a, b) => alphaSort(a.owner, b.owner),
      sortOrder:
        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
    },
    {
      title: t("jobs.fields.vehicle"),
      dataIndex: "vehicle",
      key: "vehicle",
      sorter: (a, b) => alphaSort(a.vehicle, b.vehicle),
      sortOrder:
        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
    },
    {
      title: t("jobs.fields.clm_no"),
      dataIndex: "clm_no",
      key: "clm_no",
      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
      sortOrder:
        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
    },
    {
      title: t("jobs.fields.ins_co_nm"),
      dataIndex: "ins_co_nm",
      key: "ins_co_nm",
      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
      sortOrder:
        state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
    },
    {
      title: t("general.labels.actions"),
      key: "actions",
      render: (text, record) => (
        <Button onClick={() => handleImport(record.filepath)}>
          <DownloadOutlined />
        </Button>
      ),
    },
  ];

  const scanEstimates = async () => {
    setLoading(true);
    const estimatesOnDiskResponse = await axios.post(
      "http://localhost:1337/scan/"
    );
    setEstimatesOnDisk(estimatesOnDiskResponse.data);
    setLoading(false);
  };

  const data = estimatesOnDisk
    ? searchText
      ? estimatesOnDisk.filter(
          (j) =>
            (j.owner || "").toLowerCase().includes(searchText.toLowerCase()) ||
            (j.vehicle || "")
              .toLowerCase()
              .includes(searchText.toLowerCase()) ||
            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase())
        )
      : estimatesOnDisk
    : [];

  return (
    <Table
      loading={loading}
      title={() => {
        return (
          <div className="imex-table-header">
            <Space>
              <strong>{t("jobs.labels.diskscan")}</strong>
              <Button
                loading={loading}
                disabled={!partnerVersion}
                onClick={() => {
                  scanEstimates();
                }}
              >
                <SyncOutlined />
              </Button>
            </Space>
            <div className="imex-table-header__search">
              <Input.Search
                placeholder={t("general.labels.search")}
                onChange={(e) => {
                  setSearchText(e.currentTarget.value);
                }}
              />
            </div>
          </div>
        );
      }}
      size="small"
      pagination={{ position: "top" }}
      columns={columns}
      rowKey="id"
      dataSource={data}
      onChange={handleTableChange}
    />
  );
}