Commit 99b2a997 authored by Alexander Kotov's avatar Alexander Kotov

connect Board and Toolbar to store

parent 79b76415
......@@ -4666,6 +4666,11 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
},
"home-or-tmp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
......@@ -6412,6 +6417,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
"integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
},
"lodash-es": {
"version": "4.17.10",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.10.tgz",
"integrity": "sha512-iesFYPmxYYGTcmQK0sL8bX3TGHyM6b2qREaB4kamHfQyfPJP0xgoGxp19nsH16nsfquLdiyKyX3mQkfiSGV8Rg=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
......@@ -8803,6 +8813,19 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
"integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
},
"react-redux": {
"version": "5.0.7",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
"integrity": "sha512-5VI8EV5hdgNgyjfmWzBbdrqUkrVRKlyTKk1sGH3jzM2M2Mhj/seQgPXaz6gVAj2lz/nz688AdTqMO18Lr24Zhg==",
"requires": {
"hoist-non-react-statics": "^2.5.0",
"invariant": "^2.0.0",
"lodash": "^4.17.5",
"lodash-es": "^4.17.5",
"loose-envify": "^1.1.0",
"prop-types": "^15.6.0"
}
},
"react-scripts": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
......
......@@ -5,6 +5,7 @@
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.4",
"redux": "^4.0.0"
},
......
import React, { Component } from 'react'
import './App.css'
import { Provider } from 'react-redux'
import store from './store'
import Board from './components/Board/Board';
import Toolbar from './components/Toolbar/Toolbar';
class App extends Component {
render() {
return (
<div>
<Toolbar></Toolbar>
<Board></Board>
</div>
<Provider store={store}>
<div>
<Toolbar></Toolbar>
<Board></Board>
</div>
</Provider>
);
}
}
......
......@@ -4,7 +4,8 @@ import './Board.css'
import Tower from '../Tower/Tower.jsx'
import Disk from '../Disk/Disk.jsx'
import store from '../../store'
import { connect } from 'react-redux'
import { completeMove, startMove } from '../../actions/moveActions'
const styles = {
......@@ -29,37 +30,35 @@ const moveStyle = move => {
}
class Board extends Component {
constructor() {
super()
this.state = store.getState()
}
state = { move: null }
componentDidMount() {
store.subscribe(() => {
const { left, right, center, move} = store.getState();
this.setState({ left, right, center, move})
})
componentWillReceiveProps(newProps) {
this.setState({move: newProps.move})
}
startMove(tower) {
let disks = this.state[tower]
let disks = this.props[tower]
if (disks.length) {
let disk = disks[0]
store.dispatch(startMove({ disk, tower }))
this.props.onStartMove({ disk, tower })
}
}
updateMove = tower => () => {
if (this.state.move) {
this.setState({
move: {...this.state.move, to: tower}
this.setState((state) => {
if (state.move) {
return {
move: {...state.move, to: tower}
}
} else {
return state
}
})
}
}
completeMove(tower) {
let { disk } = this.state.move
store.dispatch(completeMove({ disk, tower }))
this.props.onCompleteMove({ disk, tower })
}
performMove = tower => () => {
......@@ -71,7 +70,8 @@ class Board extends Component {
}
render() {
const {left, center, right, move} = this.state
const {left, center, right} = this.props
const move = this.state.move
return (
<div className="Board">
......@@ -103,4 +103,11 @@ class Board extends Component {
}
}
export default Board
const mapStateToProps = ({left, center, right, move}) => {
return {left, center, right, move}
}
export default connect(mapStateToProps, {
onStartMove: startMove,
onCompleteMove: completeMove
})(Board)
import React, { Component } from 'react'
import store from '../../store';
import React from 'react'
import { connect } from 'react-redux'
import { startNewGame } from '../../actions/gameActions';
import './Toolbar.css'
const mapStoreState = () => {
let { moves } = store.getState()
return { moves }
const Toolbar = (props) => {
return (
<div className="Toolbar">
<button onClick={props.startNewGame}>Start new game</button>
<span>
Moves: {props.moveCount}
</span>
</div>
)
}
export default class Toolbar extends Component {
state = mapStoreState()
updateState = () => {
this.setState(mapStoreState())
}
componentDidMount() {
store.subscribe(this.updateState)
}
onStartNewGame() {
store.dispatch(startNewGame())
}
render() {
return (
<div className="Toolbar">
<button onClick={this.onStartNewGame}>Start new game</button>
<span>
Moves: {this.state.moves}
</span>
</div>
)
const mapStateToProps = (state) => {
return {
moveCount: state.moves
}
}
export default connect( mapStateToProps, { startNewGame })(Toolbar)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment