Updated all packages and fixed errors thrown by new ESLint

client/package.json

@@ -4,9 +4,10 @@
   "private": true,
   "proxy": "http://localhost:5000",
   "dependencies": {
-    "@lourenci/react-kanban": "^2.0.0",
+    "@apollo/client": "^3.2.5",
+    "@lourenci/react-kanban": "^2.1.0",
     "@stripe/react-stripe-js": "^1.1.2",
-    "@stripe/stripe-js": "^1.9.0",
+    "@stripe/stripe-js": "^1.11.0",
     "@tanem/react-nprogress": "^3.0.46",
     "@tinymce/tinymce-react": "^3.7.0",
     "antd": "^4.6.6",
@@ -19,7 +20,7 @@
     "dotenv": "^8.2.0",
     "fingerprintjs2": "^2.1.2",
     "firebase": "^7.22.1",
-    "graphql": "^15.3.0",
+    "graphql": "^15.4.0",
     "i18next": "^19.8.2",
     "i18next-browser-languagedetector": "^6.0.1",
     "inline-css": "^2.6.3",
@@ -31,24 +32,24 @@
     "phone": "^2.4.16",
     "prop-types": "^15.7.2",
     "query-string": "^6.13.5",
-    "react": "^16.13.1",
+    "react": "^17.0.1",
     "react-apollo": "^3.1.5",
     "react-big-calendar": "^0.28.0",
     "react-codemirror2": "^7.2.1",
-    "react-color": "^2.18.1",
-    "react-dom": "^16.13.1",
+    "react-color": "^2.19.3",
+    "react-dom": "^17.0.1",
     "react-drag-listview": "^0.1.7",
-    "react-email-editor": "^1.1.1",
-    "react-ga": "^3.1.2",
+    "react-email-editor": "^1.2.0",
+    "react-ga": "^3.2.0",
     "react-grid-gallery": "^0.5.5",
     "react-i18next": "^11.7.3",
     "react-icons": "^3.11.0",
     "react-moment": "^1.0.0",
     "react-number-format": "^4.4.1",
-    "react-redux": "^7.2.1",
+    "react-redux": "^7.2.2",
     "react-resizable": "^1.11.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^4.0.0",
     "react-trello": "^2.2.8",
     "react-virtualized": "^9.22.2",
     "recharts": "^1.8.5",

client/src/components/alert/alert.component.jsx

@@ -1,6 +1,6 @@
 import { Alert } from "antd";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 import React from "react";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function AlertComponent(props) {
   if (props.type === "error") logImEXEvent("alert_render", { ...props });

client/src/components/alert/alert.component.test.js

@@ -1,17 +1,13 @@
+import { shallow } from "enzyme";
 import React from "react";
-import ReactDOM from "react-dom";
 import Alert from "./alert.component";
-import { MockedProvider } from "@apollo/react-testing";
-import { shallow, mount } from "enzyme";
-
-const div = document.createElement("div");
 
 describe("Alert component", () => {
   let wrapper;
   beforeEach(() => {
     const mockProps = {
       type: "error",
-      message: "Test error message."
+      message: "Test error message.",
     };
 
     wrapper = shallow(<Alert {...mockProps} />);

client/src/components/allocations-assignment/allocations-assignment.component.test.js

@@ -1,9 +1,7 @@
-import { mount, shallow } from "enzyme";
+import { mount } from "enzyme";
 import React from "react";
-import { AllocationsAssignmentComponent } from "./allocations-assignment.component";
 import { MockBodyshop } from "../../utils/TestingHelpers";
-import { Select } from "antd";
-const div = document.createElement("div");
+import { AllocationsAssignmentComponent } from "./allocations-assignment.component";
 
 describe("AllocationsAssignmentComponent component", () => {
   let wrapper;

client/src/components/config-form-components/config-form-types.js

@@ -3,11 +3,12 @@ import Rate from "./rate/rate.component";
 import Slider from "./slider/slider.component";
 import Text from "./text/text.component";
 import Textarea from "./textarea/textarea.component";
-
-export default {
+const e = {
   checkbox: CheckboxFormItem,
   slider: Slider,
   text: Text,
   textarea: Textarea,
   rate: Rate,
 };
+
+export default e;

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

@@ -17,39 +17,41 @@ export function JobCostingModalComponent({ bodyshop, job }) {
   const defaultProfits = bodyshop.md_responsibility_centers.defaults.profits;
   // const defaultCosts = bodyshop.md_responsibility_centers.defaults.costs;
 
-  const jobLineTotalsByProfitCenter = job.joblines.reduce(
-    (acc, val) => {
-      const laborProfitCenter = defaultProfits[val.mod_lbr_ty] || "?";
+  const jobLineTotalsByProfitCenter =
+    job &&
+    job.joblines.reduce(
+      (acc, val) => {
+        const laborProfitCenter = defaultProfits[val.mod_lbr_ty] || "?";
 
-      const rateName = `rate_${(val.mod_lbr_ty || "").toLowerCase()}`;
-      const laborAmount = Dinero({
-        amount: Math.round((job[rateName] || 0) * 100),
-      }).multiply(val.mod_lb_hrs || 0);
-      if (!!!acc.labor[laborProfitCenter])
-        acc.labor[laborProfitCenter] = Dinero();
-      acc.labor[laborProfitCenter] = acc.labor[laborProfitCenter].add(
-        laborAmount
-      );
-
-      const partsProfitCenter = defaultProfits[val.part_type] || "?";
-      if (!!!partsProfitCenter)
-        console.log(
-          "Unknown cost/profit center mapping for parts.",
-          val.part_type
+        const rateName = `rate_${(val.mod_lbr_ty || "").toLowerCase()}`;
+        const laborAmount = Dinero({
+          amount: Math.round((job[rateName] || 0) * 100),
+        }).multiply(val.mod_lb_hrs || 0);
+        if (!!!acc.labor[laborProfitCenter])
+          acc.labor[laborProfitCenter] = Dinero();
+        acc.labor[laborProfitCenter] = acc.labor[laborProfitCenter].add(
+          laborAmount
         );
-      const partsAmount = Dinero({
-        amount: Math.round((val.act_price || 0) * 100),
-      }).multiply(val.part_qty || 1);
-      if (!!!acc.parts[partsProfitCenter])
-        acc.parts[partsProfitCenter] = Dinero();
-      acc.parts[partsProfitCenter] = acc.parts[partsProfitCenter].add(
-        partsAmount
-      );
 
-      return acc;
-    },
-    { parts: {}, labor: {} }
-  );
+        const partsProfitCenter = defaultProfits[val.part_type] || "?";
+        if (!!!partsProfitCenter)
+          console.log(
+            "Unknown cost/profit center mapping for parts.",
+            val.part_type
+          );
+        const partsAmount = Dinero({
+          amount: Math.round((val.act_price || 0) * 100),
+        }).multiply(val.part_qty || 1);
+        if (!!!acc.parts[partsProfitCenter])
+          acc.parts[partsProfitCenter] = Dinero();
+        acc.parts[partsProfitCenter] = acc.parts[partsProfitCenter].add(
+          partsAmount
+        );
+
+        return acc;
+      },
+      { parts: {}, labor: {} }
+    );
 
   const billTotalsByProfitCenter = job.bills.reduce((bill_acc, bill_val) => {
     //At the invoice level.

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

@@ -40,7 +40,6 @@ export function JobCostingModalContainer({
       onCancel={() => toggleModalVisible()}
       width="90%"
       destroyOnClose
-      forceRender
     >
       {error ? <AlertComponent message={error.message} type="error" /> : null}
       {loading ? (

client/src/components/job-damage-visual/job-damage-visual.component.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-export default ({ dmg1, dmg2 }) => {
+const Car = ({ dmg1, dmg2 }) => {
   const { t } = useTranslation();
 
   return (
@@ -744,3 +744,5 @@ export default ({ dmg1, dmg2 }) => {
     </div>
   );
 };
+
+export default Car;

client/src/components/production-list-columns/production-list-columns.data.js

@@ -13,7 +13,7 @@ import ProductionListColumnNote from "./production-list-columns.productionnote.c
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
 
-export default [
+const r = [
   {
     title: i18n.t("jobs.actions.viewdetail"),
     dataIndex: "viewdetail",
@@ -219,3 +219,5 @@ export default [
     ),
   },
 ];
+
+export default r;

client/src/components/production-list-table/production-list-table.resizeable.component.jsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { Resizable } from "react-resizable";
 
-export default (props) => {
+export default function ResizableComponent(props) {
   const { onResize, width, ...restProps } = props;
   return (
     <Resizable width={width || 200} height={0} onResize={onResize}>
       <th {...restProps} />
     </Resizable>
   );
-};
+}

client/src/components/rbac-wrapper/rbac-defaults.js

@@ -1,4 +1,4 @@
-export default {
+const ret = {
   "accounting:payables": 1,
   "accounting:payments": 1,
   "accounting:receivables": 1,
@@ -50,3 +50,4 @@ export default {
   "timetickets:enter": 3,
   "timetickets:list": 3,
 };
+export default ret;

client/src/pages/sign-in/sign-in.page.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 import SignIn from "../../components/sign-in-form/sign-in-form.component";
 
-export default () => {
+export default function SignInPage() {
   return (
     <div>
       <SignIn />
     </div>
   );
-};
+}

client/src/redux/store.js

@@ -41,5 +41,5 @@ sagaMiddleWare.run(rootSaga);
 initMessageListener(store);
 
 export const persistor = persistStore(store);
-
-export default { store, persistStore };
+const e = { store, persistStore };
+export default e;

client/src/utils/private-route.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { Route, Redirect, useLocation } from "react-router-dom";
-export default ({ component: Component, isAuthorized, ...rest }) => {
+import { Redirect, Route, useLocation } from "react-router-dom";
+
+function PrivateRoute({ component: Component, isAuthorized, ...rest }) {
   const location = useLocation();
 
   return (
@@ -15,4 +16,6 @@ export default ({ component: Component, isAuthorized, ...rest }) => {
       }
     />
   );
-};
+}
+
+export default PrivateRoute;

package.json

@@ -7,13 +7,13 @@
     "npm": "6.11.3"
   },
   "scripts": {
-    "setup": "yarn && cd firebase && yarn && cd .. && cd client && yarn && cd .. && cd admin && yarn",
-    "admin": "cd admin && yarn start",
-    "client": "cd client && yarn start",
+    "setup": "npm i && cd firebase && npm i && cd .. && cd client && npm i && cd .. && cd admin && npm i",
+    "admin": "cd admin && npm start",
+    "client": "cd client && npm start",
     "server": "nodemon server.js",
     "build": "cd client && npm run build",
-    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
-    "deva": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" \"yarn admin\"",
+    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
+    "deva": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\" \"npm run admin\"",
     "start": "node server.js",
     "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
   },
@@ -43,7 +43,6 @@
   },
   "devDependencies": {
     "concurrently": "^5.3.0",
-    "eslint": "^6.6.0",
     "eslint-plugin-promise": "^4.2.1",
     "source-map-explorer": "^2.5.0"
   }