From 4f6bb02ab7593e9def6f2e641649d0b1d5957fc7 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 22 Jun 2021 13:45:36 -0700
Subject: [PATCH] IO-233 Base websocket setup for CDK.
---
client/package.json | 1 +
.../job-detail-lines/job-lines.component.jsx | 2 +-
client/src/graphql/bodyshop.queries.js | 2 +
client/src/pages/cdk/cdk.container.jsx | 128 ++++++++++++++++++
.../pages/manage/manage.page.component.jsx | 2 +
client/src/redux/dms/dms.actions.js | 6 +
client/src/redux/dms/dms.reducer.js | 20 +++
client/src/redux/dms/dms.sagas.js | 14 ++
client/src/redux/dms/dms.selectors.js | 8 ++
client/src/redux/dms/dms.types.js | 4 +
client/yarn.lock | 82 ++++++++++-
.../down.yaml | 5 +
.../up.yaml | 5 +
.../down.yaml | 85 ++++++++++++
.../up.yaml | 86 ++++++++++++
hasura/migrations/metadata.yaml | 1 +
package.json | 1 +
server.js | 24 ++--
server/cdk/cdk-job-export.js | 34 +++++
server/cdk/cdk.js | 86 ++++++++++++
server/graphql-client/queries.js | 74 ++++++++++
yarn.lock | 97 ++++++++++++-
22 files changed, 745 insertions(+), 22 deletions(-)
create mode 100644 client/src/pages/cdk/cdk.container.jsx
create mode 100644 client/src/redux/dms/dms.actions.js
create mode 100644 client/src/redux/dms/dms.reducer.js
create mode 100644 client/src/redux/dms/dms.sagas.js
create mode 100644 client/src/redux/dms/dms.selectors.js
create mode 100644 client/src/redux/dms/dms.types.js
create mode 100644 hasura/migrations/1624310782649_alter_table_public_bodyshops_add_column_cdk_dealerid/down.yaml
create mode 100644 hasura/migrations/1624310782649_alter_table_public_bodyshops_add_column_cdk_dealerid/up.yaml
create mode 100644 hasura/migrations/1624310795238_update_permission_user_public_table_bodyshops/down.yaml
create mode 100644 hasura/migrations/1624310795238_update_permission_user_public_table_bodyshops/up.yaml
create mode 100644 server/cdk/cdk-job-export.js
create mode 100644 server/cdk/cdk.js
diff --git a/client/package.json b/client/package.json
index 7b92c7a49..eeafdb4e5 100644
--- a/client/package.json
+++ b/client/package.json
@@ -57,6 +57,7 @@
"redux-state-sync": "^3.1.2",
"reselect": "^4.0.0",
"sass": "^1.32.13",
+ "socket.io-client": "^4.1.2",
"styled-components": "^5.3.0",
"subscriptions-transport-ws": "^0.9.18",
"web-vitals": "^1.1.2",
diff --git a/client/src/components/job-detail-lines/job-lines.component.jsx b/client/src/components/job-detail-lines/job-lines.component.jsx
index 346741d47..8ebc5d284 100644
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -395,7 +395,7 @@ export function JobLinesComponent({
setState({
...state,
filteredInfo: {
- part_type: ["PAN,PAL,PAA,PAP,PAS,PASL"],
+ part_type: ["PAN,PAC,PAR,PAL,PAA,PAM,PAP,PAS,PASL"],
},
});
}}
diff --git a/client/src/graphql/bodyshop.queries.js b/client/src/graphql/bodyshop.queries.js
index e4c429df8..5dfd68ccb 100644
--- a/client/src/graphql/bodyshop.queries.js
+++ b/client/src/graphql/bodyshop.queries.js
@@ -89,6 +89,7 @@ export const QUERY_BODYSHOP = gql`
website
jc_hourly_rates
md_jobline_presets
+ cdk_dealerid
employees {
id
active
@@ -175,6 +176,7 @@ export const UPDATE_SHOP = gql`
website
jc_hourly_rates
md_jobline_presets
+ cdk_dealerid
employees {
id
first_name
diff --git a/client/src/pages/cdk/cdk.container.jsx b/client/src/pages/cdk/cdk.container.jsx
new file mode 100644
index 000000000..67b240e66
--- /dev/null
+++ b/client/src/pages/cdk/cdk.container.jsx
@@ -0,0 +1,128 @@
+import { Result, Timeline, Space, Tag, Divider, Button } from "antd";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+ setBreadcrumbs,
+ setSelectedHeader,
+} from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+import SocketIO from "socket.io-client";
+import { auth } from "../../firebase/firebase.utils";
+import moment from "moment";
+
+const mapStateToProps = createStructuredSelector({
+ bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+ setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CdkContainer);
+
+export const socket = SocketIO(
+ process.env.NODE_ENV === "production"
+ ? process.env.REACT_APP_AXIOS_BASE_API_URL
+ : window.location.origin,
+ {
+ path: "/ws",
+ // transports: ["websocket"],
+ auth: async (callback) => {
+ const token = auth.currentUser && (await auth.currentUser.getIdToken());
+ callback({ token });
+ },
+ }
+);
+
+export function CdkContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
+ const { t } = useTranslation();
+ const [logs, setLogs] = useState([]);
+ useEffect(() => {
+ document.title = t("titles.cdk");
+ setSelectedHeader("cdk");
+ setBreadcrumbs([
+ {
+ link: "/manage/cdk",
+ label: t("titles.bc.cdk"),
+ },
+ ]);
+ }, [t, setBreadcrumbs, setSelectedHeader]);
+
+ useEffect(() => {
+ socket.on("connected", () => {
+ console.log("Connected again.");
+ });
+
+ socket.on("log-event", (payload) => {
+ setLogs((logs) => {
+ return [...logs, payload];
+ });
+ });
+
+ socket.connect();
+
+ socket.emit("set-log-level", "TRACE");
+
+ return () => {
+ socket.removeAllListeners();
+ socket.disconnect();
+ };
+ }, []);
+
+ if (!bodyshop.cdk_dealerid) return ;
+
+ return (
+
+
+
+
+
+
+ {logs.map((log, idx) => (
+
+
+ {log.level}
+ {moment(log.timestamp).format("MM/DD/YYYY HH:MM:ss")}
+
+ {log.message}
+
+
+ ))}
+
+