Package cleanup & transition to latest apollo.

admin/src/graphql/admin.shop.queries.js

@@ -1,4 +1,4 @@
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 
 export const QUERY_ALL_SHOPS = gql`
   query QUERY_ALL_SHOPS {

client/package.json

@@ -12,11 +12,8 @@
     "@tanem/react-nprogress": "^3.0.56",
     "@tinymce/tinymce-react": "^3.10.2",
     "antd": "^4.12.3",
-    "apollo-boost": "^0.4.9",
     "apollo-link-logger": "^2.0.0",
     "axios": "^0.21.1",
-    "codemirror": "^5.59.3",
-    "codemirror-graphql": "^0.15.2",
     "dinero.js": "^1.8.1",
     "dotenv": "^8.2.0",
     "firebase": "^8.2.9",
@@ -24,7 +21,6 @@
     "i18next": "^19.8.9",
     "i18next-browser-languagedetector": "^6.0.1",
     "jsoneditor": "^9.1.10",
-    "jsoneditor-react": "^3.1.0",
     "jsreport-browser-client-dist": "^1.3.0",
     "libphonenumber-js": "^1.9.11",
     "logrocket": "^1.0.13",
@@ -34,17 +30,13 @@
     "prop-types": "^15.7.2",
     "query-string": "^6.14.0",
     "react": "^17.0.1",
-    "react-apollo": "^3.1.5",
     "react-big-calendar": "^0.30.0",
-    "react-codemirror2": "^7.2.1",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-drag-listview": "^0.1.8",
-    "react-email-editor": "^1.2.0",
     "react-grid-gallery": "^0.5.5",
     "react-i18next": "^11.8.7",
     "react-icons": "^4.2.0",
-    "react-moment": "^1.1.1",
     "react-number-format": "^4.4.4",
     "react-phone-input-2": "^2.13.9",
     "react-redux": "^7.2.2",
@@ -86,9 +78,6 @@
     ]
   },
   "devDependencies": {
-    "@apollo/react-testing": "^4.0.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.2"
   }

client/src/App/App.container.jsx

@@ -1,4 +1,4 @@
-import { ApolloProvider } from "@apollo/react-common";
+import { ApolloProvider } from "@apollo/client";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
 import LogRocket from "logrocket";

client/src/components/allocations-assignment/allocations-assignment.container.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import AllocationsAssignmentComponent from "./allocations-assignment.component";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { notification } from "antd";
@@ -8,29 +8,29 @@ import { notification } from "antd";
 export default function AllocationsAssignmentContainer({
   jobLineId,
   hours,
-  refetch
+  refetch,
 }) {
   const visibilityState = useState(false);
   const { t } = useTranslation();
   const [assignment, setAssignment] = useState({
     joblineid: jobLineId,
     hours: parseFloat(hours),
-    employeeid: null
+    employeeid: null,
   });
   const [insertAllocation] = useMutation(INSERT_ALLOCATION);
 
   const handleAssignment = () => {
     insertAllocation({ variables: { alloc: { ...assignment } } })
-      .then(r => {
+      .then((r) => {
         notification["success"]({
-          message: t("allocations.successes.save")
+          message: t("allocations.successes.save"),
         });
         visibilityState[1](false);
         if (refetch) refetch();
       })
-      .catch(error => {
+      .catch((error) => {
         notification["error"]({
-          message: t("employees.errors.saving", { message: error.message })
+          message: t("employees.errors.saving", { message: error.message }),
         });
       });
   };

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx

@@ -1,18 +1,18 @@
 import React, { useState } from "react";
 import AllocationsBulkAssignment from "./allocations-bulk-assignment.component";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { notification } from "antd";
 
 export default function AllocationsBulkAssignmentContainer({
   jobLines,
-  refetch
+  refetch,
 }) {
   const visibilityState = useState(false);
   const { t } = useTranslation();
   const [assignment, setAssignment] = useState({
-    employeeid: null
+    employeeid: null,
   });
   const [insertAllocation] = useMutation(INSERT_ALLOCATION);
 
@@ -21,14 +21,14 @@ export default function AllocationsBulkAssignmentContainer({
       acc.push({
         joblineid: value.id,
         hours: parseFloat(value.mod_lb_hrs) || 0,
-        employeeid: assignment.employeeid
+        employeeid: assignment.employeeid,
       });
       return acc;
     }, []);
 
-    insertAllocation({ variables: { alloc: allocs } }).then(r => {
+    insertAllocation({ variables: { alloc: allocs } }).then((r) => {
       notification["success"]({
-        message: t("employees.successes.save")
+        message: t("employees.successes.save"),
       });
       visibilityState[1](false);
       if (refetch) refetch();
@@ -37,7 +37,7 @@ export default function AllocationsBulkAssignmentContainer({
 
   return (
     <AllocationsBulkAssignment
-    disabled={jobLines.length > 0 ? false : true}
+      disabled={jobLines.length > 0 ? false : true}
       handleAssignment={handleAssignment}
       assignment={assignment}
       setAssignment={setAssignment}

client/src/components/allocations-employee-label/allocations-employee-label.container.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
 import AllocationsLabelComponent from "./allocations-employee-label.component";
 import { notification } from "antd";

client/src/components/audit-trail-list/audit-trail-list.container.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import AuditTrailListComponent from "./audit-trail-list.component";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
 import AlertComponent from "../alert/alert.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -15,7 +15,7 @@ export default function AuditTrailListContainer({ recordId }) {
   return (
     <div>
       {error ? (
-        <AlertComponent type='error' message={error.message} />
+        <AlertComponent type="error" message={error.message} />
       ) : (
         <AuditTrailListComponent
           loading={loading}

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/bill-detail-edit/bill-detail-edit.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@apollo/react-hooks";
+import { useMutation, useQuery } from "@apollo/client";
 import { Button, Form } from "antd";
 import moment from "moment";
 import queryString from "query-string";

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useApolloClient, useMutation } from "@apollo/react-hooks";
+import { useApolloClient, useMutation } from "@apollo/client";
 import { Button, Form, Modal, notification } from "antd";
 import _ from "lodash";
 import React, { useEffect, useState } from "react";

client/src/components/bill-form/bill-form.component.jsx

@@ -10,7 +10,7 @@ import {
   Upload,
 } from "antd";
 import React, { useEffect, useState } from "react";
-import { useApolloClient } from "react-apollo";
+import { useApolloClient } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/bill-form/bill-form.container.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery, useQuery } from "@apollo/react-hooks";
+import { useLazyQuery, useQuery } from "@apollo/client";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/bills-vendors-list/bills-vendors-list.component.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import { useHistory, useLocation } from "react-router-dom";
 import { Table, Input } from "antd";

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,4 +1,4 @@
-import { useSubscription } from "@apollo/react-hooks";
+import { useSubscription } from "@apollo/client";
 import React from "react";
 import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
 import AlertComponent from "../alert/alert.component";

client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Tag } from "antd";
 import React from "react";
 import { Link } from "react-router-dom";

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation, useSubscription } from "@apollo/react-hooks";
+import { useMutation, useSubscription } from "@apollo/client";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -1,5 +1,5 @@
 import { PictureFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { Badge, Popover } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/chat-tag-ro/chat-tag-ro.container.jsx

@@ -1,5 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { useLazyQuery, useMutation } from "@apollo/react-hooks";
+import { useLazyQuery, useMutation } from "@apollo/client";
 import { Tag } from "antd";
 import _ from "lodash";
 import React, { useState } from "react";

client/src/components/contract-cars/contract-cars.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import React from "react";
 import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
 import AlertComponent from "../alert/alert.component";

client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx

@@ -9,7 +9,7 @@ import {
   Space,
 } from "antd";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
 import moment from "moment";
 import { connect } from "react-redux";

client/src/components/contract-form/contract-form-job-prefill.component.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/react-hooks";
+import { useLazyQuery } from "@apollo/client";
 import { Button, notification } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/contract-jobs/contract-jobs.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx

@@ -9,7 +9,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.component";
 import moment from "moment";
 import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 
 const mapStateToProps = createStructuredSelector({
   courtesyCarReturnModal: selectCourtesyCarReturn,

client/src/components/csi-response-form/csi-response-form.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { Form } from "antd";
 import queryString from "query-string";
 import React, { useEffect } from "react";

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,7 +1,7 @@
 // import Icon from "@ant-design/icons";
 // import { Button, Dropdown, Menu, notification } from "antd";
 // import React, { useState } from "react";
-// import { useMutation, useQuery } from "react-apollo";
+// import { useMutation, useQuery } from "@apollo/client";
 // import { Responsive, WidthProvider } from "react-grid-layout";
 // import { useTranslation } from "react-i18next";
 // import { MdClose } from "react-icons/md";

client/src/components/fcm-notification/fcm-notification.component.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { withApollo } from "react-apollo";
+import { withApollo } from "@apollo/client/react/hoc";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent, messaging } from "../../firebase/firebase.utils";
@@ -57,9 +57,6 @@ if ("serviceWorker" in navigator) {
       });
     })
     .catch(function (err) {
-      console.log(
+      console.log("[FCM] Service worker registration failed, error:", err);
-        "[FCM] Service worker registration failed, error:",
-        err
-      );
     });
 }

client/src/components/global-search/global-search.component.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/react-hooks";
+import { useLazyQuery } from "@apollo/client";
 import { AutoComplete, Input } from "antd";
 import _ from "lodash";
 import React from "react";

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { Button, Form, Input, InputNumber, Modal, Radio, Select } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-calculate-totals/job-calculate-totals.component.jsx

@@ -1,7 +1,7 @@
 import { Button, notification } from "antd";
 import Axios from "axios";
 import React, { useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, Form, notification, Switch } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";

client/src/components/job-costing-modal/job-costing-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { Modal } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -1,5 +1,5 @@
 import { PrinterFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { Button, Col, Drawer, Grid, PageHeader, Row, Space, Tag } from "antd";
 import queryString from "query-string";
 import React from "react";

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled, FilterFilled, SyncOutlined } from "@ant-design/icons";
-import { useMutation, useQuery } from "@apollo/react-hooks";
+import { useMutation, useQuery } from "@apollo/client";
 import { Button, Dropdown, Input, Menu, Space, Table } from "antd";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-line-location-popup/job-line-location-popup.component.jsx

@@ -1,6 +1,6 @@
 import { notification, Select } from "antd";
 import React, { useEffect, useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/job-line-note-popup/job-line-note-popup.component.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Input, notification } from "antd";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { useTranslation } from "react-i18next";
 

client/src/components/job-line-status-popup/job-line-status-popup.component.jsx

@@ -1,6 +1,6 @@
 import { notification, Select } from "antd";
 import React, { useEffect, useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-remove-from-parst-queue/job-remove-from-parts-queue.component.jsx

@@ -1,6 +1,6 @@
 import { Button, notification } from "antd";
 import React, { useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 

client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, Card, Form, notification, Popover } from "antd";
 import moment from "moment";
 import React, { useState } from "react";

client/src/components/job-search-select/job-search-select.component.jsx

@@ -1,5 +1,5 @@
 import { LoadingOutlined } from "@ant-design/icons";
-import { useLazyQuery } from "@apollo/react-hooks";
+import { useLazyQuery } from "@apollo/client";
 import { Empty, Select } from "antd";
 import _ from "lodash";
 import React, { forwardRef, useEffect, useState } from "react";

client/src/components/job-totals-table/job-totals-table.component.jsx

@@ -1,7 +1,7 @@
 import { Col, Collapse, Result, Row, Typography } from "antd";
 import Dinero from "dinero.js";
-import { JsonEditor as Editor } from "jsoneditor-react";
+//import { JsonEditor as Editor } from "jsoneditor-react";
-import "jsoneditor-react/es/editor.min.css";
+//import "jsoneditor-react/es/editor.min.css";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -351,12 +351,18 @@ export function JobsTotalsTableComponent({ bodyshop, jobRO, job }) {
             <JobCalculateTotals job={job} disabled={jobRO} />
             <Collapse>
               <Collapse.Panel header="JSON Tree Totals">
-                <Editor
+                <div>
-                  value={{
+                  <pre>
-                    CIECA: job.cieca_ttl && job.cieca_ttl.data,
+                    {JSON.stringify(
-                    ImEXCalc: job.job_totals,
+                      {
-                  }}
+                        CIECA: job.cieca_ttl && job.cieca_ttl.data,
-                />
+                        ImEXCalc: job.job_totals,
+                      },
+                      null,
+                      2
+                    )}
+                  </pre>
+                </div>
               </Collapse.Panel>
             </Collapse>
           </div>

client/src/components/jobs-admin-class/jobs-admin-class.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, Form, notification, Popconfirm, Select } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, Form, notification, DatePicker } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx

@@ -1,6 +1,6 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 export default function JobAdminDeleteIntake({ job }) {

client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, Form, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, Form, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-available-table/jobs-available-supplement.estlines.util.js

@@ -1,5 +1,5 @@
 import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 import _ from "lodash";
 
 export const GetSupplementDelta = async (client, jobId, newLines) => {

client/src/components/jobs-available-table/jobs-available-table.component.jsx

@@ -4,7 +4,7 @@ import {
   PlusCircleFilled,
   SyncOutlined,
 } from "@ant-design/icons";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, Input, notification, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -3,11 +3,11 @@ import {
   useLazyQuery,
   useMutation,
   useQuery,
-} from "@apollo/react-hooks";
+} from "@apollo/client";
 import { notification } from "antd";
 import Axios from "axios";
 import Dinero from "dinero.js";
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 import _ from "lodash";
 import React, { useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -1,7 +1,7 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { Button, Dropdown, Menu, notification } from "antd";
 import React, { useEffect, useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -1,6 +1,6 @@
 import { Button, Form, notification, Popover, Select } from "antd";
 import React, { useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import React, { useContext } from "react";
 import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx

@@ -3,7 +3,7 @@ import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import AlertComponent from "../alert/alert.component";
 import { SEARCH_VEHICLE_BY_VIN } from "../../graphql/vehicles.queries";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 
 export default function JobsCreateVehicleInfoContainer({ form }) {
   const [state] = useContext(JobCreateContext);
@@ -12,7 +12,7 @@ export default function JobsCreateVehicleInfoContainer({ form }) {
     skip: !state.vehicle.search,
   });
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <JobsCreateVehicleInfoComponent

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1,5 +1,5 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import { useApolloClient, useMutation } from "@apollo/react-hooks";
+import { useApolloClient, useMutation } from "@apollo/client";
 import { Button, Dropdown, Menu, notification, Popconfirm } from "antd";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.csi.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation, useApolloClient } from "@apollo/react-hooks";
+import { useMutation, useApolloClient } from "@apollo/client";
 import { Menu, notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import React from "react";
 import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
 import AlertComponent from "../alert/alert.component";

client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React from "react";
 import { useHistory, useLocation } from "react-router-dom";

client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx

@@ -2,7 +2,7 @@ import { Button, Form, Popover, notification } from "antd";
 import React, { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { UPDATE_DOCUMENT } from "../../graphql/documents.queries";
 import axios from "axios";
 

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import React from "react";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";

client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx

@@ -1,5 +1,5 @@
 import { QuestionCircleOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification, Popconfirm } from "antd";
 import axios from "axios";
 import React, { useState } from "react";

client/src/components/jobs-export-all-button/jobs-export-all-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import axios from "axios";
 import _ from "lodash";

client/src/components/jobs-find-modal/jobs-find-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { Modal } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-list/jobs-list.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { Button, Input, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";

client/src/components/jobs-notes/jobs-notes.container.jsx

@@ -1,14 +1,16 @@
-import { useMutation, useQuery } from "@apollo/react-hooks";
+import { useMutation, useQuery } from "@apollo/client";
 import { notification } from "antd";
 import React, { useState } from "react";
 //import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { DELETE_NOTE, QUERY_NOTES_BY_JOB_PK } from "../../graphql/notes.queries";
+import {
+  DELETE_NOTE,
+  QUERY_NOTES_BY_JOB_PK,
+} from "../../graphql/notes.queries";
 import JobNotesComponent from "./jobs.notes.component";
 
-
 export default function JobNotesContainer({ jobId }) {
   const { loading, error, data, refetch } = useQuery(QUERY_NOTES_BY_JOB_PK, {
     variables: { id: jobId },

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -7,9 +7,9 @@ import {
 import { Button, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import Moment from "react-moment";
 import { connect } from "react-redux";
 import { setModalContext } from "../../redux/modals/modals.actions";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
 
 const mapDispatchToProps = (dispatch) => ({
@@ -58,9 +58,7 @@ export function JobNotesComponent({
       width: 200,
       sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
       render: (text, record) => (
-        <span>
+        <DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
-          <Moment format="MM/DD/YYYY @ HH:mm">{record.updated_at}</Moment>
-        </span>
       ),
     },
     {

client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import {
   Button,
   Card,

client/src/components/note-upsert-modal/note-upsert-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Form, Modal, notification } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -1,6 +1,6 @@
 import { Form, notification } from "antd";
 import React, { useState } from "react";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { UPDATE_OWNER } from "../../graphql/owners.queries";
 import OwnerDetailFormComponent from "./owner-detail-form.component";

client/src/components/owner-detail-update-jobs/owner-detail-update-jobs.component.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, notification } from "antd";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { UPDATE_JOBS } from "../../graphql/jobs.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 

client/src/components/owner-find-modal/owner-find-modal.container.jsx

@@ -1,6 +1,6 @@
 import { Modal } from "antd";
 import React from "react";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";

client/src/components/owner-search-select/owner-search-select.component.jsx

@@ -1,11 +1,11 @@
 import { LoadingOutlined } from "@ant-design/icons";
-import { useLazyQuery } from "@apollo/react-hooks";
+import { useLazyQuery } from "@apollo/client";
 import { Empty, Select } from "antd";
 import _ from "lodash";
 import React, { forwardRef, useEffect, useState } from "react";
 import {
   SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE,
-  SEARCH_OWNERS_FOR_AUTOCOMPLETE
+  SEARCH_OWNERS_FOR_AUTOCOMPLETE,
 } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 

client/src/components/owners-list/owners-list.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import React from "react";
 import { QUERY_ALL_OWNERS_PAGINATED } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";

client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification, Popover } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@apollo/react-hooks";
+import { useMutation, useQuery } from "@apollo/client";
 import { Form, Modal, notification } from "antd";
 import moment from "moment";
 import React, { useEffect, useState } from "react";

client/src/components/parts-receive-modal/parts-receive-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Form, Modal, notification } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/payable-export-all-button/payable-export-all-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";

client/src/components/payable-export-button/payable-export-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";

client/src/components/payment-export-button/payment-export-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";

client/src/components/payment-modal/payment-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { Form, Modal, notification } from "antd";
 import axios from "axios";

client/src/components/payments-export-all-button/payments-export-all-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import axios from "axios";
 import _ from "lodash";

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -1,4 +1,4 @@
-import { useApolloClient } from "@apollo/react-hooks";
+import { useApolloClient } from "@apollo/client";
 import Board, { moveCard } from "@lourenci/react-kanban";
 import "@lourenci/react-kanban/dist/styles.css";
 import { notification } from "antd";

client/src/components/production-board-kanban/production-board-kanban.container.jsx

@@ -1,4 +1,4 @@
-import { useSubscription } from "@apollo/react-hooks";
+import { useSubscription } from "@apollo/client";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/production-list-columns/production-list-columns.alert.component.jsx

@@ -2,7 +2,7 @@ import { ExclamationCircleFilled } from "@ant-design/icons";
 import { Dropdown, Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 

client/src/components/production-list-columns/production-list-columns.bodypriority.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Dropdown, Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/production-list-columns/production-list-columns.date.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { DatePicker, Dropdown } from "antd";
 import moment from "moment";
 import React from "react";

client/src/components/production-list-columns/production-list-columns.detailpriority.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Dropdown, Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/production-list-columns/production-list-columns.paintpriority.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Dropdown, Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx

@@ -1,5 +1,5 @@
 import Icon from "@ant-design/icons";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, Input, Popover } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/production-list-columns/production-list-columns.status.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Dropdown, Menu } from "antd";
 import React from "react";
 import { connect } from "react-redux";
@@ -35,13 +35,15 @@ export function ProductionListColumnStatus({ record, bodyshop }) {
       overlay={
         <Menu
           style={{ maxHeight: "200px", overflowY: "auto" }}
-          onClick={handleSetStatus}>
+          onClick={handleSetStatus}
+        >
           {bodyshop.md_ro_statuses.statuses.map((item) => (
             <Menu.Item key={item}>{item}</Menu.Item>
           ))}
         </Menu>
       }
-      trigger={["contextMenu"]}>
+      trigger={["contextMenu"]}
+    >
       <div style={{ width: "100%", height: "19px" }}>{record.status}</div>
     </Dropdown>
   );

client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/production-list-table/production-list-table.container.jsx

@@ -1,4 +1,4 @@
-import { useSubscription } from "@apollo/react-hooks";
+import { useSubscription } from "@apollo/client";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/production-remove-button/production-remove-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/production-sublets-manage/production-sublets-manage.component.jsx

@@ -1,7 +1,7 @@
 import { CheckCircleFilled, EyeInvisibleFilled } from "@ant-design/icons";
 import { Button, List, notification, Popover } from "antd";
 import React, { useMemo, useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 export default function ProductionSubletsManageComponent({ subletJobLines }) {

client/src/components/profile-shops/profile-shops.container.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useQuery, useMutation } from "@apollo/react-hooks";
+import { useQuery, useMutation } from "@apollo/client";
 import {
   QUERY_ALL_ASSOCIATIONS,
   UPDATE_ASSOCIATION,
@@ -26,7 +26,7 @@ export default function ProfileShopsContainer() {
     refetch();
   };
 
-  if (error) return <AlertComponent type='error' message={error.message} />;
+  if (error) return <AlertComponent type="error" message={error.message} />;
   return (
     <ProfileShopsComponent
       loading={loading}

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/react-hooks";
+import { useLazyQuery } from "@apollo/client";
 import { Button, DatePicker, Form, Select, Switch } from "antd";
 import moment from "moment";
 import React from "react";

client/src/components/schedule-block-day/schedule-block-day.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 import { Dropdown, Menu, notification } from "antd";
 import moment from "moment";
 import React from "react";

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React, { useMemo, useEffect } from "react";
 import { useLocation } from "react-router-dom";