diff --git a/src/App.js b/src/App.js index 97e4907..ef50a4c 100644 --- a/src/App.js +++ b/src/App.js @@ -26,20 +26,18 @@ class App extends Component { this.props.onItemDone(id); }; - sortDoneHandler = ( filter ) => { - console.log("filter: " + filter); - this.props.onItemSortDone( filter ); - }; - - sortUnDoneHandler = (filter) => { - console.log(filter); - this.props.onItemSortUnDone(filter); - }; - - sortAllHandler = (filter) => { - console.log(filter); - this.props.onItemSortAll(filter) - }; + /* sortDoneHandler = ( filter ) => { + console.log(filter); + this.props.onItemSortDone( filter ); + }; + sortUnDoneHandler = (filter) => { + console.log(filter); + this.props.onItemSortUnDone(filter); + }; + sortAllHandler = (filter) => { + console.log(filter); + this.props.onItemSortAll(filter) + };*/ render() { return ( @@ -52,9 +50,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,7 +73,7 @@ class App extends Component { export default connect( state => ({ - //todoItems: state.items, + //odoItems: state.items, todoItems: getFilteredItems(state) //store }), dispatch => ({ @@ -92,19 +90,24 @@ export default connect( type: 'MARK_DONE', id }) }, - onItemSortDone: ( filter ) => { - dispatch({ - type: filter - }) - }, - onItemSortUnDone: ( filter ) => { - dispatch({ - type: filter - }) - }, - onItemSortAll: (filter) => { + /* onItemSortDone: ( filter ) => { + dispatch({ + type: filter + }) + }, + onItemSortUnDone: ( filter ) => { + dispatch({ + type: filter + }) + }, + onItemSortAll: (filter) => { + dispatch({ + type: filter + }) + },*/ + changeFilter: (filter) => { dispatch({ - type: filter + type: 'CHANGE_FILTER', filter }) } }) diff --git a/src/index.js b/src/index.js index 4f94d59..58aae9c 100644 --- a/src/index.js +++ b/src/index.js @@ -5,9 +5,12 @@ import { createStore } from 'redux'; import './index.css'; import App from './App'; -import reducerTodo from './store/reducer' +import rootReducer from './store/rootReducer' +/*import reducerFilter from './store/reducerFilter' +import reducerTodo from './store/reducer'*/ -const store = createStore(reducerTodo, + +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 ef8f98e..a566250 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -5,7 +5,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_FILTER = 'CHANGE_FILTER'; //другие константы diff --git a/src/store/filter.js b/src/store/filter.js new file mode 100644 index 0000000..0054fba --- /dev/null +++ b/src/store/filter.js @@ -0,0 +1,19 @@ +import {CHANGE_FILTER, VisibilityFilters} from './actions'; + +const initialState = { + currentFilter: VisibilityFilters.SORT_ALL +} + +const reducerFilter = (state = initialState, action) => { + switch (action.type) { + case CHANGE_FILTER: + 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 93% rename from src/store/reducer.js rename to src/store/items.js index 5a95562..6252987 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,7 +39,7 @@ const reducerTodo = (state = initialState, action) => { case actionTypes.ADD: return { ...state, - items: state.items.concat([ + list: state.list.concat([ { isDone: false, /* currentFilter: VisibilityFilters.SORT_BLACK,*/ @@ -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/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 f89ff89..82ca025 100644 --- a/src/store/selects.js +++ b/src/store/selects.js @@ -17,17 +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; + console.log(currentFilter); // в зависимости от того какой фильтр, производим соответсвующие действия if (currentFilter === VisibilityFilters.SORT_RED) { - return items.filter(item => items.isDone); + return items.filter(item => item.isDone); } else if (currentFilter === VisibilityFilters.SORT_BLACK) { - return items.filter(item => !items.isDone); - } else if (currentFilter === VisibilityFilters.SORT_ALL) { - return items.filter(item => item); + return items.filter(item => !item.isDone); } else { - return items.filter(item => item); + return items; } };