Merge pull request #1165 from Vizzuality/fix/widgets-deck

Fix/widgets deck
Vizzuality · Aug 16, 2024 · 41e5651 · 41e5651
2 parents cdee3f5 + 1a27a6e
commit 41e5651
Show file tree

Hide file tree

Showing 53 changed files with 189 additions and 190 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   },
   "engines": {
     "node": "~18",
-    "yarn": "3.5.0"
+    "yarn": "3.6.0"
   },
   "dependencies": {
     "@artsy/fresnel": "6.1.0",
@@ -114,5 +114,5 @@
   "husky": {
     "pre-commit": "yarn lint"
   },
-  "packageManager": "yarn@3.5.0"
+  "packageManager": "yarn@3.6.0"
 }
diff --git a/src/components/contextual/contextual-basemaps.tsx b/src/components/contextual/contextual-basemaps.tsx
@@ -16,13 +16,14 @@ import type { ContextualBasemapsId } from 'types/widget';
 
 const BasemapsMapSettings = () => {
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
-  const defaultActive = activeLayers.find((layer) => layer.id.includes('planet'))?.id || 'no-layer';
+  const defaultActive =
+    activeLayers?.find((layer) => layer.id.includes('planet'))?.id || 'no-layer';
   const [isActive, setIsActive] = useState(defaultActive);
 
   const handleClick = useCallback(
     (id) => {
       setIsActive(id);
-      const noPlanetLayers = activeLayers.filter((w) => !w.id.includes('planet_medres'));
+      const noPlanetLayers = activeLayers?.filter((w) => !w.id.includes('planet_medres'));
       const layersUpdate =
         id === 'no-layer'
           ? noPlanetLayers

diff --git a/src/components/contextual/hi-res-extent-basemap.tsx b/src/components/contextual/hi-res-extent-basemap.tsx
@@ -16,15 +16,15 @@ import type { ContextualBasemapsId } from 'types/widget';
 const HighResolutionExtentBasemap = () => {
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
   const defaultActive =
-    activeLayers.find((layer) => layer.id === 'hi-res-extent')?.id || 'no-layer';
+    activeLayers?.find((layer) => layer.id === 'hi-res-extent')?.id || 'no-layer';
   const [isActive, setIsActive] = useState(defaultActive);
 
   const handleClick = useCallback(
     (id) => {
       setIsActive(id);
       const layersUpdate =
         id === 'no-layer'
-          ? activeLayers.filter((w) => w.id !== 'hi-res-extent')
+          ? activeLayers?.filter((w) => w.id !== 'hi-res-extent')
           : ([
               ...activeLayers,
               {

diff --git a/src/components/highlighted-places/index.tsx b/src/components/highlighted-places/index.tsx
@@ -17,7 +17,7 @@ const HighlightedPlaces = ({ onSelectLocation }: { onSelectLocation: () => void
   const {
     query: { params },
   } = useRouter();
-  const locationType = params?.[0] as LocationTypes;
+  const locationType = (params?.[0] || 'worldwide') as LocationTypes;
   const id = params?.[1];
 
   const {

diff --git a/src/components/planet-date-select/index.tsx b/src/components/planet-date-select/index.tsx
@@ -33,7 +33,7 @@ const DateSelect = ({
   const { data: dates } = useMosaicsFromSeriesPlanetSatelliteBasemaps(mosaic_id);
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
   const layerToUpdate = useMemo(
-    () => activeLayers.find((layer) => layer.id === id),
+    () => activeLayers?.find((layer) => layer.id === id),
     [activeLayers]
   );
 
@@ -49,7 +49,7 @@ const DateSelect = ({
 
   const handleDate = useCallback(
     (e) => {
-      const filteredLayers = activeLayers.filter((l) => l.id !== id);
+      const filteredLayers = activeLayers?.filter((l) => l.id !== id);
       if (!!layerToUpdate) {
         setActiveLayers([
           {

diff --git a/src/components/suggested-layers/index.tsx b/src/components/suggested-layers/index.tsx
@@ -35,12 +35,12 @@ const SuggestedLayers = ({
 }: SuggestionTypes) => {
   const Info = INFO[id];
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
-  const activeLayersIds = activeLayers.map((l) => l.id);
-  const isActive = useMemo(() => activeLayersIds.includes(id), [activeLayersIds, id]);
+  const activeLayersIds = activeLayers?.map((l) => l.id);
+  const isActive = useMemo(() => activeLayersIds?.includes(id), [activeLayersIds, id]);
 
   const handleClick = useCallback(() => {
     const layersUpdate = isActive
-      ? activeLayers.filter((w) => w.id !== id)
+      ? activeLayers?.filter((w) => w.id !== id)
       : ([{ id, opacity: '1', visibility: 'visible' }, ...activeLayers] as ActiveLayers[]);
     setActiveLayers(layersUpdate);
   }, [isActive, activeLayers, setActiveLayers, id]);

diff --git a/src/components/widget-controls/index.tsx b/src/components/widget-controls/index.tsx
@@ -35,11 +35,11 @@ const WidgetControls = ({ id, content }: WidgetControlsType) => {
   const locationTool = useRecoilValue(locationToolAtom);
 
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
-  const activeLayersIds = activeLayers.map((l) => l.id);
+  const activeLayersIds = activeLayers?.map((l) => l.id);
 
   const isActive = useMemo(() => {
     // Check if the id is included in activeLayersIds
-    const isCurrentlyActive = activeLayersIds.includes(id);
+    const isCurrentlyActive = activeLayersIds?.includes(id);
 
     // Check if any id in activeLayersIds starts with 'national_dashboard'
     const isAnyActiveNationalDashboard =
@@ -64,7 +64,7 @@ const WidgetControls = ({ id, content }: WidgetControlsType) => {
     setActiveLayers(layersUpdate);
   }, [isActive, activeLayers, setActiveLayers, id]);
 
-  const HELPER_ID = id === activeLayers[0]?.id;
+  const HELPER_ID = id === activeLayers?.[0]?.id;
 
   const showDownloadInfoHelpers =
     !isMapSettingsOpen && HELPER_ID && (locationTool === 'worldwide' || locationTool === 'search');

diff --git a/src/containers/categories-menu/index.tsx b/src/containers/categories-menu/index.tsx
@@ -34,7 +34,7 @@ const Category = () => {
       const activeWidgetsIds = widgetsFiltered.map((widget) => widget.slug);
       const activeLayersIds: ActiveLayers[] = LAYERS_BY_CATEGORY[
         event.currentTarget.value as string
-      ].map((id) => ({
+      ]?.map((id) => ({
         id: id as WidgetSlugType | ContextualBasemapsId | 'custom-area',
         opacity: '1',
         visibility: 'visible',
@@ -50,45 +50,48 @@ const Category = () => {
     <div>
       <p className="text-xs font-bold uppercase tracking-[1px]">presets</p>
       <div className="grid grid-cols-3 gap-4 py-2">
-        {CATEGORY_OPTIONS.map((category) => (
-          <button
-            key={category.value}
-            type="button"
-            value={category.value}
-            onClick={handleClick}
-            data-testid={category.value}
-          >
-            <div
-              className={cn({
-                'relative flex-1 items-center justify-center rounded-xl border border-black/15 p-3 text-xs md:p-5 md:text-sm':
-                  true,
-                'border-2 border-brand-800 font-bold text-brand-800':
-                  category.value === categorySelected ||
-                  (categorySelected === 'all_datasets' && category.value === 'custom'),
-              })}
-              defaultChecked={'distribution_and_change' === category.value}
+        {CATEGORY_OPTIONS.map((category) => {
+          return (
+            <button
+              key={category.value}
+              type="button"
+              value={category.value}
+              onClick={handleClick}
+              data-testid={category.value}
             >
-              <h4 className="flex min-h-[40px] items-center justify-center">{category.label}</h4>
-              <Checkbox
+              <div
                 className={cn({
-                  'absolute bottom-1 right-1 h-4 w-4 rounded-full border-none md:h-6 md:w-6': true,
+                  'relative flex-1 items-center justify-center rounded-xl border border-black/15 p-3 text-xs md:p-5 md:text-sm':
+                    true,
+                  'border-2 border-brand-800 font-bold text-brand-800':
+                    category.value === categorySelected ||
+                    (categorySelected === 'all_datasets' && category.value === 'custom'),
                 })}
-                checked={
-                  category.value === categorySelected ||
-                  (categorySelected === 'all_datasets' && category.value === 'custom')
-                }
+                defaultChecked={'distribution_and_change' === category.value}
               >
-                <CheckboxIndicator>
-                  <Icon
-                    icon={CHECK_SVG}
-                    className="h-full w-full fill-current text-white"
-                    description="Checkmark"
-                  />
-                </CheckboxIndicator>
-              </Checkbox>
-            </div>
-          </button>
-        ))}
+                <h4 className="flex min-h-[40px] items-center justify-center">{category.label}</h4>
+                <Checkbox
+                  className={cn({
+                    'absolute bottom-1 right-1 h-4 w-4 rounded-full border-none md:h-6 md:w-6':
+                      true,
+                  })}
+                  checked={
+                    category.value === categorySelected ||
+                    (categorySelected === 'all_datasets' && category.value === 'custom')
+                  }
+                >
+                  <CheckboxIndicator>
+                    <Icon
+                      icon={CHECK_SVG}
+                      className="h-full w-full fill-current text-white"
+                      description="Checkmark"
+                    />
+                  </CheckboxIndicator>
+                </Checkbox>
+              </div>
+            </button>
+          );
+        })}
       </div>
     </div>
   );

diff --git a/src/containers/datasets/alerts/layer.tsx b/src/containers/datasets/alerts/layer.tsx
@@ -10,7 +10,7 @@ import { useLayers, useSources } from './hooks';
 
 const MangrovesAlertsLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCES = useSources();
   const LAYERS = useLayers({
     id,

diff --git a/src/containers/datasets/alerts/widget.tsx b/src/containers/datasets/alerts/widget.tsx
@@ -40,7 +40,7 @@ const AlertsWidget = () => {
   }, []);
 
   const isActive = useMemo(
-    () => activeLayers.find(({ id }) => id === 'planet_medres_visual_monthly'),
+    () => activeLayers?.find(({ id }) => id === 'planet_medres_visual_monthly'),
     [activeLayers]
   );
 

diff --git a/src/containers/datasets/biomass/layer.tsx b/src/containers/datasets/biomass/layer.tsx
@@ -10,7 +10,7 @@ import { useLayer, useSource } from './hooks';
 
 const MangrovesBiomassLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYER = useLayer({
     id,

diff --git a/src/containers/datasets/blue-carbon/layer.tsx b/src/containers/datasets/blue-carbon/layer.tsx
@@ -10,7 +10,7 @@ import { useLayer, useSource } from './hooks';
 
 const MangrovesLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYER = useLayer({
     id,

diff --git a/src/containers/datasets/contextual-layers/allen-coral-reef/layer.tsx b/src/containers/datasets/contextual-layers/allen-coral-reef/layer.tsx
@@ -12,7 +12,7 @@ import { useLayer, useSource } from './hooks';
 
 const MangrovesAllenCoralReefLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYER = useLayer({
     id,

diff --git a/src/containers/datasets/contextual-layers/basemaps-planet/analytic/layer.tsx b/src/containers/datasets/contextual-layers/basemaps-planet/analytic/layer.tsx
@@ -12,7 +12,7 @@ import { useLayer, useSource } from './hooks';
 
 export const PlanetSatelliteBasemapAnalyticLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
 
   const SOURCE = useSource({
     year: activeLayer.settings?.date,

diff --git a/src/containers/datasets/contextual-layers/basemaps-planet/visual/layer.tsx b/src/containers/datasets/contextual-layers/basemaps-planet/visual/layer.tsx
@@ -12,7 +12,7 @@ import { useLayer, useSource } from './hooks';
 
 export const PlanetSatelliteBasemapVisualLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
 
   const SOURCE = useSource({
     year: activeLayer.settings?.date,

diff --git a/src/containers/datasets/contextual-layers/global-tidal-wetland-change/layer.tsx b/src/containers/datasets/contextual-layers/global-tidal-wetland-change/layer.tsx
@@ -12,7 +12,7 @@ import { useLayer, useSource } from './hooks';
 
 const MangroveGlobalTidalWetlandChangeLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYER = useLayer({
     id,

diff --git a/src/containers/datasets/contextual-layers/protected-areas/layer.tsx b/src/containers/datasets/contextual-layers/protected-areas/layer.tsx
@@ -12,7 +12,7 @@ import { useLayers, useSource } from './hooks';
 
 const MangrovesProtectedAreasLayer = ({ beforeId, id, onAdd, onRemove }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYERS = useLayers({
     id,

diff --git a/src/containers/datasets/contextual-layers/salt-marsh/layer.tsx b/src/containers/datasets/contextual-layers/salt-marsh/layer.tsx
@@ -12,7 +12,7 @@ import { useLayer, useSource } from './hooks';
 
 const MangrovesSaltMarshLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYER = useLayer({
     id,

diff --git a/src/containers/datasets/contextual-layers/tidal-flats/layer.tsx b/src/containers/datasets/contextual-layers/tidal-flats/layer.tsx
@@ -12,7 +12,7 @@ import { useLayer, useSource } from './hooks';
 
 const MangroveTidalFlatsLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYER = useLayer({
     id,

diff --git a/src/containers/datasets/customize-widgets-deck/widget.tsx b/src/containers/datasets/customize-widgets-deck/widget.tsx
@@ -31,8 +31,7 @@ const CustomizeWidgetsDeck = () => {
   const {
     query: { params },
   } = useRouter();
-  const locationType = params?.[0] || ('worldwide' as LocationTypes);
-
+  const locationType = (params?.[0] || 'worldwide') as LocationTypes;
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       setAnimateState('end');
@@ -51,7 +50,7 @@ const CustomizeWidgetsDeck = () => {
   }, [animateState]);
 
   const filteredWidgetsByLocationType = widgets
-    .filter((w) => w.locationType.includes(locationType))
+    .filter((w) => w.locationType?.includes(locationType))
     .map((w) => w.slug);
 
   const filteredWidgetsToDisplay = filteredWidgetsByLocationType.filter(

diff --git a/src/containers/datasets/drivers-change/layer.tsx b/src/containers/datasets/drivers-change/layer.tsx
@@ -10,7 +10,7 @@ import type { LayerProps } from 'types/layers';
 
 const MangrovesLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYERS = useLayers({
     id,

diff --git a/src/containers/datasets/fisheries/layer.tsx b/src/containers/datasets/fisheries/layer.tsx
@@ -10,7 +10,7 @@ import { useLayer, useSource } from './hooks';
 
 const MangrovesFisheriesLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource();
   const LAYER = useLayer({
     id,

diff --git a/src/containers/datasets/flood-protection/storms/layers/area.tsx b/src/containers/datasets/flood-protection/storms/layers/area.tsx
@@ -89,7 +89,7 @@ export function useLayers({
 
 const MangrovesFloodProtectionLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
 
   const SOURCE = useSource();
   const LAYERS = useLayers({

diff --git a/src/containers/datasets/flood-protection/storms/layers/population.tsx b/src/containers/datasets/flood-protection/storms/layers/population.tsx
@@ -60,7 +60,7 @@ export function useLayers({
 
 const MangrovesFloodProtectionPopulationLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
 
   const SOURCE = useSource();
   const LAYERS = useLayers({

diff --git a/src/containers/datasets/flood-protection/storms/layers/stock.tsx b/src/containers/datasets/flood-protection/storms/layers/stock.tsx
@@ -60,7 +60,7 @@ export function useLayers({
 
 const MangrovesFloodProtectionStockLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
 
   const SOURCE = useSource();
   const LAYERS = useLayers({

diff --git a/src/containers/datasets/flood-protection/widget.tsx b/src/containers/datasets/flood-protection/widget.tsx
@@ -58,12 +58,12 @@ const FloodProtection = ({
   const id = `mangrove_coastal_protection_${indicator}` satisfies WidgetSlugType;
 
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
-  const activeLayersIds = activeLayers.map((l) => l.id);
-  const isActive = useMemo(() => activeLayersIds.includes(id), [activeLayersIds, id]);
+  const activeLayersIds = activeLayers?.map((l) => l.id);
+  const isActive = useMemo(() => activeLayersIds?.includes(id), [activeLayersIds, id]);
 
   const handleClick = () => {
     const layersUpdate = isActive
-      ? activeLayers.filter((w) => w.id !== id)
+      ? activeLayers?.filter((w) => w.id !== id)
       : ([{ id, opacity: '1', visibility: 'visible' }, ...activeLayers] as ActiveLayers[]);
     setActiveLayers(layersUpdate);
   };

diff --git a/src/containers/datasets/habitat-extent/layer.tsx b/src/containers/datasets/habitat-extent/layer.tsx
@@ -13,7 +13,7 @@ import { activeLayersAtom } from 'store/layers';
 
 const MangrovesHabitatExtentLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === id);
+  const activeLayer = activeLayers?.find((l) => l.id === id);
   const year = useRecoilValue(habitatExtentSettings);
   const { data } = useMangroveHabitatExtent({ year });
   const years = data?.years?.sort() || [];