From 75d6fe874b58a589088c921c7b3808a5749dc51f Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Thu, 4 Dec 2025 23:14:11 -0500
Subject: [PATCH] refactor: Add type definitions for map loader and remove
 unused imports and `HydrateClient`.

---
 src/app/page.tsx             | 33 +++++++++++++++------------------
 src/components/Map.tsx       |  2 +-
 src/components/MapLoader.tsx | 15 ++++++++++++++-
 src/components/Navbar.tsx    |  1 -
 4 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 60d695f..b59a5db 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { HydrateClient } from "~/trpc/server";
 import MapLoader from "~/components/MapLoader";
 import Navbar from "~/components/Navbar";
 import Drawer from "~/components/Drawer";
@@ -22,24 +21,22 @@ export default function Home() {
   const [selectedShop, setSelectedShop] = useState<typeof COFFEE_SHOPS[0] | null>(null);
 
   return (
-    <HydrateClient>
-      <main className="relative h-screen w-screen overflow-hidden bg-black text-white font-serif">
-        <Navbar />
+    <main className="relative h-screen w-screen overflow-hidden bg-black text-white font-serif">
+      <Navbar />
 
-        {/* Map Background */}
-        <div className="absolute inset-0 z-0">
-          <MapLoader
-            shops={COFFEE_SHOPS}
-            onShopSelect={(shop) => setSelectedShop(shop)}
-          />
-        </div>
-
-        {/* Right Drawer */}
-        <Drawer
-          shop={selectedShop}
-          onClose={() => setSelectedShop(null)}
+      {/* Map Background */}
+      <div className="absolute inset-0 z-0">
+        <MapLoader
+          shops={COFFEE_SHOPS}
+          onShopSelect={(shop: typeof COFFEE_SHOPS[0]) => setSelectedShop(shop)}
         />
-      </main>
-    </HydrateClient>
+      </div>
+
+      {/* Right Drawer */}
+      <Drawer
+        shop={selectedShop}
+        onClose={() => setSelectedShop(null)}
+      />
+    </main>
   );
 }
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index f6dd69f..d556daa 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 import { useEffect } from 'react';
diff --git a/src/components/MapLoader.tsx b/src/components/MapLoader.tsx
index d812a15..ce3f977 100644
--- a/src/components/MapLoader.tsx
+++ b/src/components/MapLoader.tsx
@@ -7,6 +7,19 @@ const Map = dynamic(() => import("./Map"), {
     loading: () => <div className="w-full h-full bg-gray-100 animate-pulse flex items-center justify-center text-gray-400">Loading Map...</div>
 });
 
-export default function MapLoader({ shops, onShopSelect }: { shops: any[], onShopSelect: (shop: any) => void }) {
+interface CoffeeShop {
+    id: number;
+    name: string;
+    description: string;
+    lat: number;
+    lng: number;
+}
+
+interface MapLoaderProps {
+    shops: CoffeeShop[];
+    onShopSelect: (shop: CoffeeShop) => void;
+}
+
+export default function MapLoader({ shops, onShopSelect }: MapLoaderProps) {
     return <Map shops={shops} onShopSelect={onShopSelect} />;
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0a08d39..44164bc 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { Coffee } from "lucide-react";
 
 export default function Navbar() {