From 8e9c5764b53d6fc2d41a5cb2ed3dc73716aebf04 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Tue, 28 Feb 2023 12:20:19 +0100
Subject: [PATCH 1/5] fix: wrong breadcrum text fixed:

---
 src/app/modules/viz-module/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index 5ce5d7fa1..2e3823a35 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -83,7 +83,7 @@ export default function VizModule() {
   const vizTypePretext = (value: string) => {
     const localVizType = startCase(value);
 
-    switch (localVizType) {
+    switch (vizType) {
       case "Pledges-contributions":
         return `Resource Mobilization: ${localVizType} `;
       case "Allocations":

From 1c4f85d6774a28b4a103d3948f0a2bf174f66692 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Tue, 28 Feb 2023 12:24:47 +0100
Subject: [PATCH 2/5] fix: wrong breadcrumb text fixed

---
 src/app/modules/viz-module/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index 2e3823a35..634f405ee 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -85,7 +85,7 @@ export default function VizModule() {
 
     switch (vizType) {
       case "Pledges-contributions":
-        return `Resource Mobilization: ${localVizType} `;
+        return `Resource Mobilization: ${localVizType}`;
       case "Allocations":
         return `Access to funding: ${localVizType}`;
       case "Eligibility":

From 67e458b41a4ae6f0dc4836bc061494344527945f Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Sun, 5 Mar 2023 13:48:16 +0100
Subject: [PATCH 3/5] fix: grant implementation pill

---
 .../sub-modules/overview/index.tsx            |  2 +-
 src/app/modules/grant-detail-module/index.tsx |  7 ++--
 .../flow/data-wrappers/grantDetail.tsx        | 33 +++++++++++++++----
 .../time-cycle/data-wrappers/grantDetail.tsx  | 19 +++++++++--
 4 files changed, 50 insertions(+), 11 deletions(-)

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
index 9dc7d8c6c..88c9b9ac0 100644
--- 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
index 8609f2ee1..a68084e0b 100644
--- a/src/app/modules/grant-detail-module/index.tsx
+++ b/src/app/modules/grant-detail-module/index.tsx
@@ -128,7 +128,7 @@ export default function GrantDetail() {
           },
 
           {
-            name: grantInfoData.title,
+            name: grantInfoData.code,
             path: location.pathname,
             id: v4(),
           },
@@ -147,9 +147,12 @@ export default function GrantDetail() {
               id: v4(),
             },
             {
-              name: grantInfoData.title,
+              name: grantInfoData.code,
               path: location.pathname,
               id: v4(),
+              vizLevel: breadCrumbList[breadCrumbList.length - 1]?.vizLevel,
+              vizSelected:
+                breadCrumbList[breadCrumbList.length - 1]?.vizSelected,
             },
           ]);
         }
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
index b8a85f42f..67df667ad 100644
--- 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,6 +7,8 @@ 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;
@@ -14,13 +16,32 @@ interface Props {
   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
index 3603b84fd..8b92aab4d 100644
--- 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(

From 9b03fbd8df458bd3f3fd3fa8a9077d89c15391f8 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Sun, 5 Mar 2023 15:39:51 +0100
Subject: [PATCH 4/5] fix: grant implementation pill

---
 src/app/modules/grant-detail-module/index.tsx | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/grant-detail-module/index.tsx b/src/app/modules/grant-detail-module/index.tsx
index a68084e0b..0d3441294 100644
--- 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: "",
@@ -147,7 +165,11 @@ export default function GrantDetail() {
               id: v4(),
             },
             {
-              name: grantInfoData.code,
+              name: `${grantInfoData.code} ${
+                selectedPeriod ? "-" : ""
+              } ${formatPeriod(selectedPeriod.startDate)} - ${formatPeriod(
+                selectedPeriod.endDate
+              )}`,
               path: location.pathname,
               id: v4(),
               vizLevel: breadCrumbList[breadCrumbList.length - 1]?.vizLevel,
@@ -158,7 +180,7 @@ export default function GrantDetail() {
         }
       }
     }
-  }, [grantInfoData]);
+  }, [grantInfoData, selectedPeriod]);
 
   return (
     <div

From 1be82e380e763741e72aea7d0596bdfddcc32925 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Mon, 6 Mar 2023 15:15:29 +0100
Subject: [PATCH 5/5] fix: drill down logic adjustment

---
 .../Charts/common/breadcrumbs/index.tsx       |  1 -
 .../modules/country-detail-module/index.tsx   | 71 +++++--------------
 2 files changed, 18 insertions(+), 54 deletions(-)

diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
index 9622af350..1d5323e96 100644
--- 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
index 1f10ab06d..c21376db6 100644
--- 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";
@@ -48,7 +49,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;
@@ -154,49 +155,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() },
 
@@ -207,18 +168,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;