Implement with redux

package.json

@@ -8,7 +8,9 @@
     "react": "^16.8.2",
     "react-bootstrap": "^1.0.0-beta.5",
     "react-dom": "^16.8.2",
-    "react-scripts": "2.1.5"
+    "react-redux": "^6.0.1",
+    "react-scripts": "2.1.5",
+    "redux": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions.js

@@ -0,0 +1,13 @@
+import {FILTER_TEXT_CHANGED} from './constants'
+
+
+
+const filterTextChanged=(input)=>{
+  return {
+    type:  FILTER_TEXT_CHANGED,
+    payload: input
+  }
+}
+export {
+  filterTextChanged
+}

src/components/App/App.js

@@ -84,16 +84,16 @@ class App extends React.Component {
     })
   };
 
-  onSearchStrChanged=(searchStr)=> {
-    this.setState({searchStr});
-  }
 
   render() {
-    let onSearchStrChanged= this.onSearchStrChanged;
     return (
-        <Container className>
+        <Container className onClick={() => this.setState(() => {
+          return {
+            toggler: this.state.toggler || true
+          }
+        })}>
           <AppHeader className='my-3'/>
-          <ControlPanel {...{onSearchStrChanged}}/>
+          <ControlPanel />
           <TodoList items={this.state.items}
                     searchStr={this.state.searchStr}
                     className='mt-4'

src/components/ControlPanel/ControlPanel.js

@@ -1,16 +1,19 @@
 import React from 'react'
 import {InputGroup, Button,} from "react-bootstrap";
 import SearchPanel from "../SearchPanel";
-import FilterButtons from "../FilterButtons";
+import FilterButtons from '../FilterButtons';
 
 
-const ControlPanel = ({className,onSearchStrChanged}) => {
+
+const ControlPanel = ({className}) => {
   return (
-      <InputGroup {...{className}}>
-        <SearchPanel {...{onSearchStrChanged}}/>
+      <InputGroup className={className}>
+        <SearchPanel/>
         <FilterButtons/>
       </InputGroup>
 
   )
 };
-export default ControlPanel;
+
+
+export default (ControlPanel);

src/components/SearchPanel/SearchPanel.js

@@ -1,16 +1,30 @@
 import React from 'react'
 import {FormControl} from "react-bootstrap";
+import {filterTextChanged} from '../../actions'
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 
+const mapStateToProps = (state) => {
+  return {
+    filterText: state.filterText
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({filterTextChanged}, dispatch);
+};
 
-const SearchPanel = ({onSearchStrChanged}) => {
+const SearchPanel = ({filterTextChanged, filterText}) => {
+  console.log(filterText);
   return (
       <FormControl
-          onChange={(e) => onSearchStrChanged(e.target.value)}
+          onChange={(e) => filterTextChanged(e.target.value)}
           placeholder="Search"
           aria-label="Search for words"
           aria-describedby="basic-addon2"
       />
   );
 };
 
-export default SearchPanel;
+
+export default connect(mapStateToProps, mapDispatchToProps)(SearchPanel);

src/components/TodoList/TodoList.js

@@ -6,8 +6,14 @@ import './TodoList.css'
 class TodoList extends React.Component {
 
   render() {
-    const {items, className, onDeleted, onMarkImportant, onDone, filterFn, searchStr} = this.props;
-    console.log(searchStr);
+    const {items,
+      className,
+      onDeleted,
+      onMarkImportant,
+      onDone,
+      filterFn} = this.props;
+
+
     const elements = items
         .filter(filterFn)
         .filter(item => item.label
@@ -18,9 +24,8 @@ class TodoList extends React.Component {
                 .replace(' ', '')))
         .map(
             item => {
-              const {label} = item;
               return (
-                  <ListGroup.Item key={label} style={{padding: '0.5rem 1rem'}}>
+                  <ListGroup.Item key={item.label} style={{padding: '0.5rem 1rem'}}>
                     <TodoListItem
                         {...item}
                         onDeleted={() => onDeleted(label)}
@@ -31,7 +36,7 @@ class TodoList extends React.Component {
               )
             });
 
-    return <ListGroup {...{className}}>{elements}</ListGroup>;
+    return <ListGroup className={className}>{elements}</ListGroup>;
   }
 }
 

src/components/TodoListItem/TodoListItem.js

@@ -8,14 +8,25 @@ class TodoListItem extends Component {
 
 
   render() {
-    let {label, important = false, done = false, onDeleted, onMarkImportant, onDone} = this.props;
+    let {
+      label,
+      important = false,
+      done = false,
+      onDeleted,
+      onMarkImportant,
+      onDone
+    } = this.props;
+
     let className = 'mr-auto my-auto';
+
     if (done)
       className = className + ' done'
+
     let style = {
       fontWeight: (important ? 600 : 300),
       color: (important ? 'blue' : 'black')
     };
+
     //console.log(style);
     return (
         <div className="d-flex">

src/constants.js

@@ -0,0 +1,7 @@
+
+
+
+const FILTER_TEXT_CHANGED='FILTER_TEXT_CHANGED';
+export {
+  FILTER_TEXT_CHANGED
+}

src/index.js

@@ -2,6 +2,27 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import App from './components/App'
+import {createStore} from 'redux'
+import {Provider} from 'react-redux'
+import {FILTER_TEXT_CHANGED} from './constants'
 
+const globalReducer = (state, action) => {
+  console.log(action.payload)
+  switch (action) {
+    case FILTER_TEXT_CHANGED:
+      return {filterText: action.payload}
+    default:
+      return state;
+  }
+};
 
-ReactDOM.render(<App/>, document.getElementById('root'));
+const initialState = {
+  filterText: '',
+};
+
+const store = createStore(globalReducer,initialState);
+ReactDOM.render(
+    <Provider store={store}>
+      <App/>
+    </Provider>
+    , document.getElementById('root'));