Merge pull request #72 from Vizzuality/client/fix/home-styles

Fix globe bbox bug
Vizzuality · Jul 29, 2024 · a322d0d · a322d0d
2 parents 57589a0 + ce466bf
commit a322d0d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 19 deletions.
diff --git a/client/src/components/map/constants.ts b/client/src/components/map/constants.ts
@@ -1,11 +1,15 @@
-import type { ViewState } from 'react-map-gl';
-
 import { CustomMapProps } from './types';
 
-export const DEFAULT_VIEW_STATE: Partial<ViewState> = {
+export const DEFAULT_VIEW_STATE = {
   zoom: 2,
-  latitude: 0,
-  longitude: 0,
+  pitch: 0,
+  bearing: 0,
+  padding: {
+    top: 50,
+    bottom: 50,
+    left: 50,
+    right: 50,
+  },
 };
 
 export const DEFAULT_PROPS: CustomMapProps = {

diff --git a/client/src/containers/globe/filters/item.tsx b/client/src/containers/globe/filters/item.tsx
@@ -34,15 +34,15 @@ const FilterItem = ({ filter: { id, options, title } }: FilterItemProps) => {
     }
   };
 
-  const isMoreThanOneSelected = !!filter && filter.length > 1;
+  const isMoreThanOneSelected = filter?.length === options.length;
 
   const handleSelectAll = () => {
     if (isMoreThanOneSelected) {
       setFilter([]);
     } else {
       setFilter(
-        options.reduce<string[]>((acc, { attributes }) => {
-          return !!attributes?.name ? [...acc, attributes?.name] : acc;
+        options.reduce<(number | string)[]>((acc, { id }) => {
+          return !!id ? [...acc, id] : acc;
         }, [])
       );
     }

diff --git a/client/src/containers/globe/index.tsx b/client/src/containers/globe/index.tsx
@@ -2,8 +2,11 @@
 
 import { useEffect } from 'react';
 
+import { useMap } from 'react-map-gl';
+
 import { useSetAtom } from 'jotai';
 import { ExternalLinkIcon } from 'lucide-react';
+import mapboxgl from 'mapbox-gl';
 
 import { cn } from '@/lib/classnames';
 
@@ -13,8 +16,7 @@ import { useSyncStep } from '@/store/stories';
 
 import useStories from '@/hooks/stories/useStories';
 
-import { DEFAULT_MAP_BBOX, DEFAULT_MAP_STATE } from '@/constants/map';
-
+import { DEFAULT_VIEW_STATE } from '@/components/map/constants';
 import { Button } from '@/components/ui/button';
 import Card from '@/components/ui/card';
 import GradientLine from '@/components/ui/gradient-line';
@@ -27,6 +29,13 @@ import Filters from './filters';
 import SearchStories from './search';
 import TopStories from './top-stories';
 
+type StoryMarker = {
+  markers: {
+    lat: number;
+    lng: number;
+  }[];
+};
+
 export default function Home() {
   const setTmpBbox = useSetAtom(tmpBboxAtom);
   const setLayers = useSetAtom(layersAtom);
@@ -35,11 +44,24 @@ export default function Home() {
 
   const { data: storiesData } = useStories();
   const storiesLength = storiesData?.data?.length;
+  const { default: map } = useMap();
 
   useEffect(() => {
-    const tmpbbox: [number, number, number, number] = DEFAULT_MAP_BBOX;
-    setTmpBbox({ bbox: tmpbbox, options: DEFAULT_MAP_STATE });
-  }, [setTmpBbox]);
+    const bounds = new mapboxgl.LngLatBounds();
+    storiesData?.data?.forEach(({ attributes }) => {
+      if (!(attributes?.marker as StoryMarker)?.markers?.length) return;
+      const { lat, lng } = (attributes?.marker as StoryMarker)?.markers?.[0] || {};
+      if (typeof lat != 'number' || typeof lng != 'number') return;
+      bounds.extend([lng, lat]);
+    });
+    if (bounds.isEmpty() || !map) return;
+    const center = bounds.getCenter();
+
+    setTmpBbox({
+      bbox: bounds.toArray().flat() as [number, number, number, number],
+      options: { ...DEFAULT_VIEW_STATE, latitude: center.lat, longitude: center.lng },
+    });
+  }, [map, setTmpBbox, storiesData?.data]);
 
   useEffect(() => {
     setLayers([]);

diff --git a/client/src/containers/story/steps/layouts/map-step.tsx b/client/src/containers/story/steps/layouts/map-step.tsx
@@ -67,13 +67,16 @@ const MapStepLayout = ({ step, showContent, storySummary }: MapStepLayoutProps)
             <div className="pointer-events-auto flex w-full max-w-full flex-wrap justify-between gap-4 rounded border border-gray-800 bg-[#335e6f] bg-opacity-50 px-6 py-4 backdrop-blur">
               {storySummary?.map((item) => (
                 <div className="space-y-1" key={item.title}>
-                  <div className="text-enlight-yellow-400 flex items-center gap-2">
+                  <div
+                    key={`${item.title}-title`}
+                    className="text-enlight-yellow-400 flex items-center gap-2"
+                  >
                     <h2 className="text-sm font-bold uppercase">{item.title}</h2>
                   </div>
-                  <div className="space-y-2">
+                  <div key={`${item.title}-content`} className="space-y-2">
                     {item.content?.map((c) => {
                       return (
-                        <div key={c.id} className="flex gap-2">
+                        <div key={`${c.id}-${c.attributes?.name}`} className="flex gap-2">
                           <>
                             {c.attributes?.link ? (
                               <a
@@ -85,9 +88,7 @@ const MapStepLayout = ({ step, showContent, storySummary }: MapStepLayoutProps)
                                 {c.attributes?.name}
                               </a>
                             ) : (
-                              <p className="font-open-sans w-max leading-none">
-                                {c.attributes?.name}
-                              </p>
+                              <p className="font-open-sans leading-tight">{c.attributes?.name}</p>
                             )}
                             {c.attributes?.description && (
                               <Tooltip>