removed typescript "bloat"

10 files changed, 40 insertions, 109 deletions

diff --git a/src/components/App.tsx b/src/components/App.js
index a76e3b3..353e464 100644
--- a/src/components/App.tsx
+++ b/src/components/App.js
@@ -23,13 +23,13 @@ import MultiplayerGrid from './MultiplayerGrid';
 import Footer from './Footer';
 import './style.css';
 
-const App: React.FC = () => {
-  const [scoreX, setScoreX] = useState<number>(0);
-  const [scoreO, setScoreO] = useState<number>(0);
-  const [turn, setTurn] = useState<number>(1);
-  const [showMessageBox, setShowMessageBox] = useState<boolean>(false);
-  const [message, setMessage] = useState<string>("");
-  const mp: boolean = true;
+const App = () => {
+  const [scoreX, setScoreX] = useState(0);
+  const [scoreO, setScoreO] = useState(0);
+  const [turn, setTurn] = useState(1);
+  const [showMessageBox, setShowMessageBox] = useState(false);
+  const [message, setMessage] = useState("");
+  const mp = true;
   return (
     <>
       {showMessageBox && 
diff --git a/src/components/Box.tsx b/src/components/Box.js
index abe8b66..effd446 100644
--- a/src/components/Box.tsx
+++ b/src/components/Box.js
@@ -19,13 +19,7 @@
 import React from 'react';
 import './style.css';
 
-interface Props {
-  sign: number
-  index: number
-  setSign: (index: number) => void
-}
-
-const Box: React.FC<Props> = (props) => {
+const Box = (props) => {
   const handleClick = () => {
     props.sign === 2 &&
       props.setSign(props.index)
diff --git a/src/components/Footer.tsx b/src/components/Footer.js
index 3bcaa2a..3ec1aea 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.js
@@ -19,7 +19,7 @@
 import React from 'react';
 import './style.css';
 
-const Footer: React.FC = () => {
+const Footer = () => {
   return (
     <div className={"Footer"}>
       <p><a href="https://github.com/MikunoNaka/tic-tac-toe">Tic Tac Toe</a>  Copyright (C) 2021  Vidhu Kant Sharma</p>
diff --git a/src/components/Grid.tsx b/src/components/Grid.js
index f12766f..289f142 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.js
@@ -16,49 +16,38 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
+import React, { useState, useEffect } from 'react';
 import Box from './Box';
 import './style.css';
 
-interface Props {
-  turn: number
-  setTurn: Dispatch<SetStateAction<number>>
-  scoreX: number
-  scoreO: number
-  setScoreX: Dispatch<SetStateAction<number>>
-  setScoreO: Dispatch<SetStateAction<number>>
-  setMessage: Dispatch<SetStateAction<string>>
-  setShowMessage: Dispatch<SetStateAction<boolean>>
-}
-
-const Grid: React.FC<Props> = (props) => {
+const Grid = (props) => {
   // 0 is O, 1 is X, 2 is blank
-  const [board, setBoard] = useState<number[]>([2,2,2,2,2,2,2,2,2]);
+  const [board, setBoard] = useState([2,2,2,2,2,2,2,2,2]);
   const turn = props.turn;
 
-  const getBoard = (index: number) => {
+  const getBoard = (index) => {
     setBoard(board.slice(0, index).concat(turn).concat(board.slice(index+1, 9)));
     props.setTurn(turn === 1 ? 0 : 1)
   }
 
-  const allEqual = (arr: number[]) =>
+  const allEqual = (arr) =>
     arr.includes(2) ? false : arr.every(i => i === arr[0])
 
-  const getRow = (r: number) => board.slice(r * 3, (r * 3) + 3);
-  const getRows: any = (r: number = 0) => 
+  const getRow = (r) => board.slice(r * 3, (r * 3) + 3);
+  const getRows = (r = 0) => 
     r <= 2 ? [getRow(r)].concat(getRows(r+1)) : getRow(r) 
 
-  const getCol = (arr: number[][], c: number) => arr.map((i: any) => i[c])
-  const getCols: any = (rows: number[][], c: number = 0) => 
+  const getCol = (arr, c) => arr.map((i) => i[c])
+  const getCols = (rows, c = 0) => 
     c < 2 ? [getCol(rows, c)].concat(getCols(rows, c+1)) : [getCol(rows, c)]
 
-  const getLeftDiagonal: any = (i: number = 0) =>
+  const getLeftDiagonal = (i = 0) =>
     i < 3 ? [getRow(i)[i]].concat(getLeftDiagonal(i+1)) : [];
 
-  const getRightDiagonal: any = (i: number = 2) =>
+  const getRightDiagonal = (i = 2) =>
     i >= 0 ? [getRow(2-i)[i]].concat(getRightDiagonal(i-1)) : [];
 
-  const endGame = (winner: number) => {
+  const endGame = (winner) => {
     const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw";
     props.setMessage(`WINNER: ${gameWinner}`);
     props.setShowMessage(true);
@@ -72,8 +61,8 @@ const Grid: React.FC<Props> = (props) => {
   useEffect(() => {
     if (board.includes(0) || board.includes(1)) {
       const rows = getRows();
-      (rows.some((i: number[]) => allEqual(i))
-        || getCols(rows).some((i: number[]) => allEqual(i))
+      (rows.some((i) => allEqual(i))
+        || getCols(rows).some((i) => allEqual(i))
         || [getLeftDiagonal(), getRightDiagonal()].some((i) => allEqual(i))
       ) ? endGame(turn === 0 ? 1 : 0) : (board.includes(2) || endGame(2));
     }
@@ -81,12 +70,9 @@ const Grid: React.FC<Props> = (props) => {
 
   return (
     <div className="Grid">
-      {
-        board.map(
-          (i, index) => 
-            <Box key={index} index={index} sign={i} setSign={getBoard}/>
-        )
-      }
+      {board.map((i, index) => 
+        <Box key={index} index={index} sign={i} setSign={getBoard}/>
+      )}
     </div>
   );
 }
diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.js
index de65c48..6194f7b 100644
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.js
@@ -16,15 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, {Dispatch, SetStateAction} from 'react';
+import React from 'react';
 import './style.css';
 
-interface Props {
-  message: string
-  setShowMessage: Dispatch<SetStateAction<boolean>>
-}
-
-const MessageBox: React.FC<Props> = (props) => {
+const MessageBox = (props) => {
   return (
     <div className={"MessageBox"} onClick={() => props.setShowMessage(false)}>
       <p>{props.message}</p>
diff --git a/src/components/MultiplayerGrid.tsx b/src/components/MultiplayerGrid.js
index bed926a..d26fb31 100644
--- a/src/components/MultiplayerGrid.tsx
+++ b/src/components/MultiplayerGrid.js
@@ -16,31 +16,20 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useState/*, useEffect*/, Dispatch, SetStateAction } from 'react';
+import React, { useState, useEffect } from 'react';
 import { io } from 'socket.io-client';
 import Box from './Box';
 import './style.css';
 
-interface Props {
-  turn: number
-  setTurn: Dispatch<SetStateAction<number>>
-  scoreX: number
-  scoreO: number
-  setScoreX: Dispatch<SetStateAction<number>>
-  setScoreO: Dispatch<SetStateAction<number>>
-  setMessage: Dispatch<SetStateAction<string>>
-  setShowMessage: Dispatch<SetStateAction<boolean>>
-}
-
 const socket = io("http://localhost:5000");
 
-const MultiplayerGrid: React.FC<Props> = (props) => {
+const MultiplayerGrid = (props) => {
   // 0 is O, 1 is X, 2 is blank
-  const [board, setBoard] = useState<number[]>([2,2,2,2,2,2,2,2,2]);
+  const [board, setBoard] = useState([2,2,2,2,2,2,2,2,2]);
   const turn = props.turn;
 
-  const getBoard = (index: number) => {
-    const newBoard: number[] = board.slice(0, index).concat(turn).concat(board.slice(index+1, 9));
+  const getBoard = (index) => {
+    const newBoard = board.slice(0, index).concat(turn).concat(board.slice(index+1, 9));
     socket.emit("update-remote-data", {
       board: newBoard, 
       turn: turn, 
@@ -49,7 +38,7 @@ const MultiplayerGrid: React.FC<Props> = (props) => {
     });
   }
 
-  const endGame = (data: any) => {
+  const endGame = (data) => {
     props.setMessage(
       `${data.winner === "Data" ? "" : "WINNER: "}${data.winner}`
     );
@@ -63,7 +52,7 @@ const MultiplayerGrid: React.FC<Props> = (props) => {
     props.setTurn(data.winner === "Draw" ? turn : (data.winner === "X" ? 1 : 0));
   }
 
-  useState(() => {
+  useEffect(() => {
     socket.on("update-client-data", (data) => {
       setBoard(data.board);
       props.setTurn(data.turn);
diff --git a/src/components/ScoreBoard.tsx b/src/components/ScoreBoard.js
index b50af30..164c69e 100644
--- a/src/components/ScoreBoard.tsx
+++ b/src/components/ScoreBoard.js
@@ -19,13 +19,7 @@
 import React from 'react';
 import './style.css';
 
-interface Props {
-  scoreX: number
-  scoreO: number
-  turn: number
-}
-
-const ScoreBoard: React.FC<Props> = (props) => {
+const ScoreBoard = (props) => {
   return (
     <div className={"ScoreBoardContainer"}>
       <div className={"ScoreBoard"}>
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..463687c
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 6ca3f59..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App';
-import reportWebVitals from './reportWebVitals';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
deleted file mode 100644
index 49a2a16..0000000
--- a/src/reportWebVitals.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;