From 4a96bd86b585001e34e4486f2dafe31e97b99b41 Mon Sep 17 00:00:00 2001 From: "DESKTOP-JTP554M\\User" Date: Wed, 27 Jun 2018 18:08:39 +0300 Subject: [PATCH] add change filter --- src/App.js | 21 +++++++++++++-------- src/index.js | 4 ++-- src/store/actions.js | 2 +- src/store/filter.js | 19 +++++++++++++++++++ src/store/{reducer.js => items.js} | 8 ++++---- src/store/myReducers.js | 8 -------- src/store/reducerFilter.js | 16 ---------------- src/store/rootReducer.js | 8 ++++++++ src/store/selects.js | 12 +++++------- 9 files changed, 52 insertions(+), 46 deletions(-) create mode 100644 src/store/filter.js rename src/store/{reducer.js => items.js} (89%) delete mode 100644 src/store/myReducers.js delete mode 100644 src/store/reducerFilter.js create mode 100644 src/store/rootReducer.js diff --git a/src/App.js b/src/App.js index 7f9be7f..1431ce9 100644 --- a/src/App.js +++ b/src/App.js @@ -26,7 +26,7 @@ class App extends Component { this.props.onItemDone(id); }; - sortDoneHandler = ( filter ) => { +/* sortDoneHandler = ( filter ) => { console.log(filter); this.props.onItemSortDone( filter ); }; @@ -39,7 +39,7 @@ class App extends Component { sortAllHandler = (filter) => { console.log(filter); this.props.onItemSortAll(filter) - }; + };*/ render() { return ( @@ -52,9 +52,9 @@ class App extends Component { /> this.sortDoneHandler(VisibilityFilters.SORT_RED)} - userClickFilterTwo={e => this.sortUnDoneHandler(VisibilityFilters.SORT_BLACK)} - userClickFilterThree={e => this.sortAllHandler(VisibilityFilters.SORT_ALL)} + userClickFilterOne={e => this.props.changeFilter(VisibilityFilters.SORT_RED)} + userClickFilterTwo={e => this.props.changeFilter(VisibilityFilters.SORT_BLACK)} + userClickFilterThree={e => this.props.changeFilter(VisibilityFilters.SORT_ALL)} />
    { @@ -75,8 +75,8 @@ class App extends Component { export default connect( state => ({ - todoItems: state.items, - //todoItems: getFilteredItems({ ...state }) //store + //odoItems: state.items, + todoItems: getFilteredItems(state) //store }), dispatch => ({ onItemAdd: (item) => { @@ -92,7 +92,7 @@ export default connect( type: 'MARK_DONE', id }) }, - onItemSortDone: ( filter ) => { +/* onItemSortDone: ( filter ) => { dispatch({ type: filter }) @@ -106,6 +106,11 @@ export default connect( dispatch({ type: filter }) + },*/ + changeFilter: (filter) => { + dispatch({ + type: 'CHANGE_FILTER', filter + }) } }) )(App); diff --git a/src/index.js b/src/index.js index 0073357..58aae9c 100644 --- a/src/index.js +++ b/src/index.js @@ -5,12 +5,12 @@ import { createStore } from 'redux'; import './index.css'; import App from './App'; -import myReducers from './store/myReducers' +import rootReducer from './store/rootReducer' /*import reducerFilter from './store/reducerFilter' import reducerTodo from './store/reducer'*/ -const store = createStore(myReducers, +const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); diff --git a/src/store/actions.js b/src/store/actions.js index f44e1f6..f823b59 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -8,7 +8,7 @@ export const MARK_DONE = 'MARK_DONE'; export const SORT_BLACKX = 'SORT_BLACKX'; export const SORT_ALLX = 'SORT_ALLX';*/ -export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'; +export const CHANGE_FILTERS = 'CHANGE_FILTERS'; /* * другие константы diff --git a/src/store/filter.js b/src/store/filter.js new file mode 100644 index 0000000..d383214 --- /dev/null +++ b/src/store/filter.js @@ -0,0 +1,19 @@ +import {CHANGE_FILTERS, VisibilityFilters} from './actions'; + +const initialState = { + currentFilter: VisibilityFilters.SORT_ALL +} + +const reducerFilter = (state = initialState, action) => { + switch (action.type) { + case CHANGE_FILTERS: + return { + ...state, + currentFilter: action.filter + }; + default: + return state; + } +}; + +export default reducerFilter; diff --git a/src/store/reducer.js b/src/store/items.js similarity index 89% rename from src/store/reducer.js rename to src/store/items.js index 481682e..8c7d6ef 100644 --- a/src/store/reducer.js +++ b/src/store/items.js @@ -2,7 +2,7 @@ import * as actionTypes from './actions'; import {VisibilityFilters} from './actions'; const initialState = { - items: [], + list: [], }; const testState = { @@ -39,10 +39,10 @@ const reducerTodo = (state = initialState, action) => { case actionTypes.ADD: return { ...state, - items: state.items.concat([ + list: state.list.concat([ { isDone: false, - currentFilter: VisibilityFilters.SORT_BLACK, + /*currentFilter: VisibilityFilters.SORT_BLACK,*/ name: action.payload.name, id: action.payload.id } @@ -51,7 +51,7 @@ const reducerTodo = (state = initialState, action) => { case actionTypes.MARK_DONE: return { - items: state.items.map( element => + list: state.list.map( element => (element.id === action.id ) ? {...element, isDone: !element.isDone} : { ...element}) diff --git a/src/store/myReducers.js b/src/store/myReducers.js deleted file mode 100644 index 1380d5c..0000000 --- a/src/store/myReducers.js +++ /dev/null @@ -1,8 +0,0 @@ -import { combineReducers } from 'redux'; -import reducer from './reducer'; -import reducerFilter from './reducerFilter' - -export default combineReducers({ - reducer, - reducerFilter -}) diff --git a/src/store/reducerFilter.js b/src/store/reducerFilter.js deleted file mode 100644 index 85b634d..0000000 --- a/src/store/reducerFilter.js +++ /dev/null @@ -1,16 +0,0 @@ -import {VisibilityFilters} from './actions'; - -const reducerFilter = (filter) => { - switch (filter) { - case VisibilityFilters.SORT_RED: - return state.items.filter(item => state.items.isDone); - case VisibilityFilters.SORT_BLACK: - return state.items.filter(item => state.items.isDone); - case VisibilityFilters.SORT_ALL: - return state.items.filter(item => state.items.isDone); - default: - return state; - } -}; - -export default reducerFilter; diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js new file mode 100644 index 0000000..bef3b8f --- /dev/null +++ b/src/store/rootReducer.js @@ -0,0 +1,8 @@ +import { combineReducers } from 'redux'; +import items from './items'; +import filter from './filter' + +export default combineReducers({ + items, + filter +}) diff --git a/src/store/selects.js b/src/store/selects.js index f08424f..27d0e2b 100644 --- a/src/store/selects.js +++ b/src/store/selects.js @@ -17,18 +17,16 @@ export const getFilteredItems = (store) => { return items.filter(item => item); }*/ - const currentFilter = store.currentFilter;// достаем текущий фильтр - const items = store.items; + const currentFilter = store.filter.currentFilter;// достаем текущий фильтр + const items = store.items.list; // в зависимости от того какой фильтр, производим соответсвующие действия - if (currentFilter === VisibilityFilters.SORT_RED) { + if (currentFilter === 'SORT_RED') { return items.filter(item => items.isDone); - } else if (currentFilter === VisibilityFilters.SORT_BLACK) { + } else if (currentFilter === '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); + return items; } };