stopping

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": {

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} });
+export const changeSort = (newSort) => ({type: CHANGE_SORT, payload: { newSort }});

helloworld-redux-todo/src/actions/constants.js

@@ -1,2 +1,3 @@
 export const TOGGLE_ITEM = "TOGGLE_ITEM";
+export const CHANGE_SORT = "TOGGLE_SORT";
  

helloworld-redux-todo/src/components/HelloWorld.js

@@ -8,9 +8,14 @@ export default class HelloWorld extends PureComponent {
     })
     return (
       <div>
-        <h2>Hello React <small>dropoffs: {this.props.todoItemsWithDropoff}</small></h2>
+        <select value={this.props.order} onChange={this.props.sortChanged}>
+          <option value="1">Asc</option>
+          <option value="0">Dec</option>
+        </select>
+        <h2>Hello React</h2>
         {boxes}
       </div>
+      
     )
   }
 }

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 { toggleItem, changeSort} from '../actions/check.js';
-import { computeDropoffs, stateItemsWithChecked } from '../selectors/todoSelector';
+import { computeDropoffs, stateItemsWithChecked, stateOrder} from '../selectors/todoSelector';
 export const mapStateToProps = (state) => {
-    console.log('hit');
+    let before = performance.now();
-    // let todoItems = state.get('todoItems').toList().map(i => i.set('checked', state.getIn(['checked', i.get('id').toString()])));
+    // let todoItems = state.get('todoItems').sort(
-    // let todoItemsWithDropoff = state.get('todoItems').map(i=>i.get('name')).reduce((accum, item)=>{
+    //     (a, b) => 
-    //     if(item.includes('dropoff'))
+    //         state.get('order') > 0 ? a.get('name').localeCompare(b.get('name'))
-    //     {
+    //         : b.get('name').localeCompare(a.get('name'))
-    //         return accum + 1;
+    //         )
-    //     }
+    //         .map(i => i.set("checked", state.get('checked').get(i.get("id").toString())));
-    //     return accum;
+
-    // }, 0)
-    let todoItemsWithDropoff = computeDropoffs(state);
     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));
     }
 })
 

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;
     }

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())))
 );
+

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
 );

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"