feat(Next > Album): Update map based on selected item in carousel

app/src/components/SlippyMap/index.jsx

@@ -1,19 +1,20 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useState, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import MapGL, { Source, Layer } from 'react-map-gl'
 
 import { clusterLayer, clusterCountLayer, unclusteredPointLayer } from './layers'
 import { transformMapOptions, transformSourceOptions } from './options'
 
 const MAPBOX_TOKEN = 'pk.eyJ1IjoiZGFuYWN0aXZlIiwiYSI6ImNreHhqdXkwdjcyZnEzMHBmNzhiOWZsc3QifQ.gCRigL866hVF6GNHoGoyRg'
 
-export default function SlippyMap({ items = [{}] }) {
-  const coordinates = items[0]?.coordinates ?? []
-  const coordinateAccuracy = items[0]?.coordinateAccuracy ?? 0
-  const [viewport, setViewport] = useState({
-    ...transformMapOptions({ coordinates, coordinateAccuracy }),
-  })
+export default function SlippyMap({ items = [{}], centroid }) {
+  const coordinates = centroid?.coordinates ?? []
+  const coordinateAccuracy = centroid?.coordinateAccuracy ?? 0
+  const [viewport, setViewport] = useState(transformMapOptions({ coordinates, coordinateAccuracy }))
   const mapRef = useRef(null)
+  useEffect(() => {
+    setViewport(transformMapOptions({ coordinates, coordinateAccuracy }))
+  }, [centroid])
 
   const onClick = (event) => {
     const feature = event.features[0]

app/src/components/SplitViewer/index.jsx

@@ -1,5 +1,5 @@
 import ImageGallery from 'react-image-gallery'
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 import styled from 'styled-components'
 
 import config from '../../../../config.json'
@@ -48,6 +48,7 @@ const toCarousel = (item) => {
 }
 
 function SplitViewer({ items, refImageGallery }) {
+  const [memory, setMemory] = useState(items[0])
   const refMapBox = useRef(null)
   const fullscreenMap = () => {
     const div = refMapBox.current
@@ -63,21 +64,22 @@ function SplitViewer({ items, refImageGallery }) {
       console.error('Failed to fullscreen')
     }
   }
+  const carouselItems = items.filter((item) => item.thumbPath).map(toCarousel)
   return (
     <Split>
       <Left key="splitLeft">
         <ImageGallery
           ref={refImageGallery}
-          items={items.filter((item) => item.thumbPath)
-            .map(toCarousel)}
+          onBeforeSlide={setMemory}
+          items={carouselItems}
           showPlayButton={false}
           showThumbnails={false}
           slideDuration={550}
           lazyLoad
         />
       </Left>
       <Right key="splitRight" ref={refMapBox}>
-        <SlippyMap items={items} />
+        <SlippyMap items={items} centroid={items[memory]} />
         <button type="button" onClick={fullscreenMap}>Full Map</button>
       </Right>
     </Split>