bodyshop/client/src/pages/dms/dms.container.jsx

import { useQuery } from "@apollo/client";
import { Button, Col, Result, Row, Select, Space } from "antd";
import queryString from "query-string";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import SocketIO from "socket.io-client";
import AlertComponent from "../../components/alert/alert.component";
import DmsAllocationsSummary from "../../components/dms-allocations-summary/dms-allocations-summary.component";
import DmsCustomerSelector from "../../components/dms-customer-selector/dms-customer-selector.component";
import DmsLogEvents from "../../components/dms-log-events/dms-log-events.component";
import DmsPostForm from "../../components/dms-post-form/dms-post-form.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import { auth } from "../../firebase/firebase.utils";
import { QUERY_JOB_EXPORT_DMS } from "../../graphql/jobs.queries";
import {
  setBreadcrumbs,
  setSelectedHeader,
} from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
});

export default connect(mapStateToProps, mapDispatchToProps)(DmsContainer);

export const socket = SocketIO(
  process.env.NODE_ENV === "production"
    ? process.env.REACT_APP_AXIOS_BASE_API_URL
    : window.location.origin,
  {
    path: "/ws",
    auth: async (callback) => {
      const token = auth.currentUser && (await auth.currentUser.getIdToken());
      callback({ token });
    },
  }
);

export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
  const { t } = useTranslation();
  const [logLevel, setLogLevel] = useState("TRACE");
  const [logs, setLogs] = useState([]);
  const search = queryString.parse(useLocation().search);
  const { jobId } = search;

  const { loading, error, data } = useQuery(QUERY_JOB_EXPORT_DMS, {
    variables: { id: jobId },
    skip: !jobId,
  });

  useEffect(() => {
    document.title = t("titles.dms");
    setSelectedHeader("dms");
    setBreadcrumbs([
      {
        link: "/manage/dms",
        label: t("titles.bc.dms"),
      },
    ]);
  }, [t, setBreadcrumbs, setSelectedHeader]);

  useEffect(() => {
    socket.on("connected", () => {
      console.log("Connected again.");
    });
    socket.on("reconnect", () => {
      setLogs((logs) => {
        return [
          ...logs,
          {
            timestamp: new Date(),
            level: "WARNING",
            message: "Reconnected to CDK Export Service",
          },
        ];
      });
    });

    socket.on("log-event", (payload) => {
      setLogs((logs) => {
        return [...logs, payload];
      });
    });

    socket.connect();
    socket.emit("set-log-level", logLevel);

    return () => {
      socket.removeAllListeners();
      socket.disconnect();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!jobId || !bodyshop.cdk_dealerid || !(data && data.jobs_by_pk))
    return <Result status="404" />;

  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <div>
      <Row gutter={32}>
        <Col span={18}>
          {data && data.jobs_by_pk && data.jobs_by_pk.ro_number}
          <DmsAllocationsSummary socket={socket} jobId={jobId} />
          <DmsPostForm
            socket={socket}
            jobId={jobId}
            job={data && data.jobs_by_pk}
          />
        </Col>
        <Col span={6}>
          <Space>
            <Select
              placeholder="Log Level"
              value={logLevel}
              onChange={(value) => {
                setLogLevel(value);
                socket.emit("set-log-level", value);
              }}
            >
              <Select.Option key="TRACE">TRACE</Select.Option>
              <Select.Option key="DEBUG">DEBUG</Select.Option>
              <Select.Option key="INFO">INFO</Select.Option>
              <Select.Option key="WARNING">WARNING</Select.Option>
              <Select.Option key="ERROR">ERROR</Select.Option>
            </Select>
            <Button onClick={() => setLogs([])}>Clear Logs</Button>
          </Space>
          <div style={{ maxHeight: "500px", overflowY: "auto" }}>
            <DmsLogEvents socket={socket} logs={logs} />
          </div>
        </Col>
      </Row>

      <DmsCustomerSelector />
    </div>
  );
}

export const determineDmsType = (bodyshop) => {
  if (bodyshop.cdk_dealerid) return "cdk";
  else {
    return "pbs";
  }
};