Fix useSearchParams to replace the url instead of appending to the ex…

…isting (#1219) * Fix useSearchParams to delete current appended url before appending another * Add array to determine the key to be deleted * Use set method instead of append * Refactor care-teams to use useSearchParams hook * Update tests * Correct organization spelling * Add test for when addParams is called with an existing key * Refactor to use addParams instead of addParam addParam only adds one keyValue pair to url at a time and commits this to the url addParams can add several keyValue pairs in a single call before commiting to url * Add pathname assertion in the test --------- Co-authored-by: Peter Muriuki <pmuriuki98@gmail.com>
onaio · Jun 29, 2023 · ab58a5a · ab58a5a
1 parent cbe0d8e
commit ab58a5a
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 61 deletions.
diff --git a/app/src/App/App.tsx b/app/src/App/App.tsx
@@ -100,7 +100,6 @@ import {
   CreateEditCareTeam,
   URL_CREATE_CARE_TEAM,
   URL_EDIT_CARE_TEAM,
-  URL_CARE_TEAM,
 } from '@opensrp/fhir-care-team';
 import {
   CreateEditUser as FHIRConnectedCreateEditUser,
@@ -350,14 +349,6 @@ const App: React.FC = () => {
               path={URL_FHIR_CARE_TEAM}
               component={CareTeamList}
             />
-            <PrivateComponent
-              redirectPath={APP_CALLBACK_URL}
-              disableLoginProtection={DISABLE_LOGIN_PROTECTION}
-              activeRoles={activeRoles.TEAMS && activeRoles.TEAMS.split(',')}
-              exact
-              path={`${URL_CARE_TEAM}/:${ROUTE_PARAM_CARE_TEAM_ID}`}
-              component={CareTeamList}
-            />
             <PrivateComponent
               redirectPath={APP_CALLBACK_URL}
               disableLoginProtection={DISABLE_LOGIN_PROTECTION}

diff --git a/packages/fhir-care-team/src/components/ListView/index.tsx b/packages/fhir-care-team/src/components/ListView/index.tsx
@@ -3,19 +3,20 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, PageHeader, Button, Divider, Dropdown, Menu, Popconfirm } from 'antd';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
-import { RouteComponentProps, useParams } from 'react-router';
+import { RouteComponentProps } from 'react-router';
 import { Link } from 'react-router-dom';
 import {
   FHIRServiceClass,
   useTabularViewWithLocalSearch,
   BrokenPage,
   SearchForm,
   TableLayout,
+  useSearchParams,
+  viewDetailsQuery,
 } from '@opensrp/react-utils';
 import {
   FHIR_CARE_TEAM,
   URL_EDIT_CARE_TEAM,
-  URL_CARE_TEAM,
   URL_CREATE_CARE_TEAM,
   careTeamResourceType,
 } from '../../constants';
@@ -59,7 +60,9 @@ export const deleteCareTeam = async (
 export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamListPropTypes) => {
   const { fhirBaseURL } = props;
   const { t } = useTranslation();
-  const { careTeamId: resourceId } = useParams<RouteParams>();
+
+  const { addParam, sParams } = useSearchParams();
+  const resourceId = sParams.get(viewDetailsQuery) ?? undefined;
 
   const {
     queryValues: { data, isFetching, isLoading, error, refetch },
@@ -118,7 +121,9 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
                   </Popconfirm>
                 </Menu.Item>
                 <Menu.Item key="view-details" className="view-details">
-                  <Link to={`${URL_CARE_TEAM}/${record.id}`}>View Details</Link>
+                  <Button type="link" onClick={() => addParam(viewDetailsQuery, record.id)}>
+                    View Details
+                  </Button>
                 </Menu.Item>
               </Menu>
             }

diff --git a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Care Teams list view renders correctly: Search 1 page 1 1`] = `
+exports[`Care Teams list view renders correctly: table row 1 page 1 1`] = `
 <td
   class="ant-table-cell"
 >
   Care Team One
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 1 page 1 2`] = `
+exports[`Care Teams list view renders correctly: table row 1 page 1 2`] = `
 <td
   class="ant-table-cell"
 >
@@ -56,15 +56,15 @@ exports[`Care Teams list view renders correctly: Search 1 page 1 2`] = `
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 2 page 1 1`] = `
+exports[`Care Teams list view renders correctly: table row 2 page 1 1`] = `
 <td
   class="ant-table-cell"
 >
   Care Team Three
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 2 page 1 2`] = `
+exports[`Care Teams list view renders correctly: table row 2 page 1 2`] = `
 <td
   class="ant-table-cell"
 >
@@ -112,15 +112,15 @@ exports[`Care Teams list view renders correctly: Search 2 page 1 2`] = `
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 3 page 1 1`] = `
+exports[`Care Teams list view renders correctly: table row 3 page 1 1`] = `
 <td
   class="ant-table-cell"
 >
   Care Team Five
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 3 page 1 2`] = `
+exports[`Care Teams list view renders correctly: table row 3 page 1 2`] = `
 <td
   class="ant-table-cell"
 >
@@ -168,15 +168,15 @@ exports[`Care Teams list view renders correctly: Search 3 page 1 2`] = `
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 4 page 1 1`] = `
+exports[`Care Teams list view renders correctly: table row 4 page 1 1`] = `
 <td
   class="ant-table-cell"
 >
   test 33
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 4 page 1 2`] = `
+exports[`Care Teams list view renders correctly: table row 4 page 1 2`] = `
 <td
   class="ant-table-cell"
 >
@@ -224,15 +224,15 @@ exports[`Care Teams list view renders correctly: Search 4 page 1 2`] = `
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 5 page 1 1`] = `
+exports[`Care Teams list view renders correctly: table row 5 page 1 1`] = `
 <td
   class="ant-table-cell"
 >
   Care Team Six
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 5 page 1 2`] = `
+exports[`Care Teams list view renders correctly: table row 5 page 1 2`] = `
 <td
   class="ant-table-cell"
 >
@@ -280,15 +280,15 @@ exports[`Care Teams list view renders correctly: Search 5 page 1 2`] = `
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 6 page 1 1`] = `
+exports[`Care Teams list view renders correctly: table row 6 page 1 1`] = `
 <td
   class="ant-table-cell"
 >
   Care Team Four
 </td>
 `;
 
-exports[`Care Teams list view renders correctly: Search 6 page 1 2`] = `
+exports[`Care Teams list view renders correctly: table row 6 page 1 2`] = `
 <td
   class="ant-table-cell"
 >

diff --git a/packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx b/packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx
@@ -141,9 +141,15 @@ describe('Care Teams list view', () => {
 
     await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
 
+    expect(document.querySelector('title')).toMatchInlineSnapshot(`
+      <title>
+        FHIR Care Team
+      </title>
+    `);
+
     document.querySelectorAll('tr').forEach((tr, idx) => {
       tr.querySelectorAll('td').forEach((td) => {
-        expect(td).toMatchSnapshot(`Search ${idx} page 1`);
+        expect(td).toMatchSnapshot(`table row ${idx} page 1`);
       });
     });
 
@@ -162,18 +168,21 @@ describe('Care Teams list view', () => {
 
     const viewDetailsLink = getByText(/View Details/);
     expect(viewDetailsLink).toMatchInlineSnapshot(`
-      <a
-        href="/admin/CareTeams/308"
-      >
+      <span>
         View Details
-      </a>
+      </span>
     `);
     fireEvent.click(viewDetailsLink);
-    expect(history.location.pathname).toEqual('/admin/CareTeams/308');
+    expect(history.location.pathname).toEqual('/admin/CareTeams');
+    expect(history.location.search).toEqual('?viewDetails=308');
 
     await waitForElementToBeRemoved(queryByText(/Fetching Care team/i));
-    document
-      .querySelectorAll('.display-block')
-      .forEach((block) => expect(block).toMatchSnapshot('view details display block'));
+    document.querySelectorAll('.display-block').forEach((block) => {
+      expect(block).toMatchSnapshot('view details display block');
+    });
+
+    // close view details
+    const closeButton = document.querySelector('[data-testid="cancel"]');
+    fireEvent.click(closeButton);
   });
 });
diff --git a/packages/fhir-care-team/src/components/ViewDetails/index.tsx b/packages/fhir-care-team/src/components/ViewDetails/index.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import { Col, Button, Alert } from 'antd';
 import { CloseOutlined, SyncOutlined } from '@ant-design/icons';
-import { useHistory } from 'react-router';
 import { useQuery } from 'react-query';
 import {
   BrokenPage,
@@ -10,8 +9,10 @@ import {
   IdentifierUseCodes,
   getResourcesFromBundle,
   parseFhirHumanName,
+  viewDetailsQuery,
+  useSearchParams,
 } from '@opensrp/react-utils';
-import { careTeamResourceType, URL_CARE_TEAM } from '../../constants';
+import { careTeamResourceType } from '../../constants';
 import { useTranslation } from '../../mls';
 import { renderObjectAsKeyvalue } from '@opensrp/react-utils';
 import { get, groupBy, keyBy } from 'lodash';
@@ -70,7 +71,7 @@ function categorizeIncludedResources(resources: Resource[], careTeamId: string)
 const ViewDetails = (props: ViewDetailsProps) => {
   const { careTeamId, fhirBaseURL } = props;
   const { t } = useTranslation();
-  const history = useHistory();
+  const { removeParam } = useSearchParams();
 
   // fetch this careTeam and include all its referenced resources.
   const { data, isLoading, error } = useQuery({
@@ -143,19 +144,19 @@ const ViewDetails = (props: ViewDetailsProps) => {
         ))}
       </ul>
     ) : (
-      <Alert description={t('No managing organizaions found')} type="warning"></Alert>
+      <Alert description={t('No managing organizations found')} type="warning"></Alert>
     ),
   };
 
   return (
     <Col className="view-details-content">
       <div className="flex-right">
         <Button
-          data-test-id="cancel"
+          data-testid="cancel"
           icon={<CloseOutlined />}
           shape="circle"
           type="text"
-          onClick={() => history.push(URL_CARE_TEAM)}
+          onClick={() => removeParam(viewDetailsQuery)}
         />
       </div>
       {error && !data ? (

diff --git a/packages/fhir-care-team/src/components/ViewDetails/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-care-team/src/components/ViewDetails/tests/__snapshots__/index.test.tsx.snap
@@ -200,7 +200,7 @@ exports[`1157 - view details errors out for careTeam 3500 6`] = `
           <div
             class="ant-alert-description"
           >
-            No managing organizaions found
+            No managing organizations found
           </div>
         </div>
       </div>
@@ -434,7 +434,7 @@ exports[`Closes on clicking cancel (X)  7`] = `
           <div
             class="ant-alert-description"
           >
-            No managing organizaions found
+            No managing organizations found
           </div>
         </div>
       </div>
@@ -674,7 +674,7 @@ exports[`works correctly 7`] = `
           <div
             class="ant-alert-description"
           >
-            No managing organizaions found
+            No managing organizations found
           </div>
         </div>
       </div>

diff --git a/packages/fhir-care-team/src/components/ViewDetails/tests/index.test.tsx b/packages/fhir-care-team/src/components/ViewDetails/tests/index.test.tsx
@@ -9,7 +9,8 @@ import { createBrowserHistory } from 'history';
 import { createTestQueryClient } from '../../ListView/tests/utils';
 import nock from 'nock';
 import { cleanup, fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
-import { careTeamResourceType } from '../../../constants';
+import { createMemoryHistory } from 'history';
+import { URL_CARE_TEAM, careTeamResourceType } from '../../../constants';
 
 const history = createBrowserHistory();
 
@@ -86,6 +87,9 @@ test('works correctly', async () => {
 });
 
 test('Closes on clicking cancel (X) ', async () => {
+  const history = createMemoryHistory();
+  history.push(URL_CARE_TEAM);
+
   const localProps = {
     ...props,
     careTeamId: '142534',

diff --git a/packages/fhir-team-management/src/components/OrganizationList/ViewDetails/index.tsx b/packages/fhir-team-management/src/components/OrganizationList/ViewDetails/index.tsx
@@ -134,7 +134,7 @@ export const ViewDetails = (props: ViewDetailsProps) => {
         renderObjectAsKeyvalue(practitionerKeyValues)
       ) : (
         <Alert
-          description={t('Organiation does not have any assigned practitioners')}
+          description={t('Organization does not have any assigned practitioners')}
           type="warning"
         ></Alert>
       )}

diff --git a/packages/i18n/locales/eusm/fhir-care-team/en.json b/packages/i18n/locales/eusm/fhir-care-team/en.json
@@ -19,7 +19,7 @@
   "Name": "",
   "Name is Required": "",
   "No": "",
-  "No managing organizaions found": "No managing organizaions found",
+  "No managing organizations found": "No managing organizations found",
   "Participants": "Participants",
   "Practitioner Participant": "Practitioner Participant",
   "Save": "",

diff --git a/packages/i18n/locales/eusm/fhir-care-team/fr.json b/packages/i18n/locales/eusm/fhir-care-team/fr.json
@@ -19,7 +19,7 @@
   "Name": "",
   "Name is Required": "",
   "No": "",
-  "No managing organizaions found": "No managing organizaions found",
+  "No managing organizations found": "No managing organizations found",
   "Participants": "Participants",
   "Practitioner Participant": "Practitioner Participant",
   "Save": "",

diff --git a/packages/i18n/locales/eusm/fhir-team-management/en.json b/packages/i18n/locales/eusm/fhir-team-management/en.json
@@ -22,7 +22,7 @@
   "Inactive": "",
   "Must be a valid string": "",
   "Name": "",
-  "Organiation does not have any assigned practitioners": "Organiation does not have any assigned practitioners",
+  "Organization does not have any assigned practitioners": "Organization does not have any assigned practitioners",
   "Organization list": "",
   "Organization updated successfully": "",
   "Practitioner assignments updated successfully": "",

diff --git a/packages/i18n/locales/eusm/fhir-team-management/fr.json b/packages/i18n/locales/eusm/fhir-team-management/fr.json
@@ -22,7 +22,7 @@
   "Inactive": "",
   "Must be a valid string": "",
   "Name": "",
-  "Organiation does not have any assigned practitioners": "Organiation does not have any assigned practitioners",
+  "Organization does not have any assigned practitioners": "Organization does not have any assigned practitioners",
   "Organization list": "",
   "Organization updated successfully": "",
   "Practitioner assignments updated successfully": "",