Designed and implemented main page

src/App.tsx

@@ -1,13 +1,26 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   ThemeProvider,
   createTheme,
   useMediaQuery,
   CssBaseline,
+  AppBar,
+  Toolbar,
+  Typography,
+  makeStyles,
+  Grid,
 } from "@material-ui/core";
 
-import { RoomContextProvider } from "./context";
+import { RoomContextProvider, useRoomContext } from "./context";
 import { BuildingPlan } from "./components/BuildingPlan";
+import { RoomList } from "./components/RoomList";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(10, 2, 2, 2),
+    height: "100vh",
+  },
+}));
 
 export const App = () => {
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
@@ -22,11 +35,40 @@ export const App = () => {
     [prefersDarkMode]
   );
 
+  const planContainer = useRef<HTMLDivElement>(null);
+
+  const classes = useStyles();
+
+  const [canvasSize, setCanvasSize] = useState({ w: 0, h: 0 });
+
+  useEffect(() => {
+    if (planContainer.current)
+      setCanvasSize({
+        w: planContainer.current.clientWidth,
+        h: planContainer.current.clientHeight,
+      });
+  }, [planContainer.current]);
+
   return (
     <ThemeProvider theme={theme}>
       <RoomContextProvider>
         <CssBaseline />
-        <BuildingPlan height={window.innerHeight} width={window.innerWidth} />
+        <AppBar>
+          <Toolbar>
+            <Typography variant="h6">roomruler</Typography>
+          </Toolbar>
+        </AppBar>
+        <Grid className={classes.root} container>
+          <Grid ref={planContainer} item xs={9}>
+            <BuildingPlan
+              width={planContainer.current?.clientWidth}
+              height={planContainer.current?.clientHeight}
+            />
+          </Grid>
+          <Grid item xs={3}>
+            <RoomList />
+          </Grid>
+        </Grid>
       </RoomContextProvider>
     </ThemeProvider>
   );

src/components/BuildingPlan.tsx

@@ -1,9 +1,11 @@
-import { useCallback, useEffect, useState } from "react";
+import { useTheme } from "@material-ui/core";
+import { useCallback } from "react";
+
 import { useRoomContext } from "../context";
 import { RoomDisplay } from "../types/room";
 import { Canvas } from "./Canvas";
 
-export type BuildingPlanProps = { width: number; height: number };
+export type BuildingPlanProps = { width?: number; height?: number };
 
 const getRoomByCoord = (x: number, y: number, map: RoomDisplay[]) => {
   for (let i = 0; i < map.length; i++) {
@@ -23,21 +25,27 @@ const getRoomByCoord = (x: number, y: number, map: RoomDisplay[]) => {
 export const BuildingPlan = ({ width, height }: BuildingPlanProps) => {
   const { state, toggleFree } = useRoomContext();
 
+  const theme = useTheme();
+
   const draw = useCallback(
     (ctx: CanvasRenderingContext2D) => {
       // Text styles
-      ctx.font = "20px sans-serif";
+      ctx.font = `${theme.typography.h6.fontSize} ${theme.typography.h6.fontFamily}`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
 
       state.map.map(({ coordinates, size, title }, index) => {
         // Draw room rectangle
         const { free } = state.char[index];
-        ctx.fillStyle = free ? "green" : "gray";
+        ctx.fillStyle = free
+          ? theme.palette.success.main
+          : theme.palette.grey[500];
         ctx.fillRect(coordinates.x, coordinates.y, size.w, size.h);
 
         // Draw its number
-        ctx.fillStyle = "black";
+        ctx.fillStyle = free
+          ? theme.palette.success.contrastText
+          : theme.palette.getContrastText(theme.palette.grey[500]);
         ctx.fillText(
           `${title}`,
           coordinates.x + size.w / 2,

src/components/Canvas.tsx

@@ -7,9 +7,16 @@ export type ClickCb = (x: number, y: number) => void;
 export type CanvasProps = HTMLProps<HTMLCanvasElement> & {
   draw: DrawFT;
   clickCb: ClickCb;
+  width?: number;
+  height?: number;
 };
 
-export const useCanvas = (draw: DrawFT, clickCb: ClickCb) => {
+export const useCanvas = (
+  draw: DrawFT,
+  clickCb: ClickCb,
+  width?: number,
+  height?: number
+) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -21,7 +28,7 @@ export const useCanvas = (draw: DrawFT, clickCb: ClickCb) => {
     if (!context) throw new Error("Couldn't get canvas context");
 
     draw(context);
-  }, [draw]);
+  }, [draw, width, height]);
 
   const onClick = useCallback(
     (event: MouseEvent<HTMLCanvasElement>) => {
@@ -40,8 +47,22 @@ export const useCanvas = (draw: DrawFT, clickCb: ClickCb) => {
   return { canvasRef, onClick };
 };
 
-export const Canvas = ({ draw, clickCb, ...props }: CanvasProps) => {
+export const Canvas = ({
-  const { canvasRef, onClick } = useCanvas(draw, clickCb);
+  draw,
+  clickCb,
+  width,
+  height,
+  ...props
+}: CanvasProps) => {
+  const { canvasRef, onClick } = useCanvas(draw, clickCb, width, height);
 
-  return <canvas onClick={onClick} ref={canvasRef} {...props} />;
+  return (
+    <canvas
+      onClick={onClick}
+      width={width}
+      height={height}
+      ref={canvasRef}
+      {...props}
+    />
+  );
 };

src/components/RoomList.tsx

@@ -0,0 +1,59 @@
+import {
+  Paper,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  makeStyles,
+} from "@material-ui/core";
+
+import { useRoomContext } from "../context";
+
+const useStyles = makeStyles((theme) => ({
+  drawer: {
+    width: "100%",
+    minHeight: "100%",
+    padding: theme.spacing(2),
+  },
+  indicatorContainer: {
+    minWidth: theme.spacing(3),
+  },
+  indicator: {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+    borderRadius: "100%",
+  },
+  free: {
+    background: theme.palette.success.main,
+  },
+  busy: {
+    background: theme.palette.grey[500],
+  },
+}));
+
+export const RoomList = () => {
+  const classes = useStyles();
+
+  const { state } = useRoomContext();
+
+  return (
+    <Paper className={classes.drawer}>
+      <Typography variant="h6">Class room avaliability status</Typography>
+      <List>
+        {state.map.map(({ title }, index) => (
+          <ListItem disableGutters>
+            <ListItemIcon className={classes.indicatorContainer}>
+              <div
+                className={`${classes.indicator} ${
+                  state.char[index].free ? classes.free : classes.busy
+                }`}
+              />
+            </ListItemIcon>
+            <ListItemText primary={title} />
+          </ListItem>
+        ))}
+      </List>
+    </Paper>
+  );
+};

src/context.tsx

@@ -1,5 +1,6 @@
 import produce from "immer";
 import { createContext, FC, useContext, useState } from "react";
+
 import { defaultState } from "./constants";
 import { ContextData, ContextValue } from "./types/context";
 

src/types/context.ts

@@ -1,4 +1,3 @@
-import { Dispatch, SetStateAction } from "react";
 import { RoomDisplay, RoomState } from "./room";
 
 export interface ContextData {