refactor and style updates

Author: tlylt

components/FloorPlan.js

@@ -43,7 +43,14 @@ function makeGrid(row, col, occupied) {
 }
 
 const initialGrid = defaultGrid()
-export default function FloorPlan({ data, gap, handleClick, name, locked }) {
+export default function FloorPlan({ data, gap, handleClick, name, locked, location }) {
+    const getBg = (row, col) => {
+        if (location.row === row && location.col === col) {
+            return 'teal.300'
+        } else {
+            return 'teal'
+        }
+    }
     const [grid, setGridData] = useState(initialGrid)
     useEffect(() => {
         if (data) {
@@ -59,7 +66,7 @@ export default function FloorPlan({ data, gap, handleClick, name, locked }) {
                             <div className={`${colIdx === gap.col ? 'pl-10' : ''}`}>
                                 {col.occupied ?
                                     <Tooltip label={col.name} hasArrow placement='auto'>
-                                        <Avatar textColor={'white'} name={col.name ? col.name : rowIdx + ' ' + colIdx} bg={col.occupied ? 'teal' : 'gray'} >
+                                        <Avatar textColor={'white'} name={col.name ? col.name : rowIdx + ' ' + colIdx} bg={getBg(rowIdx, colIdx)} >
                                             <AvatarBadge boxSize='1.25em' bg='green.500' />
                                         </Avatar>
                                     </Tooltip> : <Avatar />}
@@ -68,7 +75,7 @@ export default function FloorPlan({ data, gap, handleClick, name, locked }) {
                         <PopoverContent>
                             <PopoverArrow />
                             <PopoverCloseButton />
-                            <PopoverHeader>Row-{rowIdx + 1} Col-{colIdx + 1}</PopoverHeader>
+                            <PopoverHeader>Row {rowIdx + 1} Column {colIdx + 1}</PopoverHeader>
                             <PopoverBody>
                                 <div>{col.name ? `Occupant: ${col.name}` : ''}</div>
                                 {col.occupied ? undefined : name === '' ? <div>Enter your name below first!</div> :

pages/[id].js

@@ -4,7 +4,7 @@ import {
     Input
 } from '@chakra-ui/react'
 import { Skeleton } from '@chakra-ui/react'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import useSWR, { useSWRConfig } from 'swr'
@@ -96,7 +96,7 @@ export default function Room() {
     const { data, error } = useSWR(`/api/rooms/room?id=${id}`, fetcher)
     const [password, setPassword] = useState('')
     const handlePasswordChange = (event) => setPassword(event.target.value)
-    const handleClick = async (row, col) => {
+    const handleClick = useCallback(async (row, col) => {
         mutate(`/api/rooms/room?id=${id}`, { ...data, occupied: [...data.occupied, { name: name, row: row, col: col }] }, false)
         let res = await fetch(`/api/rooms/room?id=${id}`, {
             method: "POST",
@@ -124,8 +124,9 @@ export default function Room() {
             setLocked(true)
             setLocation({ row, col })
         }
-    }
-    const handleExitSeat = async ({ row, col }) => {
+    },[id, name, data])
+    
+    const handleExitSeat = useCallback(async ({ row, col }) => {
         mutate(`/api/rooms/room?id=${id}`, { ...data, occupied: [...data.occupied.filter(occupied => !(occupied.row === row && occupied.col === col))] }, false)
         let res = await fetch(`/api/rooms/room?id=${id}`, {
             method: "POST",
@@ -150,8 +151,8 @@ export default function Room() {
             setLocked(false)
             setLocation({ row: -1, col: -1 })
         }
-    }
-    const handleClearSeat = async () => {
+    }, [id,data])
+    const handleClearSeat = useCallback(async () => {
         if (password.trim() === '') {
             toast({
                 title: `Please enter the room password`,
@@ -193,8 +194,8 @@ export default function Room() {
                 isClosable: true,
             })
         }
-    }
-    const handleDeleteRoom = async () => {
+    }, [id, password, data])
+    const handleDeleteRoom = useCallback(async () => {
         if (password.trim() === '') {
             toast({
                 title: `Please enter the room password`,
@@ -238,17 +239,16 @@ export default function Room() {
                 isClosable: true,
             })
         }
-    }
-
-    const handleRefresh = async () => {
+    }, [password, id])
+    const handleRefresh = useCallback(async () => {
         toast({
             title: `Fetched latest data`,
             status: 'success',
             position: 'top',
             isClosable: true,
         })
         mutate(`/api/rooms/room?id=${id}`)
-    }
+    }, [id])
 
     if (!data || error) {
         return DefaultPage
@@ -291,7 +291,7 @@ export default function Room() {
                     <div className="flex justify-center mb-10">
                         <div className="py-2 mb-10 overflow-x-auto rounded-lg lg:mb-0">
                             <div className="grid gap-2 lg:gap-4">
-                                <FloorPlan data={data} gap={data.gap} handleClick={handleClick} name={name} locked={locked} />
+                                <FloorPlan data={data} gap={data.gap} handleClick={handleClick} name={name} locked={locked} location={location}/>
                             </div>
                         </div>
                     </div>

utils/constants.js

@@ -10,7 +10,7 @@ export const SAMPLE_ROOMS = [
             row: 5,
             col: 5,
         },
-        creationTime: 'January 1'
+        creationTime: 'Jan 11, 11 PM'
     },
     {
         id: 'world',
@@ -23,7 +23,7 @@ export const SAMPLE_ROOMS = [
             row: 5,
             col: 5,
         },
-        creationTime: 'January 1'
+        creationTime: 'Jan 11, 11 PM'
     },
     {
         id: 'hello',
@@ -36,7 +36,7 @@ export const SAMPLE_ROOMS = [
             row: 5,
             col: 5,
         },
-        creationTime: 'January 1'
+        creationTime: 'Jan 11, 11 PM'
     },
     {
         id: 'world',
@@ -49,7 +49,7 @@ export const SAMPLE_ROOMS = [
             row: 5,
             col: 5,
         },
-        creationTime: 'January 1'
+        creationTime: 'Jan 11, 11 PM'
     },
     {
         id: 'hello',
@@ -62,7 +62,7 @@ export const SAMPLE_ROOMS = [
             row: 5,
             col: 5,
         },
-        creationTime: 'January 1'
+        creationTime: 'Jan 11, 11 PM'
     },
     {
         id: 'world',
@@ -75,7 +75,7 @@ export const SAMPLE_ROOMS = [
             row: 5,
             col: 5,
         },
-        creationTime: 'January 1'
+        creationTime: 'Jan 11, 11 PM'
     },
     {
         id: 'hello',
@@ -88,7 +88,7 @@ export const SAMPLE_ROOMS = [
             row: 5,
             col: 5,
         },
-        creationTime: 'January 1'
+        creationTime: 'Jan 11, 11 PM'
     },
     {
         id: 'world',
@@ -101,6 +101,6 @@ export const SAMPLE_ROOMS = [
             row: 5,
             col: 5,
         },
-        creationTime: 'January 1'
+        creationTime: 'Jan 11, 11 PM'
     }
 ]