CR

NASA-IMPACT · Nov 16, 2022 · 8f97943 · 8f97943
1 parent b43d002
commit 8f97943
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/app/scripts/components/analysis/define/aoi-selector.tsx b/app/scripts/components/analysis/define/aoi-selector.tsx
@@ -75,28 +75,25 @@ export default function AoiSelector({
       : null;
   }, [qsFeature]);
 
-  const [currentRegionPreset, setCurrentRegionPreset] =
-    useState<RegionPreset | null>(null);
+  const setFeature = useCallback((feature: Feature<Polygon>) => {
+    onAoiEvent('aoi.set-feature', { feature });
+    const featureBbox = bbox(feature) as [number, number, number, number];
+    mapRef.current?.instance?.fitBounds(featureBbox, { padding: 32 });
+  }, [onAoiEvent]);
+
   const onRegionPresetClick = useCallback((preset: RegionPreset) => {
-    setCurrentRegionPreset(preset);
-  }, []);
+    setFeature({ ...FeatureByRegionPreset[preset], id: 'region-preset-feature' });
+  }, [setFeature]);
 
   // Use the feature from the url qs or the region preset as the initial state to center the map.
   useEffect(() => {
-    if (qsPolygon || currentRegionPreset) {
-      const polygon = currentRegionPreset
-        ? FeatureByRegionPreset[currentRegionPreset]
-        : qsPolygon;
-      if (polygon) {
-        onAoiEvent('aoi.set-feature', { feature: polygon });
-        const featureBbox = bbox(polygon) as [number, number, number, number];
-        mapRef.current?.instance?.fitBounds(featureBbox, { padding: 32 });
-      }
+    if (qsPolygon) {
+      setFeature(qsPolygon);
     } else {
       onAoiEvent('aoi.clear');
       mapRef.current?.instance?.flyTo({ zoom: 1, center: [0, 0] });
     }
-  }, [onAoiEvent, qsPolygon, currentRegionPreset]);
+  }, [onAoiEvent, qsPolygon, setFeature]);
 
   return (
     <Fold>

diff --git a/app/scripts/components/analysis/define/index.tsx b/app/scripts/components/analysis/define/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, MouseEvent } from 'react';
 import styled from 'styled-components';
 import { uniqBy } from 'lodash';
 import { media, multiply, themeVal } from '@devseed-ui/theme-provider';
@@ -135,7 +135,8 @@ export default function Analysis() {
   );
 
   const onDatePresetClick = useCallback(
-    (preset: DateRangePreset) => {
+    (e: MouseEvent, preset: DateRangePreset) => {
+      e.preventDefault();
       const { start, end } = getRangeFromPreset(preset);
       setAnalysisParam('start', start);
       setAnalysisParam('end', end);
@@ -269,31 +270,35 @@ export default function Analysis() {
                   <li>
                     <DropMenuItem
                       role='button'
-                      onClick={() => onDatePresetClick('thisYear')}
+                      href='#'
+                      onClick={(e) => onDatePresetClick(e, 'yearToDate')}
                     >
                       This year
                     </DropMenuItem>
                   </li>
                   <li>
                     <DropMenuItem
                       role='button'
-                      onClick={() => onDatePresetClick('last30Days')}
+                      href='#'
+                      onClick={(e) => onDatePresetClick(e, 'last30Days')}
                     >
                       Last 30 days
                     </DropMenuItem>
                   </li>
                   <li>
                     <DropMenuItem
                       role='button'
-                      onClick={() => onDatePresetClick('lastYear')}
+                      href='#'
+                      onClick={(e) => onDatePresetClick(e, 'lastYear')}
                     >
                       Last year
                     </DropMenuItem>
                   </li>
                   <li>
                     <DropMenuItem
                       role='button'
-                      onClick={() => onDatePresetClick('last10Years')}
+                      href='#'
+                      onClick={(e) => onDatePresetClick(e, 'last10Years')}
                     >
                       Last 10 years
                     </DropMenuItem>

diff --git a/app/scripts/utils/date.ts b/app/scripts/utils/date.ts
@@ -152,15 +152,15 @@ export function inputFormatToDate(inputFormat: string) {
 }
 
 export type DateRangePreset =
-  | 'thisYear'
+  | 'yearToDate'
   | 'last30Days'
   | 'lastYear'
   | 'last10Years';
 export function getRangeFromPreset(preset: DateRangePreset): {
   start: Date;
   end: Date;
 } {
-  const end = preset === 'thisYear' ? endOfYear(new Date()) : new Date();
+  const end = new Date();
   let start = startOfYear(new Date());
   if (preset === 'last30Days') {
     start = sub(end, { days: 30 });