map bounds changed

Vizzuality · May 7, 2024 · ac33c9a · ac33c9a
1 parent 3b747ae
commit ac33c9a
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 87 deletions.
diff --git a/client/cypress/downloads/downloads.html b/client/cypress/downloads/downloads.html
diff --git a/client/cypress/e2e/navigation.cy.ts b/client/cypress/e2e/navigation.cy.ts
@@ -1,24 +1,24 @@
 describe('navigation', () => {
-  // it('redirects to project page', () => {
-  //   cy.visit('/').url().should('be.equal', 'http://localhost:3000/projects');
-  // });
+  it('redirects to project page', () => {
+    cy.visit('/').url().should('be.equal', 'http://localhost:3000/projects');
+  });
 
-  // it('access to project detail page and switch dashboard', () => {
-  //   cy.visit('/').wait(10000);
-  //   cy.get('[data-cy="projects-list-tab"]').should('exist');
-  //   cy.get('[data-cy="projects-list-tab"]').click();
-  //   cy.get('[data-cy="project-item-link"]').first().click();
-  //   // cy.get('button[data-cy="project-dashboard-button"]').click().wait(3000);
-  //   // cy.get('[data-cy="project-dashboard"]').should('exist');
-  //   // cy.get('button[data-cy="project-dashboard-button"]').click();
-  //   // cy.get('[data-cy="project-dashboard"]').should('not.exist');
-  // });
+  it('access to project detail page and switch dashboard', () => {
+    cy.visit('/').wait(10000);
+    cy.get('[data-cy="projects-list-tab"]').should('exist');
+    cy.get('[data-cy="projects-list-tab"]').click();
+    cy.get('[data-cy="project-item-link"]').first().click();
+    cy.get('button[data-cy="project-dashboard-button"]').click().wait(3000);
+    cy.get('[data-cy="project-dashboard"]').should('exist');
+    cy.get('button[data-cy="project-dashboard-button"]').click();
+    cy.get('[data-cy="project-dashboard"]').should('not.exist');
+  });
 
   it('access to country detail page', () => {
     cy.visit('/').wait(10000);
     cy.get('a[data-cy="sidebar-tab-countries"]').click({ force: true }).wait(1000);
-    // cy.get('[data-cy="country-item"]').first().click().wait(10000);
-    // cy.get('[data-cy="country-detail-name"]').should('exist');
+    cy.get('[data-cy="country-item"]').first().click().wait(10000);
+    cy.get('[data-cy="country-detail-name"]').should('exist');
   });
 
   it('access to datasets and displays an info dialog', () => {

diff --git a/client/src/components/map/constants.ts b/client/src/components/map/constants.ts
@@ -8,4 +8,4 @@ export const DEFAULT_VIEW_STATE: Partial<ViewState> = {
   longitude: 0,
 };
 
-export const DEFAULT_BBOX: Bbox = [-84.05,-46.96,227.66,64.23];
+export const DEFAULT_BBOX: Bbox = [-84.05, -46.96, 227.66, 64.23];
diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
@@ -352,9 +352,10 @@ export default function CountryDetailPanel() {
                                 className="h-2 rounded-3xl bg-[#FFCC73]"
                                 style={{
                                   width: !!indicators[value].value
-                                    ? `${(indicators[value].value * 100) /
-                                    indicators.intervention_area_total['value']
-                                    }%`
+                                    ? `${
+                                        (indicators[value].value * 100) /
+                                        indicators.intervention_area_total['value']
+                                      }%`
                                     : '0%',
                                 }}
                               />
@@ -469,10 +470,10 @@ export default function CountryDetailPanel() {
                           link === 'gfw_link'
                             ? data?.data?.attributes?.gfw_link
                             : link === 'country_information_link'
-                              ? data?.data?.attributes?.country_information_link
-                                : link.startsWith('http')
-                                  ? link
-                                  : undefined;
+                            ? data?.data?.attributes?.country_information_link
+                            : link.startsWith('http')
+                            ? link
+                            : undefined;
 
                         return href ? (
                           <div
@@ -488,8 +489,6 @@ export default function CountryDetailPanel() {
                               <h4 className="text-sm text-yellow-900">{title}</h4>
                               <ExternalLink size={16} className="text-yellow-900" />
                             </a>
-
-
                           </div>
                         ) : null;
                       })}

diff --git a/client/src/containers/countries/item.tsx b/client/src/containers/countries/item.tsx
@@ -1,25 +1,15 @@
 'use client';
 
-import { useCallback } from 'react';
-
 import Flag from 'react-world-flags';
 
-import { useRouter } from 'next/navigation';
-
-import { useSetAtom } from 'jotai';
-
-import { tmpBboxAtom } from '@/store';
+import Link from 'next/link';
 
 import { useGetCountryIndicatorFields } from '@/types/generated/country-indicator-field';
 import { CountryListResponseDataItem } from '@/types/generated/strapi.schemas';
-import type { Bbox } from '@/types/map';
 
 import { useSyncQueryParams } from '@/hooks/datasets';
 export default function CountryItem({ data }: { data: CountryListResponseDataItem }) {
-  const setTempBbox = useSetAtom(tmpBboxAtom);
-
-  const queryParams = useSyncQueryParams();
-  const { push } = useRouter();
+  const queryParams = useSyncQueryParams({ bbox: true });
 
   const { data: projectsCountIndicator } = useGetCountryIndicatorFields(
     {
@@ -36,16 +26,10 @@ export default function CountryItem({ data }: { data: CountryListResponseDataIte
     }
   );
 
-  const handleClick = useCallback(() => {
-    setTempBbox(data.attributes?.bbox as Bbox);
-    push(`/countries/${data.id}${queryParams}&bbox=${data.attributes?.bbox}`);
-  }, [data, push, queryParams, setTempBbox]);
-
   return (
-    <button
-      type="button"
+    <Link
+      href={`/countries/${data.id}${queryParams}&bbox=[${data.attributes?.bbox}]`}
       data-cy="country-item"
-      onClick={handleClick}
       className="flex items-center justify-between space-x-4 rounded-lg border border-gray-100 bg-white py-2 pl-2 pr-4 text-sm text-yellow-900 no-underline shadow-sm transition-all duration-300 hover:border-yellow-500"
     >
       <div className="flex items-center space-x-4">
@@ -64,6 +48,6 @@ export default function CountryItem({ data }: { data: CountryListResponseDataIte
           {projectsCountIndicator?.attributes?.value === 1 ? 'project' : 'projects'}
         </p>
       )}
-    </button>
+    </Link>
   );
 }
diff --git a/client/src/containers/countries/list.tsx b/client/src/containers/countries/list.tsx
@@ -63,43 +63,41 @@ export default function CountriesList() {
             <div className="absolute bottom-0 top-0 h-full w-full overflow-hidden">
               <ScrollArea className="h-full px-5 pb-10">
                 <div className="h-full space-y-4">
-                <div className="flex flex-col space-y-1">
-                  {data?.data?.map((country) => (
-                    <CountryItem key={country.id} data={country} />
-                  ))}
-                </div>
-                <div className="flex flex-col space-y-2 py-4">
-                  <h3 className="text-base text-green-800">Useful links</h3>
-                  {usefulLinksCountriesList.map(({ title, description, link }) => {
-
-                    return link ? (
-                      <div
-                        key={title}
-                        className="flex w-full flex-col space-y-2 rounded-xl bg-white p-2 shadow-sm"
-                      >
-                        <a
-                          href={link}
-                          target="_blank"
-                          rel="noreferrer"
-                          className="flex w-full cursor-pointer items-center justify-between"
+                  <div className="flex flex-col space-y-1">
+                    {data?.data?.map((country) => (
+                      <CountryItem key={country.id} data={country} />
+                    ))}
+                  </div>
+                  <div className="flex flex-col space-y-2 py-4">
+                    <h3 className="text-base text-green-800">Useful links</h3>
+                    {usefulLinksCountriesList.map(({ title, description, link }) => {
+                      return link ? (
+                        <div
+                          key={title}
+                          className="flex w-full flex-col space-y-2 rounded-xl bg-white p-2 shadow-sm"
                         >
-                          <h4 className="text-sm text-yellow-900">{title}</h4>
-                          <ExternalLink size={16} className="text-yellow-900" />
-                        </a>
+                          <a
+                            href={link}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="flex w-full cursor-pointer items-center justify-between"
+                          >
+                            <h4 className="text-sm text-yellow-900">{title}</h4>
+                            <ExternalLink size={16} className="text-yellow-900" />
+                          </a>
 
-                        {description && (
-                          <p className="mr-6 text-xs text-gray-500">{description}</p>
-                        )}
-                      </div>
-                    ) : null;
-                  })}
-                </div>
+                          {description && (
+                            <p className="mr-6 text-xs text-gray-500">{description}</p>
+                          )}
+                        </div>
+                      ) : null;
+                    })}
+                  </div>
                 </div>
               </ScrollArea>
             </div>
           </div>
         </div>
-
       </ContentLoader>
     </div>
   );

diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -23,6 +23,7 @@ import PopupContainer from '@/containers/map/popup';
 import MapSettingsManager from '@/containers/map/settings/manager';
 
 import Map from '@/components/map';
+import { DEFAULT_BBOX } from '@/components/map/constants';
 import Controls from '@/components/map/controls';
 import SettingsControl from '@/components/map/controls/settings';
 import ZoomControl from '@/components/map/controls/zoom';
@@ -45,7 +46,7 @@ const DEFAULT_PROPS: CustomMapProps = {
     zoom: 2,
     pitch: 0,
     bearing: 0,
-    bounds: [68.711178, -11.476973, 131.333249, 21.087406],
+    bounds: DEFAULT_BBOX as Bbox,
   },
   minZoom: 2,
   maxZoom: 20,
@@ -72,7 +73,7 @@ export default function MapContainer() {
   const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom);
   const setHoveredProjectMap = useSetAtom(hoveredProjectMapAtom);
   const [cursor, setCursor] = useState<'grab' | 'pointer'>('grab');
-  const [bboxURL, setBboxURL] = useSyncBbox();
+  const [bboxFromURL, setBboxFromURL] = useSyncBbox();
 
   const [tmpBbox, setTmpBbox] = useAtom(tmpBboxAtom);
   const sidebarOpen = useAtomValue(openAtom);
@@ -108,6 +109,7 @@ export default function MapContainer() {
   );
 
   const handleMapViewStateChange = useCallback(() => {
+    console.log('handle view state');
     if (map) {
       const b = map
         .getBounds()
@@ -116,10 +118,10 @@ export default function MapContainer() {
         .map((v: number) => {
           return parseFloat(v.toFixed(2));
         }) as Bbox;
-      setBboxURL(b);
+      setBboxFromURL(b);
       setTmpBbox(null);
     }
-  }, [map, setBboxURL, setTmpBbox]);
+  }, [map, setBboxFromURL, setTmpBbox]);
 
   const handleMapClick = useCallback(
     (e: MapLayerMouseEvent) => {
@@ -266,11 +268,14 @@ export default function MapContainer() {
         data-cy="map"
         initialViewState={{
           ...initialViewState,
-          ...(bboxURL && {
-            bounds: bboxURL as LngLatBoundsLike,
+          ...(bboxFromURL && {
+            bounds: bboxFromURL as LngLatBoundsLike,
           }),
         }}
-        bounds={tmpBounds}
+        bounds={{
+          ...tmpBounds,
+          bbox: bboxFromURL as Bbox,
+        }}
         cursor={cursor}
         minZoom={minZoom}
         maxZoom={maxZoom}

diff --git a/client/src/containers/projects/list.tsx b/client/src/containers/projects/list.tsx
@@ -2,6 +2,7 @@
 
 import { MouseEvent, useCallback, useState } from 'react';
 
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { useSetAtom } from 'jotai';
@@ -31,7 +32,7 @@ export default function ProjectsList() {
   const [filtersSettings] = useSyncFilters();
   const setHoveredProjectList = useSetAtom(hoveredProjectMapAtom);
   const router = useRouter();
-  const queryParams = useSyncQueryParams();
+  const queryParams = useSyncQueryParams({ bbox: true });
 
   const { data, isFetching, isFetched, isError } = useGetProjects(
     {
@@ -207,17 +208,18 @@ export default function ProjectsList() {
               <div className="flex flex-col space-y-2">
                 {data &&
                   data.map((project) => (
-                    <button
-                      type="button"
+                    <Link
+                      legacyBehavior={false}
                       key={project?.id}
                       data-value={project?.attributes?.project_code}
                       data-bbox={project?.attributes?.bbox}
                       onClick={handleClick}
                       onMouseEnter={handleHover}
                       onMouseLeave={() => setHoveredProjectList(null)}
+                      href={`/projects/${project?.attributes?.project_code}${queryParams}&bbox=[${project?.attributes?.bbox}]`}
                     >
                       <ProjectItem data={project} />
-                    </button>
+                    </Link>
                   ))}
               </div>
             </ScrollArea>