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 {useSplitClient} from "@splitsoftware/splitio-react";
import { Button, Result } from "antd"; import {Button, Result} from "antd";
import LogRocket from "logrocket"; import LogRocket from "logrocket";
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 { Route, Routes } from "react-router-dom"; import {Route, Routes} from "react-router-dom";
import { createStructuredSelector } from "reselect"; import {createStructuredSelector} from "reselect";
import DocumentEditorContainer from "../components/document-editor/document-editor.container"; import DocumentEditorContainer from "../components/document-editor/document-editor.container";
import ErrorBoundary from "../components/error-boundary/error-boundary.component"; import ErrorBoundary from "../components/error-boundary/error-boundary.component";
//Component Imports //Component Imports
@@ -13,174 +13,123 @@ import LoadingSpinner from "../components/loading-spinner/loading-spinner.compon
import DisclaimerPage from "../pages/disclaimer/disclaimer.page"; import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
import LandingPage from "../pages/landing/landing.page"; import LandingPage from "../pages/landing/landing.page";
import TechPageContainer from "../pages/tech/tech.page.container"; 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")
); );
const ManagePage = lazy(() => import("../pages/manage/manage.page.container")); const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page")); const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
const CsiPage = lazy(() => import("../pages/csi/csi.container.page")); 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,
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
checkUserSession: () => dispatch(checkUserSession()), checkUserSession: () => dispatch(checkUserSession()),
setOnline: (isOnline) => dispatch(setOnline(isOnline)), setOnline: (isOnline) => dispatch(setOnline(isOnline)),
}); });
export function App({ export function App({
bodyshop, bodyshop,
checkUserSession, checkUserSession,
currentUser, currentUser,
online, online,
setOnline, setOnline,
}) { }) {
const client = useSplitClient().client; const client = useSplitClient().client;
useEffect(() => { useEffect(() => {
if (!navigator.onLine) { if (!navigator.onLine) {
setOnline(false); 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>
} }
/>
);
// <Switch> checkUserSession();
// <Suspense fallback={<LoadingSpinner message="ImEX Online" />}> }, [checkUserSession, setOnline]);
// <ErrorBoundary>
// <Route exact path="/" component={LandingPage} /> //const b = Grid.useBreakpoint();
// </ErrorBoundary> // console.log("Breakpoints:", b);
// <ErrorBoundary>
// <Route exact path="/signin" component={SignInPage} /> const {t} = useTranslation();
// </ErrorBoundary>
// <ErrorBoundary> window.addEventListener("offline", function (e) {
// <Route exact path="/resetpassword" component={ResetPassword} /> setOnline(false);
// </ErrorBoundary> });
// <ErrorBoundary>
// <Route exact path="/csi/:surveyId" component={CsiPage} /> window.addEventListener("online", function (e) {
// </ErrorBoundary> setOnline(true);
// <ErrorBoundary> });
// <Route exact path="/disclaimer" component={DisclaimerPage} />
// </ErrorBoundary> useEffect(() => {
// <ErrorBoundary> if (currentUser.authorized && bodyshop) {
// <Route client.setAttribute("imexshopid", bodyshop.imexshopid);
// exact
// path="/mp/:paymentIs" if (client.getTreatment("LogRocket_Tracking") === "on") {
// component={MobilePaymentContainer} console.log("LR Start");
// /> LogRocket.init("gvfvfw/bodyshopapp");
// </ErrorBoundary> }
// <ErrorBoundary> }
// <PrivateRoute }, [bodyshop, client, currentUser.authorized]);
// isAuthorized={currentUser.authorized}
// path="/manage" if (currentUser.authorized === null) {
// component={ManagePage} return <LoadingSpinner message={t("general.labels.loggingin")}/>;
// /> }
// </ErrorBoundary>
// <ErrorBoundary> if (!online)
// <PrivateRoute return (
// isAuthorized={currentUser.authorized} <Result
// path="/tech" status="warning"
// component={TechPageContainer} title={t("general.labels.nointernet")}
// /> subTitle={t("general.labels.nointernet_sub")}
// </ErrorBoundary> extra={
// <ErrorBoundary> <Button
// <PrivateRoute type="primary"
// isAuthorized={currentUser.authorized} onClick={() => {
// path="/edit" window.location.reload();
// component={DocumentEditorContainer} }}
// /> >
// </ErrorBoundary> {t("general.actions.refresh")}
// </Suspense> </Button>
// </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={<ManagePage />} /> <Route path='/manage/' element={<ManageRootPage/>}/>
</Route> <Route path="/manage/*" element={<ManagePage/>}/>
<Route path="/tech" element={<PrivateRoute isAuthorized={currentUser.authorized} />}> </Route>
<Route path="/tech/*" element={<TechPageContainer />} /> <Route path="/tech" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
</Route> <Route path="/tech/*" element={<TechPageContainer/>}/>
<Route path="/edit" element={<PrivateRoute isAuthorized={currentUser.authorized} />}> </Route>
<Route path="/edit/*" element={<DocumentEditorContainer />} /> <Route path="/edit" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
</Route> <Route path="/edit/*" element={<DocumentEditorContainer/>}/>
</Route>
</Routes> </Routes>
</ErrorBoundary>
</Suspense> </Suspense>
); );
} }
export default connect(mapStateToProps, mapDispatchToProps)(App); 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}> <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})`) ||
""} ""}

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

2
client/src/components/header/header.component.jsx
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>

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 }) { export function ManageSignInButton({ currentUser }) {
return currentUser.authorized ? ( return currentUser.authorized ? (
<Link to='/manage'> <Link to='/manage/'>
<BuildFilled /> <BuildFilled />
Manage Manage
</Link> </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(); 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]);

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

2
client/src/landing/data.source.js
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" },
], ],

4
client/src/pages/landing/landing.page.jsx
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 /> ;
} }

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('/manage/jobs');
}, [navigate]); }, [navigate]);
return <div />; return <div />;
// return ( // return (
// <div> // <div>
// <DashboardGridComponent /> // <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 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(() => {
@@ -198,7 +188,7 @@ export function Manage({conflict, bodyshop}) {
}, [t]); }, [t]);
const AppRouteTable = ( const AppRouteTable = (
<Suspense <Suspense
fallback={<LoadingSpinner message={t("general.labels.loadingapp")}/>}This fallback={<LoadingSpinner message={t("general.labels.loadingapp")}/>} This
> >
<PaymentModalContainer/> <PaymentModalContainer/>
@@ -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 />}
// /> // />
} }

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;