Added better error boundary page. Started some CSS and layout refactoring. **Major Changes**.

This commit is contained in:
Patrick Fic
2020-06-10 17:52:38 -07:00
parent 52849e1af7
commit afbec7d79e
18 changed files with 475 additions and 455 deletions

View File

@@ -1,19 +1,13 @@
import { Layout, Typography } from "antd";
import React from "react";
import { Typography, Layout } from "antd";
import HeaderContainer from "../../components/header/header.container";
import ManageSignInButton from "../../components/manage-sign-in-button/manage-sign-in-button.component";
export default function LandingPage() {
const { Header, Content } = Layout;
return (
<Layout style={{ minHeight: "100vh" }}>
<Header>
<HeaderContainer landingHeader />
</Header>
<Layout style={{ height: "100vh" }}>
<ManageSignInButton />
<Content className='content-container' style={{ padding: "0em 4em 4em" }}>
<Typography.Title>ImEX.Online</Typography.Title>
</Content>
<Typography.Title>ImEX.Online</Typography.Title>
</Layout>
);
}

View File

@@ -1,7 +1,7 @@
import React from "react";
import DashboardGridComponent from "../../components/dashboard-grid/dashboard-grid.component";
import Test from "../../components/_test/test.component";
import { analytics } from "../../firebase/firebase.utils";
import { analytics, logImEXEvent } from "../../firebase/firebase.utils";
export default function ManageRootPageComponent() {
//const client = useApolloClient();
@@ -10,34 +10,26 @@ export default function ManageRootPageComponent() {
<Test />
<button
onClick={() => {
logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
}}>
LogImEXEvent
</button>
<button
onClick={() => {
console.log("Things.");
analytics.logEvent("start_game", {
level: "10",
difficulty: "expert",
});
}}
>
analytics.logEvent("select_content", {
content_type: "image",
content_id: "P12453",
items: [{ name: "Kittens" }],
});
}}>
Click me to start an event
</button>
<DashboardGridComponent />
{
// <SendEmailButton
// MessageOptions={{
// from: {
// name: "Kavia"
// },
// to: "patrickwf@gmail.com",
// replyTo: "patrickwf@gmail.com"
// }}
// Template={PartsOrderEmail}
// QueryConfig={[
// REPORT_QUERY_PARTS_ORDER_BY_PK,
// {
// variables: { id: "ebe0fb6b-6ec4-4ae0-8fdc-49bdf1e37ff3" }
// }
// ]}>
// Send an Email in new Window
// </SendEmailButton>
}
</div>
);
}

View File

@@ -1,6 +1,7 @@
import React, { useEffect } from "react";
import ManageRootPageComponent from "./manage-root.page.component";
import { useTranslation } from "react-i18next";
export default function ManageRootPageContainer() {
const { t } = useTranslation();
useEffect(() => {

View File

@@ -128,7 +128,6 @@ const stripePromise = new Promise((resolve, reject) => {
const mapStateToProps = createStructuredSelector({
conflict: selectInstanceConflict,
});
const mapDispatchToProps = (dispatch) => ({});
export function Manage({ match, conflict }) {
const { t } = useTranslation();
@@ -139,186 +138,172 @@ export function Manage({ match, conflict }) {
return (
<Layout style={{ minHeight: "100vh" }}>
<Header>
<HeaderContainer />
</Header>
<Layout>
<Content
className="content-container"
style={{ padding: "0em 4em 4em" }}
>
<FcmNotification />
<ErrorBoundary>
{conflict ? (
<ConflictComponent />
) : (
<Suspense
fallback={
<LoadingSpinner message={t("general.labels.loadingapp")} />
}
>
<BreadCrumbs />
<EnterInvoiceModalContainer />
<EmailOverlayContainer />
<TimeTicketModalContainer />
<PrintCenterModalContainer />
<Elements stripe={stripePromise}>
<PaymentModalContainer />
</Elements>
<HeaderContainer />
<Content className='content-container' style={{ padding: "0em 4em 4em" }}>
<FcmNotification />
<ErrorBoundary>
{conflict ? (
<ConflictComponent />
) : (
<Suspense
fallback={
<LoadingSpinner message={t("general.labels.loadingapp")} />
}>
<BreadCrumbs />
<EnterInvoiceModalContainer />
<EmailOverlayContainer />
<TimeTicketModalContainer />
<PrintCenterModalContainer />
<Elements stripe={stripePromise}>
<PaymentModalContainer />
</Elements>
<Route exact path={`${match.path}`} component={ManageRootPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Switch>
<Route
exact
path={`${match.path}/jobs/:jobId/intake`}
component={JobIntake}
/>
<Route
exact
path={`${match.path}/jobs/:jobId/close`}
component={JobsClose}
/>
<Route
exact
path={`${match.path}/jobs/all`}
component={AllJobs}
/>
<Route
exact
path={`${match.path}/jobs/new`}
component={JobsCreateContainerPage}
/>
<Route
path={`${match.path}/jobs/:jobId`}
component={JobsDetailPage}
/>
</Switch>
<Route
exact
path={`${match.path}/courtesycars/`}
component={CourtesyCarsPage}
/>
<Switch>
<Route
exact
path={`${match.path}/courtesycars/new`}
component={CourtesyCarCreateContainer}
/>
<Route
exact
path={`${match.path}`}
component={ManageRootPage}
path={`${match.path}/courtesycars/contracts`}
component={ContractsList}
/>
<Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Switch>
<Route
exact
path={`${match.path}/jobs/:jobId/intake`}
component={JobIntake}
/>
<Route
exact
path={`${match.path}/jobs/:jobId/close`}
component={JobsClose}
/>
<Route
exact
path={`${match.path}/jobs/all`}
component={AllJobs}
/>
<Route
exact
path={`${match.path}/jobs/new`}
component={JobsCreateContainerPage}
/>
<Route
path={`${match.path}/jobs/:jobId`}
component={JobsDetailPage}
/>
</Switch>
<Route
exact
path={`${match.path}/courtesycars/`}
component={CourtesyCarsPage}
path={`${match.path}/courtesycars/contracts/new`}
component={ContractCreatePage}
/>
<Route
exact
path={`${match.path}/courtesycars/contracts/:contractId`}
component={ContractDetailPage}
/>
<Switch>
<Route
exact
path={`${match.path}/courtesycars/new`}
component={CourtesyCarCreateContainer}
/>
<Route
exact
path={`${match.path}/courtesycars/contracts`}
component={ContractsList}
/>
<Route
exact
path={`${match.path}/courtesycars/:ccId`}
component={CourtesyCarDetailContainer}
/>
</Switch>
<Route
exact
path={`${match.path}/profile`}
component={ProfilePage}
/>
<Route
exact
path={`${match.path}/vehicles`}
component={VehiclesContainer}
/>
<Route
exact
path={`${match.path}/production/list`}
component={ProductionListPage}
/>
<Route
exact
path={`${match.path}/production/board`}
component={ProductionBoardPage}
/>
<Route
exact
path={`${match.path}/vehicles/:vehId`}
component={VehiclesDetailContainer}
/>
<Route
exact
path={`${match.path}/invoices`}
component={InvoicesListPage}
/>
<Route
exact
path={`${match.path}/owners`}
component={OwnersContainer}
/>
<Route
exact
path={`${match.path}/owners/:ownerId`}
component={OwnersDetailContainer}
/>
<Route
exact
path={`${match.path}/schedule`}
component={ScheduleContainer}
/>
<Route
exact
path={`${match.path}/available`}
component={JobsAvailablePage}
/>
<Route exact path={`${match.path}/shop/`} component={ShopPage} />
<Route
exact
path={`${match.path}/shop/templates`}
component={ShopTemplates}
/>
<Route
exact
path={`${match.path}/shop/vendors`}
component={ShopVendorPageContainer}
/>
<Route
exact
path={`${match.path}/shop/csi`}
component={ShopCsiPageContainer}
/>
<Route
exact
path={`${match.path}/accounting/receivables`}
component={AccountingReceivables}
/>
<Route
exact
path={`${match.path}/accounting/payables`}
component={AccountingPayables}
/>
</Suspense>
)}
</ErrorBoundary>
</Content>
<Route
exact
path={`${match.path}/courtesycars/contracts/new`}
component={ContractCreatePage}
/>
<Route
exact
path={`${match.path}/courtesycars/contracts/:contractId`}
component={ContractDetailPage}
/>
<Route
exact
path={`${match.path}/courtesycars/:ccId`}
component={CourtesyCarDetailContainer}
/>
</Switch>
<Route
exact
path={`${match.path}/profile`}
component={ProfilePage}
/>
<Route
exact
path={`${match.path}/vehicles`}
component={VehiclesContainer}
/>
<Route
exact
path={`${match.path}/production/list`}
component={ProductionListPage}
/>
<Route
exact
path={`${match.path}/production/board`}
component={ProductionBoardPage}
/>
<Route
exact
path={`${match.path}/vehicles/:vehId`}
component={VehiclesDetailContainer}
/>
<Route
exact
path={`${match.path}/invoices`}
component={InvoicesListPage}
/>
<Route
exact
path={`${match.path}/owners`}
component={OwnersContainer}
/>
<Route
exact
path={`${match.path}/owners/:ownerId`}
component={OwnersDetailContainer}
/>
<Route
exact
path={`${match.path}/schedule`}
component={ScheduleContainer}
/>
<Route
exact
path={`${match.path}/available`}
component={JobsAvailablePage}
/>
<Route
exact
path={`${match.path}/shop/`}
component={ShopPage}
/>
<Route
exact
path={`${match.path}/shop/templates`}
component={ShopTemplates}
/>
<Route
exact
path={`${match.path}/shop/vendors`}
component={ShopVendorPageContainer}
/>
<Route
exact
path={`${match.path}/shop/csi`}
component={ShopCsiPageContainer}
/>
<Route
exact
path={`${match.path}/accounting/receivables`}
component={AccountingReceivables}
/>
<Route
exact
path={`${match.path}/accounting/payables`}
component={AccountingPayables}
/>
</Suspense>
)}
</ErrorBoundary>
</Content>
</Layout>
<Footer>
<FooterComponent />
</Footer>
@@ -327,4 +312,4 @@ export function Manage({ match, conflict }) {
</Layout>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(Manage);
export default connect(mapStateToProps, null)(Manage);