stop

helloworld-redux-todo/src/App.css

@@ -1,28 +1,100 @@
-.App {
-  text-align: center;
+html {
+  font-family: Arial, Helvetica, sans-serif;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+h1, h2, h3, h4, h5, h6 {
+  color: #4A4A4A;
+  line-height: 1.45;
+  letter-spacing: -.01em;
+  line-height: 1.25em
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+h1 {
+  font-size: 3.3rem;
 }
 
-.App-title {
-  font-size: 1.5em;
+h2 {
+  font-size: 2.6rem;
 }
 
-.App-intro {
-  font-size: large;
+h3 {
+  font-size: 2.4rem;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+h4 {
+  font-size: 2.2rem;
 }
+
+h5 {
+  font-size: 2rem;
+}
+
+article {
+  margin-top: .5em;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  letter-spacing: -.01em;
+  line-height: 1.9rem;
+  color: #5d686f;
+  font-size: 1.125rem;
+  margin: 0;
+}
+
+.main-content-wrap {
+  display: block;
+  max-width: 750px;
+  margin: 0 auto;
+  padding-right: 1.2em;
+  padding-left: 1.2em;
+  padding-bottom: 1.2em;
+}
+  .headerBump {
+      padding-top: 3.5rem;
+  }
+
+  .main-content-wrap img {
+      display: block;
+      width: auto;
+      max-width: 100%;
+      margin-bottom: 1.2rem
+  }
+
+.bodyWithNav {
+  width: calc(100% - 250px);
+  float: right;
+}
+
+.headline {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.headlineSubtext {
+  font-size: .8em;
+}
+
+blockquote {
+  border-left: 2px solid #d1dced;
+  padding: .4em 1.2em;
+}
+
+code, pre {
+  font-size: 1rem;
+  font-family: "Courier New", Courier, monospace;
+  font-weight: 600;
+  border-radius: 3px;
+  background: #f5f5f5;
+  padding: 0 .4em;
+  overflow-x: auto;
+}
+
+a {
+  color: #00558d;
+  font-weight: 400;
+}
+
+  a:visited {
+      color: #6c6c6c;
+  }

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

@@ -1,4 +1,5 @@
-import { TOGGLE_ITEM, CHANGE_SORT } from './constants';
+import { TOGGLE_ITEM, CHANGE_SORT, SHOW_CHANGE } from './constants';
 
 export const toggleItem = (id) => ({type: TOGGLE_ITEM, payload: {id} });
-export const changeSort = (newSort) => ({type: CHANGE_SORT, payload: { newSort }});
+export const changeSort = (newSort) => ({type: CHANGE_SORT, payload: { newSort }});
+export const showX = (num) =>({ type: SHOW_CHANGE, payload: { num } })

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

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

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

@@ -3,16 +3,20 @@ import Checkbox from './Checkbox';
 
 export default class HelloWorld extends PureComponent {
   render(){
-    let boxes = this.props.todoItems && this.props.todoItems.map(i => {
+    let boxes = this.props.todoItems && this.props.todoItems.slice(0, this.props.showX).map(i => {
       return <Checkbox key={`${i.get('id')}-${i.get('name')}`} onFireEvnt={this.props.onCheckboxClick} checked={i.get('checked')} name={i.get('name')} itemId={i.get('id')}  /> ;
     })
     return (
-      <div>
+      <div class="main-content-wrap">
         <select value={this.props.order} onChange={this.props.sortChanged}>
           <option value="1">Asc</option>
           <option value="0">Dec</option>
         </select>
         <h2>Hello React</h2>
+        <div>
+        <label>Show Last <input type="number" value={this.props.showX} onChange={(evnt) => {this.props.onShowChange(evnt.target.value)}} /></label>
+        
+        </div>
         {boxes}
       </div>
       

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

@@ -1,22 +1,22 @@
 import { connect } from 'react-redux';
 import HelloWorld from '../components/HelloWorld'
-import { toggleItem, changeSort} from '../actions/check.js';
+import { toggleItem, changeSort, showX} from '../actions/check.js';
 import { computeDropoffs, stateItemsWithChecked, stateOrder} from '../selectors/todoSelector';
 export const mapStateToProps = (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);
+    const items = state.get("todoItems");
+    const order = state.get("order");
+    const stateChecked = state.get("checked")
+
+    let itemsOrdered =  items.sort((a, b) => order > 0 ? a.get('name').localeCompare(b.get('name')): b.get('name').localeCompare(a.get('name')));
+    let todoItems = itemsOrdered.map(i => i.set("checked", stateChecked.get(i.get("id").toString())))
+    // let todoItems = stateItemsWithChecked(state);
     let res = 
      {
         todoItems,
-
-        order: stateOrder(state)
+        order: stateOrder(state),
+        showX: state.get('showX')
     }
     let after = performance.now();
     console.log(`took ${after - before}ms`)
@@ -29,7 +29,8 @@ export const mapDispatchToProps = dispatch => ({
     },
     sortChanged: (event) => {
         dispatch(changeSort(event.target.value));
-    }
+    },
+    onShowChange: (num) => dispatch(showX(num)) 
 })
 
 export default connect(

helloworld-redux-todo/src/reducers/index.js

@@ -1,4 +1,4 @@
-import { TOGGLE_ITEM, CHANGE_SORT } from "../actions/constants";
+import { TOGGLE_ITEM, CHANGE_SORT, SHOW_CHANGE } from "../actions/constants";
 import { Map } from 'immutable';
 export default function rootReducer(state, action){
     switch(action.type) { 
@@ -9,6 +9,9 @@ export default function rootReducer(state, action){
         case CHANGE_SORT: {
             return state.set('order', action.payload.newSort );
         }
+        case SHOW_CHANGE: {
+            return state.set('showX', action.payload.num);
+        }
         default:
             return state;
     }

helloworld-redux-todo/src/selectors/todoSelector.js

@@ -5,6 +5,7 @@ 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'))

helloworld-redux-todo/src/store/index.js

@@ -30,7 +30,8 @@ const store = createStore(
       accum[item.id] = item.checked;
       return accum;
     }, {}),
-    order: 0
+    order: 0,
+    showX: 20
   }),
   composedEnhancers
 );

helloworld-redux-todo/src/store/sampleData.js

@@ -194,7 +194,7 @@ let nouns = [
 "bow",
 "keys"];
 
-for (let i = 0; i <= 3000; i++) {
+for (let i = 0; i <= 30000; i++) {
     let randomVerb = _.sample(verbs);
     let randomNoun = _.sample(nouns);
     results.push(`${randomVerb} ${randomNoun}`);