From 0825201cecba75ea3f983327f4d768376508de5a Mon Sep 17 00:00:00 2001
From: Greg Konush <12027037+gregkonush@users.noreply.github.com>
Date: Mon, 23 Dec 2024 21:48:57 -0800
Subject: [PATCH] fix: remove dynamic loader (#646)

---
 apps/findbobastore/src/app/page.tsx              |  4 ++--
 .../src/components/map-container.tsx             | 16 ----------------
 apps/findbobastore/src/components/map-view.tsx   | 10 ++++------
 3 files changed, 6 insertions(+), 24 deletions(-)
 delete mode 100644 apps/findbobastore/src/components/map-container.tsx

diff --git a/apps/findbobastore/src/app/page.tsx b/apps/findbobastore/src/app/page.tsx
index 21082cf..fd76582 100644
--- a/apps/findbobastore/src/app/page.tsx
+++ b/apps/findbobastore/src/app/page.tsx
@@ -1,4 +1,4 @@
-import { MapContainer } from '@/components/map-container'
+import { MapView } from '@/components/map-view'
 
 export default async function Home() {
   const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN
@@ -7,7 +7,7 @@ export default async function Home() {
       <div className="absolute top-4 left-4 z-10 bg-slate-900/50 px-4 py-2 rounded-lg">
         <h1 className="text-xl font-bold text-white">Find Boba Store</h1>
       </div>
-      <MapContainer token={mapboxToken} />
+      <MapView token={mapboxToken} />
     </main>
   )
 }
diff --git a/apps/findbobastore/src/components/map-container.tsx b/apps/findbobastore/src/components/map-container.tsx
deleted file mode 100644
index 2e76a6a..0000000
--- a/apps/findbobastore/src/components/map-container.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-
-import dynamic from 'next/dynamic'
-
-const MapView = dynamic(() => import('./map-view'), {
-  ssr: false,
-  loading: () => (
-    <div className="w-full h-screen flex items-center justify-center">
-      <div className="text-lg">Loading map...</div>
-    </div>
-  ),
-})
-
-export function MapContainer({ token }: { token: string | undefined }) {
-  return <MapView token={token} />
-}
diff --git a/apps/findbobastore/src/components/map-view.tsx b/apps/findbobastore/src/components/map-view.tsx
index 360182f..5a56205 100644
--- a/apps/findbobastore/src/components/map-view.tsx
+++ b/apps/findbobastore/src/components/map-view.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, memo, useState } from 'react'
 import ReactMapGL, { Marker, NavigationControl, GeolocateControl } from 'react-map-gl'
 import { motion, AnimatePresence } from 'framer-motion'
@@ -31,8 +33,7 @@ function MapOverlay({ store }: { store: BobaStore | null }) {
   )
 }
 
-export function MapView({ token }: { token: string | undefined }) {
-  console.log({ token })
+export const MapView = memo(function MapView({ token }: { token: string | undefined }) {
   const [selectedStore, setSelectedStore] = useState<BobaStore | null>(null)
   const [viewState, setViewState] = useState({
     longitude: -122.4194,
@@ -114,7 +115,6 @@ export function MapView({ token }: { token: string | undefined }) {
           </Marker>
         ))}
 
-        {/* User location marker */}
         {viewState.longitude !== -122.4194 && (
           <Marker longitude={viewState.longitude} latitude={viewState.latitude}>
             <div className="text-4xl" aria-label="Your location">
@@ -127,6 +127,4 @@ export function MapView({ token }: { token: string | undefined }) {
       {locationError && <div className="absolute top-4 left-4 p-4 bg-slate-900/90 rounded-lg text-slate-100 text-sm">{locationError}</div>}
     </div>
   )
-}
-
-export default memo(MapView)
+})