IO-233 CDK Reformatting. First successful post.

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

@@ -1,10 +1,19 @@
 import { useQuery } from "@apollo/client";
-import { Button, Col, Result, Row, Select, Space } from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  notification,
+  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 { useLocation, useHistory } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
 import AlertComponent from "../../components/alert/alert.component";
@@ -48,6 +57,7 @@ export const socket = SocketIO(
 export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
   const [logLevel, setLogLevel] = useState("DEBUG");
+  const history = useHistory();
   const [logs, setLogs] = useState([]);
   const search = queryString.parse(useLocation().search);
   const { jobId } = search;
@@ -88,6 +98,12 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
         return [...logs, payload];
       });
     });
+    socket.on("export-success", (payload) => {
+      notification.success({
+        message: t("jobs.successes.exported"),
+      });
+      history.push("/manage/accounting/receivables");
+    });
     return () => {
       socket.removeAllListeners();
       socket.disconnect();
@@ -95,49 +111,68 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     // 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" />;
 
+  if (!jobId || !bodyshop.cdk_dealerid || !(data && data.jobs_by_pk))
+    return <Result status="404" />;
+
   return (
     <div>
-      <Row gutter={32}>
-        <Col span={18}>
-          {data && data.jobs_by_pk && data.jobs_by_pk.ro_number}
-          <DmsAllocationsSummary socket={socket} jobId={jobId} />
+      <Row gutter={[16, 16]}>
+        <Col span={10}>
+          <DmsAllocationsSummary
+            ro_number={data && data.jobs_by_pk && data.jobs_by_pk.ro_number}
+            socket={socket}
+            jobId={jobId}
+          />
+        </Col>
+        <Col span={14}>
           <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" }}>
+
+        <DmsCustomerSelector />
+
+        <Col span={24}>
+          <Card
+            title={t("jobs.labels.dms.logs")}
+            extra={
+              <Space wrap>
+                <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>
+                <Button
+                  onClick={() => {
+                    setLogs([]);
+                    socket.disconnect();
+                    socket.connect();
+                  }}
+                >
+                  Reconnect
+                </Button>
+              </Space>
+            }
+          >
             <DmsLogEvents socket={socket} logs={logs} />
-          </div>
+          </Card>
         </Col>
       </Row>
-
-      <DmsCustomerSelector />
     </div>
   );
 }