From 7da6c1339d638b14f03254ac2eb1dcbcd53b0ec4 Mon Sep 17 00:00:00 2001 From: Tommy Parnell Date: Fri, 5 Apr 2019 22:20:53 -0400 Subject: [PATCH] stop --- helloworld-redux-todo/src/App.css | 106 +++++++++++++++--- helloworld-redux-todo/src/actions/check.js | 5 +- .../src/actions/constants.js | 2 +- .../src/components/HelloWorld.js | 8 +- .../src/containers/HelloWorld.js | 23 ++-- helloworld-redux-todo/src/reducers/index.js | 5 +- .../src/selectors/todoSelector.js | 1 + helloworld-redux-todo/src/store/index.js | 3 +- helloworld-redux-todo/src/store/sampleData.js | 2 +- 9 files changed, 119 insertions(+), 36 deletions(-) diff --git a/helloworld-redux-todo/src/App.css b/helloworld-redux-todo/src/App.css index c5c6e8a..a2aeae2 100644 --- a/helloworld-redux-todo/src/App.css +++ b/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; + } \ No newline at end of file diff --git a/helloworld-redux-todo/src/actions/check.js b/helloworld-redux-todo/src/actions/check.js index e7b99d1..345e786 100644 --- a/helloworld-redux-todo/src/actions/check.js +++ b/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 }}); \ No newline at end of file +export const changeSort = (newSort) => ({type: CHANGE_SORT, payload: { newSort }}); +export const showX = (num) =>({ type: SHOW_CHANGE, payload: { num } }) \ 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 36bc2eb..b4a539e 100644 --- a/helloworld-redux-todo/src/actions/constants.js +++ b/helloworld-redux-todo/src/actions/constants.js @@ -1,3 +1,3 @@ export const TOGGLE_ITEM = "TOGGLE_ITEM"; export const CHANGE_SORT = "TOGGLE_SORT"; - \ No newline at end of file +export const SHOW_CHANGE = "SHOW_CHANGE"; \ 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 9fc8b44..61c2cbc 100644 --- a/helloworld-redux-todo/src/components/HelloWorld.js +++ b/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 ; }) return ( -
+

Hello React

+
+ + +
{boxes}
diff --git a/helloworld-redux-todo/src/containers/HelloWorld.js b/helloworld-redux-todo/src/containers/HelloWorld.js index bab6b40..d18798b 100644 --- a/helloworld-redux-todo/src/containers/HelloWorld.js +++ b/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( diff --git a/helloworld-redux-todo/src/reducers/index.js b/helloworld-redux-todo/src/reducers/index.js index 0aad4fb..be83c20 100644 --- a/helloworld-redux-todo/src/reducers/index.js +++ b/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; } diff --git a/helloworld-redux-todo/src/selectors/todoSelector.js b/helloworld-redux-todo/src/selectors/todoSelector.js index dac3f96..4a4effc 100644 --- a/helloworld-redux-todo/src/selectors/todoSelector.js +++ b/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')) diff --git a/helloworld-redux-todo/src/store/index.js b/helloworld-redux-todo/src/store/index.js index 68a7937..97626bd 100644 --- a/helloworld-redux-todo/src/store/index.js +++ b/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 ); diff --git a/helloworld-redux-todo/src/store/sampleData.js b/helloworld-redux-todo/src/store/sampleData.js index 124f9c5..4ae8fe5 100644 --- a/helloworld-redux-todo/src/store/sampleData.js +++ b/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}`);