From 00099f199e8fcbc7a0c1ff7414b0f929b47444b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= <barbara.chaves@vizzuality.com>
Date: Mon, 4 Nov 2024 10:08:26 +0100
Subject: [PATCH] Add prefetch to home page

---
 client/src/constants/basemaps.ts     | 66 ----------------------------
 client/src/constants/map.ts          |  2 +-
 client/src/containers/home/index.tsx | 13 ++++--
 client/src/containers/map/index.tsx  |  8 ++--
 4 files changed, 14 insertions(+), 75 deletions(-)
 delete mode 100644 client/src/constants/basemaps.ts

diff --git a/client/src/constants/basemaps.ts b/client/src/constants/basemaps.ts
deleted file mode 100644
index af5f017..0000000
--- a/client/src/constants/basemaps.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-export const BASEMAPS = [
-  {
-    label: 'Clean',
-    value: 'basemap-light',
-    preview: `/images/map/light.jpeg`,
-    settings: {
-      labels: 'labels-dark',
-      boundaries: 'boundaries-dark',
-      roads: 'roads-dark',
-    },
-  },
-  {
-    label: 'Satellite',
-    value: 'basemap-satellite',
-    preview: `/images/map/satellite.jpeg`,
-    settings: {
-      labels: 'labels-light',
-      boundaries: 'boundaries-light',
-      roads: 'roads-light',
-    },
-  },
-];
-
-export const LABELS = [
-  {
-    id: '1059d2b8cfa87b8d894b5373ea556666',
-    label: 'Dark labels',
-    slug: 'labels-dark',
-  },
-  {
-    id: '5924e7eeda116f817dd89f1d8d418721',
-    label: 'Light labels',
-    slug: 'labels-light',
-  },
-  {
-    id: 'asdfasdfasdfasdf',
-    label: 'No labels',
-    slug: 'labels-none',
-  },
-];
-
-export const BOUNDARIES = [
-  {
-    id: 'ae861f3122c21ad7754e66d3cead38e6',
-    label: 'Dark boundaries',
-    slug: 'boundaries-dark',
-  },
-  {
-    id: '31b240eba06a254ade36f1dde6a3c07e',
-    label: 'Light boundaries',
-    slug: 'boundaries-light',
-  },
-];
-
-export const ROADS = [
-  {
-    id: '4e240a8b884456747dcd07d41b4d5543',
-    label: 'Dark roads',
-    slug: 'roads-dark',
-  },
-  {
-    id: 'edb80ef589e776ec6c2568b2fc6ad74c',
-    label: 'Light roads',
-    slug: 'roads-light',
-  },
-];
diff --git a/client/src/constants/map.ts b/client/src/constants/map.ts
index 8f72a5c..7e19d33 100644
--- a/client/src/constants/map.ts
+++ b/client/src/constants/map.ts
@@ -1,7 +1,7 @@
 import env from '@/env.mjs';
 
 export const MAPBOX_STYLES = {
-  default: `mapbox://styles/${env.NEXT_PUBLIC_MAPBOX_USERNAME}/${env.NEXT_PUBLIC_MAPBOX_STYLE_ID}?fresh=true`,
+  default: `mapbox://styles/${env.NEXT_PUBLIC_MAPBOX_USERNAME}/${env.NEXT_PUBLIC_MAPBOX_STYLE_ID}`,
 };
 
 export const DEFAULT_MAP_STATE = {
diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx
index bd8dd5f..e9bb6ca 100644
--- a/client/src/containers/home/index.tsx
+++ b/client/src/containers/home/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useMap } from 'react-map-gl';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 import { motion } from 'framer-motion';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -13,7 +14,7 @@ import { homeMarkerAtom } from '@/store/home';
 
 import { useIsMobile } from '@/hooks/screen-size';
 
-import { DEFAULT_MOBILE_ZOOM } from '@/components/map/constants';
+import { DEFAULT_MOBILE_ZOOM, DEFAULT_VIEW_STATE } from '@/components/map/constants';
 import { Dialog, DialogContentHome } from '@/components/ui/dialog';
 import ScrollExplanation from '@/components/ui/scroll-explanation';
 
@@ -46,7 +47,7 @@ const Home = () => {
     map?.easeTo({
       bearing: 0,
       pitch: 0,
-      zoom: isMobile ? DEFAULT_MOBILE_ZOOM : 2,
+      zoom: isMobile ? DEFAULT_MOBILE_ZOOM : DEFAULT_VIEW_STATE.zoom,
       center: { lng: nextLng, lat },
       duration: 500,
       padding: {
@@ -59,10 +60,15 @@ const Home = () => {
     });
   }, [isMobile, map, size.width]);
 
+  const router = useRouter();
+  useEffect(() => {
+    router.prefetch('/globe');
+  }, []);
+
   useEffect(() => {
     if (map) {
       spin();
-      map.resize();
+      map?.resize();
       map.on('moveend', spin);
       return () => {
         map.stop();
@@ -143,7 +149,6 @@ const Home = () => {
                   onClick={() => map?.stop()}
                   className="font-bold uppercase tracking-wide"
                   href="/globe"
-                  prefetch
                 >
                   <div className="flex h-full w-full items-center justify-center rounded-full bg-teal-500">
                     Explore
diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
index 3f6a61a..14318d5 100644
--- a/client/src/containers/map/index.tsx
+++ b/client/src/containers/map/index.tsx
@@ -25,7 +25,7 @@ import GlobeMarkers from '@/containers/map/markers/globe-markers';
 import StoryMarkers from '@/containers/map/markers/story-markers';
 
 import Map from '@/components/map';
-import { DEFAULT_PROPS } from '@/components/map/constants';
+import { DEFAULT_MOBILE_ZOOM, DEFAULT_PROPS } from '@/components/map/constants';
 import { CustomMapProps } from '@/components/map/types';
 
 import SelectedStoriesMarker from './markers/selected-stories-marker';
@@ -104,6 +104,7 @@ export default function MapContainer() {
     },
     [isGlobePage]
   );
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (map && tmpBbox?.options) {
@@ -111,18 +112,17 @@ export default function MapContainer() {
       map.flyTo({
         bearing,
         pitch,
-        zoom,
+        zoom: isMobile ? DEFAULT_MOBILE_ZOOM : zoom,
         center: [longitude, latitude],
         duration: 1000,
         animate: true,
         padding: initialViewState?.padding,
       });
     }
-  }, [map, initialViewState, tmpBbox]);
+  }, [map, initialViewState, tmpBbox, isMobile]);
 
   const targetRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const isMobile = useIsMobile();
 
   const { scrollYProgress } = useScroll({
     target: targetRef,