Big progress!
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
17
client/src/components/PrivateRoute.js
Normal file
17
client/src/components/PrivateRoute.js
Normal 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;
|
||||||
@@ -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})`) ||
|
||||||
""}
|
""}
|
||||||
|
|||||||
@@ -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";
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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]);
|
||||||
|
|
||||||
|
|||||||
@@ -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>,
|
||||||
]}
|
]}
|
||||||
|
|||||||
@@ -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" },
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -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 /> ;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 />}
|
||||||
// />
|
// />
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
|
||||||
Reference in New Issue
Block a user