Brewery Map | The Biergarten App

import { NextPage } from 'next'; import { useEffect, useMemo, useState } from 'react'; import Map, { Marker, Popup } from 'react-map-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; import LocationMarker from '@/components/ui/LocationMarker'; import Link from 'next/link'; import Head from 'next/head'; import useGeolocation from '@/hooks/utilities/useGeolocation'; import BreweryPostMapQueryResult from '@/services/BreweryPost/types/BreweryPostMapQueryResult'; import { z } from 'zod'; import useBreweryMapPagePosts from '@/hooks/data-fetching/brewery-posts/useBreweryMapPagePosts'; import ControlPanel from '@/components/ui/maps/ControlPanel'; type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>; const BreweryMapPage: NextPage = () => { const [popupInfo, setPopupInfo] = useState | null>(null); const [theme, setTheme] = useState<'light' | 'dark'>('light'); useEffect(() => { setTheme(localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'); }, []); const { breweries } = useBreweryMapPagePosts({ pageSize: 50 }); 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: geoError } = useGeolocation(); const userLocationPin = useMemo( () => coords && !geoError ? ( ) : null, [coords, geoError], ); 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;