refact(overview): use relative nav paths + helper fn

also replaces a useDispatch elsewhere with useAppDispatch
bento-platform · Nov 6, 2024 · 56cb630 · 56cb630
1 parent 47d4f7e
commit 56cb630
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/src/js/components/Overview/Chart.tsx b/src/js/components/Overview/Chart.tsx
@@ -1,35 +1,35 @@
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import type { BarChartProps } from 'bento-charts';
 import { BarChart, Histogram, PieChart } from 'bento-charts';
 import { ChoroplethMap } from 'bento-charts/dist/maps';
 
 import { CHART_HEIGHT, PIE_CHART_HEIGHT } from '@/constants/overviewConstants';
-import { useSelectedScope } from '@/features/metadata/hooks';
+import { useTranslationFn } from '@/hooks';
 import type { ChartData } from '@/types/data';
 import type { ChartConfig } from '@/types/chartConfig';
 import { CHART_TYPE_BAR, CHART_TYPE_HISTOGRAM, CHART_TYPE_CHOROPLETH, CHART_TYPE_PIE } from '@/types/chartConfig';
-import { scopeToUrl } from '@/utils/router';
 
 interface ChartEvent {
   activePayload: Array<{ payload: { x: string } }>;
 }
 
 const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) => {
-  const { t, i18n } = useTranslation();
+  const t = useTranslationFn();
   const navigate = useNavigate();
-  const { scope } = useSelectedScope();
   const translateMap = ({ x, y }: { x: string; y: number }) => ({ x: t(x), y });
   const removeMissing = ({ x }: { x: string }) => x !== 'missing';
 
+  const goToSearch = (id: string, val: string | undefined) => {
+    if (val === undefined) return;
+    navigate(`../search?${id}=${val}`);
+  };
+
   const barChartOnChartClickHandler: BarChartProps['onChartClick'] = (e: ChartEvent) => {
-    if (e.activePayload.length === 0) return;
-    const d = e.activePayload[0];
-    navigate(`/${i18n.language}${scopeToUrl(scope)}/search?${id}=${d.payload.x}`);
+    goToSearch(id, e.activePayload[0]?.payload.x); // activePayload is [] if no current active bar
   };
   const pieChartOnClickHandler = (d: { name: string }) => {
-    navigate(`/${i18n.language}${scopeToUrl(scope)}/search?${id}=${d.name}`);
+    goToSearch(id, d.name);
   };
 
   const { chart_type: type } = chartConfig;
@@ -81,9 +81,7 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           zoom={zoom}
           colorMode={colorMode}
           onClick={(d) => {
-            const val = d.properties?.[categoryProp];
-            if (val === undefined) return;
-            navigate(`/${i18n.language}/search?${id}=${val}`);
+            goToSearch(id, d.properties?.[categoryProp]);
           }}
           renderPopupBody={(_f, d) => (
             <>

diff --git a/src/js/components/Overview/ChartCard.tsx b/src/js/components/Overview/ChartCard.tsx
@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { CSSProperties } from 'react';
 import { memo, useRef } from 'react';
 import { Button, Card, Row, Space, Tooltip } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
@@ -9,10 +9,10 @@ import { useElementWidth, useTranslationFn } from '@/hooks';
 import type { ChartDataField } from '@/types/data';
 import SmallChartCardTitle from '@/components/Util/SmallChartCardTitle';
 
-const CARD_STYLE: React.CSSProperties = { height: '415px', borderRadius: '11px', ...BOX_SHADOW };
-const ROW_EMPTY_STYLE: React.CSSProperties = { height: `${CHART_HEIGHT}px` };
+const CARD_STYLE: CSSProperties = { height: '415px', borderRadius: '11px', ...BOX_SHADOW };
+const ROW_EMPTY_STYLE: CSSProperties = { height: `${CHART_HEIGHT}px` };
 
-const ChartCard: React.FC<ChartCardProps> = memo(({ section, chart, onRemoveChart }) => {
+const ChartCard = memo(({ section, chart, onRemoveChart }: ChartCardProps) => {
   const t = useTranslationFn();
   const containerRef = useRef<HTMLDivElement>(null);
   const width = useElementWidth(containerRef, chart.width);

diff --git a/src/js/components/Overview/OverviewDisplayData.tsx b/src/js/components/Overview/OverviewDisplayData.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
 import { Space } from 'antd';
 
 import { disableChart } from '@/features/data/data.store';
+import { useAppDispatch } from '@/hooks';
 import { useSmallScreen } from '@/hooks/useResponsiveContext';
 
 import { CHART_WIDTH, GRID_GAP } from '@/constants/overviewConstants';
@@ -12,7 +12,7 @@ import ChartCard from './ChartCard';
 import type { ChartDataField } from '@/types/data';
 
 const OverviewDisplayData = ({ section, allCharts }: OverviewDisplayDataProps) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const isSmallScreen = useSmallScreen();
 
   const containerStyle = {