slider range for radd legend

Vizzuality · Mar 18, 2024 · 7a3a108 · 7a3a108
1 parent 133e861
commit 7a3a108
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/client/src/components/ui/slider.tsx b/client/src/components/ui/slider.tsx
@@ -16,6 +16,7 @@ const Slider = React.forwardRef<
       <SliderPrimitive.Range className="absolute h-full bg-navy-400" />
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-navy-400 bg-navy-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-navy-400 bg-navy-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;

diff --git a/client/src/containers/analysis-eudr/map/legend/radd-slider.tsx b/client/src/containers/analysis-eudr/map/legend/radd-slider.tsx
@@ -1,37 +1,54 @@
+import { useState } from 'react';
 import { useDebounce } from 'rooks';
+import { format } from 'date-fns';
 
 import layersData from '../layers.json';
 
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { useAppDispatch } from '@/store/hooks';
 import { setContextualLayer } from '@/store/features/eudr';
 import { Slider } from '@/components/ui/slider';
 
 const LAYERD_ID = 'real-time-deforestation-alerts-since-2020-radd';
+const dateFormatter = (date: string) => format(date, 'yyyy MMM dd');
 
 const RADDSlider = () => {
   const dispatch = useAppDispatch();
-  const { contextualLayers } = useAppSelector((state) => state.eudr);
+  const [values, setValues] = useState<number[]>([0, 0]);
   const data = layersData.find((layer) => layer.id === LAYERD_ID);
   const dates = data?.legend?.dates;
-
-  console.log(contextualLayers);
+  const handleValueChange = useDebounce((valuesRange) => {
+    dispatch(
+      setContextualLayer({
+        layer: LAYERD_ID,
+        configuration: { dateFrom: dates[valuesRange[0]], dateTo: dates[valuesRange[1]] },
+      }),
+    );
+  }, 1000);
 
   return (
     <div className="space-y-2">
+      <div className="flex items-center space-x-2 py-2 text-2xs text-gray-500">
+        <div>From</div>
+        <div className="rounded-sm border border-navy-400 px-2 py-1 text-navy-400">
+          {dateFormatter(dates[values[0]])}
+        </div>
+        <div>to</div>
+        <div className="rounded-sm border border-navy-400 px-2 py-1 text-navy-400">
+          {dateFormatter(dates[values[1]])}
+        </div>
+      </div>
       <Slider
         defaultValue={[0, dates.length - 1]}
+        value={values}
         min={0}
         max={dates.length - 1}
         step={1}
         className="mt-4"
-        onValueChange={(valuesRange) =>
-          dispatch(
-            setContextualLayer({
-              layer: LAYERD_ID,
-              configuration: { dateFrom: dates[valuesRange[0]], dateTo: dates[valuesRange[1]] },
-            }),
-          )
-        }
+        onValueChange={(values) => {
+          setValues(values);
+          handleValueChange(values);
+        }}
+        minStepsBetweenThumbs={1}
       />
       <div className="flex justify-between">
         {[dates[0], dates[dates.length - 1]].map((year) => (