import { GetServerSideProps, NextPage } from 'next'; import { useMemo, useState } from 'react'; import Map, { FullscreenControl, Marker, NavigationControl, Popup, ScaleControl, } from 'react-map-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; import DBClient from '@/prisma/DBClient'; import LocationMarker from '@/components/ui/LocationMarker'; import Link from 'next/link'; import Head from 'next/head'; import useGeolocation from '@/hooks/useGeolocation'; type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>; interface BreweryMapPageProps { breweries: { location: { city: string; stateOrProvince: string | null; country: string | null; coordinates: number[]; }; id: string; name: string; }[]; } const BreweryMapPage: NextPage = ({ breweries }) => { const windowIsDefined = typeof window !== 'undefined'; const themeIsDefined = windowIsDefined && !!window.localStorage.getItem('theme'); const [popupInfo, setPopupInfo] = useState( null, ); const theme = ( windowIsDefined && themeIsDefined ? window.localStorage.getItem('theme') : 'light' ) as 'light' | 'dark'; const mapStyles: MapStyles = { light: 'mapbox://styles/mapbox/light-v10', dark: 'mapbox://styles/mapbox/dark-v11', }; const pins = useMemo( () => ( <> {breweries.map((brewery) => { const [longitude, latitude] = brewery.location.coordinates; return ( { e.originalEvent.stopPropagation(); setPopupInfo(brewery); }} > ); })} ), [breweries], ); const { coords, error } = useGeolocation(); const userLocationPin = useMemo( () => coords && !error ? ( ) : null, [coords, error], ); return ( <> Brewery Map | The Biergarten App
{pins} {userLocationPin} {popupInfo && ( setPopupInfo(null)} >
{popupInfo.name}

{popupInfo.location.city} {popupInfo.location.stateOrProvince ? `, ${popupInfo.location.stateOrProvince}` : ''} {popupInfo.location.country ? `, ${popupInfo.location.country}` : ''}

)}
); }; export default BreweryMapPage; export const getServerSideProps: GetServerSideProps = async () => { const breweries = await DBClient.instance.breweryPost.findMany({ select: { location: { select: { coordinates: true, city: true, country: true, stateOrProvince: true }, }, id: true, name: true, }, }); return { props: { breweries } }; };