TerribleDev/react-samples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stopping

Browse Source
This commit is contained in:
Tommy Parnell
2018-11-03 08:16:56 -04:00
parent 492983315a
commit cb50a0eeed
9 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
helloworld-redux-todo/package.json
View File

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

5
helloworld-redux-todo/src/actions/check.js
View File

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

1
helloworld-redux-todo/src/actions/constants.js
View File

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

7
helloworld-redux-todo/src/components/HelloWorld.js
View File

@@ -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>
)
}
}

34
helloworld-redux-todo/src/containers/HelloWorld.js
View File

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

5
helloworld-redux-todo/src/reducers/index.js
View File

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

11
helloworld-redux-todo/src/selectors/todoSelector.js
View File

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

3
helloworld-redux-todo/src/store/index.js
View File

@@ -29,7 +29,8 @@ const store = createStore(
checked: sampleData.reduce((accum, item)=>{
accum[item.id] = item.checked;
return accum;
}, {})
}, {}),
order: 0
}),
composedEnhancers
);

6
helloworld-redux-todo/yarn.lock
View File

@@ -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"