diff --git a/components/RemoveCompletedButton.js b/components/RemoveCompletedButton.js index 136f305..3499eab 100644 --- a/components/RemoveCompletedButton.js +++ b/components/RemoveCompletedButton.js @@ -1,4 +1,4 @@ -class RemoveCompletedButton extends React.Component { +class UnconnectedRemoveCompletedButton extends React.Component { handleClick() { removeCheckedItems(); } @@ -15,11 +15,14 @@ class RemoveCompletedButton extends React.Component { } } -RemoveCompletedButton.defaultProps = { - show: false -}; +function mapStateToProps(state) { + return { + show: state.hasCompletedItems + }; +} +var RemoveCompletedButton = ReactRedux.connect(mapStateToProps)(UnconnectedRemoveCompletedButton); ReactDOM.render( - , + , document.querySelector('[data-react-component="RemoveCompletedButton"]') ); diff --git a/index.html b/index.html index 920c01d..f7cadff 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,10 @@

To Do List

+ + + diff --git a/jquery/todo.js b/jquery/todo.js index abb1fa2..0898686 100644 --- a/jquery/todo.js +++ b/jquery/todo.js @@ -47,9 +47,6 @@ function removeCheckedItems() { function maybeHideDeleteAll() { var completedItems = $('#todos input:checked').length; - ReactDOM.render( - React.createElement(RemoveCompletedButton, { show: completedItems > 0 }), - document.querySelector('[data-react-component="RemoveCompletedButton"]') - ); + store.dispatch(setHasCompletedItems(completedItems > 0)); } diff --git a/store/index.js b/store/index.js new file mode 100644 index 0000000..d79c9d8 --- /dev/null +++ b/store/index.js @@ -0,0 +1,20 @@ +// The initial state of our store +const initialState = { + hasCompletedItems: false +}; + +function setHasCompletedItems(hasCompletedItems = false) { + return { + type: 'SET_HAS_COMPLETED_ITEMS', + hasCompletedItems: hasCompletedItems + }; +} + +function reducer(state = initialState, action) { + if (action.type = 'SET_HAS_COMPLETED_ITEMS') { + return { hasCompletedItems: action.hasCompletedItems }; + } + return state; +} + +var store = Redux.createStore(reducer);