fix: url params with front slash encoding

globalfund · Oct 7, 2024 · 63dbcbc · 63dbcbc
1 parent 5bc2938
commit 63dbcbc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 23 deletions.
diff --git a/src/app/pages/location/index.tsx b/src/app/pages/location/index.tsx
@@ -18,7 +18,8 @@ import { ResourceMobilization } from "app/pages/location/views/resource-mobiliza
 
 export const Location: React.FC = () => {
   const params = useParams<{ id: string; tab: string }>();
-  const paramsId = params.id?.replace("|", "%2F");
+  const routeParamsId = params.id as string;
+  const paramsId = params.id?.replace("|", "%2F") as string;
 
   const [resultsYear, setResultsYear] = React.useState(
     RESULT_YEARS[RESULT_YEARS.length - 1]
@@ -312,22 +313,22 @@ export const Location: React.FC = () => {
     if (paramsId) {
       fetchOverview({
         routeParams: {
-          code: paramsId,
+          code: routeParamsId,
         },
       });
       fetchCCMContacts({
         routeParams: {
-          code: paramsId,
+          code: routeParamsId,
         },
       });
       fetchAllocationsRadialChart({
         routeParams: {
-          code: paramsId,
+          code: routeParamsId,
         },
       });
       fetchFundingRequestsTable({
         routeParams: {
-          code: paramsId,
+          code: routeParamsId,
         },
       });
       fetchEligibilityTable({
@@ -355,7 +356,7 @@ export const Location: React.FC = () => {
       });
       fetchGrantsPieCharts({
         routeParams: {
-          code: paramsId,
+          code: routeParamsId,
         },
       });
       fetchResultStats({
@@ -393,6 +394,13 @@ export const Location: React.FC = () => {
       fetchBudgetsCycles({
         filterString: `geographies=${paramsId}`,
       });
+      fetchGrantsTable({
+        filterString: `geographies=${paramsId}`,
+        routeParams: {
+          page: "1",
+          pageSize: "all",
+        },
+      });
     }
   }, [paramsId]);
 
@@ -404,23 +412,11 @@ export const Location: React.FC = () => {
     }
   }, [dataOverview]);
 
-  React.useEffect(() => {
-    if (paramsId) {
-      fetchGrantsTable({
-        filterString: `geographies=${paramsId}`,
-        routeParams: {
-          page: "1",
-          pageSize: "all",
-        },
-      });
-    }
-  }, [paramsId]);
-
   React.useEffect(() => {
     if (paramsId) {
       fetchResultsTable({
         routeParams: {
-          code: paramsId,
+          code: routeParamsId,
           cycle: resultsYear.value,
         },
       });

diff --git a/src/app/pages/location/views/access-to-funding/index.tsx b/src/app/pages/location/views/access-to-funding/index.tsx
@@ -34,7 +34,8 @@ import {
 export const AccessToFunding: React.FC = () => {
   const cmsData = useCMSData({ returnData: true });
   const params = useParams<{ id: string; tab: string }>();
-  const paramsId = params.id?.replace("|", "%2F");
+  const routeParamsId = params.id as string;
+  const paramsId = params.id?.replace("|", "%2F") as string;
 
   const latestUpdateDateChart1 = useGetDatasetLatestUpdate({
     dataset: "allocations",
@@ -181,7 +182,7 @@ export const AccessToFunding: React.FC = () => {
       fetchFundingRequestsTable({
         filterString,
         routeParams: {
-          code: paramsId,
+          code: routeParamsId,
         },
       });
     }
@@ -207,7 +208,7 @@ export const AccessToFunding: React.FC = () => {
       filterString = `periods=${chart1Cycles[0].value}`;
       fetchAllocationsRadialChart({
         filterString,
-        routeParams: { code: paramsId },
+        routeParams: { code: routeParamsId },
       });
     }
   }, [chart1Cycles]);

diff --git a/src/app/pages/location/views/results/index.tsx b/src/app/pages/location/views/results/index.tsx
@@ -28,7 +28,7 @@ export const Results: React.FC<ResultsProps> = (props: ResultsProps) => {
   });
 
   const params = useParams<{ id: string; tab: string }>();
-  const paramsId = params.id?.replace("|", "%2F");
+  const paramsId = params.id as string;
 
   const locationName = useStoreState((state) =>
     get(state.GeographyOverview, "data.data[0].name", params.id)