diff --git a/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx b/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx index 6207e4cd5..d0d35110d 100644 --- a/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx +++ b/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { BarChart, Bar, @@ -13,20 +13,19 @@ import { import CategoryList from '@/containers/analysis-eudr/category-list'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { Label as RadioLabel } from '@/components/ui/label'; +import { useAppDispatch, useAppSelector } from '@/store/hooks'; +import { eudr, setViewBy } from '@/store/features/eudr'; -const VIEW_BY_OPTIONS = [ +export const VIEW_BY_OPTIONS = [ { label: 'Commodities', value: 'commodities', - defaultChecked: true, }, { label: 'Countries', value: 'countries', }, -]; - -const defaultViewBy = VIEW_BY_OPTIONS.find((option) => option.defaultChecked)?.value; +] as const; const data = [ { @@ -74,6 +73,16 @@ const data = [ ]; const SuppliersStackedBar = () => { + const { viewBy } = useAppSelector(eudr); + const dispatch = useAppDispatch(); + + const handleViewBy = useCallback( + (value: typeof viewBy) => { + dispatch(setViewBy(value)); + }, + [dispatch], + ); + return (
@@ -84,7 +93,11 @@ const SuppliersStackedBar = () => {

Suppliers by category

View by:
- + {VIEW_BY_OPTIONS.map((option) => (
diff --git a/client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts b/client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts index b404d7fd4..661b131e0 100644 --- a/client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts +++ b/client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts @@ -1 +1,3 @@ export { default } from './component'; + +export { VIEW_BY_OPTIONS } from './component'; diff --git a/client/src/store/features/eudr/index.ts b/client/src/store/features/eudr/index.ts new file mode 100644 index 000000000..5b0a934d0 --- /dev/null +++ b/client/src/store/features/eudr/index.ts @@ -0,0 +1,30 @@ +import { createSlice } from '@reduxjs/toolkit'; + +import type { VIEW_BY_OPTIONS } from 'containers/analysis-eudr/suppliers-stacked-bar'; +import type { PayloadAction } from '@reduxjs/toolkit'; +import type { RootState } from 'store'; + +export type EUDRState = { + viewBy: (typeof VIEW_BY_OPTIONS)[number]['value']; +}; + +export const initialState: EUDRState = { + viewBy: 'commodities', +}; + +export const EUDRSlice = createSlice({ + name: 'eudr', + initialState, + reducers: { + setViewBy: (state, action: PayloadAction) => ({ + ...state, + viewBy: action.payload, + }), + }, +}); + +export const { setViewBy } = EUDRSlice.actions; + +export const eudr = (state: RootState) => state['eudr']; + +export default EUDRSlice.reducer; diff --git a/client/src/store/index.ts b/client/src/store/index.ts index b38766948..d77c384b5 100644 --- a/client/src/store/index.ts +++ b/client/src/store/index.ts @@ -16,6 +16,7 @@ import analysisScenarios, { initialState as analysisScenariosInitialState, setScenarioToCompare, } from 'store/features/analysis/scenarios'; +import eudr from 'store/features/eudr'; import type { Action, ReducersMapObject, Middleware } from '@reduxjs/toolkit'; import type { AnalysisState } from './features/analysis'; @@ -26,6 +27,7 @@ const staticReducers = { 'analysis/filters': analysisFilters, 'analysis/map': analysisMap, 'analysis/scenarios': analysisScenarios, + eudr, }; const asyncReducers = {};