Update search params hook to use full location path instead of math path

onaio · May 23, 2024 · c885780 · c885780
1 parent 88aa7f9
commit c885780
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 40 deletions.
diff --git a/packages/fhir-client/src/components/PatientDetails/PopulatedTableTabs/index.tsx b/packages/fhir-client/src/components/PatientDetails/PopulatedTableTabs/index.tsx
@@ -69,7 +69,7 @@ export const PopulatedTableTabs: React.FC<PopulatedTableTabsProps> = (
   const { fhirBaseURL, patientId } = props;
   const { t } = useTranslation();
 
-  const { addParamsToURL, removeURLParam } = useSearchParams();
+  const { addParams, removeParam } = useSearchParams();
 
   const defaultTableData = {
     resourceId: patientId,
@@ -80,7 +80,7 @@ export const PopulatedTableTabs: React.FC<PopulatedTableTabsProps> = (
   const tableActionColumn = {
     title: t('Actions'),
     render: (value: Coding) => (
-      <Button onClick={() => addParamsToURL({ [sideViewQuery]: value.id })} type="link">
+      <Button onClick={() => addParams({ [sideViewQuery]: value.id })} type="link">
         {t('View')}
       </Button>
     ),
@@ -94,7 +94,7 @@ export const PopulatedTableTabs: React.FC<PopulatedTableTabsProps> = (
     extractSideViewDetails: sidePreviewDetailsExtractor<ICarePlan>(
       patientId,
       carePlanSideViewData,
-      () => removeURLParam(sideViewQuery)
+      () => removeParam(sideViewQuery)
     ),
   };
 
@@ -106,7 +106,7 @@ export const PopulatedTableTabs: React.FC<PopulatedTableTabsProps> = (
     extractSideViewDetails: sidePreviewDetailsExtractor<ICondition>(
       patientId,
       conditionSideViewData,
-      () => removeURLParam(sideViewQuery)
+      () => removeParam(sideViewQuery)
     ),
   };
 
@@ -117,7 +117,7 @@ export const PopulatedTableTabs: React.FC<PopulatedTableTabsProps> = (
     tableDataGetter: parseTaskList,
     searchParamsFactory: taskSearchParams,
     extractSideViewDetails: sidePreviewDetailsExtractor<ITask>(patientId, taskSideViewData, () =>
-      removeURLParam(sideViewQuery)
+      removeParam(sideViewQuery)
     ),
   };
 
@@ -130,7 +130,7 @@ export const PopulatedTableTabs: React.FC<PopulatedTableTabsProps> = (
     extractSideViewDetails: sidePreviewDetailsExtractor<IImmunization>(
       patientId,
       immunizationSideViewData,
-      () => removeURLParam(sideViewQuery)
+      () => removeParam(sideViewQuery)
     ),
   };
 
@@ -142,7 +142,7 @@ export const PopulatedTableTabs: React.FC<PopulatedTableTabsProps> = (
     extractSideViewDetails: sidePreviewDetailsExtractor<IEncounter>(
       patientId,
       encounterPreviewExtractor,
-      () => removeURLParam(sideViewQuery)
+      () => removeParam(sideViewQuery)
     ),
   };
 

diff --git a/packages/react-utils/src/components/GenericDetailsView/TabsView/index.tsx b/packages/react-utils/src/components/GenericDetailsView/TabsView/index.tsx
@@ -18,18 +18,18 @@ export interface GenericListTabsViewProps {
  */
 export function GenericTabsView(props: GenericTabsViewProps) {
   const { tabViewId, sideViewQueryName, ...restprops } = props;
-  const { sParams, addParamsToURL, removeURLParam } = useSearchParams();
+  const { sParams, addParams, removeParam } = useSearchParams();
   const activeTabKey = sParams.get(activeTabQuery) ?? undefined;
   const tabView = sParams.get(tabViewQuery) ?? undefined;
 
   const onTabChangeHandler = (key: string) => {
     if (sideViewQueryName) {
       const tableRowId = sParams.get(sideViewQueryName) ?? undefined;
       if (tableRowId) {
-        removeURLParam(sideViewQueryName);
+        removeParam(sideViewQueryName);
       }
     }
-    addParamsToURL({ [tabViewQuery]: tabViewId, [activeTabQuery]: key });
+    addParams({ [tabViewQuery]: tabViewId, [activeTabQuery]: key });
   };
 
   const extraTabProps: Record<string, React.ReactNode> = {};

diff --git a/packages/react-utils/src/hooks/useSearchParams.ts b/packages/react-utils/src/hooks/useSearchParams.ts
@@ -1,4 +1,4 @@
-import { useHistory, useLocation, useRouteMatch } from 'react-router';
+import { useHistory, useLocation } from 'react-router';
 import { deprecate } from 'util';
 
 export type ParamKeyValuePairs = Record<string, string | undefined>;
@@ -9,7 +9,6 @@ export type ParamKeyValuePairs = Record<string, string | undefined>;
 export function useSearchParams() {
   const location = useLocation();
   const history = useHistory();
-  const match = useRouteMatch();
 
   const sParams = new URLSearchParams(location.search);
 
@@ -23,7 +22,8 @@ export function useSearchParams() {
     addParams(params);
   }, 'addParam is now deprecated, and will be removed in the future, consider using addParams');
 
-  const addParamsBase = (keyValues: ParamKeyValuePairs, nextUrl: string) => {
+  const addParams = (keyValues: ParamKeyValuePairs) => {
+    let nextUrl = location.pathname;
     for (const [key, value] of Object.entries(keyValues)) {
       if (value) {
         sParams.set(key, value);
@@ -33,42 +33,17 @@ export function useSearchParams() {
     history.push(nextUrl);
   };
 
-  const addParams = (keyValues: ParamKeyValuePairs) => {
-    return addParamsBase(keyValues, match.path);
-  };
-
-  /**
-   * similar to addParams but considers router params
-   * Maybe this should be the addParams
-   * Should test out if this is used instead could break anything
-   *
-   * @param keyValues - an object of url params to add
-   */
-  const addParamsToURL = (keyValues: ParamKeyValuePairs) => {
-    return addParamsBase(keyValues, location.pathname);
-  };
-
-  const removeParamBase = (queryKey: string, baseUrl: string) => {
+  const removeParam = (queryKey: string) => {
     sParams.delete(queryKey);
     const newParams = sParams.toString();
-    const nextUrl = ''.concat(baseUrl, '?').concat(newParams.toString());
+    const nextUrl = ''.concat(location.pathname, '?').concat(newParams.toString());
     history.push(nextUrl);
   };
 
-  const removeParam = (queryKey: string) => {
-    return removeParamBase(queryKey, match.path);
-  };
-
-  const removeURLParam = (queryKey: string) => {
-    return removeParamBase(queryKey, location.pathname);
-  };
-
   return {
     sParams,
     addParam,
     addParams,
     removeParam,
-    addParamsToURL,
-    removeURLParam,
   };
 }