import { GetStaticProps } from 'next'; import Head from 'next/head'; import dynamic from 'next/dynamic'; import { useEffect, useState } from 'react'; import { Trip } from 'models'; import getTripsData from 'lib/trips'; import Sidebar from 'components/Sidebar/Sidebar'; import Gallery from 'components/Gallery/Gallery'; import styles from 'styles/Home.module.css'; interface Props { allTripsData: Trip[]; } const Map = dynamic(() => import('components/Map/Map'), { ssr: false }); export default function Home({ allTripsData }: Props): JSX.Element { const [currentTrip, setCurrentTrip] = useState(allTripsData[0]); const [currentPhoto, setCurrentPhoto] = useState(null); const [asideOpen, setAsideOpen] = useState(false); useEffect(() => { if (window.location.hash.length === 0) { window.location.hash = currentTrip.name; } else { const index = allTripsData.findIndex((t) => t.name === window.location.hash.substr(1)); if (index > -1) setCurrentTrip(allTripsData[index]); } }, []); useEffect(() => { window.location.hash = currentTrip.name; }, [currentTrip]); function handleMarkerClick(photo: string) { const index = currentTrip.photos.findIndex((p) => p.name === photo); setCurrentPhoto(index); } function handlePhotoChange(direction: boolean): void { if (direction) { if (currentTrip.photos.length > currentPhoto + 1) { setCurrentPhoto(currentPhoto + 1); } } else if (currentPhoto - 1 >= 0) { setCurrentPhoto(currentPhoto - 1); } } return (
Trip Share {currentPhoto !== null && ( setCurrentPhoto(null)} handlePhotoChange={handlePhotoChange} /> )} setAsideOpen(false)} setCurrentTrip={setCurrentTrip} />
); } export const getStaticProps: GetStaticProps = async () => { const allTripsData = getTripsData(); return { props: { allTripsData, }, }; };