Updated images in assets and removed some packages.

client/src/App/App.container.jsx

@@ -5,11 +5,11 @@ import { ApolloLink } from "apollo-boost";
 import { InMemoryCache } from "apollo-cache-inmemory";
 import ApolloClient from "apollo-client";
 import { split } from "apollo-link";
-import { setContext } from "apollo-link-context";
-import { HttpLink } from "apollo-link-http";
+import { setContext } from "@apollo/client/link/context";
+import { HttpLink } from "@apollo/client/link/http"; //"apollo-link-http";
 import apolloLogger from "apollo-link-logger";
-import { RetryLink } from "apollo-link-retry";
-import { WebSocketLink } from "apollo-link-ws";
+import { RetryLink } from "@apollo/client/link/retry";
+import { WebSocketLink } from "@apollo/client/link/ws";
 import { getMainDefinition } from "apollo-utilities";
 import axios from "axios";
 import LogRocket from "logrocket";

client/src/App/App.styles.scss

@@ -1,4 +1,5 @@
 //Global Styles.
+@import "react-big-calendar/lib/sass/styles";
 
 .imex-table-header {
   display: flex;

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

@@ -1,185 +1,185 @@
-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 { Responsive, WidthProvider } from "react-grid-layout";
-import { useTranslation } from "react-i18next";
-import { MdClose } from "react-icons/md";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { QUERY_DASHBOARD_DETAILS } from "../../graphql/bodyshop.queries";
-import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
-import AlertComponent from "../alert/alert.component";
-import DashboardMonthlyRevenueGraph from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
-import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
-import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
-import DashboardTotalProductionHours from "../dashboard-components/total-production-hours/total-production-hours.component";
-import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-//Combination of the following:
-// /node_modules/react-grid-layout/css/styles.css
-// /node_modules/react-resizable/css/styles.css
-import "./dashboard-grid.styles.css";
-import "./dashboard-grid.styles.scss";
+// 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 { Responsive, WidthProvider } from "react-grid-layout";
+// import { useTranslation } from "react-i18next";
+// import { MdClose } from "react-icons/md";
+// import { connect } from "react-redux";
+// import { createStructuredSelector } from "reselect";
+// import { logImEXEvent } from "../../firebase/firebase.utils";
+// import { QUERY_DASHBOARD_DETAILS } from "../../graphql/bodyshop.queries";
+// import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
+// import {
+//   selectBodyshop,
+//   selectCurrentUser,
+// } from "../../redux/user/user.selectors";
+// import AlertComponent from "../alert/alert.component";
+// import DashboardMonthlyRevenueGraph from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
+// import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
+// import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
+// import DashboardTotalProductionHours from "../dashboard-components/total-production-hours/total-production-hours.component";
+// import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+// //Combination of the following:
+// // /node_modules/react-grid-layout/css/styles.css
+// // /node_modules/react-resizable/css/styles.css
+// import "./dashboard-grid.styles.css";
+// import "./dashboard-grid.styles.scss";
 
-const ResponsiveReactGridLayout = WidthProvider(Responsive);
+// const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
-const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop,
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+// const mapStateToProps = createStructuredSelector({
+//   currentUser: selectCurrentUser,
+//   bodyshop: selectBodyshop,
+// });
+// const mapDispatchToProps = (dispatch) => ({
+//   //setUserLanguage: language => dispatch(setUserLanguage(language))
+// });
 
-export function DashboardGridComponent({ currentUser, bodyshop }) {
-  const { loading, error, data } = useQuery(QUERY_DASHBOARD_DETAILS);
-  const { t } = useTranslation();
-  const [state, setState] = useState({
-    layout: bodyshop.associations[0].user.dashboardlayout || [
-      { i: "ProductionDollars", x: 0, y: 0, w: 2, h: 2 },
-      //  { i: "ProductionHours", x: 2, y: 0, w: 2, h: 2 },
-    ],
-  });
-  const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
+// export function DashboardGridComponent({ currentUser, bodyshop }) {
+//   const { loading, error, data } = useQuery(QUERY_DASHBOARD_DETAILS);
+//   const { t } = useTranslation();
+//   const [state, setState] = useState({
+//     layout: bodyshop.associations[0].user.dashboardlayout || [
+//       { i: "ProductionDollars", x: 0, y: 0, w: 2, h: 2 },
+//       //  { i: "ProductionHours", x: 2, y: 0, w: 2, h: 2 },
+//     ],
+//   });
+//   const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
 
-  const handleLayoutChange = async (newLayout) => {
-    logImEXEvent("dashboard_change_layout");
-    setState({ ...state, layout: newLayout });
-    const result = await updateLayout({
-      variables: { email: currentUser.email, layout: newLayout },
-    });
+//   const handleLayoutChange = async (newLayout) => {
+//     logImEXEvent("dashboard_change_layout");
+//     setState({ ...state, layout: newLayout });
+//     const result = await updateLayout({
+//       variables: { email: currentUser.email, layout: newLayout },
+//     });
 
-    if (!!result.errors) {
-      notification["error"]({
-        message: t("dashboard.errors.updatinglayout", {
-          message: JSON.stringify(result.errors),
-        }),
-      });
-    }
-  };
+//     if (!!result.errors) {
+//       notification["error"]({
+//         message: t("dashboard.errors.updatinglayout", {
+//           message: JSON.stringify(result.errors),
+//         }),
+//       });
+//     }
+//   };
 
-  const handleRemoveComponent = (key) => {
-    logImEXEvent("dashboard_remove_component", { name: key });
+//   const handleRemoveComponent = (key) => {
+//     logImEXEvent("dashboard_remove_component", { name: key });
 
-    const idxToRemove = state.layout.findIndex((i) => i.i === key);
-    const newLayout = state.layout;
-    newLayout.splice(idxToRemove, 1);
-    handleLayoutChange(newLayout);
-  };
+//     const idxToRemove = state.layout.findIndex((i) => i.i === key);
+//     const newLayout = state.layout;
+//     newLayout.splice(idxToRemove, 1);
+//     handleLayoutChange(newLayout);
+//   };
 
-  const handleAddComponent = (e) => {
-    logImEXEvent("dashboard_add_component", { name: e });
+//   const handleAddComponent = (e) => {
+//     logImEXEvent("dashboard_add_component", { name: e });
 
-    handleLayoutChange([
-      ...state.layout,
-      {
-        i: e.key,
-        x: (state.layout.length * 2) % (state.cols || 12),
-        y: Infinity, // puts it at the bottom
-        w: componentList[e.key].w || 2,
-        h: componentList[e.key].h || 2,
-      },
-    ]);
-  };
+//     handleLayoutChange([
+//       ...state.layout,
+//       {
+//         i: e.key,
+//         x: (state.layout.length * 2) % (state.cols || 12),
+//         y: Infinity, // puts it at the bottom
+//         w: componentList[e.key].w || 2,
+//         h: componentList[e.key].h || 2,
+//       },
+//     ]);
+//   };
 
-  const onBreakpointChange = (breakpoint, cols) => {
-    setState({ ...state, breakpoint: breakpoint, cols: cols });
-  };
+//   const onBreakpointChange = (breakpoint, cols) => {
+//     setState({ ...state, breakpoint: breakpoint, cols: cols });
+//   };
 
-  const existingLayoutKeys = state.layout.map((i) => i.i);
-  const addComponentOverlay = (
-    <Menu onClick={handleAddComponent}>
-      {Object.keys(componentList).map((key) => (
-        <Menu.Item
-          key={key}
-          value={key}
-          disabled={existingLayoutKeys.includes(key)}
-        >
-          {componentList[key].label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
+//   const existingLayoutKeys = state.layout.map((i) => i.i);
+//   const addComponentOverlay = (
+//     <Menu onClick={handleAddComponent}>
+//       {Object.keys(componentList).map((key) => (
+//         <Menu.Item
+//           key={key}
+//           value={key}
+//           disabled={existingLayoutKeys.includes(key)}
+//         >
+//           {componentList[key].label}
+//         </Menu.Item>
+//       ))}
+//     </Menu>
+//   );
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+//   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  return (
-    <div>
-      <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
-        <Button>{t("dashboard.actions.addcomponent")}</Button>
-      </Dropdown>
-      <ResponsiveReactGridLayout
-        className="layout"
-        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        width="100%"
-        onLayoutChange={handleLayoutChange}
-        onBreakpointChange={onBreakpointChange}
-      >
-        {state.layout.map((item, index) => {
-          const TheComponent = componentList[item.i].component;
-          return (
-            <div key={item.i} data-grid={item}>
-              <LoadingSkeleton loading={loading}>
-                <Icon
-                  component={MdClose}
-                  key={item.i}
-                  style={{
-                    position: "absolute",
-                    zIndex: "2",
-                    right: ".25rem",
-                    top: ".25rem",
-                    cursor: "pointer",
-                  }}
-                  onClick={() => handleRemoveComponent(item.i)}
-                />
-                <TheComponent
-                  className="dashboard-card"
-                  size="small"
-                  style={{ height: "100%", width: "100%" }}
-                />
-              </LoadingSkeleton>
-            </div>
-          );
-        })}
-      </ResponsiveReactGridLayout>
-    </div>
-  );
-}
+//   return (
+//     <div>
+//       <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
+//         <Button>{t("dashboard.actions.addcomponent")}</Button>
+//       </Dropdown>
+//       <ResponsiveReactGridLayout
+//         className="layout"
+//         breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+//         cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+//         width="100%"
+//         onLayoutChange={handleLayoutChange}
+//         onBreakpointChange={onBreakpointChange}
+//       >
+//         {state.layout.map((item, index) => {
+//           const TheComponent = componentList[item.i].component;
+//           return (
+//             <div key={item.i} data-grid={item}>
+//               <LoadingSkeleton loading={loading}>
+//                 <Icon
+//                   component={MdClose}
+//                   key={item.i}
+//                   style={{
+//                     position: "absolute",
+//                     zIndex: "2",
+//                     right: ".25rem",
+//                     top: ".25rem",
+//                     cursor: "pointer",
+//                   }}
+//                   onClick={() => handleRemoveComponent(item.i)}
+//                 />
+//                 <TheComponent
+//                   className="dashboard-card"
+//                   size="small"
+//                   style={{ height: "100%", width: "100%" }}
+//                 />
+//               </LoadingSkeleton>
+//             </div>
+//           );
+//         })}
+//       </ResponsiveReactGridLayout>
+//     </div>
+//   );
+// }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(DashboardGridComponent);
+// export default connect(
+//   mapStateToProps,
+//   mapDispatchToProps
+// )(DashboardGridComponent);
 
-const componentList = {
-  ProductionDollars: {
-    label: "Production Dollars",
-    component: DashboardTotalProductionDollars,
-    w: 2,
-    h: 1,
-  },
-  ProductionHours: {
-    label: "Production Hours",
-    component: DashboardTotalProductionHours,
-    w: 2,
-    h: 1,
-  },
-  ProjectedMonthlySales: {
-    label: "Projected Monthly Sales",
-    component: DashboardProjectedMonthlySales,
-    w: 2,
-    h: 1,
-  },
-  MonthlyRevenueGraph: {
-    label: "Monthly Sales Graph",
-    component: DashboardMonthlyRevenueGraph,
-    w: 2,
-    h: 2,
-  },
-};
+// const componentList = {
+//   ProductionDollars: {
+//     label: "Production Dollars",
+//     component: DashboardTotalProductionDollars,
+//     w: 2,
+//     h: 1,
+//   },
+//   ProductionHours: {
+//     label: "Production Hours",
+//     component: DashboardTotalProductionHours,
+//     w: 2,
+//     h: 1,
+//   },
+//   ProjectedMonthlySales: {
+//     label: "Projected Monthly Sales",
+//     component: DashboardProjectedMonthlySales,
+//     w: 2,
+//     h: 1,
+//   },
+//   MonthlyRevenueGraph: {
+//     label: "Monthly Sales Graph",
+//     component: DashboardMonthlyRevenueGraph,
+//     w: 2,
+//     h: 2,
+//   },
+// };

client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss

@@ -1,6 +1,4 @@
-@import "react-big-calendar/lib/sass/styles";
-
-.rbc-time-header-cell-single-day {
+Ø.rbc-time-header-cell-single-day {
   display: unset;
 }
 .rbc-time-view .rbc-allday-cell {

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -7,15 +7,15 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, Redirect, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import ImEXOnlineLogo from "../../assets/logo240.png";
+import ImEXOnlineLogo from "../../assets/logo192.png";
 import { UPSERT_USER } from "../../graphql/user.queries";
 import {
   emailSignInStart,
-  sendPasswordReset
+  sendPasswordReset,
 } from "../../redux/user/user.actions";
 import {
   selectCurrentUser,
-  selectSignInError
+  selectSignInError,
 } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import "./sign-in-form.styles.scss";
@@ -66,37 +66,39 @@ export function SignInComponent({
     return <Redirect to={redirect || "/manage"} />;
 
   return (
-    <div className='login-container'>
-      <div className='login-logo-container'>
-        <img src={ImEXOnlineLogo} height='100' width='100' alt='ImEX Online' />
+    <div className="login-container">
+      <div className="login-logo-container">
+        <img src={ImEXOnlineLogo} height="100" width="100" alt="ImEX Online" />
         <Typography.Title>{t("titles.app")}</Typography.Title>
       </div>
-      <Form onFinish={handleFinish} form={form} size='large'>
+      <Form onFinish={handleFinish} form={form} size="large">
         <Form.Item
-          name='email'
+          name="email"
           rules={[
             { required: true, message: t("general.validation.required") },
-          ]}>
+          ]}
+        >
           <Input
             prefix={<UserOutlined />}
             placeholder={t("general.labels.username")}
           />
         </Form.Item>
         <Form.Item
-          name='password'
+          name="password"
           rules={[
             { required: true, message: t("general.validation.required") },
-          ]}>
+          ]}
+        >
           <Input
             prefix={<LockOutlined />}
-            type='password'
+            type="password"
             placeholder={t("general.labels.password")}
           />
         </Form.Item>
         {signInError ? (
-          <AlertComponent type='error' message={signInError.message} />
+          <AlertComponent type="error" message={signInError.message} />
         ) : null}
-        <Button className='login-btn' type='primary' htmlType='submit'>
+        <Button className="login-btn" type="primary" htmlType="submit">
           {t("general.actions.login")}
         </Button>
       </Form>

client/src/components/user-request-pw-reset/user-request-reset-pw.component.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import ImEXOnlineLogo from "../../assets/logo240.png";
+import ImEXOnlineLogo from "../../assets/logo192.png";
 import { sendPasswordReset } from "../../redux/user/user.actions";
 import { selectPasswordReset } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";

client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import ImEXOnlineLogo from "../../assets/logo240.png";
+import ImEXOnlineLogo from "../../assets/logo192.png";
 import { validatePasswordResetStart } from "../../redux/user/user.actions";
 import { selectPasswordReset } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";