eudr store setup

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 (
     <div className="space-y-4">
       <div>
@@ -84,7 +93,11 @@ const SuppliersStackedBar = () => {
           <h3>Suppliers by category</h3>
           <div className="flex space-x-2">
             <div className="text-2xs uppercase">View by:</div>
-            <RadioGroup defaultValue={defaultViewBy} className="flex items-center space-x-2">
+            <RadioGroup
+              defaultValue={viewBy}
+              className="flex items-center space-x-2"
+              onValueChange={handleViewBy}
+            >
               {VIEW_BY_OPTIONS.map((option) => (
                 <div key={option?.value} className="flex items-center space-x-2">
                   <RadioGroupItem value={option.value} id={option.value} />

client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts

@@ -1 +1,3 @@
 export { default } from './component';
+
+export { VIEW_BY_OPTIONS } from './component';

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<EUDRState['viewBy']>) => ({
+      ...state,
+      viewBy: action.payload,
+    }),
+  },
+});
+
+export const { setViewBy } = EUDRSlice.actions;
+
+export const eudr = (state: RootState) => state['eudr'];
+
+export default EUDRSlice.reducer;

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 = {};