Merge pull request #18 from globalfund/fix/breadcrumbs

Fix/breadcrumbs
globalfund · Mar 8, 2023 · 3d41682 · 3d41682
2 parents 5636bb0 + ca2f9ed
commit 3d41682
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 68 deletions.
diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -7,7 +7,6 @@ import { breadCrumbItems } from "app/state/recoil/atoms";
 export default function BreadCrumbs() {
   const history = useHistory();
   const [breadCrumbList, setBreadCrumbList] = useRecoilState(breadCrumbItems);
-
   return (
     <div
       css={`

diff --git a/src/app/modules/country-detail-module/index.tsx b/src/app/modules/country-detail-module/index.tsx
@@ -4,6 +4,7 @@ import get from "lodash/get";
 import { startCase } from "lodash";
 import { useRecoilState } from "recoil";
 import { v4 } from "uuid";
+import queryString from "query-string";
 import { useMediaQuery } from "@material-ui/core";
 import { useTitle, useUpdateEffect } from "react-use";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
@@ -49,7 +50,7 @@ export default function CountryDetail() {
   const datasetMenuItems = useDatasetMenuItems();
   const [search, setSearch] = React.useState("");
   const [breadCrumbList, setBreadCrumList] = useRecoilState(breadCrumbItems);
-
+  const { components } = queryString.parse(location.search);
   const isMobile = useMediaQuery("(max-width: 767px)");
   const params = useParams<{
     code: string;
@@ -155,49 +156,9 @@ export default function CountryDetail() {
     return 0;
   }
 
-  const vizTypePretext = (vizType: string) => {
-    vizType = startCase(vizType);
-
-    switch (vizType) {
-      case "Pledges-contributions":
-        return `Resource Mobilization: ${vizType} `;
-      case "Allocations":
-        return `Access to funding: ${vizType}`;
-      case "Eligibility":
-        return `Access to funding: ${vizType}`;
-      case "Documents":
-        return "Documents";
-      case "Results":
-        return "Results";
-      default:
-        return `Grant Implementation: ${vizType} `;
-    }
-  };
-
-  const [prevVizState, setPrevVizState] = React.useState(breadCrumbList[1]);
-
-  const prevViz = useMemo(() => {
-    if (prevVizState !== breadCrumbList[1]) {
-      setPrevVizState({
-        name: vizTypePretext(params.vizType),
-        path: location.pathname,
-        id: v4(),
-      });
-      return {
-        name: vizTypePretext(params.vizType),
-        path: location.pathname,
-        id: v4(),
-      };
-    }
-    return prevVizState;
-  }, [location.pathname]);
-
+  const breadcrumbID = useMemo(() => v4(), []);
   useEffect(() => {
-    if (
-      breadCrumbList.length < 1 ||
-      prevViz === undefined ||
-      location.pathname == `/location/${params.code}/overview`
-    ) {
+    if (breadCrumbList.length < 1) {
       setBreadCrumList([
         { name: "Datasets", path: "/", id: v4() },
 
@@ -208,18 +169,22 @@ export default function CountryDetail() {
         },
       ]);
     } else {
-      setBreadCrumList([
-        { name: "Datasets", path: "/", id: v4() },
+      if (!breadCrumbList.find((item) => item.id === breadcrumbID))
+        setBreadCrumList([
+          ...breadCrumbList,
 
-        {
-          name: locationInfoData.locationName,
-          path: `/location/${params.code}/overview`,
-          id: v4(),
-        },
-        prevViz,
-      ]);
+          {
+            name: components || locationInfoData.locationName,
+            path: location.pathname,
+            id: breadcrumbID,
+            // vizSelected:
+          },
+          // prevViz,
+        ]);
     }
-  }, [locationInfoData, prevViz]);
+  }, [locationInfoData]);
+
+  console.log(locationInfoData, "loc");
 
   const tabs = countryDetailTabs;
 

diff --git a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
@@ -131,7 +131,7 @@ export function LocationDetailOverviewModule(props: Props) {
             margin-bottom: 8px;
           `}
         >
-          {locationInfoData.coordinatingMechanismContacts.length > 0 && (
+          {locationInfoData.coordinatingMechanismContacts?.length > 0 && (
             <React.Fragment>
               <button
                 onClick={() => setContactsExpanded(!contactsExpanded)}

diff --git a/src/app/modules/grant-detail-module/index.tsx b/src/app/modules/grant-detail-module/index.tsx
@@ -28,6 +28,9 @@ import { GrantDetailInvestmentsTableWrapper } from "app/modules/viz-module/sub-m
 import { GrantDetailGenericBudgetsTimeCycleWrapper } from "app/modules/viz-module/sub-modules/budgets/time-cycle/data-wrappers/grantDetail";
 import { GrantDetailInvestmentsDisbursedWrapper } from "app/modules/viz-module/sub-modules/investments/disbursed/data-wrappers/grantDetail";
 import { GrantDetailInvestmentsTimeCycleWrapper } from "app/modules/viz-module/sub-modules/investments/time-cycle/data-wrappers/grantDetail";
+import find from "lodash/find";
+
+import { GrantDetailPeriod } from "./components/InfoContent";
 
 export default function GrantDetail() {
   useTitle("The Data Explorer - Grant");
@@ -47,6 +50,21 @@ export default function GrantDetail() {
     (store) => store.GrantDetailInfo.fetch
   );
 
+  const periods = useStoreState(
+    (state) =>
+      get(state.GrantDetailPeriods.data, "data", []) as GrantDetailPeriod[]
+  );
+
+  const selectedPeriod = find(
+    periods,
+    (p: GrantDetailPeriod) => p.number.toString() === params.period
+  ) || { startDate: "", endDate: "" };
+
+  const formatPeriod = (date: string) => {
+    return date.split("-")[0];
+  };
+  console.log(formatPeriod(selectedPeriod.startDate), "start year");
+
   const grantInfoData = useStoreState((state) =>
     get(state.GrantDetailInfo.data, "data[0]", {
       title: "",
@@ -128,7 +146,7 @@ export default function GrantDetail() {
           },
 
           {
-            name: grantInfoData.title,
+            name: grantInfoData.code,
             path: location.pathname,
             id: v4(),
           },
@@ -147,15 +165,22 @@ export default function GrantDetail() {
               id: v4(),
             },
             {
-              name: grantInfoData.title,
+              name: `${grantInfoData.code} ${
+                selectedPeriod ? "-" : ""
+              } ${formatPeriod(selectedPeriod.startDate)} - ${formatPeriod(
+                selectedPeriod.endDate
+              )}`,
               path: location.pathname,
               id: v4(),
+              vizLevel: breadCrumbList[breadCrumbList.length - 1]?.vizLevel,
+              vizSelected:
+                breadCrumbList[breadCrumbList.length - 1]?.vizSelected,
             },
           ]);
         }
       }
     }
-  }, [grantInfoData]);
+  }, [grantInfoData, selectedPeriod]);
 
   return (
     <div

diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
@@ -84,9 +84,9 @@ export default function VizModule() {
   const vizTypePretext = (value: string) => {
     const localVizType = startCase(value);
 
-    switch (localVizType) {
+    switch (vizType) {
       case "Pledges-contributions":
-        return `Resource Mobilization: ${localVizType} `;
+        return `Resource Mobilization: ${localVizType}`;
       case "Allocations":
         return `Access to funding: ${localVizType}`;
       case "Eligibility":

diff --git a/src/app/modules/viz-module/sub-modules/budgets/flow/data-wrappers/grantDetail.tsx b/src/app/modules/viz-module/sub-modules/budgets/flow/data-wrappers/grantDetail.tsx
@@ -7,20 +7,41 @@ import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { BudgetsTreemapDataItem } from "app/components/Charts/Budgets/Treemap/data";
 import { BudgetsFlowModule } from "app/modules/viz-module/sub-modules/budgets/flow";
 import { getDrilldownPanelOptions } from "app/modules/viz-module/sub-modules/budgets/flow/utils";
+import { useRecoilValue } from "recoil";
+import { breadCrumbItems } from "app/state/recoil/atoms";
 
 interface Props {
   code: string;
   toolboxOpen?: boolean;
   implementationPeriod: string;
 }
 
+interface DrilldownVizSelectedType {
+  id: string | undefined;
+  filterStr: string | undefined;
+}
 export function GrantDetailBudgetsFlowWrapper(props: Props) {
   useTitle("The Data Explorer - Grant Budgets Flow");
-  const [vizLevel, setVizLevel] = React.useState(0);
-  const [drilldownVizSelected, setDrilldownVizSelected] = React.useState<{
-    id: string | undefined;
-    filterStr: string | undefined;
-  }>({ id: undefined, filterStr: undefined });
+
+  const breadcrumbList = useRecoilValue(breadCrumbItems);
+
+  const [vizLevel, setVizLevel] = React.useState(
+    breadcrumbList[breadcrumbList.length - 1]?.vizLevel || 0
+  );
+
+  const [drilldownVizSelected, setDrilldownVizSelected] =
+    React.useState<DrilldownVizSelectedType>(
+      breadcrumbList[breadcrumbList.length - 1]
+        ?.vizSelected as DrilldownVizSelectedType
+    );
+
+  React.useEffect(() => {
+    setDrilldownVizSelected(
+      breadcrumbList[breadcrumbList.length - 1]
+        ?.vizSelected as DrilldownVizSelectedType
+    );
+    setVizLevel(breadcrumbList[breadcrumbList.length - 1]?.vizLevel || 0);
+  }, [breadcrumbList]);
 
   // api call & data
   const fetchData = useStoreActions(
@@ -128,7 +149,7 @@ export function GrantDetailBudgetsFlowWrapper(props: Props) {
     } else {
       clearDrilldownLevel2Data();
     }
-  }, [drilldownVizSelected.id]);
+  }, [drilldownVizSelected?.id]);
 
   useUpdateEffect(() => {
     setDrilldownLevelSelectors(getDrilldownPanelOptions(links));

diff --git a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/data-wrappers/grantDetail.tsx b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/data-wrappers/grantDetail.tsx
@@ -7,6 +7,8 @@ import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import { BudgetsTreemapDataItem } from "app/components/Charts/Budgets/Treemap/data";
 import { BudgetsTimeCycleModule } from "app/modules/viz-module/sub-modules/budgets/time-cycle";
+import { breadCrumbItems } from "app/state/recoil/atoms";
+import { useRecoilValue } from "recoil";
 
 interface Props {
   code: string;
@@ -16,10 +18,23 @@ interface Props {
 
 export function GrantDetailGenericBudgetsTimeCycleWrapper(props: Props) {
   useTitle("The Data Explorer - Grant Budgets Time cycle");
-  const [vizLevel, setVizLevel] = React.useState(0);
+
+  const breadcrumbList = useRecoilValue(breadCrumbItems);
+
+  const [vizLevel, setVizLevel] = React.useState(
+    breadcrumbList[breadcrumbList.length - 1]?.vizLevel || 0
+  );
+
   const [drilldownVizSelected, setDrilldownVizSelected] = React.useState<
     string | undefined
-  >(undefined);
+  >(breadcrumbList[breadcrumbList.length - 1]?.vizSelected as string);
+
+  React.useEffect(() => {
+    setDrilldownVizSelected(
+      breadcrumbList[breadcrumbList.length - 1]?.vizSelected as string
+    );
+    setVizLevel(breadcrumbList[breadcrumbList.length - 1]?.vizLevel || 0);
+  }, [breadcrumbList]);
 
   // api call & data
   const fetchData = useStoreActions(