diff --git a/src/App.js b/src/App.js
index 5fa7657..deb346f 100644
--- a/src/App.js
+++ b/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,6 +17,7 @@ class App extends Component {
itemAddHandler = () => {
this.props.onItemAdd(this.getTextInput.value);
this.getTextInput.value = '';
+ console.log(this.props);
};
doneHandler = (event, id, name) => {
@@ -23,17 +25,16 @@ class App extends Component {
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 {
{
this.props.todoItems.map((el, index) =>
- (el.name !== '' && el.name !== ' ' && el.name !== null) ?
- : null
+ (el.name !== '' && el.name !== ' ' && el.name !== null)
+ ?
+ : null
)}
@@ -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'
})
}
})
diff --git a/src/index.js b/src/index.js
index dd94c80..4f94d59 100644
--- a/src/index.js
+++ b/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 = (
diff --git a/src/store/actions.js b/src/store/actions.js
index ffe2855..f44e1f6 100644
--- a/src/store/actions.js
+++ b/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 }
+}*/
diff --git a/src/store/reducer.js b/src/store/reducer.js
index bffb88e..d800a5e 100644
--- a/src/store/reducer.js
+++ b/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;
}
diff --git a/src/store/selects.js b/src/store/selects.js
new file mode 100644
index 0000000..db52c5d
--- /dev/null
+++ b/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);
+ }
+};