add selects, change store from [] to {}

src/App.js

@@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 import Controls from './components/Controls'
 import Input from './components/Input'
 import Output from './components/Output'
+import {getFilteredItems} from './store/selects'
 import './index.css'
 
 class App extends Component {
@@ -16,24 +17,24 @@ class App extends Component {
   itemAddHandler = () => {
     this.props.onItemAdd(this.getTextInput.value);
     this.getTextInput.value = '';
+    console.log(this.props);
   };
 
   doneHandler = (event, id, name) => {
     console.log('click made on:  \"' + name + " : " + id + '\"  |event: ' + event);
     this.props.onItemDone(id);
   };
 
-  sortDoneHandler = (id) => {
-    console.log("ID sortDOne: " + id);
-    this.props.onItemSortDone(id);
+  sortDoneHandler = () => {
+    this.props.onItemSortDone();
   };
 
-  sortUnDoneHandler = (e) => {
-    this.props.onItemSortUnDone(e);
+  sortUnDoneHandler = () => {
+    this.props.onItemSortUnDone();
   };
 
-  sortAllHandler = (e) => {
-    this.props.onItemSortAll(e)
+  sortAllHandler = () => {
+    this.props.onItemSortAll()
   };
 
   render() {
@@ -54,9 +55,13 @@ class App extends Component {
         <ol>
           {
             this.props.todoItems.map((el, index) =>
-              (el.name !== '' && el.name !== ' ' && el.name !== null) ?
-                <Output userDone={el.isDone} makeClick={(event) => this.doneHandler(event, el.id, el.name)}
-                        key={el.id}>{el.name}</Output> : null
+              (el.name !== '' && el.name !== ' ' && el.name !== null)
+                ? <Output
+                  userDone={el.isDone}
+                  makeClick={(event) =>
+                    this.doneHandler(event, el.id, el.name)}
+                  key={el.id}>{el.name}</Output>
+                : null
             )}
         </ol>
       </React.Fragment>
@@ -66,7 +71,8 @@ class App extends Component {
 
 export default connect(
   state => ({
-    todoItems: state
+    //todoItems: state.items,
+    todoItems: getFilteredItems({ ...state }) //store
   }),
   dispatch => ({
     onItemAdd: (item) => {
@@ -82,19 +88,19 @@ export default connect(
         type: 'DONE', id
       })
     },
-    onItemSortDone: (id) => {
+    onItemSortDone: (item) => {
       dispatch({
-        type: 'SORT_RED', id
+        type: 'SORT_RED', /*whatToSort: item.items.isDone = true*/
       })
     },
-    onItemSortUnDone: (id) => {
+    onItemSortUnDone: () => {
       dispatch({
-        type: 'SORT_BLACK', id
+        type: 'SORT_BLACK'
       })
     },
-    onItemSortAll: (e) => {
+    onItemSortAll: () => {
       dispatch({
-        type: 'SORT_ALL', e
+        type: 'SORT_ALL'
       })
     }
   })

src/index.js

@@ -11,6 +11,9 @@ const store = createStore(reducerTodo,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   );
 
+
+console.log(store.getState());
+
 const app = (
   <Provider store={store}>
     <App />

src/store/actions.js

@@ -1,6 +1,37 @@
+/*
+ * типы действий
+ */
+
 export const ADD = 'ADD';
-export const DONE = 'DONE';
-export const SORT_RED = 'SORT_RED';
-export const SORT_BLACK = 'SORT_BLACK';
-export const SORT_ALL = 'SORT_ALL';
+export const MARK_DONE = 'MARK_DONE';
+/*export const SORT_REDX = 'SORT_REDX';
+export const SORT_BLACKX = 'SORT_BLACKX';
+export const SORT_ALLX = 'SORT_ALLX';*/
+
+export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
+
+/*
+ * другие константы
+ */
+
+export const VisibilityFilters = {
+  SORT_RED : 'SORT_RED',
+  SORT_BLACK : 'SORT_BLACK',
+  SORT_ALL : 'SORT_ALL'
+}
+
+/*
+ * генераторы действий
+ */
+
+/*export function addTodo(text) {
+  return { type: ADD_TODO, text }
+}
+
+export function toggleTodo(index) {
+  return { type: TOGGLE_TODO, index }
+}
 
+export function setVisibilityFilter(filter) {
+  return { type: SET_VISIBILITY_FILTER, filter }
+}*/

src/store/reducer.js

@@ -1,38 +1,73 @@
 import * as actionTypes from './actions';
+import {VisibilityFilters} from './actions';
 
-const initialState = [];
+const initialState = {
+  items: [],
+};
+
+const testState = {
+  items: [
+    {
+      id: 1529937741380,
+      name: "test01",
+      isDone: false,
+      currentFilter: VisibilityFilters.SORT_ALL
+    },
+    {
+      id: 1529937741381,
+      name: "test02",
+      isDone: false,
+      currentFilter: VisibilityFilters.SORT_ALL
+    },
+    {
+      id: 1529937741382,
+      name: "test03",
+      isDone: false,
+      currentFilter: VisibilityFilters.SORT_ALL
+    },
+    {
+      id: 1529937741383,
+      name: "test04",
+      isDone: false,
+      currentFilter: VisibilityFilters.SORT_ALL
+    }
+  ]
+};
 
 const reducerTodo = (state = initialState, action) => {
   switch (action.type) {
     case actionTypes.ADD:
-      return [
+      return {
         ...state,
-        {
-          id: action.payload.id,
-          name: action.payload.name,
-          isDone: false
-        }
-      ];
-    case actionTypes.DONE:
-      return state.map( item =>
+        items: state.items.concat([
+          {
+            isDone: false,
+            /*currentFilter: VisibilityFilters.SORT_ALL,*/
+            name: action.payload.name,
+            id: action.payload.id
+          }
+        ])
+      };
+
+    case actionTypes.MARK_DONE:
+      return state.items.map(item =>
         (item.id === action.id)
           ? {...item, isDone: !item.isDone}
-          : item
-      );
-    case actionTypes.SORT_RED:
-      return [
-        ...state.filter( item =>
-          item.isDone === true
-        )
-      ];
-    case actionTypes.SORT_BLACK:
-      return state.filter( item =>
-        item.isDone !== true
-      );
-    case actionTypes.SORT_ALL:
-      return state.filter( item =>
-        item.isDone || !item.isDone
-      );
+          : {...item});
+
+/*    case actionTypes.SORT_REDX:
+      return state.items.filter(item => item.isDone);
+    /!*      const newState = [ ...state ];
+          const fltr = state.filter(item => item.isDone);
+          const newNewState = [ ...newState];
+          return newNewState;*!/
+    /!*      return state.filter(item => item.isDone);*!/
+
+    /!* black case is dangerous because it returns cut state *!/
+    case actionTypes.SORT_BLACKX:
+      return state.items.filter(item => !item.isDone);
+    case actionTypes.SORT_ALLX:
+      return {...state};*/
     default:
       return state;
   }

src/store/selects.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {VisibilityFilters} from './actions'
+
+export const getFilteredItems = (store) => {
+  const currentFilter = store.currentFilter;// достаем текущий фильтр
+  const items = store.items;
+  // в зависимости от того какой фильтр, производим соответсвующие действия
+  if (currentFilter === VisibilityFilters.SORT_RED) {
+    return items.filter(item => items.isDone);
+  } else if (currentFilter === VisibilityFilters.SORT_BLACK) {
+    return items.filter(item => !items.isDone);
+  } else if (currentFilter === VisibilityFilters.SORT_ALL) {
+    return items.filter(item => item);
+  } else {
+    return items.filter(item => item);
+  }
+};