- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/pages/tech/tech.page.component.jsx

@@ -1,9 +1,9 @@
-import { BackTop, Layout } from "antd";
-import React, { Suspense, lazy, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Redirect, Route, Switch } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import {FloatButton, Layout} from "antd";
+import React, {lazy, Suspense, useEffect} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Route, Routes, useNavigate} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
@@ -12,132 +12,107 @@ import TechHeader from "../../components/tech-header/tech-header.component";
 import TechLookupJobsDrawer from "../../components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component";
 import TechSider from "../../components/tech-sider/tech-sider.component";
 import UpdateAlert from "../../components/update-alert/update-alert.component";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
-import "./tech.page.styles.scss";
+import {selectTechnician} from "../../redux/tech/tech.selectors";
 import "./tech.page.styles.scss";
+
 const TimeTicketModalContainer = lazy(() =>
-  import("../../components/time-ticket-modal/time-ticket-modal.container")
+    import("../../components/time-ticket-modal/time-ticket-modal.container")
 );
 const EmailOverlayContainer = lazy(() =>
-  import("../../components/email-overlay/email-overlay.container.jsx")
+    import("../../components/email-overlay/email-overlay.container.jsx")
 );
 const PrintCenterModalContainer = lazy(() =>
-  import("../../components/print-center-modal/print-center-modal.container")
+    import("../../components/print-center-modal/print-center-modal.container")
 );
 const TechLogin = lazy(() =>
-  import("../../components/tech-login/tech-login.component")
+    import("../../components/tech-login/tech-login.component")
 );
 const TechLookup = lazy(() => import("../tech-lookup/tech-lookup.container"));
 const ProductionListPage = lazy(() =>
-  import("../production-list/production-list.container")
+    import("../production-list/production-list.container")
 );
 const ProductionBoardPage = lazy(() =>
-  import("../production-board/production-board.container")
+    import("../production-board/production-board.container")
 );
 const TechJobClock = lazy(() =>
-  import("../tech-job-clock/tech-job-clock.component")
+    import("../tech-job-clock/tech-job-clock.component")
 );
 const TechShiftClock = lazy(() =>
-  import("../tech-shift-clock/tech-shift-clock.component")
+    import("../tech-shift-clock/tech-shift-clock.component")
 );
 const TimeTicketModalTask = lazy(() =>
-  import(
-    "../../components/time-ticket-task-modal/time-ticket-task-modal.container"
-  )
+    import(
+        "../../components/time-ticket-task-modal/time-ticket-task-modal.container"
+        )
 );
 const TechAssignedProdJobs = lazy(() =>
-  import("../tech-assigned-prod-jobs/tech-assigned-prod-jobs.component")
+    import("../tech-assigned-prod-jobs/tech-assigned-prod-jobs.component")
 );
 const TechDispatchedParts = lazy(() =>
-  import("../tech-dispatched-parts/tech-dispatched-parts.page")
+    import("../tech-dispatched-parts/tech-dispatched-parts.page")
 );
 
-const { Content } = Layout;
+const {Content} = Layout;
 
 const mapStateToProps = createStructuredSelector({
-  technician: selectTechnician,
+    technician: selectTechnician,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function TechPage({ technician, match }) {
-  const { t } = useTranslation();
+export function TechPage({technician}) {
+    const {t} = useTranslation();
+    const navigate = useNavigate();
 
-  useEffect(() => {
-    document.title = t("titles.app");
-  }, [t]);
+    useEffect(() => {
+        document.title = t("titles.app");
+    }, [t]);
 
-  return (
-    <Layout className="tech-layout-container">
-      <TechSider />
-      <Layout>
-        {technician ? null : <Redirect to={`${match.path}/login`} />}
-        <UpdateAlert />
-        <TechHeader />
-        <TechLookupJobsDrawer />
-        <Content className="tech-content-container">
-          <ErrorBoundary>
-            <Suspense
-              fallback={
-                <LoadingSpinner message={t("general.labels.loadingapp")} />
-              }
-            >
-              <FeatureWrapper featureName="tech-console">
-                <TimeTicketModalContainer />
-                <EmailOverlayContainer />
-                <PrintCenterModalContainer />
-                <TimeTicketModalTask />
-                <Switch>
-                  <Route
-                    exact
-                    path={`${match.path}/login`}
-                    component={TechLogin}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/joblookup`}
-                    component={TechLookup}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/list`}
-                    component={ProductionListPage}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/jobclock`}
-                    component={TechJobClock}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/shiftclock`}
-                    component={TechShiftClock}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/board`}
-                    component={ProductionBoardPage}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/assigned`}
-                    component={TechAssignedProdJobs}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/dispatchedparts`}
-                    component={TechDispatchedParts}
-                  />
-                </Switch>
-              </FeatureWrapper>
-            </Suspense>
-          </ErrorBoundary>
+    useEffect(() => {
+        if (!technician) {
+            navigate(`/tech/login`);
+        }
+    }, [technician, navigate]);
 
-          <BackTop />
-        </Content>
-      </Layout>
-    </Layout>
-  );
+    return (
+        <Layout className="tech-layout-container">
+            <TechSider/>
+            <Layout>
+                <UpdateAlert/>
+                <TechHeader/>
+                <TechLookupJobsDrawer/>
+                <Content className="tech-content-container">
+                    <ErrorBoundary>
+                        <Suspense
+                            fallback={
+                                <LoadingSpinner message={t("general.labels.loadingapp")}/>
+                            }
+                        >
+                            <FeatureWrapper featureName="tech-console">
+                                <TimeTicketModalContainer/>
+                                <EmailOverlayContainer/>
+                                <PrintCenterModalContainer/>
+                                <TimeTicketModalTask/>
+                                <Routes>
+                                    <Route path='/login' element={<TechLogin/>}/>
+                                    <Route path='/joblookup' element={<TechLookup/>}/>
+                                    <Route path='/list' element={<ProductionListPage/>}/>
+                                    <Route path='/jobclock' element={<TechJobClock/>}/>
+                                    <Route path='/shiftclock' element={<TechShiftClock/>}/>
+                                    <Route path='/board' element={<ProductionBoardPage/>}/>
+                                    <Route path='/assigned' element={<TechAssignedProdJobs/>}/>
+                                    <Route path='/dispatchedparts' element={<TechDispatchedParts/>}/>
+
+                                </Routes>
+                            </FeatureWrapper>
+                        </Suspense>
+                    </ErrorBoundary>
+                    <FloatButton.BackTop/>
+                </Content>
+            </Layout>
+        </Layout>
+    );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(TechPage);
+
+export default connect(mapStateToProps, mapDispatchToProps)(TechPage);

client/src/pages/tech/tech.page.container.jsx

@@ -1,38 +1,40 @@
-import { useQuery } from "@apollo/client";
-import React, { useEffect } from "react";
-import { connect } from "react-redux";
+import {useQuery} from "@apollo/client";
+import React, {useEffect} from "react";
+import {connect} from "react-redux";
 import AlertComponent from "../../components/alert/alert.component";
-import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
-import { setBodyshop } from "../../redux/user/user.actions";
+import {QUERY_BODYSHOP} from "../../graphql/bodyshop.queries";
+import {setBodyshop} from "../../redux/user/user.actions";
 import TechPage from "./tech.page.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import { useTranslation } from "react-i18next";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { createStructuredSelector } from "reselect";
+import {useTranslation} from "react-i18next";
+import {selectBodyshop} from "../../redux/user/user.selectors";
+import {createStructuredSelector} from "reselect";
 //import "../../utils/RegisterSw";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setBodyshop: (bs) => dispatch(setBodyshop(bs)),
+    setBodyshop: (bs) => dispatch(setBodyshop(bs)),
 });
 
-export function TechPageContainer({ bodyshop, setBodyshop, match }) {
-  const { loading, error, data } = useQuery(QUERY_BODYSHOP, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-  const { t } = useTranslation();
-  useEffect(() => {
-    if (data) setBodyshop(data.bodyshops[0]);
-  }, [data, setBodyshop]);
+export function TechPageContainer({bodyshop, setBodyshop}) {
+    const {loading, error, data} = useQuery(QUERY_BODYSHOP, {
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+    });
+    const {t} = useTranslation();
 
-  if (loading || !bodyshop)
-    return <LoadingSpinner message={t("general.labels.loadingshop")} />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
-  return <TechPage match={match} />;
+    useEffect(() => {
+        if (data) setBodyshop(data.bodyshops[0]);
+    }, [data, setBodyshop]);
+
+
+    if (loading || !bodyshop)
+        return <LoadingSpinner message={t("general.labels.loadingshop")}/>;
+    if (error) return <AlertComponent message={error.message} type="error"/>;
+    return <TechPage/>;
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(TechPageContainer);