From 619f17f2b8ab3b418fa92f96bcb44b3203a0c580 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 28 Feb 2019 22:37:47 -0800 Subject: [PATCH 1/5] some exercise for 2.6 --- .../src/reducers/pureFunctions.spec.ts | 2 +- .../exercise/src/reducers/pureFunctions.ts | 25 ++++++++++--------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/step2-05/exercise/src/reducers/pureFunctions.spec.ts b/step2-05/exercise/src/reducers/pureFunctions.spec.ts index c8e202a..aa7018e 100644 --- a/step2-05/exercise/src/reducers/pureFunctions.spec.ts +++ b/step2-05/exercise/src/reducers/pureFunctions.spec.ts @@ -21,5 +21,5 @@ describe('TodoApp reducers', () => { */ }); - // TODO: test remove, complete and clear + // TODO: add a test for remove() }); diff --git a/step2-05/exercise/src/reducers/pureFunctions.ts b/step2-05/exercise/src/reducers/pureFunctions.ts index 12ca8ef..4f2b931 100644 --- a/step2-05/exercise/src/reducers/pureFunctions.ts +++ b/step2-05/exercise/src/reducers/pureFunctions.ts @@ -19,20 +19,21 @@ export function remove(state: Store['todos'], id: string) { } export function complete(state: Store['todos'], id: string) { - // Write code: - // - to clone the state[id] object into new todo object, using the spread syntax - // - in the spread syntax, also override the value of the completed key like this: {...foo, [id]: !foo[id].completed} - // - modify new state and set the id key to the value of the new item object - - return state; + // Clone the todo, overriding + const newTodo = { ...state[id], completed: !state[id].completed }; + return { ...state, [id]: newTodo }; } export function clear(state: Store['todos']) { - // Write code: - // - to clone the state object into new state object - // - loop through the keys of the new state object - // - remove those items inside that new state if the item is completed using the "delete" keyword - // - return the new state + // Clone the todos + const newTodos = { ...state }; - return state; + // Delete all todos based on the completed flag, looping over the keys of the todos + Object.keys(state).forEach(key => { + if (state[key].completed) { + delete newTodos[key]; + } + }); + + return newTodos; } From 800f621dfb58098cb4ce1286a127fad672392ea2 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 28 Feb 2019 22:41:30 -0800 Subject: [PATCH 2/5] fixing up exercise hints in readme --- step2-07/exercise/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step2-07/exercise/README.md b/step2-07/exercise/README.md index 359de1a..a080727 100644 --- a/step2-07/exercise/README.md +++ b/step2-07/exercise/README.md @@ -4,7 +4,7 @@ If you still have `npm test` running from the last step, stop it using `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 7 to see results. -1. open up `exercise/src/index.tsx` and wrap `` with `` as instructed in the comment +1. open up `exercise/src/index.tsx` and wrap `` with `` as instructed in the comment 2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps` From 129dd3c74b113577eb1e9877b71368c6129e65ee Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 28 Feb 2019 22:49:41 -0800 Subject: [PATCH 3/5] made Exercise 2.7 actually boot up --- step2-07/demo/src/components/TodoFooter.tsx | 3 ++- step2-07/exercise/README.md | 2 +- step2-07/exercise/src/components/TodoFooter.tsx | 3 ++- step2-07/exercise/src/index.tsx | 9 +++++++-- step2-08/demo/src/components/TodoFooter.tsx | 3 ++- 5 files changed, 14 insertions(+), 6 deletions(-) diff --git a/step2-07/demo/src/components/TodoFooter.tsx b/step2-07/demo/src/components/TodoFooter.tsx index abd4932..d876d41 100644 --- a/step2-07/demo/src/components/TodoFooter.tsx +++ b/step2-07/demo/src/components/TodoFooter.tsx @@ -10,7 +10,8 @@ interface TodoFooterProps { } const TodoFooter = (props: TodoFooterProps) => { - const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; + const { todos } = props; + const itemCount = todos ? Object.keys(todos).filter(id => !props.todos[id].completed).length : 0; return ( diff --git a/step2-07/exercise/README.md b/step2-07/exercise/README.md index a080727..f276754 100644 --- a/step2-07/exercise/README.md +++ b/step2-07/exercise/README.md @@ -4,7 +4,7 @@ If you still have `npm test` running from the last step, stop it using `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 7 to see results. -1. open up `exercise/src/index.tsx` and wrap `` with `` as instructed in the comment +1. open up `exercise/src/index.tsx` and note the `` - see how it wraps the components as the new root component. 2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps` diff --git a/step2-07/exercise/src/components/TodoFooter.tsx b/step2-07/exercise/src/components/TodoFooter.tsx index 6c11cbc..b97194a 100644 --- a/step2-07/exercise/src/components/TodoFooter.tsx +++ b/step2-07/exercise/src/components/TodoFooter.tsx @@ -11,7 +11,8 @@ interface TodoFooterProps { } export const TodoFooter = (props: TodoFooterProps) => { - const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; + const { todos } = props; + const itemCount = todos ? Object.keys(todos).filter(id => !props.todos[id].completed).length : 0; return ( diff --git a/step2-07/exercise/src/index.tsx b/step2-07/exercise/src/index.tsx index 6c891b4..f14f51c 100644 --- a/step2-07/exercise/src/index.tsx +++ b/step2-07/exercise/src/index.tsx @@ -15,5 +15,10 @@ store.dispatch(actions.addTodo('world')); initializeIcons(); -// TODO: wrap with a instance here -ReactDOM.render(, document.getElementById('app')); +// TODO: see how we added Provider is the root element +ReactDOM.render( + + + , + document.getElementById('app') +); diff --git a/step2-08/demo/src/components/TodoFooter.tsx b/step2-08/demo/src/components/TodoFooter.tsx index 417c3e2..5805f34 100644 --- a/step2-08/demo/src/components/TodoFooter.tsx +++ b/step2-08/demo/src/components/TodoFooter.tsx @@ -10,7 +10,8 @@ interface TodoFooterProps { } const TodoFooter = (props: TodoFooterProps) => { - const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; + const { todos } = props; + const itemCount = todos ? Object.keys(todos).filter(id => !props.todos[id].completed).length : 0; return ( From bbd40cc8a1ab0c1bfb7645075992546f9cf01cd7 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 28 Feb 2019 22:56:53 -0800 Subject: [PATCH 4/5] added what is missing in 2.7 --- step2-07/exercise/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/step2-07/exercise/README.md b/step2-07/exercise/README.md index f276754..3e27109 100644 --- a/step2-07/exercise/README.md +++ b/step2-07/exercise/README.md @@ -4,6 +4,8 @@ If you still have `npm test` running from the last step, stop it using `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 7 to see results. +At the beginning of this exercise, the "Add" and "Clear Completed" buttons do not work. We'll be fixing that in this step! + 1. open up `exercise/src/index.tsx` and note the `` - see how it wraps the components as the new root component. 2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps` From 622ac25e082863d5122d0551a6ec41233563587a Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 28 Feb 2019 23:00:31 -0800 Subject: [PATCH 5/5] fixing highlighting --- step2-07/demo/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/step2-07/demo/README.md b/step2-07/demo/README.md index fa55820..6cc335e 100644 --- a/step2-07/demo/README.md +++ b/step2-07/demo/README.md @@ -20,7 +20,7 @@ That's right, Redux doesn't only work with React. It can be used inside Vue.js, The store doesn't magically get passed to the views randomly. It has to be supplied by a `react-redux` component called ``. It can be placed anywhere, but it's best to just make it available at the root the app: -```tsx +```js const store = createStore(reducers); const App = () => { @@ -36,7 +36,7 @@ const App = () => { Connect store to view with `react-redux`. `connect()` is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a `` component. -```ts +```js const OldComponent = props => { return
{props.foo}
; };