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) ? - this.doneHandler(event, el.id, el.name)} - key={el.id}>{el.name} : null + (el.name !== '' && el.name !== ' ' && el.name !== null) + ? + this.doneHandler(event, el.id, el.name)} + key={el.id}>{el.name} + : 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); + } +};