Update src/components/Gallery.tsx

src/components/Gallery.tsx

@@ -18,7 +18,6 @@ export default function Gallery() {
     const [totalMiles, setTotalMiles] = useState<number>(0);
     const [geometryLoaded, setGeometryLoaded] = useState(false);
 
-    // Sunucudan dynamic olarak çekeceğimiz key için state
     const [runtimeApiKey, setRuntimeApiKey] = useState<string>("");
 
     const locationsRef = useRef<Location[]>([]);
@@ -31,7 +30,6 @@ export default function Gallery() {
     const svServiceRef = useRef<google.maps.StreetViewService | null>(null);
     const activePolylinesRef = useRef<{ id: string; polyline: google.maps.Polyline; bounds: google.maps.LatLngBounds; firstCoord: google.maps.LatLngLiteral }[]>([]);
 
-    // 1. Sayfa mount olduğunda runtime API keyi kap gel
     useEffect(() => {
         fetch("/api/config")
             .then((res) => res.json())
@@ -41,7 +39,6 @@ export default function Gallery() {
             .catch((err) => console.error("Error fetching config:", err));
     }, []);
 
-    // Fetch locations
     useEffect(() => {
         const queryParams = new URLSearchParams(window.location.search);
         const initialLocId = queryParams.get("locationId");
@@ -64,7 +61,6 @@ export default function Gallery() {
             .catch((err) => console.error("Error fetching locations:", err));
     }, []);
 
-    // Filter locations
     useEffect(() => {
         const term = search.toLowerCase();
         setFilteredLocations(
@@ -74,12 +70,10 @@ export default function Gallery() {
         );
     }, [search, locations]);
 
-    // Load Google Maps API & Initialize
     useEffect(() => {
-        if (!runtimeApiKey) return; // Key gelene kadar bekle, haritayı patlatma
+        if (!runtimeApiKey) return;
-
         setOptions({
-            key: runtimeApiKey, // Dynamic runtime key devrede
+            key: runtimeApiKey,
             v: "weekly",
         });
 
@@ -126,7 +120,6 @@ export default function Gallery() {
                     defaultStreetView.setVisible(false);
 
                     if (pos) {
-                        // Pegman drop interception key'i yenilendi
                         setIframeUrl(`https://www.google.com/maps/embed/v1/streetview?key=${runtimeApiKey}&location=${pos.lat()},${pos.lng()}&heading=0&pitch=0&fov=90`);
                         setViewingStreetView(true);
 
@@ -138,9 +131,8 @@ export default function Gallery() {
                 }
             });
         });
-    }, [runtimeApiKey]); // runtimeApiKey gelince tetiklenecek
+    }, [runtimeApiKey]);
 
-    // Draw all GPX routes for filtered locations
     useEffect(() => {
         if (!googleMapObj.current || typeof window === 'undefined' || !window.google || !geometryLoaded || !runtimeApiKey) return;
 
@@ -211,7 +203,6 @@ export default function Gallery() {
                     firstCoord: coords[0]
                 });
 
-                // Main Map click
                 polyline.addListener("click", (clickEvent: google.maps.MapMouseEvent) => {
                     if (!clickEvent.latLng) return;
                     const clickPos = clickEvent.latLng;
@@ -224,7 +215,6 @@ export default function Gallery() {
                     }
                 });
 
-                // Mini Map click
                 miniPolyline.addListener("click", (clickEvent: google.maps.MapMouseEvent) => {
                     if (!clickEvent.latLng) return;
                     const clickPos = clickEvent.latLng;
@@ -237,7 +227,6 @@ export default function Gallery() {
                     }
                 });
 
-                // Generate Static Map Thumbnail URL (Runtime key kullanıyor)
                 try {
                     const maxThumbnailPoints = 150;
                     const step = Math.max(1, Math.floor(coords.length / maxThumbnailPoints));
@@ -257,9 +246,8 @@ export default function Gallery() {
             googleMapObj.current.fitBounds(bounds);
         }
 
-    }, [filteredLocations, geometryLoaded, selectedLocation, runtimeApiKey]); // runtimeApiKey dependecy eklendi
+    }, [filteredLocations, geometryLoaded, selectedLocation, runtimeApiKey]);
 
-    // Handle Selection Highlights and panning smoothly
     useEffect(() => {
         if (!googleMapObj.current || !geometryLoaded) return;
 
@@ -278,7 +266,6 @@ export default function Gallery() {
         });
     }, [selectedLocation, geometryLoaded]);
 
-    // Update URL when selection changes
     useEffect(() => {
         if (!selectedLocation) return;
         if (typeof window !== "undefined") {
@@ -361,7 +348,7 @@ export default function Gallery() {
                                     onClick={() => handleLocationSelect(loc)}
                                     style={{ cursor: "pointer", overflow: "hidden" }}
                                 >
-                                    {/* --- MOBILE LAYOUT --- */}
+                                    {/* mobile layout */}
                                     <div className="row g-0 h-100 d-md-none">
                                         <div className="col-5 bg-dark border-end border-secondary position-relative" style={{ minHeight: "105px", overflow: "hidden" }}>
                                             {thumbnails[loc.id] ? (
@@ -402,7 +389,7 @@ export default function Gallery() {
                                         </div>
                                     </div>
 
-                                    {/* --- DESKTOP LAYOUT --- */}
+                                    {/* desktop layout */}
                                     <div className="d-none d-md-block">
                                         <div className="card-img-top bg-dark border-bottom border-secondary d-flex align-items-center justify-content-center" style={{ width: "100%", height: "140px", flexShrink: 0, overflow: "hidden", position: "relative" }}>
                                             {thumbnails[loc.id] ? (