diff --git a/minimal-app/src/app.js b/minimal-app/src/app.js index e714df282d9d461ab51cacd456fc55cbb180f3e2..5767484efdb9d438a77b7439c6aa7e977dac0e0d 100644 --- a/minimal-app/src/app.js +++ b/minimal-app/src/app.js @@ -2,12 +2,14 @@ import React from 'react'; import { Route } from 'react-router-dom'; import { InvisibleMaze } from './features/invisibleMaze/invisibleMaze.js'; +import { Restart } from './features/invisibleMaze/restart.js'; export function App() { return ( <> <Route exact path={'/'}> - <InvisibleMaze reset = {"Reset Maze"}/> + <InvisibleMaze/> + <Restart reset = {"Reset Maze"}/> </Route> </> ); diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.js b/minimal-app/src/features/invisibleMaze/invisibleMaze.js index a78d4593eb6bd830bdd4507d71654ea69222399a..15df14d5089a048068355a7cdd3205eca7c68d9a 100644 --- a/minimal-app/src/features/invisibleMaze/invisibleMaze.js +++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.js @@ -1,7 +1,6 @@ import React from 'react'; import styles from './invisibleMaze.module.css'; import { useSelector, useDispatch } from 'react-redux'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; import { @@ -11,7 +10,6 @@ import { selectButtonOne, selectButtonTwo, selectButtonThree, - setAllButtons, setButtonOne, setButtonTwo, setButtonThree, @@ -48,11 +46,6 @@ export function InvisibleMaze(props) { const onClickPanelThree = () => dispatch(setButtonThree({ buttonThree : 3, })); - const resetMaze = () => dispatch(setAllButtons({ - buttonOne : 0, - buttonThree : 0, - buttonTwo : 0, - })); return ( <main> @@ -80,15 +73,6 @@ export function InvisibleMaze(props) { <button className={mazeStepThreeCorrect}onClick={onClickPanelThree}> </button> </div> - <div className={styles.controlPanel}> - <button className={styles.reset} onClick={resetMaze}> - {props.reset}: - </button> - </div> </main> ); -} - -InvisibleMaze.propTypes = { - reset: PropTypes.string.isRequired, -}; \ No newline at end of file +} \ No newline at end of file diff --git a/minimal-app/src/features/invisibleMaze/restart.js b/minimal-app/src/features/invisibleMaze/restart.js new file mode 100644 index 0000000000000000000000000000000000000000..e3862df66c65bd2194d1965160d4cd5dcb336be2 --- /dev/null +++ b/minimal-app/src/features/invisibleMaze/restart.js @@ -0,0 +1,29 @@ +import React from 'react'; +import styles from './invisibleMaze.module.css'; +import PropTypes from 'prop-types'; +import {useDispatch} from 'react-redux'; + +import { + setAllButtons, +} from './invisibleMazeSlice.js'; + +export function Restart(props) { + const dispatch = useDispatch(); + const resetMaze = () => dispatch(setAllButtons({ + buttonOne : 0, + buttonThree : 0, + buttonTwo : 0, + })); + + return ( + <main className={styles.controlPanel}> + <button className={styles.reset} onClick={resetMaze}> + {props.reset}: + </button> + </main> + ) +} + +Restart.propTypes = { + reset: PropTypes.string.isRequired, +}; \ No newline at end of file