admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Big progress!

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

251
client/src/App/App.jsx
View File

@@ -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 <LoadingSpinner message={t("general.labels.loggingin")} />;
}
if (!online)
return (
<Result
status="warning"
title={t("general.labels.nointernet")}
subTitle={t("general.labels.nointernet_sub")}
extra={
<Button
type="primary"
onClick={() => {
window.location.reload();
}}
>
{t("general.actions.refresh")}
</Button>
useEffect(() => {
if (!navigator.onLine) {
setOnline(false);
}
/>
);
// <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>
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 <LoadingSpinner message={t("general.labels.loggingin")}/>;
}
if (!online)
return (
<Result
status="warning"
title={t("general.labels.nointernet")}
subTitle={t("general.labels.nointernet_sub")}
extra={
<Button
type="primary"
onClick={() => {
window.location.reload();
}}
>
{t("general.actions.refresh")}
</Button>
}
/>
);
return (
<Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
<ErrorBoundary>
return (
<Suspense fallback={<LoadingSpinner message="ImEX Online"/>}>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/signin" element={<SignInPage />} />
<Route path="/resetpassword" element={<ResetPassword />} />
<Route path="/csi/:surveyId" element={<CsiPage />} />
<Route path="/disclaimer" element={<DisclaimerPage />} />
<Route path="/mp/:paymentIs" element={<MobilePaymentContainer />} />
<Route path="/manage" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
<Route path="/manage/*" element={<ManagePage />} />
</Route>
<Route path="/tech" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
<Route path="/tech/*" element={<TechPageContainer />} />
</Route>
<Route path="/edit" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
<Route path="/edit/*" element={<DocumentEditorContainer />} />
</Route>
<Route path="/" element={<ErrorBoundary><LandingPage/></ErrorBoundary>}/>
<Route path="/signin" element={<ErrorBoundary><SignInPage/></ErrorBoundary>}/>
<Route path="/resetpassword" element={<ErrorBoundary><ResetPassword/></ErrorBoundary>}/>
<Route path="/csi/:surveyId" element={<ErrorBoundary><CsiPage/></ErrorBoundary>}/>
<Route path="/disclaimer" element={<ErrorBoundary><DisclaimerPage/></ErrorBoundary>}/>
<Route path="/mp/:paymentIs" element={<ErrorBoundary><MobilePaymentContainer/></ErrorBoundary>}/>
<Route path="/manage" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
<Route path='/manage/' element={<ManageRootPage/>}/>
<Route path="/manage/*" element={<ManagePage/>}/>
</Route>
<Route path="/tech" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
<Route path="/tech/*" element={<TechPageContainer/>}/>
</Route>
<Route path="/edit" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
<Route path="/edit/*" element={<DocumentEditorContainer/>}/>
</Route>
</Routes>
</ErrorBoundary>
</Suspense>
);
);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

17
client/src/components/PrivateRoute.js Normal file
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;

2
client/src/components/breadcrumbs/breadcrumbs.component.jsx
View File

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

2
client/src/components/document-editor/document-editor.container.jsx
View File

@@ -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";

2
client/src/components/header/header.component.jsx
View File

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

2
client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx
View File

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

3
client/src/components/sign-in-form/sign-in-form.component.jsx
View File

@@ -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]);

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

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

2
client/src/landing/data.source.js
View File

@@ -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" },
],

4
client/src/pages/landing/landing.page.jsx
View File

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

2
client/src/pages/manage-root/manage-root.page.component.jsx
View File

@@ -9,7 +9,7 @@ export default function ManageRootPageComponent() {
navigate('/manage/jobs');
}, [navigate]);
return <div />;
return <div />;
// return (
// <div>
// <DashboardGridComponent />

23
client/src/pages/manage/manage.page.component.jsx
View File

@@ -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 = (
<Suspense
fallback={<LoadingSpinner message={t("general.labels.loadingapp")}/>}This
fallback={<LoadingSpinner message={t("general.labels.loadingapp")}/>} This
>
<PaymentModalContainer/>
@@ -213,7 +203,6 @@ export function Manage({conflict, bodyshop}) {
<PrintCenterModalContainer/>
<Routes>
<Route path='/_test' element={<TestComponent/>}/>
<Route path='/' element={<ManageRootPage/>}/>
<Route path='/jobs' element={<JobsPage/>}/>
<Route
path='/jobs/:jobId/intake'
@@ -305,7 +294,7 @@ export function Manage({conflict, bodyshop}) {
<Route path='/shop' element={<ShopPage/>}/>
{
// <Route
// path={`${currentPath}/shop/templates`}
// path='/shop/templates'
// element={<ShopTemplates />}
// />
}

40
client/src/utils/private-route.js
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;