Added room list filterig, fixed main blocks height issues

src/App.tsx

@@ -19,6 +19,9 @@ const useStyles = makeStyles((theme) => ({
   root: {
     padding: theme.spacing(10, 2, 2, 2),
     height: "100vh",
+    "& > div > *": {
+      height: "100%",
+    },
   },
 }));
 
@@ -44,8 +47,8 @@ export const App = () => {
   useEffect(() => {
     if (planContainer.current)
       setCanvasSize({
-        w: planContainer.current.clientWidth,
-        h: planContainer.current.clientHeight,
+        w: planContainer.current.clientWidth - theme.spacing(2),
+        h: planContainer.current.clientHeight - theme.spacing(1),
       });
   }, [planContainer.current]);
 
@@ -60,10 +63,7 @@ export const App = () => {
         </AppBar>
         <Grid className={classes.root} container>
           <Grid ref={planContainer} item xs={9}>
-            <BuildingPlan
-              width={planContainer.current?.clientWidth}
-              height={planContainer.current?.clientHeight}
-            />
+            <BuildingPlan width={canvasSize.w} height={canvasSize.h} />
           </Grid>
           <Grid item xs={3}>
             <RoomList />

src/components/RoomList.tsx

@@ -6,16 +6,26 @@ import {
   ListItemText,
   Typography,
   makeStyles,
+  InputLabel,
+  Select,
+  Box,
 } from "@material-ui/core";
+import { ChangeEvent, useState } from "react";
 
 import { useRoomContext } from "../context";
+import { FilterState } from "../types/ui";
 
 const useStyles = makeStyles((theme) => ({
   drawer: {
     width: "100%",
-    minHeight: "100%",
+    height: `calc(100% - ${theme.spacing(1)}px)`,
     padding: theme.spacing(2),
   },
+  filterBox: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  },
   indicatorContainer: {
     minWidth: theme.spacing(3),
   },
@@ -37,22 +47,54 @@ export const RoomList = () => {
 
   const { state } = useRoomContext();
 
+  const [filter, setFilter] = useState(FilterState.ALL);
+
+  const handleFilterChange = (
+    event: ChangeEvent<{ name?: string; value: unknown }>
+  ) => {
+    if (event.target && typeof event.target.value === "string")
+      setFilter(Number.parseInt(event.target.value));
+  };
+
   return (
     <Paper className={classes.drawer}>
       <Typography variant="h6">Class room avaliability status</Typography>
+      <Box className={classes.filterBox}>
+        <InputLabel htmlFor="filter">Filter</InputLabel>
+
+        <Select
+          native
+          value={filter}
+          onChange={handleFilterChange}
+          inputProps={{
+            name: "filter",
+            id: "filter",
+          }}
+        >
+          <option value={FilterState.ALL}>All</option>
+          <option value={FilterState.FREE}>Free</option>
+          <option value={FilterState.BUSY}>Busy</option>
+        </Select>
+      </Box>
       <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>
-        ))}
+        {state.map.map(({ title }, index) => {
+          if (filter === FilterState.FREE && !state.char[index].free) return "";
+          else if (filter === FilterState.BUSY && state.char[index].free)
+            return "";
+          else
+            return (
+              <ListItem key={title} 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/types/ui.ts

@@ -0,0 +1,5 @@
+export enum FilterState {
+  ALL,
+  FREE,
+  BUSY,
+}