From 8f4e8ed481e98a4971e31739d949d77835381332 Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <600878@stud.hvl.no>
Date: Wed, 19 Jul 2023 22:53:47 +0200
Subject: [PATCH] Switched Component type to React.FC type

---
 pac-man-board-game/ClientApp/src/App.tsx             |  4 ++--
 .../src/components/{Button.tsx => button.tsx}        |  4 ++--
 pac-man-board-game/ClientApp/src/components/dice.tsx | 12 ++++--------
 .../ClientApp/src/components/gameBoard.tsx           |  6 +++---
 .../ClientApp/src/components/gameButton.tsx          |  6 +++---
 .../ClientApp/src/components/gameComponent.tsx       |  4 ++--
 .../ClientApp/src/components/gameTile.tsx            | 12 ++++++------
 .../ClientApp/src/components/layout.tsx              |  4 ++--
 .../ClientApp/src/components/navMenu.tsx             |  4 ++--
 .../ClientApp/src/components/playerStats.tsx         |  4 ++--
 pac-man-board-game/ClientApp/src/game/box.ts         |  6 +++---
 pac-man-board-game/ClientApp/src/game/pellet.ts      |  4 ++--
 pac-man-board-game/ClientApp/src/index.tsx           |  8 ++++----
 pac-man-board-game/ClientApp/src/pages/counter.tsx   |  4 ++--
 pac-man-board-game/ClientApp/src/pages/home.tsx      |  4 ++--
 pac-man-board-game/ClientApp/src/pages/lobby.tsx     |  4 ++--
 pac-man-board-game/ClientApp/src/types/props.d.ts    |  2 --
 pac-man-board-game/ClientApp/src/utils/dom.ts        |  0
 pac-man-board-game/pac-man-board-game.csproj         |  1 +
 19 files changed, 44 insertions(+), 49 deletions(-)
 rename pac-man-board-game/ClientApp/src/components/{Button.tsx => button.tsx} (82%)
 delete mode 100644 pac-man-board-game/ClientApp/src/utils/dom.ts

diff --git a/pac-man-board-game/ClientApp/src/App.tsx b/pac-man-board-game/ClientApp/src/App.tsx
index 91520a1..44ac267 100644
--- a/pac-man-board-game/ClientApp/src/App.tsx
+++ b/pac-man-board-game/ClientApp/src/App.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import React, {FC} from "react";
 import {Route, Routes} from "react-router-dom";
 import Layout from "./components/layout";
 import AppRoutes from "./AppRoutes";
 import "./index.css";
 
-export const App: Component = () => (
+export const App: FC = () => (
   <Layout>
     <Routes>
       {AppRoutes.map((route, index) => {
diff --git a/pac-man-board-game/ClientApp/src/components/Button.tsx b/pac-man-board-game/ClientApp/src/components/button.tsx
similarity index 82%
rename from pac-man-board-game/ClientApp/src/components/Button.tsx
rename to pac-man-board-game/ClientApp/src/components/button.tsx
index 6d3be9b..7bcf752 100644
--- a/pac-man-board-game/ClientApp/src/components/Button.tsx
+++ b/pac-man-board-game/ClientApp/src/components/button.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React, {FC} from "react";
 
-export const Button: Component<ButtonProps> = (
+export const Button: FC<ButtonProps> = (
   {
     className,
     onClick,
diff --git a/pac-man-board-game/ClientApp/src/components/dice.tsx b/pac-man-board-game/ClientApp/src/components/dice.tsx
index f37a015..f0fc017 100644
--- a/pac-man-board-game/ClientApp/src/components/dice.tsx
+++ b/pac-man-board-game/ClientApp/src/components/dice.tsx
@@ -1,13 +1,9 @@
-import React from "react";
+import React, {FC} from "react";
 import {useAtom, useAtomValue} from "jotai";
 import {selectedDiceAtom, thisPlayerAtom} from "../utils/state";
-import {Button} from "./Button";
+import {Button} from "./button";
 
-interface AllDiceProps extends ComponentProps {
-  values?: number[],
-}
-
-export const AllDice: Component<AllDiceProps> = (
+export const AllDice: FC<{ values?: number[] } & ComponentProps> = (
   {
     className,
     values,
@@ -35,7 +31,7 @@ interface DiceProps extends ComponentProps {
   onClick?: (value: number) => void,
 }
 
-export const Dice: Component<DiceProps> = (
+export const Dice: FC<DiceProps> = (
   {
     className,
     value,
diff --git a/pac-man-board-game/ClientApp/src/components/gameBoard.tsx b/pac-man-board-game/ClientApp/src/components/gameBoard.tsx
index c6b6092..7ec3b21 100644
--- a/pac-man-board-game/ClientApp/src/components/gameBoard.tsx
+++ b/pac-man-board-game/ClientApp/src/components/gameBoard.tsx
@@ -1,4 +1,4 @@
-import React, {Fragment, useEffect, useState} from "react";
+import React, {FC, Fragment, useEffect, useState} from "react";
 import {Character} from "../game/character";
 import findPossiblePositions from "../game/possibleMovesAlgorithm";
 import {GameTile} from "./gameTile";
@@ -15,7 +15,7 @@ interface BoardProps extends ComponentProps {
 
 const modalOpenAtom: PrimitiveAtom<boolean> = atom(false);
 
-const Board: Component<BoardProps> = (
+const Board: FC<BoardProps> = (
   {
     className,
     onMove,
@@ -130,7 +130,7 @@ const Board: Component<BoardProps> = (
 
 export default Board;
 
-const SelectPlayerModal: Component = () => {
+const SelectPlayerModal: FC = () => {
   const [isOpen, setIsOpen] = useAtom(modalOpenAtom);
   const currentPlayer = useAtomValue(currentPlayerAtom);
   const allPlayers = useAtomValue(playersAtom).filter(p => p !== currentPlayer);
diff --git a/pac-man-board-game/ClientApp/src/components/gameButton.tsx b/pac-man-board-game/ClientApp/src/components/gameButton.tsx
index c190296..af496ec 100644
--- a/pac-man-board-game/ClientApp/src/components/gameButton.tsx
+++ b/pac-man-board-game/ClientApp/src/components/gameButton.tsx
@@ -1,8 +1,8 @@
-import React, {MouseEventHandler} from "react";
+import React, {FC, MouseEventHandler} from "react";
 import {State} from "../game/player";
 import {currentPlayerAtom, playersAtom, rollDiceButtonAtom, thisPlayerAtom} from "../utils/state";
 import {useAtomValue} from "jotai";
-import {Button} from "./Button";
+import {Button} from "./button";
 import rules from "../game/rules";
 
 interface GameButtonProps extends ComponentProps {
@@ -10,7 +10,7 @@ interface GameButtonProps extends ComponentProps {
   onRollDiceClick?: MouseEventHandler
 }
 
-const GameButton: Component<GameButtonProps> = (
+const GameButton: FC<GameButtonProps> = (
   {
     onReadyClick,
     onRollDiceClick,
diff --git a/pac-man-board-game/ClientApp/src/components/gameComponent.tsx b/pac-man-board-game/ClientApp/src/components/gameComponent.tsx
index f325f2c..75ad28b 100644
--- a/pac-man-board-game/ClientApp/src/components/gameComponent.tsx
+++ b/pac-man-board-game/ClientApp/src/components/gameComponent.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from "react";
+import React, {FC, useEffect} from "react";
 import {AllDice} from "./dice";
 import {doAction, GameAction} from "../utils/actions";
 import GameBoard from "./gameBoard";
@@ -25,7 +25,7 @@ const wsService = new WebSocketService(import.meta.env.VITE_API_WS);
 // TODO show box with collected pellets
 // TODO layout
 
-export const GameComponent: Component<{ player: Player, map: GameMap }> = ({player, map}) => {
+export const GameComponent: FC<{ player: Player, map: GameMap }> = ({player, map}) => {
 
   const players = useAtomValue(playersAtom);
   const dice = useAtomValue(diceAtom);
diff --git a/pac-man-board-game/ClientApp/src/components/gameTile.tsx b/pac-man-board-game/ClientApp/src/components/gameTile.tsx
index e24590c..22bab71 100644
--- a/pac-man-board-game/ClientApp/src/components/gameTile.tsx
+++ b/pac-man-board-game/ClientApp/src/components/gameTile.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {FC, useEffect, useState} from "react";
 import {TileType} from "../game/tileType";
 import {Character, Dummy} from "../game/character";
 import {Direction} from "../game/direction";
@@ -16,7 +16,7 @@ interface TileWithCharacterProps extends ComponentProps {
   showPath?: boolean
 }
 
-export const GameTile: Component<TileWithCharacterProps> = (
+export const GameTile: FC<TileWithCharacterProps> = (
   {
     possiblePath,
     character,
@@ -48,7 +48,7 @@ export const GameTile: Component<TileWithCharacterProps> = (
   </Tile>
 );
 
-const Circle: Component<{ colour?: Colour } & ComponentProps> = ({colour = Colour.White, className}) => (
+const Circle: FC<{ colour?: Colour } & ComponentProps> = ({colour = Colour.White, className}) => (
   <div className={`flex-center w-full h-full ${className}`}>
     <div className={`w-1/2 h-1/2 rounded-full`}
          style={{backgroundColor: colour}}/>
@@ -65,7 +65,7 @@ interface TileProps extends ChildProps {
   characterClass?: string,
 }
 
-const Tile: Component<TileProps> = (
+const Tile: FC<TileProps> = (
   {
     type = TileType.empty,
     onClick,
@@ -116,7 +116,7 @@ const Tile: Component<TileProps> = (
   );
 };
 
-const AddDummy: Component<{ path?: Path } & ComponentProps> = ({path}) => (
+const AddDummy: FC<{ path?: Path } & ComponentProps> = ({path}) => (
   <>
     {path &&
         <div className={"flex-center wh-full"}>
@@ -131,7 +131,7 @@ interface CharacterComponentProps extends ComponentProps {
   onClick?: Action<Character>,
 }
 
-const CharacterComponent: Component<CharacterComponentProps> = (
+const CharacterComponent: FC<CharacterComponentProps> = (
   {
     character,
     onClick,
diff --git a/pac-man-board-game/ClientApp/src/components/layout.tsx b/pac-man-board-game/ClientApp/src/components/layout.tsx
index 5ff1abf..fedac80 100644
--- a/pac-man-board-game/ClientApp/src/components/layout.tsx
+++ b/pac-man-board-game/ClientApp/src/components/layout.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, {FC} from "react";
 import NavMenu from "./navMenu";
 
-const Layout: Component<ChildProps> = ({children}) => (
+const Layout: FC<ChildProps> = ({children}) => (
   <div>
     <NavMenu/>
     <main>
diff --git a/pac-man-board-game/ClientApp/src/components/navMenu.tsx b/pac-man-board-game/ClientApp/src/components/navMenu.tsx
index 7299e80..d8aa0dd 100644
--- a/pac-man-board-game/ClientApp/src/components/navMenu.tsx
+++ b/pac-man-board-game/ClientApp/src/components/navMenu.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, {FC} from "react";
 import {Link} from "react-router-dom";
 
-const NavMenu: Component = () => {
+const NavMenu: FC = () => {
 
   const [collapsed, setCollapsed] = React.useState(true);
 
diff --git a/pac-man-board-game/ClientApp/src/components/playerStats.tsx b/pac-man-board-game/ClientApp/src/components/playerStats.tsx
index 8445bb7..41192de 100644
--- a/pac-man-board-game/ClientApp/src/components/playerStats.tsx
+++ b/pac-man-board-game/ClientApp/src/components/playerStats.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React, {FC} from "react";
 import Player, {State} from "../game/player";
 import {useAtomValue} from "jotai";
 import {currentPlayerNameAtom} from "../utils/state";
 
-const PlayerStats: Component<{ player: Player } & ComponentProps> = (
+const PlayerStats: FC<{ player: Player } & ComponentProps> = (
   {
     player,
     className,
diff --git a/pac-man-board-game/ClientApp/src/game/box.ts b/pac-man-board-game/ClientApp/src/game/box.ts
index 6428cb9..eed894d 100644
--- a/pac-man-board-game/ClientApp/src/game/box.ts
+++ b/pac-man-board-game/ClientApp/src/game/box.ts
@@ -11,15 +11,15 @@ export default class Box {
   }
 
   get powerPellet(): Pellet | undefined {
-    return this.Pellets.find(pellet => pellet.isPowerPellet);
+    return this.Pellets.find(pellet => pellet.IsPowerPellet);
   }
 
   get count(): number {
-    return this.Pellets.filter(pellet => !pellet.isPowerPellet).length;
+    return this.Pellets.filter(pellet => !pellet.IsPowerPellet).length;
   }
 
   get countPowerPellets(): number {
-    return this.Pellets.filter(pellet => pellet.isPowerPellet).length;
+    return this.Pellets.filter(pellet => pellet.IsPowerPellet).length;
   }
 
   public addPellet(pellet: Pellet): void {
diff --git a/pac-man-board-game/ClientApp/src/game/pellet.ts b/pac-man-board-game/ClientApp/src/game/pellet.ts
index 64cff0c..6be527d 100644
--- a/pac-man-board-game/ClientApp/src/game/pellet.ts
+++ b/pac-man-board-game/ClientApp/src/game/pellet.ts
@@ -1,7 +1,7 @@
 export default class Pellet {
-  public readonly isPowerPellet: boolean;
+  public readonly IsPowerPellet: boolean;
 
   public constructor(isPowerPellet = false) {
-    this.isPowerPellet = isPowerPellet;
+    this.IsPowerPellet = isPowerPellet;
   }
 }
diff --git a/pac-man-board-game/ClientApp/src/index.tsx b/pac-man-board-game/ClientApp/src/index.tsx
index 59be048..0010f02 100644
--- a/pac-man-board-game/ClientApp/src/index.tsx
+++ b/pac-man-board-game/ClientApp/src/index.tsx
@@ -7,13 +7,13 @@ import reportWebVitals from './reportWebVitals';
 
 const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
 const rootElement = document.getElementById('root');
-// @ts-ignore
+if (rootElement === null) throw new Error("Root element is null");
 const root = createRoot(rootElement);
 
 root.render(
-    <BrowserRouter basename={baseUrl ?? undefined}>
-        <App/>
-    </BrowserRouter>);
+  <BrowserRouter basename={baseUrl ?? undefined}>
+    <App/>
+  </BrowserRouter>);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
diff --git a/pac-man-board-game/ClientApp/src/pages/counter.tsx b/pac-man-board-game/ClientApp/src/pages/counter.tsx
index d6efc59..91f5603 100644
--- a/pac-man-board-game/ClientApp/src/pages/counter.tsx
+++ b/pac-man-board-game/ClientApp/src/pages/counter.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React, {FC} from "react";
 import WebSocketService from "../websockets/WebSocketService";
 
 const ws = new WebSocketService("wss://localhost:3000/api/ws");
 
-export const Counter: Component = () => {
+export const Counter: FC = () => {
 
   const [currentCount, setCurrentCount] = React.useState(0);
 
diff --git a/pac-man-board-game/ClientApp/src/pages/home.tsx b/pac-man-board-game/ClientApp/src/pages/home.tsx
index b964629..3589b6a 100644
--- a/pac-man-board-game/ClientApp/src/pages/home.tsx
+++ b/pac-man-board-game/ClientApp/src/pages/home.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from "react";
+import React, {FC, useRef} from "react";
 import Player from "../game/player";
 import Input from "../components/input";
 import Dropdown from "../components/dropdown";
@@ -7,7 +7,7 @@ import {useNavigate} from "react-router-dom";
 import {useSetAtom} from "jotai";
 import {thisPlayerAtom} from "../utils/state";
 
-const Home: Component = () => {
+const Home: FC = () => {
 
   const input = useRef<HTMLInputElement>(null);
   const dropdown = useRef<HTMLSelectElement>(null);
diff --git a/pac-man-board-game/ClientApp/src/pages/lobby.tsx b/pac-man-board-game/ClientApp/src/pages/lobby.tsx
index b75cb53..4837e66 100644
--- a/pac-man-board-game/ClientApp/src/pages/lobby.tsx
+++ b/pac-man-board-game/ClientApp/src/pages/lobby.tsx
@@ -1,6 +1,6 @@
 import React, {FC, Suspense} from "react";
 import {atom, useAtomValue} from "jotai";
-import {Button} from "../components/Button";
+import {Button} from "../components/button";
 import {thisPlayerAtom} from "../utils/state";
 
 const fetchAtom = atom(async () => {
@@ -16,7 +16,7 @@ const LobbyPage: FC = () => ( // TODO check if player is defined in storage, if
 
 export default LobbyPage;
 
-const GameTable: Component = ({className}) => {
+const GameTable: FC<ComponentProps> = ({className}) => {
 
   const data = useAtomValue(fetchAtom);
   const thisPlayer = useAtomValue(thisPlayerAtom);
diff --git a/pac-man-board-game/ClientApp/src/types/props.d.ts b/pac-man-board-game/ClientApp/src/types/props.d.ts
index 1e0828f..ebcda14 100644
--- a/pac-man-board-game/ClientApp/src/types/props.d.ts
+++ b/pac-man-board-game/ClientApp/src/types/props.d.ts
@@ -1,5 +1,3 @@
-type Component<T = ComponentProps> = (props: T) => React.JSX.Element | null;
-
 type FRComponent<T = ComponentProps, HTML extends HTMLElement = HTMLElement> = React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<HTML>>;
 
 interface ComponentProps {
diff --git a/pac-man-board-game/ClientApp/src/utils/dom.ts b/pac-man-board-game/ClientApp/src/utils/dom.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/pac-man-board-game/pac-man-board-game.csproj b/pac-man-board-game/pac-man-board-game.csproj
index f00e90c..41bb151 100644
--- a/pac-man-board-game/pac-man-board-game.csproj
+++ b/pac-man-board-game/pac-man-board-game.csproj
@@ -47,6 +47,7 @@
       <TypeScriptCompile Remove="ClientApp\src\game\playerStats.tsx" />
       <TypeScriptCompile Remove="ClientApp\src\websockets\actions.ts" />
       <TypeScriptCompile Remove="ClientApp\src\utils\colours.ts" />
+      <TypeScriptCompile Remove="ClientApp\src\utils\dom.ts" />
     </ItemGroup>
 
     <ItemGroup>