import Head from 'next/head' import { ReactElement, useEffect, useState } from 'react' import LayoutReadyOrNot from '../components/layout' import styles from '/styles/ReadyOrNot.module.css' import { NextPageWithLayout } from './_app'; import React from 'react'; import useSWR, { KeyedMutator, mutate } from 'swr'; import { useRouter } from 'next/router'; import Image from 'next/image'; import ReadyOrNotMap from '../interfaces/ReadyOrNot'; import useWindowSize from '../components/windowsize'; const fetcher = (url: string) => fetch(url).then((res) => res.json()) const ReadyOrNotMaps: NextPageWithLayout = () => { const [floor, setFloor] = useState(0); const { mapInfo, isLoadingInfo, isErrorInfo } = useMap(useRouter().query.map?.toString() || "a_lethal_obsession") const { mapImages, isLoadingImages, isErrorImages, mutateImage } = useImages(useRouter().query.map?.toString() || "a_lethal_obsession") const isMobile = useWindowSize(); let infoHtml: ReactElement = <>; let mapHtml: ReactElement = <>; if (isErrorInfo) { infoHtml = (

Error loading page Data

) } else if (isLoadingInfo) { infoHtml = (

Loading...

) } else { const info = mapInfo infoHtml = (

{info.name} ({info.alias})

) if (isErrorImages) { mapHtml =

Error loading Map or Map not present

} else if (isLoadingImages) { mapHtml =

Loading...

} else if(info.floors){ // TODO: ask Yahia if he would rather the buttons turn off at the corresponding limits // move to highest floor after going down from lowest if (floor < info.floors[0]) { setFloor(info.floors[info.floors.length-1]) } // move to lowest floor after going up from highest if (floor > info.floors[info.floors.length-1]) { setFloor(info.floors[0]) } // map the images to the corresponding floor number in an array let images: string[] = []; mapImages.forEach((image, index) => { // assign the floor number of the image position, since floors and images are synced from the info object this works images[info.floors[index]] = image }); let inverseFloors = info.floors.slice(0); inverseFloors.reverse() mapHtml = (

{floor}

{inverseFloors.map((level: number, index: number) => (
{setFloor(level)}}>
))}
Floorplan
) } else { mapHtml =

Invalid or missing floor info: {info.floors}

} } // TODO: set background here depending on image loaded return ( <> Ready or Not {infoHtml} {mapHtml} ) } ReadyOrNotMaps.getLayout = function getLayout(page: ReactElement) { return ( {page} ) } function useMap(path: string):{mapInfo: ReadyOrNotMap, isLoadingInfo: boolean, isErrorInfo: boolean} { const { data, error } = useSWR(`/api/${path}`, fetcher) return { mapInfo: data, isLoadingInfo: !error && !data, isErrorInfo: error } } function useImages(path: string):{mapImages: string[], isLoadingImages: boolean, isErrorImages: boolean, mutateImage: KeyedMutator} { const { data, error, mutate } = useSWR(`/api/${path}/maps`, fetcher) return { mapImages: data, isLoadingImages: !error && !data, isErrorImages: error, mutateImage: mutate, } } export default ReadyOrNotMaps;