Skip to content

Commit

Permalink
Merge pull request #2852 from bcgov/v2_render_tuning
Browse files Browse the repository at this point in the history 
appv2 render tuning for parent containers (header, map, overlay)
  • Loading branch information
@micheal-w-wells
micheal-w-wells authored Aug 26, 2023
2 parents 9150021 + 00162f5 commit ede7681
Show file tree
Hide file tree
Showing 16 changed files with 492 additions and 333 deletions.
22 changes: 22 additions & 0 deletions appv2/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions appv2/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@
"@types/react-router-dom": "^5.3.2",
"@types/uuid": "^8.3.0",
"@vitejs/plugin-react": "^3.0.0",
"@welldone-software/why-did-you-render": "^7.0.1",
"cypress": "^8.7.0",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.3.0",
Expand Down
235 changes: 120 additions & 115 deletions appv2/src/UI/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,46 @@
import { Button, createTheme, StepIcon, ThemeOptions } from '@mui/material';
import React, { useEffect, useRef, useState, useMemo } from 'react';
import { Button, createTheme, ThemeOptions } from '@mui/material';
import { ThemeProvider } from '@mui/styles';
import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Route, useHistory, useLocation } from 'react-router-dom';
import { selectMap } from 'state/reducers/map';
import { Route, useLocation } from 'react-router-dom';
import { getDesignTokens } from 'util/CustomThemeProvider';
import {
ACTIVITY_COPY_REQUEST,
ACTIVITY_DELETE_REQUEST,
ACTIVITY_PASTE_REQUEST,
ACTIVITY_SAVE_REQUEST,
ACTIVITY_SUBMIT_REQUEST,
MAP_TOGGLE_LEGENDS,
MAP_TOGGLE_WHATS_HERE,
OVERLAY_MENU_TOGGLE,
TOGGLE_PANEL,
URL_CHANGE
} from '../state/actions';
import './App.css';
import { Footer } from './Footer/Footer';
import { Header } from './Header/Header';
import { ActivityGeo } from './Map/ActivityGeo';
import { ButtonContainer } from './Map/Buttons/ButtonContainer';
import Map from './Map/Map';
import MapControls from './Map/MapControls';
import { MapCenterSetter } from './Map/MapCenterSetter';
import UserAccessPage from './Overlay/Admin/userAccess/UserAccessPage';
import BatchCreateNew from './Overlay/Batch/BatchCreateNew';
import BatchList from './Overlay/Batch/BatchList';
import BatchTemplates from './Overlay/Batch/BatchTemplates';
import BatchView from './Overlay/Batch/BatchView';
import { LandingComponent } from './Overlay/Landing/Landing';
import { LegendsPopup } from './Overlay/Legend/LegendsPopup';
import Overlay from './Overlay/Overlay';
import { OverlayMenu } from './Overlay/OverlayMenu';
import { Activity } from './Overlay/Records/Record';
import { Records } from './Overlay/Records/Records';
import { WhatsHereTable } from './Overlay/WhatsHere/WhatsHereTable';
import { ActivityGeo } from './Map/ActivityGeo';
import { RecordSet } from './Overlay/Records/RecordSet';
import EmbeddedReportsPage from './Overlay/Reports/EmbeddedReportsPage';
import BatchList from './Overlay/Batch/BatchList';
import BatchCreateNew from './Overlay/Batch/BatchCreateNew';
import BatchTemplates from './Overlay/Batch/BatchTemplates';
import BatchView from './Overlay/Batch/BatchView';
import UserAccessPage from './Overlay/Admin/userAccess/UserAccessPage';
import { Activity } from './Overlay/Records/Record';
import { ThemeProvider } from '@mui/styles';
import { getDesignTokens } from 'util/CustomThemeProvider';
import { OverlayMenu } from './Overlay/OverlayMenu';
import { MapCenterSetter } from './Map/MapCenterSetter';
import { WhatsHereTable } from './Overlay/WhatsHere/WhatsHereTable';

// URL listener so that the auth saga can redirect to the correct page
const URL_LISTENER = (props) => {
const dispatch = useDispatch();
const location = useLocation();

const targetURL = useSelector((state: any) => state.AppMode?.url);
// URL listener so that the auth saga can redirect to the correct page
useEffect(() => {
if (location.pathname !== targetURL) {
dispatch({
Expand All @@ -62,113 +57,123 @@ const URL_ListenerMemo = React.memo((props: any) => {
return <URL_LISTENER />;
});

const App: React.FC = () => {
const toggled = useSelector((state: any) => state.AppMode?.panelOpen);
const OverlayContentMemo = React.memo((props: any) => {
const dispatch = useDispatch();
const overlayMenuOpen = useSelector((state: any) => state.AppMode?.overlay_menu_toggle);
const fullScreen = useSelector((state: any) => state.AppMode?.panelFullScreen);
const theme = createTheme(getDesignTokens(false) as ThemeOptions);
return (
<div className={`overlay-content ${fullScreen ? 'overlay-content-fullscreen' : ''}`}>
<Route path="/Landing" render={(props) => <LandingComponent />} />
<Route exact={true} path="/Records" render={(props) => <Records />} />
<Route
path="/Records/Activity:id"
render={(props) => (
<>
{!overlayMenuOpen ? (
<Activity />
) : (
<OverlayMenu>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_SAVE_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
SAVE TO DRAFT
</Button>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_SUBMIT_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
PUBLISH DRAFT TO SUBMITTED
</Button>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_COPY_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
COPY FORM
</Button>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_PASTE_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
PASTE FORM
</Button>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_DELETE_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
DELETE
</Button>
</OverlayMenu>
)}
</>
)}
/>

const OverlayContentMemo = React.memo((props: any) => {
const dispatch = useDispatch();
return (
<div className={`overlay-content ${fullScreen ? 'overlay-content-fullscreen' : ''}`}>
<Route path="/Landing" render={(props) => <LandingComponent />} />
<Route exact={true} path="/Records" render={(props) => <Records />} />
<Route
path="/Records/Activity:id"
render={(props) => (
<>
{!overlayMenuOpen ? (
<Activity />
) : (
<OverlayMenu>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_SAVE_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
SAVE TO DRAFT
</Button>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_SUBMIT_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
PUBLISH DRAFT TO SUBMITTED
</Button>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_COPY_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
COPY FORM
</Button>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_PASTE_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
PASTE FORM
</Button>
<Button
onClick={() => {
dispatch({ type: ACTIVITY_DELETE_REQUEST });
dispatch({ type: OVERLAY_MENU_TOGGLE });
}}
variant="contained">
DELETE
</Button>
</OverlayMenu>
)}
</>
)}
/>
<Route
exact={true}
path="/Records/List/Local:id"
render={(props) => <RecordSet setId={props.match.params.id.split(':')[1]} />}
/>
<Route exact={true} path="/Batch/list" render={(props) => <BatchList />} />
<Route
path="/Batch/list/:id"
render={(props) => <BatchView match={props.match as any} history={undefined} location={undefined} />}
/>
<Route path="/Batch/new" render={(props) => <BatchCreateNew />} />
<Route path="/Batch/templates" render={(props) => <BatchTemplates />} />
<Route path="/Reports" render={(props) => <EmbeddedReportsPage />} />
<Route path="/Legend" render={(props) => <LegendsPopup />} />
<ThemeProvider theme={theme}>
<Route path="/Admin" render={(props) => <UserAccessPage />} />
</ThemeProvider>
<Route path="/WhatsHere" render={(props) => <WhatsHereTable />} />
</div>
);
});

<Route
exact={true}
path="/Records/List/Local:id"
render={(props) => <RecordSet setId={props.match.params.id.split(':')[1]} />}
/>
<Route exact={true} path="/Batch/list" render={(props) => <BatchList />} />
<Route
path="/Batch/list/:id"
render={(props) => <BatchView match={props.match as any} history={undefined} location={undefined} />}
/>
<Route path="/Batch/new" render={(props) => <BatchCreateNew />} />
<Route path="/Batch/templates" render={(props) => <BatchTemplates />} />
<Route path="/Reports" render={(props) => <EmbeddedReportsPage />} />
<Route path="/Legend" render={(props) => <LegendsPopup />} />
<ThemeProvider theme={theme}>
<Route path="/Admin" render={(props) => <UserAccessPage />} />
</ThemeProvider>
<Route path="/WhatsHere" render={(props) => <WhatsHereTable />} />
</div>
);
});
const HeaderMemo = React.memo((props: any) => {
const ref = useRef(0);
ref.current += 1;
console.log('%cHeaderMemo render:' + ref.current.toString(), 'color: yellow');

const HeaderMemo = React.memo((props: any) => {
return <Header />;
});
return <Header />;
});

const MapMemo = React.memo((props: any) => {
return (
<Map className="Map">
<ButtonContainer></ButtonContainer>
<Route path="/Records/Activity:id" render={(props) => <ActivityGeo />} />
</Map>
);
});
const MapMemo = React.memo((props: any) => {
const ref = useRef(0);
ref.current += 1;
console.log('%cMapMemo render:' + ref.current.toString(), 'color: yellow');
return (
<Map className="Map">
<ButtonContainer></ButtonContainer>
<Route path="/Records/Activity:id" render={(props) => <ActivityGeo />} />
<MapCenterSetter />
</Map>
);
});

const App: React.FC = () => {
const ref = useRef(0);
ref.current += 1;
console.log('%cApp.tsx render:' + ref.current.toString(), 'color: yellow');

return (
<div className="App">
<URL_ListenerMemo />
<HeaderMemo />
<MapMemo />
<Overlay showOverlay={toggled} fullScreen={fullScreen}>
<Overlay>
<OverlayContentMemo />
</Overlay>
<Footer />
Expand Down
Loading

0 comments on commit ede7681

Please sign in to comment.