Skip to content

Commit

Permalink
psp-6988 replace state based routing with router.
Browse files Browse the repository at this point in the history
  • Loading branch information
devinleighsmith committed Nov 6, 2023
1 parent 53fa762 commit 2ab12ec
Show file tree
Hide file tree
Showing 23 changed files with 236 additions and 242 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ export const FilePropertyRouter: React.FC<IFilePropertyRouterProps> = props => {
<Switch>
<Route path={`${path}/:tab`}>
<PropertyFileContainer
withRouter
setEditFileProperty={() => props.setIsEditing(true)}
setEditTakes={() => props.setIsEditing(true)}
fileProperty={fileProperty}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Tab } from 'react-bootstrap';
import { generatePath, useHistory, useRouteMatch } from 'react-router-dom';

import TabView from '@/components/common/TabView';

Expand All @@ -14,7 +15,6 @@ export interface IInventoryTabsProps {
defaultTabKey: InventoryTabNames;
tabViews: TabInventoryView[];
activeTab: InventoryTabNames;
setActiveTab: (tab: InventoryTabNames) => void;
}

export enum InventoryTabNames {
Expand All @@ -32,16 +32,17 @@ export enum InventoryTabNames {
*/
export const InventoryTabs: React.FunctionComponent<
React.PropsWithChildren<IInventoryTabsProps>
> = ({ defaultTabKey, tabViews, activeTab, setActiveTab }) => {
> = ({ defaultTabKey, tabViews, activeTab }) => {
const history = useHistory();
const match = useRouteMatch<{ propertyId: string }>();
return (
<TabView
defaultActiveKey={defaultTabKey}
activeKey={activeTab}
onSelect={(eventKey: string | null) => {
const tab = Object.values(InventoryTabNames).find(value => value === eventKey);
if (tab && tab !== activeTab) {
setActiveTab(tab);
}
const path = generatePath(match.path, { propertyId: match.params.propertyId, tab });
history.push(path);
}}
>
{tabViews.map((view: TabInventoryView, index: number) => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ describe('MotiInventoryContainer component', () => {

it('hides the property information tab for non-inventory properties', async () => {
mockAxios.onPost().reply(200, {});
history.push('/mapview/sidebar/non-inventory-property/9212434');
// non-inventory properties will not attempt to contact the backend.
const error = {
isAxiosError: true,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { FormikProps } from 'formik';
import React, { useEffect, useRef, useState } from 'react';
import { generatePath, useHistory, useRouteMatch } from 'react-router-dom';
import styled from 'styled-components';

import { ReactComponent as LotSvg } from '@/assets/images/icon-lot.svg';
import GenericModal from '@/components/common/GenericModal';
import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
import PropertyViewSelector from '@/features/mapSideBar/property/PropertyViewSelector';
import { PROPERTY_TYPES, useComposedProperties } from '@/hooks/repositories/useComposedProperties';
import { useQuery } from '@/hooks/use-query';
import { Api_Property } from '@/models/api/Property';

import MapSideBarLayout from '../layout/MapSideBarLayout';
import SidebarFooter from '../shared/SidebarFooter';
import { MotiInventoryHeader } from './MotiInventoryHeader';
import PropertyRouter from './PropertyRouter';

export interface IMotiInventoryContainerProps {
id?: number;
Expand All @@ -27,7 +29,11 @@ export const MotiInventoryContainer: React.FunctionComponent<
> = props => {
const [showCancelConfirmModal, setShowCancelConfirmModal] = useState<boolean>(false);

const [isEditing, setIsEditing] = useState<boolean>(false);
const query = useQuery();
const { push } = useHistory();
const match = useRouteMatch();
const tabMatch = useRouteMatch<{ tab: string; propertyId: string }>(`${match.path}/:tab`);
const isEditing = query.get('edit') === 'true';
const [isValid, setIsValid] = useState<boolean>(true);

const mapMachine = useMapStateMachine();
Expand All @@ -48,12 +54,12 @@ export const MotiInventoryContainer: React.FunctionComponent<
});

useEffect(() => {
setIsEditing(false);
}, [props.pid]);
push({ search: '' });
}, [props.pid, push]);

const onSuccess = () => {
props.id && composedPropertyState.apiWrapper?.execute(props.id);
setIsEditing(false);
stripEditFromPath();
};

const handleSaveClick = async () => {
Expand All @@ -80,10 +86,22 @@ export const MotiInventoryContainer: React.FunctionComponent<
if (formikRef !== undefined) {
formikRef.current?.resetForm();
}
setIsEditing(false);

stripEditFromPath();
setShowCancelConfirmModal(false);
};

const stripEditFromPath = () => {
if (!tabMatch) {
return;
}
const path = generatePath('/mapview/sidebar/property/:propertyId/:tab', {
propertyId: tabMatch?.params.propertyId,
tab: tabMatch?.params.tab,
});
push(path, { search: query.toString() });
};

const handleZoom = (apiProperty?: Api_Property | undefined) => {
if (apiProperty?.longitude !== undefined && apiProperty?.latitude !== undefined) {
mapMachine.requestFlyToLocation({ lat: apiProperty.latitude, lng: apiProperty.longitude });
Expand Down Expand Up @@ -120,10 +138,8 @@ export const MotiInventoryContainer: React.FunctionComponent<
onClose={props.onClose}
>
<>
<PropertyViewSelector
<PropertyRouter
composedPropertyState={composedPropertyState}
isEditMode={isEditing}
setEditMode={setIsEditing}
onSuccess={onSuccess}
ref={formikRef}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import React from 'react';
import { useParams } from 'react-router-dom';

import { Claims } from '@/constants';
import { usePropertyDetails } from '@/features/mapSideBar/hooks/usePropertyDetails';
Expand All @@ -14,20 +15,18 @@ import { PropertyDetailsTabView } from '@/features/mapSideBar/property/tabs/prop
import ComposedPropertyState from '@/hooks/repositories/useComposedProperties';
import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';

import { EditManagementState } from './PropertyViewSelector';
import { PropertyManagementTabView } from './tabs/propertyDetailsManagement/detail/PropertyManagementTabView';

export interface IPropertyContainerProps {
composedPropertyState: ComposedPropertyState;
setEditManagementState: (state: EditManagementState | null) => void;
}

/**
* container responsible for logic related to map sidebar display. Synchronizes the state of the parcel detail forms with the corresponding query parameters (push/pull).
*/
export const PropertyContainer: React.FunctionComponent<
React.PropsWithChildren<IPropertyContainerProps>
> = ({ composedPropertyState, setEditManagementState }) => {
> = ({ composedPropertyState }) => {
const showPropertyInfoTab = composedPropertyState?.id !== undefined;
const { hasClaim } = useKeycloakWrapper();

Expand Down Expand Up @@ -79,7 +78,6 @@ export const PropertyContainer: React.FunctionComponent<
<PropertyDetailsTabView
property={propertyViewForm}
loading={composedPropertyState.apiWrapper?.loading ?? false}
setEditManagementState={setEditManagementState}
/>
),
key: InventoryTabNames.property,
Expand Down Expand Up @@ -114,7 +112,6 @@ export const PropertyContainer: React.FunctionComponent<
<PropertyManagementTabView
property={composedPropertyState.apiWrapper?.response}
loading={composedPropertyState.apiWrapper?.loading ?? false}
setEditManagementState={setEditManagementState}
/>
),
key: InventoryTabNames.management,
Expand All @@ -123,15 +120,14 @@ export const PropertyContainer: React.FunctionComponent<
defaultTab = InventoryTabNames.management;
}

const [activeTab, setActiveTab] = useState<InventoryTabNames>(defaultTab);

const params = useParams<{ tab?: string }>();
const activeTab = Object.values(InventoryTabNames).find(t => t === params.tab) ?? defaultTab;
return (
<InventoryTabs
loading={composedPropertyState.composedLoading}
tabViews={tabViews}
defaultTabKey={defaultTab}
activeTab={activeTab}
setActiveTab={setActiveTab}
/>
);
};
Expand Down
134 changes: 134 additions & 0 deletions source/frontend/src/features/mapSideBar/property/PropertyRouter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import { FormikProps } from 'formik';
import React from 'react';
import { Redirect, Switch, useHistory, useRouteMatch } from 'react-router-dom';

import { UpdatePropertyDetailsContainer } from '@/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsContainer';
import ComposedPropertyState from '@/hooks/repositories/useComposedProperties';
import { useQuery } from '@/hooks/use-query';
import { stripTrailingSlash } from '@/utils';
import AppRoute from '@/utils/AppRoute';

import { InventoryTabNames } from './InventoryTabs';
import PropertyContainer from './PropertyContainer';
import { PropertyContactEditContainer } from './tabs/propertyDetailsManagement/update/PropertyContactEditContainer';
import { PropertyContactEditForm } from './tabs/propertyDetailsManagement/update/PropertyContactEditForm';
import { PropertyManagementUpdateContainer } from './tabs/propertyDetailsManagement/update/summary/PropertyManagementUpdateContainer';
import { PropertyManagementUpdateForm } from './tabs/propertyDetailsManagement/update/summary/PropertyManagementUpdateForm';

export enum PropertyEditForms {
UpdatePropertyDetailsContainer = 'UpdatePropertyDetailsContainer',
UpdateManagementSummaryContainer = 'UpdateManagementSummaryContainer',
UpdateContactContainer = 'UpdateContactContainer',
}

export interface EditManagementState {
form: PropertyEditForms;
childId: number | null;
}

export interface IPropertyRouterProps {
onSuccess: () => void;
composedPropertyState: ComposedPropertyState;
}

const PropertyRouter = React.forwardRef<FormikProps<any>, IPropertyRouterProps>(
(props, formikRef) => {
const query = useQuery();
const isEditing = query.get('edit') === 'true';
const { path } = useRouteMatch();
const history = useHistory();

const setIsEditing = (value: boolean) => {
if (value) {
query.set('edit', value.toString());
} else {
query.delete('edit');
}
history.push({ search: query.toString() });
};

if (isEditing && !!props?.composedPropertyState?.apiWrapper?.response?.id) {
return (
<Switch>
<AppRoute
exact
path={`${stripTrailingSlash(path)}/${InventoryTabNames.property}`}
customRender={({ match }) => (
<UpdatePropertyDetailsContainer
id={match.params.propertyId}
onSuccess={() => {
setIsEditing(false);
props.onSuccess();
}}
ref={formikRef}
/>
)}
key={PropertyEditForms.UpdatePropertyDetailsContainer}
title={'Update Property Details'}
></AppRoute>
<AppRoute
exact
path={`${stripTrailingSlash(path)}/${InventoryTabNames.management}/${
PropertyEditForms.UpdateContactContainer
}/:contactId?`}
customRender={({ match }) => (
<PropertyContactEditContainer
propertyId={match.params.propertyId}
contactId={+match.params.contactId ?? 0}
View={PropertyContactEditForm}
onSuccess={() => {
setIsEditing(false);
props.onSuccess();
}}
ref={formikRef}
/>
)}
key={PropertyEditForms.UpdateContactContainer}
title="Update Contact"
></AppRoute>
<AppRoute
exact
path={`${stripTrailingSlash(path)}/${InventoryTabNames.management}`}
customRender={({ match }) => (
<PropertyManagementUpdateContainer
propertyId={match.params.propertyId}
View={PropertyManagementUpdateForm}
onSuccess={() => {
setIsEditing(false);
props.onSuccess();
}}
ref={formikRef}
/>
)}
key={PropertyEditForms.UpdateManagementSummaryContainer}
title="Update Management Summary"
></AppRoute>
</Switch>
);
} else {
return (
<Switch>
<AppRoute
path={`${stripTrailingSlash(path)}/:tab`}
customRender={() => (
<PropertyContainer composedPropertyState={props.composedPropertyState} />
)}
key={'property_tabs'}
title={'Property Tabs'}
></AppRoute>

<Redirect
from={`${path}`}
to={`${stripTrailingSlash(path)}/${
path.includes('non-inventory-property')
? InventoryTabNames.title
: InventoryTabNames.property
}`}
/>
</Switch>
);
}
},
);

export default PropertyRouter;
Loading

0 comments on commit 2ab12ec

Please sign in to comment.