moves Date object away from store

Vizzuality · Mar 12, 2024 · d2ea8ad · d2ea8ad
1 parent b2b85fb
commit d2ea8ad
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 35 deletions.
diff --git a/...c/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx b/...c/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx
@@ -7,7 +7,7 @@ import { CATEGORIES } from '../..';
 
 import { eudr } from '@/store/features/eudr';
 import { useAppSelector } from '@/store/hooks';
-import { dateFormatter, useEUDRData } from '@/hooks/eudr';
+import { useEUDRData } from '@/hooks/eudr';
 
 import type BreakdownItem from '../breakdown-item';
 
@@ -19,8 +19,8 @@ const DeforestationFreeSuppliersBreakdown = () => {
 
   const { data } = useEUDRData(
     {
-      startAlertDate: dateFormatter(dates.from),
-      endAlertDate: dateFormatter(dates.to),
+      startAlertDate: dates.from,
+      endAlertDate: dates.to,
       producerIds: suppliers?.map(({ value }) => value),
       materialIds: materials?.map(({ value }) => value),
       originIds: origins?.map(({ value }) => value),

diff --git a/...iners/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx b/...iners/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx
@@ -7,7 +7,7 @@ import { CATEGORIES } from '../..';
 
 import { eudr } from '@/store/features/eudr';
 import { useAppSelector } from '@/store/hooks';
-import { dateFormatter, useEUDRData } from '@/hooks/eudr';
+import { useEUDRData } from '@/hooks/eudr';
 
 import type BreakdownItem from '../breakdown-item';
 
@@ -19,8 +19,8 @@ const SuppliersWithDeforestationAlertsBreakdown = () => {
 
   const { data } = useEUDRData(
     {
-      startAlertDate: dateFormatter(dates.from),
-      endAlertDate: dateFormatter(dates.to),
+      startAlertDate: dates.from,
+      endAlertDate: dates.to,
       producerIds: suppliers?.map(({ value }) => value),
       materialIds: materials?.map(({ value }) => value),
       originIds: origins?.map(({ value }) => value),

diff --git a/...ontainers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx b/...ontainers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx
@@ -7,7 +7,7 @@ import { CATEGORIES } from '../..';
 
 import { eudr } from '@/store/features/eudr';
 import { useAppSelector } from '@/store/hooks';
-import { dateFormatter, useEUDRData } from '@/hooks/eudr';
+import { useEUDRData } from '@/hooks/eudr';
 
 import type BreakdownItem from '../breakdown-item';
 
@@ -19,8 +19,8 @@ const SuppliersWithNoLocationDataBreakdown = () => {
 
   const { data } = useEUDRData(
     {
-      startAlertDate: dateFormatter(dates.from),
-      endAlertDate: dateFormatter(dates.to),
+      startAlertDate: dates.from,
+      endAlertDate: dates.to,
       producerIds: suppliers?.map(({ value }) => value),
       materialIds: materials?.map(({ value }) => value),
       originIds: origins?.map(({ value }) => value),

diff --git a/client/src/containers/analysis-eudr/category-list/index.tsx b/client/src/containers/analysis-eudr/category-list/index.tsx
@@ -7,7 +7,7 @@ import SuppliersWithNoLocationDataBreakdown from './breakdown/suppliers-with-no-
 import { Button } from '@/components/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { cn } from '@/lib/utils';
-import { useEUDRData, dateFormatter } from '@/hooks/eudr';
+import { useEUDRData } from '@/hooks/eudr';
 import { useAppSelector } from '@/store/hooks';
 import { eudr } from '@/store/features/eudr';
 import { themeColors } from '@/utils/colors';
@@ -47,8 +47,8 @@ export const CategoryList = (): JSX.Element => {
 
   const { data } = useEUDRData(
     {
-      startAlertDate: dateFormatter(dates.from),
-      endAlertDate: dateFormatter(dates.to),
+      startAlertDate: dates.from,
+      endAlertDate: dates.to,
       producerIds: suppliers?.map(({ value }) => value),
       materialIds: materials?.map(({ value }) => value),
       originIds: origins?.map(({ value }) => value),
@@ -73,7 +73,7 @@ export const CategoryList = (): JSX.Element => {
     <>
       {parsedData.map((category) => (
         <Collapsible
-          key={category.slug}
+          key={category.name}
           className="rounded-xl bg-gray-50 p-5"
           onOpenChange={() => {
             toggleCategory((prev) => ({
@@ -88,7 +88,7 @@ export const CategoryList = (): JSX.Element => {
                 className="block min-h-4 min-w-4 rounded-full border-2 transition-colors"
                 style={{
                   borderColor: category.color,
-                  ...(categories[category.slug] && {
+                  ...(categories[category.name] && {
                     backgroundColor: category.color,
                   }),
                 }}

diff --git a/client/src/containers/analysis-eudr/filters/years-range/index.tsx b/client/src/containers/analysis-eudr/filters/years-range/index.tsx
@@ -1,18 +1,19 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { UTCDate } from '@date-fns/utc';
 import { ChevronDown } from 'lucide-react';
+import { format } from 'date-fns';
 
 import { useAppDispatch, useAppSelector } from 'store/hooks';
 import { eudr, setFilters } from 'store/features/eudr';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
-import { dateFormatter } from '@/hooks/eudr';
 
 import type { DateRange } from 'react-day-picker';
+const dateFormatter = (date: Date) => format(date, 'yyyy-MM-dd');
 
 // ! the date range is hardcoded for now
-export const DATES_RANGE = [new UTCDate('2020-12-31'), new UTCDate()];
+export const DATES_RANGE = ['2020-12-31', dateFormatter(new Date())];
 
 const DatesRange = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -23,12 +24,26 @@ const DatesRange = (): JSX.Element => {
   const handleDatesChange = useCallback(
     (dates: DateRange) => {
       if (dates) {
-        dispatch(setFilters({ dates }));
+        dispatch(
+          setFilters({
+            dates: {
+              from: dateFormatter(dates.from),
+              to: dateFormatter(dates.to),
+            },
+          }),
+        );
       }
     },
     [dispatch],
   );
 
+  const datesToDate = useMemo(() => {
+    return {
+      from: dates.from ? new UTCDate(dates.from) : undefined,
+      to: dates.to ? new UTCDate(dates.to) : undefined,
+    };
+  }, [dates]);
+
   return (
     <Popover>
       <PopoverTrigger asChild>
@@ -37,9 +52,8 @@ const DatesRange = (): JSX.Element => {
           className="h-auto space-x-1 border border-gray-200 bg-white shadow-sm"
         >
           <span className="text-gray-500">
-            from{' '}
-            <span className="text-gray-900">{dates.from ? dateFormatter(dates.from) : '-'}</span> to{' '}
-            <span className="text-gray-900">{dates.to ? dateFormatter(dates.to) : '-'}</span>
+            from <span className="text-gray-900">{dates.from || '-'}</span> to{' '}
+            <span className="text-gray-900">{dates.to || '-'}</span>
           </span>
           <ChevronDown className="h-4 w-4" />
         </Button>
@@ -49,10 +63,10 @@ const DatesRange = (): JSX.Element => {
           mode="range"
           numberOfMonths={2}
           disabled={{
-            before: DATES_RANGE[0],
-            after: DATES_RANGE[1],
+            before: new UTCDate(DATES_RANGE[0]),
+            after: new UTCDate(DATES_RANGE[1]),
           }}
-          selected={dates}
+          selected={datesToDate}
           onSelect={handleDatesChange}
         />
       </PopoverContent>

diff --git a/client/src/containers/analysis-eudr/supplier-list-table/table/index.tsx b/client/src/containers/analysis-eudr/supplier-list-table/table/index.tsx
@@ -21,7 +21,7 @@ import {
   TableBody,
   TableCell,
 } from '@/components/ui/table';
-import { useEUDRData, dateFormatter } from '@/hooks/eudr';
+import { useEUDRData } from '@/hooks/eudr';
 import { useAppSelector } from '@/store/hooks';
 import { eudr } from '@/store/features/eudr';
 
@@ -60,8 +60,8 @@ const SuppliersListTable = (): JSX.Element => {
 
   const { data } = useEUDRData(
     {
-      startAlertDate: dateFormatter(dates.from),
-      endAlertDate: dateFormatter(dates.to),
+      startAlertDate: dates.from,
+      endAlertDate: dates.to,
       producerIds: suppliers?.map(({ value }) => value),
       materialIds: materials?.map(({ value }) => value),
       originIds: origins?.map(({ value }) => value),

diff --git a/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx b/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx
@@ -16,7 +16,7 @@ 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';
-import { useEUDRData, dateFormatter } from '@/hooks/eudr';
+import { useEUDRData } from '@/hooks/eudr';
 
 export const VIEW_BY_OPTIONS = [
   {
@@ -45,8 +45,8 @@ const SuppliersStackedBar = () => {
 
   const { data } = useEUDRData(
     {
-      startAlertDate: dateFormatter(dates.from),
-      endAlertDate: dateFormatter(dates.to),
+      startAlertDate: dates.from,
+      endAlertDate: dates.to,
       producerIds: suppliers?.map(({ value }) => value),
       materialIds: materials?.map(({ value }) => value),
       originIds: origins?.map(({ value }) => value),

diff --git a/client/src/hooks/eudr/index.ts b/client/src/hooks/eudr/index.ts
@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { format } from 'date-fns';
 
 import { apiService } from 'services/api';
 
@@ -8,8 +7,6 @@ import type { AdminRegionsTreesParams } from '@/hooks/admin-regions';
 import type { MaterialTreeItem, OriginRegion, Supplier } from '@/types';
 import type { UseQueryOptions } from '@tanstack/react-query';
 
-export const dateFormatter = (date: Date) => format(date, 'yyyy-MM-dd');
-
 export const useEUDRSuppliers = <T = Supplier[]>(
   params?: { producersIds: string[]; originsId: string[]; materialsId: string[] },
   options: UseQueryOptions<Supplier[], unknown, T> = {},

diff --git a/client/src/store/features/eudr/index.ts b/client/src/store/features/eudr/index.ts
@@ -15,8 +15,8 @@ export type EUDRState = {
     plots: Option[];
     suppliers: Option[];
     dates: {
-      from: Date;
-      to: Date;
+      from: string;
+      to: string;
     };
   };
 };