diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 62fa6f8..7662b9c 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -20,10 +20,8 @@ export default function Page() { const fetchData = async () => { try { - const [records, user] = await Promise.all([ - pb.collection('Post').getFullList(), - pb.collection('users').getOne(currentUser.id), - ]); + const records = await pb.collection('Post').getFullList(); + const user = await pb.collection('users').getOne(currentUser.id); setPhotos(records); setUserSavedPosts(user.savedposts || []); } catch (error) { diff --git a/app/full-map/page.tsx b/app/full-map/page.tsx index c4d089b..0934529 100644 --- a/app/full-map/page.tsx +++ b/app/full-map/page.tsx @@ -1,15 +1,25 @@ "use client"; -import {DashboardNavBar} from "@/app/dashboard/components/DashboardNavbar"; -import FullMapPage from "@/components/ours/Map/FullMapPage"; +import { DashboardNavBar } from "@/app/dashboard/components/DashboardNavbar"; +import FullMapPage from "@/components/ours/Map/FullMapPage"; +import { useSearchParams } from "next/navigation"; +import { Suspense } from "react"; // Import the useSearchParams hook export default function Page() { + const searchParams = useSearchParams(); // Get search parameters from the URL + + // Retrieve latitude and longitude from search parameters + const latitude = searchParams.get('lat') ?? undefined; // Use nullish coalescing to set to undefined if null + const longitude = searchParams.get('lng') ?? undefined; // Use nullish coalescing to set to undefined if null + return (
- +
- + }> + {/* Pass parameters as props */} +
-) -} \ No newline at end of file + ); +} diff --git a/components/ours/Map/FullMapPage.tsx b/components/ours/Map/FullMapPage.tsx index 19f5e6c..d84ed14 100644 --- a/components/ours/Map/FullMapPage.tsx +++ b/components/ours/Map/FullMapPage.tsx @@ -5,59 +5,64 @@ import { Loader } from "@googlemaps/js-api-loader"; import pb from "../../../lib/pocketbase"; // Assuming this is where PocketBase is initialized import type { PhotoCard } from "@/types/photo"; -export function FullMapPage() { - const mapRef = React.useRef(null); +export function FullMapPage(props: { latitude?: string; longitude?: string }) { + const mapRef = React.useRef(null); // Initialize with HTMLDivElement type useEffect(() => { const initMap = async () => { - try { - // Fetch all posts with their coordinates - const result = await pb.collection('Post').getFullList(); - - const loader = new Loader({ - apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string, - version: "weekly", - }); - - const { Map } = await loader.importLibrary("maps"); - const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; - - const initialPosition = { lat: 43.642693, lng: -79.3871189 }; // Default center of the map - - // Set map options - const mapOptions: google.maps.MapOptions = { - center: initialPosition, - zoom: 10, // Adjust zoom level as needed - mapId: "MY_NEXTJS_MAPID", - }; - - // Initialize map - const map = new Map(mapRef.current as HTMLDivElement, mapOptions); - - - // Add markers for each post with valid coordinates - result.forEach((post) => { - const latitude = parseFloat(post.latitude); - const longitude = parseFloat(post.longitude); - - - // Check if latitude and longitude are valid numbers - if (!isNaN(latitude) && !isNaN(longitude)) { - const position = { lat: latitude, lng: longitude }; - new Marker({ - map: map, - position: position, - title: post.title, // Optional: show title on hover - }); - } - }); - - } catch (error) { - console.error("Error loading Google Maps API: ", error); + if (mapRef.current) { // Ensure mapRef.current is not null before using it + try { + // Fetch all posts with their coordinates + const result = await pb.collection('Post').getFullList(); + + const loader = new Loader({ + apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string, + version: "weekly", + }); + + const { Map } = await loader.importLibrary("maps"); + const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; + + // Use provided latitude and longitude or fallback to default position + const lat = props.latitude ? parseFloat(props.latitude) : 37.996163; + const lng = props.longitude ? parseFloat(props.longitude) : -82.127480; + + const initialPosition = { lat, lng }; + + // Set map options + const zoomLevel = props.latitude && props.longitude ? 10 : 5; // Set zoom level based on validity of coordinates + const mapOptions: google.maps.MapOptions = { + center: initialPosition, + zoom: zoomLevel, // Adjust zoom level based on conditions + mapId: "MY_NEXTJS_MAPID", + }; + + // Initialize map + const map = new Map(mapRef.current, mapOptions); // mapRef.current should not be null here + + // Add markers for each post with valid coordinates + result.forEach((post) => { + const postLatitude = parseFloat(post.latitude); + const postLongitude = parseFloat(post.longitude); + + // Check if latitude and longitude are valid numbers + if (!isNaN(postLatitude) && !isNaN(postLongitude)) { + const position = { lat: postLatitude, lng: postLongitude }; + new Marker({ + map: map, + position: position, + title: post.title, // Optional: show title on hover + }); + } + }); + + } catch (error) { + console.error("Error loading Google Maps API: ", error); + } } }; initMap(); - }, []); + }, [props.latitude, props.longitude]); // Add latitude and longitude as dependencies return (
@@ -67,3 +72,156 @@ export function FullMapPage() { } export default FullMapPage; + +// "use client"; +// +// import React, { useEffect } from "react"; +// import { Loader } from "@googlemaps/js-api-loader"; +// import pb from "../../../lib/pocketbase"; // Assuming this is where PocketBase is initialized +// import type { PhotoCard } from "@/types/photo"; +// +// +// +// export function FullMapPage(props:{latitude?: string, longitude?: string}) { +// const mapRef = React.useRef(); +// +// useEffect(() => { +// const initMap = async () => { +// try { +// // Fetch all posts with their coordinates +// const result = await pb.collection('Post').getFullList(); +// +// const loader = new Loader({ +// apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string, +// version: "weekly", +// }); +// +// const { Map } = await loader.importLibrary("maps"); +// const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; +// +// // Use provided latitude and longitude or fallback to default position +// const lat = props.latitude ? parseFloat(props.latitude) : 37.996163; +// const lng = props.longitude ? parseFloat(props.longitude) : -82.127480; +// +// const initialPosition = { lat, lng }; +// +// // Set map options +// const zoomLevel = props.latitude && props.longitude ? 10 : 5; // Set zoom level based on validity of coordinates +// const mapOptions: google.maps.MapOptions = { +// center: initialPosition, +// zoom: zoomLevel, // Adjust zoom level based on conditions +// mapId: "MY_NEXTJS_MAPID", +// }; +// +// // Initialize map +// const map = new Map(mapRef.current as HTMLDivElement, mapOptions); +// +// // Add markers for each post with valid coordinates +// result.forEach((post) => { +// const postLatitude = parseFloat(post.latitude); +// const postLongitude = parseFloat(post.longitude); +// +// // Check if latitude and longitude are valid numbers +// if (!isNaN(postLatitude) && !isNaN(postLongitude)) { +// const position = { lat: postLatitude, lng: postLongitude }; +// new Marker({ +// map: map, +// position: position, +// title: post.title, // Optional: show title on hover +// }); +// } +// }); +// +// } catch (error) { +// console.error("Error loading Google Maps API: ", error); +// } +// }; +// initMap(); +// }, [props.latitude, props.longitude]); // Add latitude and longitude as dependencies +// +// return ( +//
+//
+//
+// ); +// } +// +// export default FullMapPage; + +// "use client"; +// +// import React, { useEffect } from "react"; +// import { Loader } from "@googlemaps/js-api-loader"; +// import pb from "../../../lib/pocketbase"; // Assuming this is where PocketBase is initialized +// import type { PhotoCard } from "@/types/photo"; +// import { useSearchParams } from "next/navigation"; // Import the useSearchParams hook +// +// export function FullMapPage() { +// const mapRef = React.useRef(null); +// const searchParams = useSearchParams(); // Get search parameters from the URL +// +// useEffect(() => { +// const initMap = async () => { +// try { +// // Fetch all posts with their coordinates +// const result = await pb.collection('Post').getFullList(); +// +// const loader = new Loader({ +// apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string, +// version: "weekly", +// }); +// +// const { Map } = await loader.importLibrary("maps"); +// const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; +// +// // Get latitude and longitude from search parameters +// const latParam = searchParams.get('lat'); +// const lngParam = searchParams.get('lng'); +// +// // Use provided latitude and longitude or fallback to default position +// const latitude = latParam ? parseFloat(latParam) : 37.996163; +// const longitude = lngParam ? parseFloat(lngParam) : -82.127480; +// +// const initialPosition = { lat: latitude, lng: longitude }; +// +// // Set map options +// const mapOptions: google.maps.MapOptions = { +// center: initialPosition, +// zoom: 5, // Adjust zoom level as needed +// mapId: "MY_NEXTJS_MAPID", +// }; +// +// // Initialize map +// const map = new Map(mapRef.current as HTMLDivElement, mapOptions); +// +// // Add markers for each post with valid coordinates +// result.forEach((post) => { +// const postLatitude = parseFloat(post.latitude); +// const postLongitude = parseFloat(post.longitude); +// +// // Check if latitude and longitude are valid numbers +// if (!isNaN(postLatitude) && !isNaN(postLongitude)) { +// const position = { lat: postLatitude, lng: postLongitude }; +// new Marker({ +// map: map, +// position: position, +// title: post.title, // Optional: show title on hover +// }); +// } +// }); +// +// } catch (error) { +// console.error("Error loading Google Maps API: ", error); +// } +// }; +// initMap(); +// }, [searchParams]); // Add searchParams as a dependency +// +// return ( +//
+//
+//
+// ); +// } +// +// export default FullMapPage; \ No newline at end of file diff --git a/components/ui/focus-cards.tsx b/components/ui/focus-cards.tsx index 2360a79..bef4ded 100644 --- a/components/ui/focus-cards.tsx +++ b/components/ui/focus-cards.tsx @@ -1,4 +1,6 @@ + "use client"; + import Image from "next/image"; import React, { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; @@ -106,9 +108,16 @@ export const Card = React.memo( onClick={toggleBookmark} /> - - + + + + {/**/} + {/* */} + {/**/}