Big progress!

This commit is contained in:
Dave Richer
2023-12-12 12:37:50 -05:00
parent b0d1a7b65e
commit fe80256a40
13 changed files with 133 additions and 219 deletions

View File

@@ -16,13 +16,9 @@ import TechPageContainer from "../pages/tech/tech.page.container";
import {setOnline} from "../redux/application/application.actions"; import {setOnline} from "../redux/application/application.actions";
import {selectOnline} from "../redux/application/application.selectors"; import {selectOnline} from "../redux/application/application.selectors";
import {checkUserSession} from "../redux/user/user.actions"; import {checkUserSession} from "../redux/user/user.actions";
import { import {selectBodyshop, selectCurrentUser,} from "../redux/user/user.selectors";
selectBodyshop, import PrivateRoute from "../components/PrivateRoute";
selectCurrentUser,
} from "../redux/user/user.selectors";
import PrivateRoute from "../utils/private-route";
import "./App.styles.scss"; import "./App.styles.scss";
import {JobsPage} from "../pages/jobs/jobs.page";
const ResetPassword = lazy(() => const ResetPassword = lazy(() =>
import("../pages/reset-password/reset-password.component") import("../pages/reset-password/reset-password.component")
@@ -34,7 +30,9 @@ const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
const MobilePaymentContainer = lazy(() => 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({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,
online: selectOnline, online: selectOnline,
@@ -109,76 +107,27 @@ export function App({
/> />
); );
// <Switch>
// <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
// <ErrorBoundary>
// <Route exact path="/" component={LandingPage} />
// </ErrorBoundary>
// <ErrorBoundary>
// <Route exact path="/signin" component={SignInPage} />
// </ErrorBoundary>
// <ErrorBoundary>
// <Route exact path="/resetpassword" component={ResetPassword} />
// </ErrorBoundary>
// <ErrorBoundary>
// <Route exact path="/csi/:surveyId" component={CsiPage} />
// </ErrorBoundary>
// <ErrorBoundary>
// <Route exact path="/disclaimer" component={DisclaimerPage} />
// </ErrorBoundary>
// <ErrorBoundary>
// <Route
// exact
// path="/mp/:paymentIs"
// component={MobilePaymentContainer}
// />
// </ErrorBoundary>
// <ErrorBoundary>
// <PrivateRoute
// isAuthorized={currentUser.authorized}
// path="/manage"
// component={ManagePage}
// />
// </ErrorBoundary>
// <ErrorBoundary>
// <PrivateRoute
// isAuthorized={currentUser.authorized}
// path="/tech"
// component={TechPageContainer}
// />
// </ErrorBoundary>
// <ErrorBoundary>
// <PrivateRoute
// isAuthorized={currentUser.authorized}
// path="/edit"
// component={DocumentEditorContainer}
// />
// </ErrorBoundary>
// </Suspense>
// </Switch>
return ( return (
<Suspense fallback={<LoadingSpinner message="ImEX Online"/>}> <Suspense fallback={<LoadingSpinner message="ImEX Online"/>}>
<ErrorBoundary>
<Routes> <Routes>
<Route path="/" element={<LandingPage />} /> <Route path="/" element={<ErrorBoundary><LandingPage/></ErrorBoundary>}/>
<Route path="/signin" element={<SignInPage />} /> <Route path="/signin" element={<ErrorBoundary><SignInPage/></ErrorBoundary>}/>
<Route path="/resetpassword" element={<ResetPassword />} /> <Route path="/resetpassword" element={<ErrorBoundary><ResetPassword/></ErrorBoundary>}/>
<Route path="/csi/:surveyId" element={<CsiPage />} /> <Route path="/csi/:surveyId" element={<ErrorBoundary><CsiPage/></ErrorBoundary>}/>
<Route path="/disclaimer" element={<DisclaimerPage />} /> <Route path="/disclaimer" element={<ErrorBoundary><DisclaimerPage/></ErrorBoundary>}/>
<Route path="/mp/:paymentIs" element={<MobilePaymentContainer />} /> <Route path="/mp/:paymentIs" element={<ErrorBoundary><MobilePaymentContainer/></ErrorBoundary>}/>
<Route path="/manage" element={<PrivateRoute isAuthorized={currentUser.authorized} />}> <Route path="/manage" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
<Route path='/manage/' element={<ManageRootPage/>}/>
<Route path="/manage/*" element={<ManagePage/>}/> <Route path="/manage/*" element={<ManagePage/>}/>
</Route> </Route>
<Route path="/tech" element={<PrivateRoute isAuthorized={currentUser.authorized} />}> <Route path="/tech" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
<Route path="/tech/*" element={<TechPageContainer/>}/> <Route path="/tech/*" element={<TechPageContainer/>}/>
</Route> </Route>
<Route path="/edit" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}> <Route path="/edit" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
<Route path="/edit/*" element={<DocumentEditorContainer/>}/> <Route path="/edit/*" element={<DocumentEditorContainer/>}/>
</Route> </Route>
</Routes> </Routes>
</ErrorBoundary>
</Suspense> </Suspense>
); );
} }

View File

@@ -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 <Outlet/>;
}
export default PrivateRoute;

View File

@@ -28,7 +28,7 @@ export function BreadCrumbs({ breadcrumbs, bodyshop }) {
<Col xs={24} sm={24} md={16}> <Col xs={24} sm={24} md={16}>
<Breadcrumb separator=">"> <Breadcrumb separator=">">
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to={`/manage`}> <Link to={`/manage/`}>
<HomeFilled />{" "} <HomeFilled />{" "}
{(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) || {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
""} ""}

View File

@@ -4,7 +4,7 @@ import queryString from "query-string";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { useLocation } from "react-router"; import { useLocation } from "react-router-dom";
import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries"; import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries"; import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries";
import { setBodyshop } from "../../redux/user/user.actions"; import { setBodyshop } from "../../redux/user/user.actions";

View File

@@ -116,7 +116,7 @@ function Header({
subMenuCloseDelay={0.3} subMenuCloseDelay={0.3}
> >
<Menu.Item key="home" icon={<HomeFilled />}> <Menu.Item key="home" icon={<HomeFilled />}>
<Link to="/manage">{t("menus.header.home")}</Link> <Link to="/manage/">{t("menus.header.home")}</Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="schedule" icon={<Icon component={FaCalendarAlt} />}> <Menu.Item key="schedule" icon={<Icon component={FaCalendarAlt} />}>
<Link to="/manage/schedule">{t("menus.header.schedule")}</Link> <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>

View File

@@ -11,7 +11,7 @@ const mapStateToProps = createStructuredSelector({
export function ManageSignInButton({ currentUser }) { export function ManageSignInButton({ currentUser }) {
return currentUser.authorized ? ( return currentUser.authorized ? (
<Link to='/manage'> <Link to='/manage/'>
<BuildFilled /> <BuildFilled />
Manage Manage
</Link> </Link>

View File

@@ -49,9 +49,8 @@ export function SignInComponent({
const [form] = Form.useForm(); const [form] = Form.useForm();
useEffect(() => { useEffect(() => {
console.log('navigating to ' + redirect || "/manage");
if (currentUser.authorized === true) { if (currentUser.authorized === true) {
navigate(redirect || "/manage"); navigate(redirect || "/manage/");
} }
}, [currentUser, redirect, navigate]); }, [currentUser, redirect, navigate]);

View File

@@ -62,7 +62,7 @@ export function UserValidatePwReset({
title={t("general.labels.passwordresetvalidatesuccess")} title={t("general.labels.passwordresetvalidatesuccess")}
subTitle={t("general.labels.passwordresetvalidatesuccess_sub")} subTitle={t("general.labels.passwordresetvalidatesuccess_sub")}
extra={[ extra={[
<Link to={`/manage`}> <Link to={`/manage/`}>
<Button>{t("general.labels.signin")}</Button> <Button>{t("general.labels.signin")}</Button>
</Link>, </Link>,
]} ]}

View File

@@ -98,7 +98,7 @@ export const Nav00DataSource = {
name: "item3", name: "item3",
className: "header0-item", className: "header0-item",
children: { children: {
href: "/manage", href: "/manage/",
children: [ children: [
{ children: i18n.t("landing.labels.managemyshop"), name: "text" }, { children: i18n.t("landing.labels.managemyshop"), name: "text" },
], ],

View File

@@ -16,9 +16,9 @@ export function LandingPage({ currentUser }) {
useEffect(() => { useEffect(() => {
if (!currentUser.authorized) { if (!currentUser.authorized) {
navigate('/manage'); navigate('/manage/');
} }
}, [currentUser, navigate]); }, [currentUser, navigate]);
return currentUser.authorized ? <LandingPageStatic /> : <div />; return <LandingPageStatic /> ;
} }

View File

@@ -3,7 +3,7 @@ import preval from "preval.macro";
import React, {lazy, Suspense, useEffect} from "react"; import React, {lazy, Suspense, useEffect} from "react";
import {useTranslation} from "react-i18next"; import {useTranslation} from "react-i18next";
import {connect} from "react-redux"; 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 {createStructuredSelector} from "reselect";
import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component"; import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
import ChatAffixContainer from "../../components/chat-affix/chat-affix.container"; 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 "./manage.page.styles.scss";
import UpdateAlert from "../../components/update-alert/update-alert.component"; 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 JobsPage = lazy(() => import("../jobs/jobs.page"));
const CardPaymentModalContainer = lazy(() => const CardPaymentModalContainer = lazy(() =>
@@ -176,21 +173,14 @@ const mapStateToProps = createStructuredSelector({
}); });
export function Manage({conflict, bodyshop}) { export function Manage({conflict, bodyshop}) {
const location = useLocation();
const params = useParams();
const currentPath = location.pathname
console.dir(currentPath)
const {t} = useTranslation(); const {t} = useTranslation();
useEffect(() => { useEffect(() => {
const widgetId = "IABVNO4scRKY11XBQkNr"; const widgetId = "IABVNO4scRKY11XBQkNr";
window.noticeable.render("widget", widgetId); window.noticeable.render("widget", widgetId);
try { requestForToken().catch((error) => {
requestForToken(); console.error(`Unable to request for token.`, error)
} catch (error) { });
console.log("Unable to request for token.", error);
}
}, []); }, []);
useEffect(() => { useEffect(() => {
@@ -213,7 +203,6 @@ export function Manage({conflict, bodyshop}) {
<PrintCenterModalContainer/> <PrintCenterModalContainer/>
<Routes> <Routes>
<Route path='/_test' element={<TestComponent/>}/> <Route path='/_test' element={<TestComponent/>}/>
<Route path='/' element={<ManageRootPage/>}/>
<Route path='/jobs' element={<JobsPage/>}/> <Route path='/jobs' element={<JobsPage/>}/>
<Route <Route
path='/jobs/:jobId/intake' path='/jobs/:jobId/intake'
@@ -305,7 +294,7 @@ export function Manage({conflict, bodyshop}) {
<Route path='/shop' element={<ShopPage/>}/> <Route path='/shop' element={<ShopPage/>}/>
{ {
// <Route // <Route
// path={`${currentPath}/shop/templates`} // path='/shop/templates'
// element={<ShopTemplates />} // element={<ShopTemplates />}
// /> // />
} }

View File

@@ -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 <Outlet />;
}
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 <Outlet />;
// }
//
// export default PrivateRoute;