diff --git a/helloworld-redux-todo/package.json b/helloworld-redux-todo/package.json index a7053fa..82b380e 100644 --- a/helloworld-redux-todo/package.json +++ b/helloworld-redux-todo/package.json @@ -9,6 +9,7 @@ "react-redux": "^5.0.7", "react-scripts": "1.1.5", "redux": "^4.0.0", + "reselect": "^4.0.0", "underscore": "^1.9.1" }, "scripts": { diff --git a/helloworld-redux-todo/src/actions/check.js b/helloworld-redux-todo/src/actions/check.js index 1854c7d..e7b99d1 100644 --- a/helloworld-redux-todo/src/actions/check.js +++ b/helloworld-redux-todo/src/actions/check.js @@ -1,3 +1,4 @@ -import { TOGGLE_ITEM } from './constants'; +import { TOGGLE_ITEM, CHANGE_SORT } from './constants'; -export const toggleItem = (id) => ({type: TOGGLE_ITEM, payload: {id} }); \ No newline at end of file +export const toggleItem = (id) => ({type: TOGGLE_ITEM, payload: {id} }); +export const changeSort = (newSort) => ({type: CHANGE_SORT, payload: { newSort }}); \ No newline at end of file diff --git a/helloworld-redux-todo/src/actions/constants.js b/helloworld-redux-todo/src/actions/constants.js index a34d719..36bc2eb 100644 --- a/helloworld-redux-todo/src/actions/constants.js +++ b/helloworld-redux-todo/src/actions/constants.js @@ -1,2 +1,3 @@ export const TOGGLE_ITEM = "TOGGLE_ITEM"; +export const CHANGE_SORT = "TOGGLE_SORT"; \ No newline at end of file diff --git a/helloworld-redux-todo/src/components/HelloWorld.js b/helloworld-redux-todo/src/components/HelloWorld.js index 6a383b2..9fc8b44 100644 --- a/helloworld-redux-todo/src/components/HelloWorld.js +++ b/helloworld-redux-todo/src/components/HelloWorld.js @@ -8,9 +8,14 @@ export default class HelloWorld extends PureComponent { }) return (
-

Hello React dropoffs: {this.props.todoItemsWithDropoff}

+ +

Hello React

{boxes}
+ ) } } \ No newline at end of file diff --git a/helloworld-redux-todo/src/containers/HelloWorld.js b/helloworld-redux-todo/src/containers/HelloWorld.js index fb160b1..bab6b40 100644 --- a/helloworld-redux-todo/src/containers/HelloWorld.js +++ b/helloworld-redux-todo/src/containers/HelloWorld.js @@ -1,30 +1,34 @@ import { connect } from 'react-redux'; import HelloWorld from '../components/HelloWorld' -import { toggleItem } from '../actions/check.js'; -import { computeDropoffs, stateItemsWithChecked } from '../selectors/todoSelector'; +import { toggleItem, changeSort} from '../actions/check.js'; +import { computeDropoffs, stateItemsWithChecked, stateOrder} from '../selectors/todoSelector'; export const mapStateToProps = (state) => { - console.log('hit'); - // let todoItems = state.get('todoItems').toList().map(i => i.set('checked', state.getIn(['checked', i.get('id').toString()]))); - // let todoItemsWithDropoff = state.get('todoItems').map(i=>i.get('name')).reduce((accum, item)=>{ - // if(item.includes('dropoff')) - // { - // return accum + 1; - // } - // return accum; - // }, 0) - let todoItemsWithDropoff = computeDropoffs(state); + let before = performance.now(); + // let todoItems = state.get('todoItems').sort( + // (a, b) => + // state.get('order') > 0 ? a.get('name').localeCompare(b.get('name')) + // : b.get('name').localeCompare(a.get('name')) + // ) + // .map(i => i.set("checked", state.get('checked').get(i.get("id").toString()))); + let todoItems = stateItemsWithChecked(state); - let duplicateItemCount = + let res = { todoItems, - todoItemsWithDropoff + + order: stateOrder(state) } - return duplicateItemCount; + let after = performance.now(); + console.log(`took ${after - before}ms`) + return res; }; export const mapDispatchToProps = dispatch => ({ onCheckboxClick: (id)=>{ dispatch(toggleItem(id)); + }, + sortChanged: (event) => { + dispatch(changeSort(event.target.value)); } }) diff --git a/helloworld-redux-todo/src/reducers/index.js b/helloworld-redux-todo/src/reducers/index.js index 99eb666..0aad4fb 100644 --- a/helloworld-redux-todo/src/reducers/index.js +++ b/helloworld-redux-todo/src/reducers/index.js @@ -1,4 +1,4 @@ -import { TOGGLE_ITEM } from "../actions/constants"; +import { TOGGLE_ITEM, CHANGE_SORT } from "../actions/constants"; import { Map } from 'immutable'; export default function rootReducer(state, action){ switch(action.type) { @@ -6,6 +6,9 @@ export default function rootReducer(state, action){ let prevCheck = state.getIn(['checked', `${action.payload.id}`]); return state.setIn(['checked', `${action.payload.id}`], !prevCheck); } + case CHANGE_SORT: { + return state.set('order', action.payload.newSort ); + } default: return state; } diff --git a/helloworld-redux-todo/src/selectors/todoSelector.js b/helloworld-redux-todo/src/selectors/todoSelector.js index 1f0725a..dac3f96 100644 --- a/helloworld-redux-todo/src/selectors/todoSelector.js +++ b/helloworld-redux-todo/src/selectors/todoSelector.js @@ -1,8 +1,16 @@ import { createSelector } from "reselect"; +import React from 'react'; export const stateChecked = state => state.get("checked"); export const stateItems = state => state.get("todoItems"); +export const stateOrder = state => state.get("order"); export const stateItemsAsList = createSelector([stateItems], x => x.toList()); +export const stateItemsOrdered = createSelector([stateItems, stateOrder], (items, order) =>{ + return items.sort((a, b) => + order > 0 ? a.get('name').localeCompare(b.get('name')) + : b.get('name').localeCompare(a.get('name'))); + +}); export const computeDropoffs = createSelector([stateItems], getStateNames => getStateNames.reduce((accum, item) => { if (item.get("name").includes("dropoff")) { @@ -13,7 +21,8 @@ export const computeDropoffs = createSelector([stateItems], getStateNames => ); export const stateItemsWithChecked = createSelector( - [stateItems, stateChecked], + [stateItemsOrdered, stateChecked], (items, checked) => items.map(i => i.set("checked", checked.get(i.get("id").toString()))) ); + diff --git a/helloworld-redux-todo/src/store/index.js b/helloworld-redux-todo/src/store/index.js index f9cd533..68a7937 100644 --- a/helloworld-redux-todo/src/store/index.js +++ b/helloworld-redux-todo/src/store/index.js @@ -29,7 +29,8 @@ const store = createStore( checked: sampleData.reduce((accum, item)=>{ accum[item.id] = item.checked; return accum; - }, {}) + }, {}), + order: 0 }), composedEnhancers ); diff --git a/helloworld-redux-todo/yarn.lock b/helloworld-redux-todo/yarn.lock index 25b4dc3..7dc7ec3 100644 --- a/helloworld-redux-todo/yarn.lock +++ b/helloworld-redux-todo/yarn.lock @@ -3254,6 +3254,7 @@ ignore@^3.3.3: immutable@^4.0.0-rc.12: version "4.0.0-rc.12" resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217" + integrity sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A== import-lazy@^2.1.0: version "2.1.0" @@ -5807,6 +5808,11 @@ requires-port@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" +reselect@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7" + integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"