diff --git a/client/src/App/App.jsx b/client/src/App/App.jsx index e37522b1c..42754b31e 100644 --- a/client/src/App/App.jsx +++ b/client/src/App/App.jsx @@ -1,11 +1,11 @@ -import { useSplitClient} from "@splitsoftware/splitio-react"; -import { Button, Result } from "antd"; +import {useSplitClient} from "@splitsoftware/splitio-react"; +import {Button, Result} from "antd"; import LogRocket from "logrocket"; -import React, { lazy, Suspense, useEffect } from "react"; -import { useTranslation } from "react-i18next"; -import { connect } from "react-redux"; -import { Route, Routes } from "react-router-dom"; -import { createStructuredSelector } from "reselect"; +import React, {lazy, Suspense, useEffect} from "react"; +import {useTranslation} from "react-i18next"; +import {connect} from "react-redux"; +import {Route, Routes} from "react-router-dom"; +import {createStructuredSelector} from "reselect"; import DocumentEditorContainer from "../components/document-editor/document-editor.container"; import ErrorBoundary from "../components/error-boundary/error-boundary.component"; //Component Imports @@ -13,174 +13,123 @@ import LoadingSpinner from "../components/loading-spinner/loading-spinner.compon import DisclaimerPage from "../pages/disclaimer/disclaimer.page"; import LandingPage from "../pages/landing/landing.page"; import TechPageContainer from "../pages/tech/tech.page.container"; -import { setOnline } from "../redux/application/application.actions"; -import { selectOnline } from "../redux/application/application.selectors"; -import { checkUserSession } from "../redux/user/user.actions"; -import { - selectBodyshop, - selectCurrentUser, -} from "../redux/user/user.selectors"; -import PrivateRoute from "../utils/private-route"; +import {setOnline} from "../redux/application/application.actions"; +import {selectOnline} from "../redux/application/application.selectors"; +import {checkUserSession} from "../redux/user/user.actions"; +import {selectBodyshop, selectCurrentUser,} from "../redux/user/user.selectors"; +import PrivateRoute from "../components/PrivateRoute"; import "./App.styles.scss"; -import {JobsPage} from "../pages/jobs/jobs.page"; const ResetPassword = lazy(() => - import("../pages/reset-password/reset-password.component") + import("../pages/reset-password/reset-password.component") ); const ManagePage = lazy(() => import("../pages/manage/manage.page.container")); const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page")); const CsiPage = lazy(() => import("../pages/csi/csi.container.page")); const MobilePaymentContainer = lazy(() => - import("../pages/mobile-payment/mobile-payment.container") + import("../pages/mobile-payment/mobile-payment.container") +); +const ManageRootPage = lazy(() => + import("../pages/manage-root/manage-root.page.container") ); - const mapStateToProps = createStructuredSelector({ - currentUser: selectCurrentUser, - online: selectOnline, - bodyshop: selectBodyshop, + currentUser: selectCurrentUser, + online: selectOnline, + bodyshop: selectBodyshop, }); const mapDispatchToProps = (dispatch) => ({ - checkUserSession: () => dispatch(checkUserSession()), - setOnline: (isOnline) => dispatch(setOnline(isOnline)), + checkUserSession: () => dispatch(checkUserSession()), + setOnline: (isOnline) => dispatch(setOnline(isOnline)), }); export function App({ - bodyshop, - checkUserSession, - currentUser, - online, - setOnline, -}) { - const client = useSplitClient().client; + bodyshop, + checkUserSession, + currentUser, + online, + setOnline, + }) { + const client = useSplitClient().client; - useEffect(() => { - if (!navigator.onLine) { - setOnline(false); - } - - checkUserSession(); - }, [checkUserSession, setOnline]); - - //const b = Grid.useBreakpoint(); - // console.log("Breakpoints:", b); - - const { t } = useTranslation(); - - window.addEventListener("offline", function (e) { - setOnline(false); - }); - - window.addEventListener("online", function (e) { - setOnline(true); - }); - - useEffect(() => { - if (currentUser.authorized && bodyshop) { - client.setAttribute("imexshopid", bodyshop.imexshopid); - - if (client.getTreatment("LogRocket_Tracking") === "on") { - console.log("LR Start"); - LogRocket.init("gvfvfw/bodyshopapp"); - } - } - }, [bodyshop, client, currentUser.authorized]); - - if (currentUser.authorized === null) { - return ; - } - - if (!online) - return ( - { - window.location.reload(); - }} - > - {t("general.actions.refresh")} - + useEffect(() => { + if (!navigator.onLine) { + setOnline(false); } - /> - ); - // - // }> - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // + checkUserSession(); + }, [checkUserSession, setOnline]); + + //const b = Grid.useBreakpoint(); + // console.log("Breakpoints:", b); + + const {t} = useTranslation(); + + window.addEventListener("offline", function (e) { + setOnline(false); + }); + + window.addEventListener("online", function (e) { + setOnline(true); + }); + + useEffect(() => { + if (currentUser.authorized && bodyshop) { + client.setAttribute("imexshopid", bodyshop.imexshopid); + + if (client.getTreatment("LogRocket_Tracking") === "on") { + console.log("LR Start"); + LogRocket.init("gvfvfw/bodyshopapp"); + } + } + }, [bodyshop, client, currentUser.authorized]); + + if (currentUser.authorized === null) { + return ; + } + + if (!online) + return ( + { + window.location.reload(); + }} + > + {t("general.actions.refresh")} + + } + /> + ); - return ( - }> - + return ( + }> - } /> - } /> - } /> - } /> - } /> - } /> - }> - } /> - - }> - } /> - - }> - } /> - + }/> + }/> + }/> + }/> + }/> + }/> + }> + }/> + }/> + + }> + }/> + + }> + }/> + - - ); + ); } export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/client/src/components/PrivateRoute.js b/client/src/components/PrivateRoute.js new file mode 100644 index 000000000..ae1188407 --- /dev/null +++ b/client/src/components/PrivateRoute.js @@ -0,0 +1,17 @@ +import React, {useEffect} from "react"; +import {Outlet, useLocation, useNavigate} from "react-router-dom"; + +function PrivateRoute({component: Component, isAuthorized, ...rest}) { + const location = useLocation(); + const navigate = useNavigate(); + + useEffect(() => { + if (!isAuthorized) { + navigate(`/signin?redirect=${location.pathname}`); + } + }, [isAuthorized, navigate]); + + return ; +} + +export default PrivateRoute; \ No newline at end of file diff --git a/client/src/components/breadcrumbs/breadcrumbs.component.jsx b/client/src/components/breadcrumbs/breadcrumbs.component.jsx index ba2619c4e..e74be220d 100644 --- a/client/src/components/breadcrumbs/breadcrumbs.component.jsx +++ b/client/src/components/breadcrumbs/breadcrumbs.component.jsx @@ -28,7 +28,7 @@ export function BreadCrumbs({ breadcrumbs, bodyshop }) { - + {" "} {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) || ""} diff --git a/client/src/components/document-editor/document-editor.container.jsx b/client/src/components/document-editor/document-editor.container.jsx index b7a51890c..8421b7c18 100644 --- a/client/src/components/document-editor/document-editor.container.jsx +++ b/client/src/components/document-editor/document-editor.container.jsx @@ -4,7 +4,7 @@ import queryString from "query-string"; import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; -import { useLocation } from "react-router"; +import { useLocation } from "react-router-dom"; import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries"; import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries"; import { setBodyshop } from "../../redux/user/user.actions"; diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index 8d180bdd1..3e0aed6d7 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -116,7 +116,7 @@ function Header({ subMenuCloseDelay={0.3} > }> - {t("menus.header.home")} + {t("menus.header.home")} }> {t("menus.header.schedule")} diff --git a/client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx b/client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx index 5fa6a359c..21a02f84a 100644 --- a/client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx +++ b/client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx @@ -11,7 +11,7 @@ const mapStateToProps = createStructuredSelector({ export function ManageSignInButton({ currentUser }) { return currentUser.authorized ? ( - + Manage diff --git a/client/src/components/sign-in-form/sign-in-form.component.jsx b/client/src/components/sign-in-form/sign-in-form.component.jsx index 00baf5c25..4c60a4845 100644 --- a/client/src/components/sign-in-form/sign-in-form.component.jsx +++ b/client/src/components/sign-in-form/sign-in-form.component.jsx @@ -49,9 +49,8 @@ export function SignInComponent({ const [form] = Form.useForm(); useEffect(() => { - console.log('navigating to ' + redirect || "/manage"); if (currentUser.authorized === true) { - navigate(redirect || "/manage"); + navigate(redirect || "/manage/"); } }, [currentUser, redirect, navigate]); diff --git a/client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx b/client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx index e0e0523d2..be3391e43 100644 --- a/client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx +++ b/client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx @@ -62,7 +62,7 @@ export function UserValidatePwReset({ title={t("general.labels.passwordresetvalidatesuccess")} subTitle={t("general.labels.passwordresetvalidatesuccess_sub")} extra={[ - + , ]} diff --git a/client/src/landing/data.source.js b/client/src/landing/data.source.js index f54649c81..10b40e0a4 100644 --- a/client/src/landing/data.source.js +++ b/client/src/landing/data.source.js @@ -98,7 +98,7 @@ export const Nav00DataSource = { name: "item3", className: "header0-item", children: { - href: "/manage", + href: "/manage/", children: [ { children: i18n.t("landing.labels.managemyshop"), name: "text" }, ], diff --git a/client/src/pages/landing/landing.page.jsx b/client/src/pages/landing/landing.page.jsx index e0a862a6a..c3b54f1cd 100644 --- a/client/src/pages/landing/landing.page.jsx +++ b/client/src/pages/landing/landing.page.jsx @@ -16,9 +16,9 @@ export function LandingPage({ currentUser }) { useEffect(() => { if (!currentUser.authorized) { - navigate('/manage'); + navigate('/manage/'); } }, [currentUser, navigate]); - return currentUser.authorized ? :
; + return ; } diff --git a/client/src/pages/manage-root/manage-root.page.component.jsx b/client/src/pages/manage-root/manage-root.page.component.jsx index f1c4fc53f..7632c94a0 100644 --- a/client/src/pages/manage-root/manage-root.page.component.jsx +++ b/client/src/pages/manage-root/manage-root.page.component.jsx @@ -9,7 +9,7 @@ export default function ManageRootPageComponent() { navigate('/manage/jobs'); }, [navigate]); - return
; + return
; // return ( //
// diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx index 4fc0d5508..96fd60831 100644 --- a/client/src/pages/manage/manage.page.component.jsx +++ b/client/src/pages/manage/manage.page.component.jsx @@ -3,7 +3,7 @@ import preval from "preval.macro"; import React, {lazy, Suspense, useEffect} from "react"; import {useTranslation} from "react-i18next"; import {connect} from "react-redux"; -import {Link, Route, Routes, useLocation, useParams} from "react-router-dom"; +import {Link, Route, Routes} from "react-router-dom"; import {createStructuredSelector} from "reselect"; import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component"; import ChatAffixContainer from "../../components/chat-affix/chat-affix.container"; @@ -24,9 +24,6 @@ import * as Sentry from "@sentry/react"; import "./manage.page.styles.scss"; import UpdateAlert from "../../components/update-alert/update-alert.component"; -const ManageRootPage = lazy(() => - import("../manage-root/manage-root.page.container") -); const JobsPage = lazy(() => import("../jobs/jobs.page")); const CardPaymentModalContainer = lazy(() => @@ -176,21 +173,14 @@ const mapStateToProps = createStructuredSelector({ }); export function Manage({conflict, bodyshop}) { - - const location = useLocation(); - const params = useParams(); - const currentPath = location.pathname - console.dir(currentPath) const {t} = useTranslation(); useEffect(() => { const widgetId = "IABVNO4scRKY11XBQkNr"; window.noticeable.render("widget", widgetId); - try { - requestForToken(); - } catch (error) { - console.log("Unable to request for token.", error); - } + requestForToken().catch((error) => { + console.error(`Unable to request for token.`, error) + }); }, []); useEffect(() => { @@ -198,7 +188,7 @@ export function Manage({conflict, bodyshop}) { }, [t]); const AppRouteTable = ( }This + fallback={} This > @@ -213,7 +203,6 @@ export function Manage({conflict, bodyshop}) { }/> - }/> }/> }/> { // } // /> } diff --git a/client/src/utils/private-route.js b/client/src/utils/private-route.js deleted file mode 100644 index ea26bd8d0..000000000 --- a/client/src/utils/private-route.js +++ /dev/null @@ -1,40 +0,0 @@ -import React, {useEffect} from "react"; -import {useNavigate, useLocation, Outlet} from "react-router-dom"; - -function PrivateRoute({ component: Component, isAuthorized, ...rest }) { - const location = useLocation(); - const navigate = useNavigate(); - - useEffect(() => { - if (!isAuthorized) { - navigate(`/signin?redirect=${location.pathname}`); - } - }, [isAuthorized, navigate]); - - return ; -} - -export default PrivateRoute; - - -// import React, { useEffect } from 'react'; -// import { Outlet, useSearchParams, useNavigate } from 'react-router-dom'; -// -// const PrivateRoute = ({ isAuthorized }) => { -// const [searchParams] = useSearchParams(); -// const navigate = useNavigate(); -// -// useEffect(() => { -// if (!isAuthorized) { -// console.log('is not authorized'); -// searchParams.set("redirect", window.location.pathname); -// navigate(`/signin?${searchParams.toString()}`); -// } else { -// console.log('isAuthorized'); -// } -// }, [isAuthorized, navigate, searchParams]); -// -// return ; -// } -// -// export default PrivateRoute; \ No newline at end of file