Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix success/Cancel url prop in fhir location form #974

Merged
merged 7 commits into from
May 16, 2022
Merged

Fix success/Cancel url prop in fhir location form #974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ddcd4c5
Fix success url generator prop
peterMuriuki Apr 20, 2022
07d71a1
Update yarn.lock file
peterMuriuki Apr 21, 2022
a91cec5
Install use deep compare effect
peterMuriuki May 13, 2022
a0552f0
Reset fields when initialvalues change
peterMuriuki May 13, 2022
7992b89
fix value of parentId initial value
peterMuriuki May 13, 2022
ade8d65
Disable location hierarchy refetches
peterMuriuki May 13, 2022
740f9bc
Test alert shows when location hierarchy is fetching
peterMuriuki May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/fhir-location-management/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"cycle": "^1.0.3",
"fhirclient": "^2.4.0",
"tree-model": "^1.0.7",
"use-deep-compare-effect": "^1.8.1",
"uuid": "^8.3.1"
},
"devDependencies": {
Expand Down
12 changes: 6 additions & 6 deletions packages/fhir-location-management/src/components/AddEditLocationUnit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ export type LocationRouteProps = { id?: string };
export interface NewEditLocationUnitProps
extends Pick<
LocationFormProps,
'hidden' | 'disabled' | 'disabledTreeNodesCallback' | 'successUrlGenerator'
'hidden' | 'disabled' | 'disabledTreeNodesCallback' | 'successURLGenerator'
>,
RouteComponentProps<LocationRouteProps> {
fhirBaseURL: string;
fhirRootLocationIdentifier: string;
cancelUrlGenerator: () => string;
cancelURLGenerator: () => string;
}

/**
Expand All @@ -33,8 +33,8 @@ export const NewEditLocationUnit = (props: NewEditLocationUnitProps) => {
disabled,
fhirBaseURL,
fhirRootLocationIdentifier,
successUrlGenerator,
cancelUrlGenerator,
successURLGenerator,
cancelURLGenerator,
disabledTreeNodesCallback,
} = props;
const history = useHistory();
Expand All @@ -43,7 +43,7 @@ export const NewEditLocationUnit = (props: NewEditLocationUnitProps) => {
const sParams = new URLSearchParams(location.search);

const cancelHandler = () => {
const cancelURL = cancelUrlGenerator();
const cancelURL = cancelURLGenerator();
history.push(cancelURL);
};

Expand Down Expand Up @@ -83,7 +83,7 @@ export const NewEditLocationUnit = (props: NewEditLocationUnitProps) => {
const locationFormProps: LocationFormProps = {
initialValues,
tree: data,
successUrlGenerator: successUrlGenerator,
successURLGenerator,
hidden: hidden,
disabled: disabled,
onCancel: cancelHandler,
Expand Down
11 changes: 6 additions & 5 deletions packages/fhir-location-management/src/components/LocationForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { TreeNode } from '../../helpers/types';
import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation';
import { LocationUnitStatus } from '../../helpers/types';
import { useQueryClient } from 'react-query';
import useDeepCompareEffect from 'use-deep-compare-effect';

const { Item: FormItem } = Form;

Expand All @@ -25,7 +26,7 @@ export interface LocationFormProps
extends Pick<CustomTreeSelectProps, 'disabledTreeNodesCallback'> {
initialValues: LocationFormFields;
tree: TreeNode;
successUrlGenerator: (payload: ILocation) => string;
successURLGenerator: (payload: ILocation) => string;
fhirBaseURL: string;
hidden: string[];
disabled: string[];
Expand All @@ -35,7 +36,7 @@ export interface LocationFormProps

const defaultProps = {
initialValues: defaultFormField,
successUrlGenerator: () => '#',
successURLGenerator: () => '#',
hidden: [],
disabled: [],
onCancel: () => undefined,
Expand Down Expand Up @@ -92,7 +93,7 @@ const LocationForm = (props: LocationFormProps) => {
disabledTreeNodesCallback,
fhirBaseURL,
afterSubmit,
successUrlGenerator: successURLGenerator,
successURLGenerator,
onCancel,
tree,
} = props;
Expand All @@ -110,8 +111,8 @@ const LocationForm = (props: LocationFormProps) => {

const [form] = Form.useForm();

React.useEffect(() => {
form.setFieldsValue({ ...initialValues });
useDeepCompareEffect(() => {
form.resetFields();
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a0552f0

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@p-netm I still feel we should show a loader as the list is re-evaluated

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@machariamuguku this will show a banner when the location hierarchy is being refetched: ade8d65

}, [form, initialValues]);

const status = [
Expand Down
2 changes: 1 addition & 1 deletion packages/fhir-location-management/src/components/LocationForm/tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ describe('LocationForm', () => {

const wrapper = mount(
<AppWrapper>
<LocationForm successUrlGenerator={successURLGeneratorMock} {...formProps} />
<LocationForm successURLGenerator={successURLGeneratorMock} {...formProps} />
</AppWrapper>,
{ attachTo: container }
);
Expand Down
2 changes: 1 addition & 1 deletion packages/fhir-location-management/src/components/LocationForm/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const getLocationFormFields = (
return {
...location,
isJurisdiction: true, // TODO
parentId: parentId ?? location?.partOf?.reference?.split('/')[1],
parentId: parentId ?? location?.partOf?.reference,
} as LocationFormFields;
};

Expand Down
122 changes: 68 additions & 54 deletions packages/fhir-location-management/src/components/LocationUnitList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
setSelectedNode,
getSelectedNode,
} from '../../ducks/location-tree-state';
import { Alert } from 'antd';

reducerRegistry.register(reducerName, reducer);

Expand Down Expand Up @@ -77,6 +78,7 @@ export const LocationUnitList: React.FC<LocationUnitListProps> = (props: Locatio
data: treeData,
isLoading: treeIsLoading,
error: treeError,
isFetching: treeIsFetching,
} = useQuery<IBundle, Error, TreeNode | undefined>(
[locationHierarchyResourceType, hierarchyParams],
async () => {
Expand All @@ -88,6 +90,7 @@ export const LocationUnitList: React.FC<LocationUnitListProps> = (props: Locatio
select: (res) => {
return convertApiResToTree(res);
},
staleTime: Infinity, // prevent refetches on things like window refocus
}
);

Expand Down Expand Up @@ -117,62 +120,73 @@ export const LocationUnitList: React.FC<LocationUnitListProps> = (props: Locatio
const tableDispData = parseTableData(tableNodes);

return (
<section className="layout-content">
<Helmet>
<title>{lang.LOCATION_UNIT}</title>
</Helmet>
<h1 className="mb-3 fs-5">{lang.LOCATION_UNIT_MANAGEMENT}</h1>
<Row>
<Col className="bg-white p-3" span={6}>
<Tree
data-testid="hierarchy-display"
data={treeData.children}
selectedNode={selectedNode}
onSelect={(node) => {
dispatch(setSelectedNode(node));
}}
/>
</Col>
<Col className="bg-white p-3 border-left" span={detailId ? 13 : 18}>
<div className="mb-3 d-flex justify-content-between p-3">
<h6 className="mt-4">
{selectedNode ? selectedNode.model.node.name : lang.LOCATION_UNIT}
</h6>
<div>
<Link
to={() => {
if (selectedNode) {
const queryParams = { parentId: selectedNode.model.nodeId };
const searchString = new URLSearchParams(queryParams).toString();
return `${URL_LOCATION_UNIT_ADD}?${searchString}`;
}
return URL_LOCATION_UNIT_ADD;
<>
{treeIsFetching && (
<Alert
type="info"
message="Refreshing data"
description="Request to update the location hierarchy is taking a bit long to respond."
banner
showIcon
/>
)}
<section className="layout-content">
<Helmet>
<title>{lang.LOCATION_UNIT}</title>
</Helmet>
<h1 className="mb-3 fs-5">{lang.LOCATION_UNIT_MANAGEMENT}</h1>
<Row>
<Col className="bg-white p-3" span={6}>
<Tree
data-testid="hierarchy-display"
data={treeData.children}
selectedNode={selectedNode}
onSelect={(node) => {
dispatch(setSelectedNode(node));
}}
/>
</Col>
<Col className="bg-white p-3 border-left" span={detailId ? 13 : 18}>
<div className="mb-3 d-flex justify-content-between p-3">
<h6 className="mt-4">
{selectedNode ? selectedNode.model.node.name : lang.LOCATION_UNIT}
</h6>
<div>
<Link
to={() => {
if (selectedNode) {
const queryParams = { parentId: selectedNode.model.nodeId };
const searchString = new URLSearchParams(queryParams).toString();
return `${URL_LOCATION_UNIT_ADD}?${searchString}`;
}
return URL_LOCATION_UNIT_ADD;
}}
>
<Button type="primary">
<PlusOutlined />
{lang.ADD_LOCATION_UNIT}
</Button>
</Link>
</div>
</div>
<div className="bg-white p-3">
<Table
data={tableDispData}
onViewDetails={async (row) => {
setDetailId(row.id);
}}
>
<Button type="primary">
<PlusOutlined />
{lang.ADD_LOCATION_UNIT}
</Button>
</Link>
/>
</div>
</div>
<div className="bg-white p-3">
<Table
data={tableDispData}
onViewDetails={async (row) => {
setDetailId(row.id);
}}
</Col>
{detailId ? (
<LocationUnitDetail
fhirBaseUrl={fhirBaseURL}
onClose={() => setDetailId('')}
detailId={detailId}
/>
</div>
</Col>
{detailId ? (
<LocationUnitDetail
fhirBaseUrl={fhirBaseURL}
onClose={() => setDetailId('')}
detailId={detailId}
/>
) : null}
</Row>
</section>
) : null}
</Row>
</section>
</>
);
};
14 changes: 13 additions & 1 deletion packages/fhir-location-management/src/components/LocationUnitList/tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
screen,
within,
fireEvent,
waitFor,
} from '@testing-library/react';
import { Router } from 'react-router';
import { createBrowserHistory } from 'history';
Expand Down Expand Up @@ -113,7 +114,8 @@ describe('location-management/src/components/LocationUnitList', () => {
nock(props.fhirBaseURL)
.get(`/${locationHierarchyResourceType}/_search`)
.query({ identifier: props.fhirRootLocationIdentifier })
.reply(200, fhirHierarchy);
.reply(200, fhirHierarchy)
.persist();

nock(props.fhirBaseURL).get('/Location/303').reply(200, onaOfficeSubLocation);

Expand Down Expand Up @@ -183,5 +185,15 @@ describe('location-management/src/components/LocationUnitList', () => {

// table change- node deselect
expect(document.querySelectorAll('table tbody tr')).toHaveLength(1);

// invalidate queries to initiate a refetch of locationhierarchy
queryClient.invalidateQueries([locationHierarchyResourceType]).catch((err) => {
throw err;
});

await waitFor(() => {
expect(screen.getByText(/Refreshing data/i)).toBeInTheDocument();
});
await waitForElementToBeRemoved(screen.getByText(/Refreshing data/i));
});
});
13 changes: 13 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13290,6 +13290,11 @@ moment@>=1.6.0, moment@^2.24.0, moment@^2.25.3, moment@^2.29.2:
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.2.tgz#00910c60b20843bcba52d37d58c628b47b1f20e4"
integrity sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==

moment@^2.29.1:
version "2.29.3"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==

moo@^0.5.0:
version "0.5.1"
resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
Expand Down Expand Up @@ -19939,6 +19944,14 @@ use-deep-compare-effect@1.6.1:
"@types/react" "^17.0.0"
dequal "^2.0.2"

use-deep-compare-effect@^1.8.1:
version "1.8.1"
resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6"
integrity sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==
dependencies:
"@babel/runtime" "^7.12.5"
dequal "^2.0.2"

use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
Expand Down