Add typescript checking

src/Contestant.tsx

@@ -15,11 +15,6 @@ const Contestant = () => {
   useEffect(() => {
     socket.emit("contestant-join", { room, signature });
   }, []);
-  useEffect(() => {
-    if (parent.current) {
-      setWidth(parent.current.getBoundingClientRect().width);
-    }
-  }, [parent]);
 
   const handleBuzz = debounce(
     () => {

src/DrawPad.tsx

@@ -1,20 +1,22 @@
 import { useRef, useState, useEffect } from "react";
+import type { PointerEvent } from "react";
 
 type Props = {
-  height: number,
-  lines: number[][],
-  onUpdateImage?: (path: number[]) => unknown,
-  readonly?: boolean,
+  height: number;
+  lines: number[][];
+  onUpdateImage?: (path: number[]) => unknown;
+  readonly?: boolean;
 };
 
-const cursorPos = (e) => {
-  const rect = e.target.getBoundingClientRect();
+const cursorPos = (e: PointerEvent<HTMLCanvasElement>) => {
+  const target = e.target as HTMLCanvasElement;
+  const rect: DOMRect = target.getBoundingClientRect();
   return [e.clientX - rect.left, e.clientY - rect.top];
 };
 
 const DrawPad = ({ height, lines, onUpdateImage, readonly = false }: Props) => {
-  const parent = useRef();
-  const canvas = useRef();
+  const parent = useRef<HTMLElement>();
+  const canvas = useRef<HTMLCanvasElement>();
   const [width, setWidth] = useState(0);
   const [down, setDown] = useState(false);
   const [path, setPath] = useState([]);
@@ -51,7 +53,7 @@ const DrawPad = ({ height, lines, onUpdateImage, readonly = false }: Props) => {
     setDown(true);
   };
 
-  const drawLine = (e) => {
+  const drawLine = (e: PointerEvent<HTMLCanvasElement>) => {
     if (!down) return;
     const [x, y] = cursorPos(e);
     setPath([...path, x, y]);

src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import { setup } from './socket';
+import { setup } from "./socket";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>

src/socket.ts

@@ -11,15 +11,18 @@ export const setup = () => {
     console.log("Connected to socket");
   });
 
-  socket.on("set-code", ({ code }) => {
+  socket.on("set-code", ({ code }: { code: string }) => {
     store.dispatch(setRoomCode(code));
   });
 
-  socket.on("contestant-joined", (data) => {
-    store.dispatch(addContestant(data));
-  });
+  socket.on(
+    "contestant-joined",
+    (data: { sid: string; signature: number[][] }) => {
+      store.dispatch(addContestant(data));
+    }
+  );
 
-  socket.on("categories", (data) =>
+  socket.on("categories", (data: string[]) =>
     data.forEach((category) => store.dispatch(addCategory(category)))
   );
 };

src/store/displaySlice.ts

@@ -5,7 +5,7 @@ interface DisplayState {
   contestants: Record<string, Contestant>;
 }
 
-interface Contestant {
+export interface Contestant {
   signature: number[][];
   score: number;
   active: boolean;