[TM-1407] redirecto to selected country

wri · Nov 13, 2024 · 1c1d417 · 1c1d417
1 parent b3daf3b
commit 1c1d417
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/src/pages/dashboard/components/ContentOverview.tsx b/src/pages/dashboard/components/ContentOverview.tsx
@@ -35,6 +35,7 @@ import SecDashboard from "./SecDashboard";
 import TooltipGridMap from "./TooltipGridMap";
 
 interface RowData {
+  country_slug: undefined;
   uuid: string;
 }
 
@@ -73,7 +74,7 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
   const modalMapFunctions = useMap();
   const dashboardMapFunctions = useMap();
   const { openModal, closeModal } = useModalContext();
-  const { filters, setFilters } = useDashboardContext();
+  const { filters, setFilters, dashboardCountries } = useDashboardContext();
   const [selectedCountry, setSelectedCountry] = useState<string | undefined>(undefined);
   const [dashboardMapLoaded, setDashboardMapLoaded] = useState(false);
   const [modalMapLoaded, setModalMapLoaded] = useState(false);
@@ -165,12 +166,24 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
             invertSelectPagination={true}
             initialTableState={{ pagination: { pageSize: 10 } }}
             onRowClick={row => {
-              if (row.uuid === undefined) return;
               closeModal("modalExpand");
-              setFilters(prevValues => ({
-                ...prevValues,
-                uuid: row.uuid
-              }));
+              if (row?.country_slug) {
+                setFilters(prevValues => ({
+                  ...prevValues,
+                  uuid: row.uuid as string,
+                  country:
+                    dashboardCountries?.find(country => country.country_slug === row?.country_slug) ||
+                    prevValues.country
+                }));
+              }
+
+              if (row.uuid) {
+                setFilters(prevValues => ({
+                  ...prevValues,
+                  uuid: row.uuid
+                }));
+              }
+              return;
             }}
           />
         </div>
@@ -307,11 +320,23 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
             columns={columns}
             data={data}
             onRowClick={row => {
-              if (row.uuid === undefined) return;
-              setFilters(prevValues => ({
-                ...prevValues,
-                uuid: row.uuid
-              }));
+              if (row?.country_slug) {
+                setFilters(prevValues => ({
+                  ...prevValues,
+                  uuid: row.uuid as string,
+                  country:
+                    dashboardCountries?.find(country => country.country_slug === row?.country_slug) ||
+                    prevValues.country
+                }));
+              }
+
+              if (row.uuid) {
+                setFilters(prevValues => ({
+                  ...prevValues,
+                  uuid: row.uuid
+                }));
+              }
+              return;
             }}
             classNameTableWrapper={
               filters.country.id === 0 ? "" : "!max-h-[391px] lg:!max-h-[423px] wide:!max-h-[457  px]"

diff --git a/src/pages/dashboard/components/GraphicIconDashboard.tsx b/src/pages/dashboard/components/GraphicIconDashboard.tsx
@@ -17,7 +17,6 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
     x: 0,
     y: 0
   });
-  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
 
   const colorIconLabel = (label: string): { color: string; icon: keyof typeof IconNames } => {
     switch (label) {
@@ -51,12 +50,10 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
       x: event.pageX,
       y: event.pageY
     });
-    setHoveredItem(label);
   };
 
   const handleMouseLeave = () => {
     setTooltip({ text: null, label: null, x: 0, y: 0 });
-    setHoveredItem(null);
   };
 
   return (
@@ -68,11 +65,10 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
             return (
               <div
                 className={classNames(
-                  "relative h-9 w-0 lg:h-10",
+                  "relative h-9 w-0 hover:border hover:border-white lg:h-10",
                   colorIconLabel(item.label).color,
                   index === 0 && "rounded-l",
-                  index === data.length - 1 && "rounded-r",
-                  hoveredItem === item.label && "border border-white"
+                  index === data.length - 1 && "rounded-r"
                 )}
                 style={{ width: `${percentage}%` }}
                 key={index}
@@ -91,15 +87,15 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
               transform: "translateX(-50%)"
             }}
           >
-            <span className="text-12-light text-darkCustom">{`${t(tooltip.label)} `}</span>
+            <span className="text-12-light text-darkCustom">{t(tooltip.label)}</span>
             <span className="text-12-bold text-darkCustom">{t(tooltip.text)}</span>
           </div>
         )}
         <div className="w-full">
           {data.map((item, index) => {
             const percentage = getPercentage(item.value, maxValue);
             return (
-              <div key={index} className={`${index + 1 !== data.length && "border-b"} w-full border-grey-350 py-2`}>
+              <div key={index} className={`${index + 1 !== data.length ? "border-b" : ""} w-full border-grey-350 py-2`}>
                 <div className="mb-1 flex w-full justify-between">
                   <div className="flex gap-1">
                     <Icon name={IconNames[colorIconLabel(item.label).icon]} />
@@ -118,9 +114,8 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
                 >
                   <div
                     className={classNames(
-                      "relative h-4 w-0 rounded lg:h-5",
-                      colorIconLabel(item.label).color,
-                      hoveredItem === item.label && "border border-white"
+                      "relative h-4 w-0 rounded hover:border hover:border-white lg:h-5",
+                      colorIconLabel(item.label).color
                     )}
                     style={{ width: `${percentage}%` }}
                   />

diff --git a/src/pages/dashboard/index.page.tsx b/src/pages/dashboard/index.page.tsx
@@ -184,6 +184,7 @@ const Dashboard = () => {
           total_jobs_created: number;
           hectares_restored: number;
         }) => ({
+          country_slug: item.country_slug,
           country: `${item.country}_/flags/${item.country_slug.toLowerCase()}.svg`,
           project: item.number_of_projects.toLocaleString(),
           treesPlanted: item.total_trees_planted.toLocaleString(),