convert all files to typescript

client/src/App.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import * as React from 'react';
+import { useState } from 'react';
 import { MathJaxContext } from "better-react-mathjax";
 
 import useWebSocket from 'react-use-websocket';

client/src/components/GoodBye.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';

client/src/components/InputZone.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
@@ -10,8 +11,8 @@ import { Typography, Button, Paper, TextField, List, ListItem } from '@mui/mater
 function InputZone({ index, history, messageOpen, setMessageOpen, completed, sendTactic, nbLevels, loadNextLevel, errors, lastTactic, undo, finishGame }) {
   const [curInput, setCurInput] = useState("")
 
-  const inputRef = React.createRef()
-  const nextRef = React.createRef()
+  const inputRef = React.createRef<HTMLInputElement>()
+  const nextRef = React.createRef<HTMLButtonElement>()
 
   function handleCurInputChange(evt) { setCurInput(evt.target.value) }
 

client/src/components/LeftPanel.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { MathJax } from "better-react-mathjax";
 import '@fontsource/roboto/300.css';

client/src/components/Level.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
@@ -18,7 +19,7 @@ function Level({ sendJsonMessage, lastMessage, lastJsonMessage, nbLevels, level,
 	const [tacticDocs, setTacticDocs] = useState([])
 	const [lemmaDocs, setLemmaDocs] = useState([])
 
-	const [leanData, setLeanData] = useState({})
+	const [leanData, setLeanData] = useState({goals: []})
 	const [history, setHistory] = useState([])
 	const [lastTactic, setLastTactic] = useState("")
 	const [errors, setErrors] = useState([])

client/src/components/Message.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import { MathJax } from "better-react-mathjax";
 import '@fontsource/roboto/300.css';

client/src/components/TacticState.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
@@ -15,7 +15,7 @@ function Goal({ goal }) {
 	const hasAssumption = typeof goal.assumptions === "object" && goal.assumptions.length > 0
 	return (
 		<Box sx={{ pl: 2 }}>
-			{hasObject && <Box><Typography variant="h7">Objects</Typography>
+			{hasObject && <Box><Typography>Objects</Typography>
 				<List>
 					{goal.objects.map((item) =>
 						<ListItem key={item[0]}>
@@ -23,12 +23,12 @@ function Goal({ goal }) {
 							<Typography color="secondary" sx={{ ml: 1 }}>{item[1]}</Typography>
 						</ListItem>)}
 				</List></Box>}
-			{hasAssumption && <Box><Typography variant="h7">Assumptions</Typography>
+			{hasAssumption && <Box><Typography>Assumptions</Typography>
 				<List>
 					{goal.assumptions.map((item) => <ListItem key={item}><Typography color="primary" sx={{ mr: 1 }}>{item[0]}</Typography> :
 						<Typography color="secondary" sx={{ ml: 1 }}>{item[1]}</Typography></ListItem>)}
 				</List></Box>}
-			<Typography variant="h7">Prove:</Typography>
+			<Typography>Prove:</Typography>
 			<Typography color="primary" sx={{ ml: 2 }}>{goal.goal}</Typography>
 		</Box>)
 }

client/src/components/Welcome.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { MathJax } from "better-react-mathjax";
 import '@fontsource/roboto/300.css';
@@ -9,7 +10,7 @@ import '@fontsource/roboto/700.css';
 import { Box, Typography, Button, CircularProgress, Grid } from '@mui/material';
 
 
-function Welcome({ sendJsonMessage, lastJsonMessage, setNbLevels, setTitle, startGame, setConclusion }) {
+function Welcome({ sendJsonMessage, lastJsonMessage, lastMessage, setNbLevels, setTitle, startGame, setConclusion }) {
 
 	const [leanData, setLeanData] = useState({})
 

tsconfig.json

@@ -1,10 +1,8 @@
 {
   "compilerOptions": {
     "outDir": "./client/dist/",
-    "noImplicitAny": true,
     "module": "es6",
     "target": "es5",
-    "jsx": "react",
     "allowJs": true,
     "moduleResolution": "node",
     "jsx": "react",