Move to Typescript.
This commit is contained in:
parent
34618860a4
commit
ac964ddd3f
16 changed files with 482 additions and 119 deletions
40
src/App.js
40
src/App.js
|
|
@ -1,40 +0,0 @@
|
|||
import React, {useReducer} from 'react';
|
||||
import Maze from "./Maze";
|
||||
import InputForm from "./InputForm";
|
||||
import reduce from "./reducer";
|
||||
import MessageBanner from "./MessageBanner";
|
||||
|
||||
export default function App() {
|
||||
const [state, dispatch] = useReducer(reduce, {
|
||||
maze: null,
|
||||
loading: false,
|
||||
errorMessage: null,
|
||||
showSolution: false,
|
||||
userPath: []
|
||||
},
|
||||
undefined);
|
||||
const hasValidMaze = !!state.maze;
|
||||
return (
|
||||
<>
|
||||
<MessageBanner state={state}
|
||||
dispatch={dispatch}/>
|
||||
<InputForm state={state}
|
||||
dispatch={dispatch}/>
|
||||
{hasValidMaze &&
|
||||
<>
|
||||
<h1>The Maze ({state.maze.width}x{state.maze.height}, ID: {state.maze.id})</h1>
|
||||
<input type={"checkbox"}
|
||||
onChange={(e) => {
|
||||
dispatch({
|
||||
type: 'toggled_show_solution',
|
||||
value: e.target.checked
|
||||
});
|
||||
}}
|
||||
id={"showSolution"}/><label htmlFor="showSolution">Show Solution</label>
|
||||
<Maze state={state}
|
||||
dispatch={dispatch}/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue