diff options
| author | Marcin Zelent <marcin@zelent.net> | 2022-11-16 15:16:38 +0100 |
|---|---|---|
| committer | Marcin Zelent <marcin@zelent.net> | 2022-11-16 15:16:38 +0100 |
| commit | f2ecc1803f3ea294a0c6b7915b61348ed0395b26 (patch) | |
| tree | e8c6fb1350ae4f659b3f9ef8d17157158b974b16 /pages | |
| parent | efb64f24d6200a39870c0e8966ab4f87e07c93a9 (diff) | |
Remade and extended the app using React
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 7 | ||||
| -rw-r--r-- | pages/index.tsx | 93 |
2 files changed, 0 insertions, 100 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index 1cfd2cb..0000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import '../styles/globals.css'; -import { AppProps } from 'next/app'; - -export default function App({ Component, pageProps }: AppProps): JSX.Element { - // eslint-disable-next-line react/jsx-props-no-spreading - return <Component {...pageProps} />; -} diff --git a/pages/index.tsx b/pages/index.tsx deleted file mode 100644 index f9b365b..0000000 --- a/pages/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -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 ( - <div className={styles.container}> - <Head> - <title>Trip Share</title> - <link rel="icon" href="/favicon.ico" /> - </Head> - - {currentPhoto !== null && ( - <Gallery - currentPhoto={currentTrip.photos[currentPhoto]} - handleClose={() => setCurrentPhoto(null)} - handlePhotoChange={handlePhotoChange} - /> - )} - - <Sidebar - trips={allTripsData} - currentTrip={currentTrip} - asideOpen={asideOpen} - handleClose={() => setAsideOpen(false)} - setCurrentTrip={setCurrentTrip} - /> - - <button type="button" className={styles.asideToggle} onClick={() => setAsideOpen(true)}> - ||| - </button> - - <main className={styles.main}> - <Map trip={currentTrip} handleMarkerClick={handleMarkerClick} /> - </main> - </div> - ); -} - -export const getStaticProps: GetStaticProps = async () => { - const allTripsData = getTripsData(); - - return { - props: { - allTripsData, - }, - }; -}; |