From 46b89ff90b78df9add97c48efa2b8afd44f5a6b0 Mon Sep 17 00:00:00 2001 From: Ken Date: Sat, 2 Mar 2019 23:07:25 -0800 Subject: [PATCH] fixing up step 2-4 exercise --- step2-04/exercise/README.md | 106 ++---------------- step2-04/exercise/src/components/TodoApp.tsx | 15 +-- .../exercise/src/components/TodoFooter.tsx | 10 +- .../exercise/src/components/TodoHeader.tsx | 8 +- 4 files changed, 30 insertions(+), 109 deletions(-) diff --git a/step2-04/exercise/README.md b/step2-04/exercise/README.md index 7f7360f..507edbf 100644 --- a/step2-04/exercise/README.md +++ b/step2-04/exercise/README.md @@ -2,108 +2,22 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -In this step, we describe some problems we encounter when creating a more complex application. +If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 4 to see results. -We will solve these problems with the React Context API. The Context API consists of: +## TodoContext.Provider Component -1. Provider component -2. Consuming context from a Class Component -3. Consuming context from a Functional Component +1. Open `exercise/src/components/TodoApp.tsx` ---- +2. Uncomment the missing functions inside the value prop -React represents a single component like this: +## TodoFooter, Context inside Functional Component -``` -(props) => view; -``` +1. Open `exercise/src/components/TodoFooter.tsx` -In a real application, these functions are composed. It looks more like this: +2. Replace the two constants by using useContext(TodoContext) -![](../../assets/todo-components.png) +## TodoHeader, Context inside Class Component -## Problems in a Complex Application +1. Open `exercise/src/components/TodoHeader.tsx` -1. Data needs to be passed down from component to component via props. Even when some components do not need to know about some data. This is a problem called **props drilling** - -2. There is a lack of coordination of changes that can happen to the data - -Even in our simple application, we saw this problem. For example, `` has this props interface: - -```ts -interface TodoListProps { - complete: (id: string) => void; - remove: (id: string) => void; - todos: Store['todos']; - filter: FilterTypes; - edit: (id: string, label: string) => void; -} -``` - -All of these props are not used, except to be passed down to a child Component, `TodoListItem`: - -```js - -``` - -## Context API - -Let's solve these problems with the React Context API. _context_ is React's way to share data from components to their descendant children components without explicitly passing down through props at every level of the tree. React context is created by calling `createContext()` with some initial data. Use the `` component to wrap a part of the component tree that should be handed the _context_. - -```js -// To create a completed empty context -const TodoContext = React.createContext(undefined); - -class TodoApp extends React.Component { - render() { - - // Pass in some state and function to the provider's value prop - return ( - -
- - - -
- - ); - } -} -``` - -### Consume _context_ from a Class Component - -Inside the children components, like the `` component, the value can be access from the component's `context` prop like this: - -```js -class TodoHeader extends React.Component { - render() { - // Step 1: use the context prop - return
Filter is {this.context.filter}
; - } -} - -// Step 2: be sure to set the contextType property of the component class -TodoHeader.contextType = TodoContext; -``` - -### Consume _context_ from a Functional Component - -If you're using the functional component syntax, you can access the context with the `useContext()` function. `useContext()` requires a recent release of React (16.8): - -```js -const TodoFooter = props => { - const context = useContext(TodoContext); - return ( -
- -
- ); -}; -``` +2. Replace the couple of TODO diff --git a/step2-04/exercise/src/components/TodoApp.tsx b/step2-04/exercise/src/components/TodoApp.tsx index 971b527..ba9fc1a 100644 --- a/step2-04/exercise/src/components/TodoApp.tsx +++ b/step2-04/exercise/src/components/TodoApp.tsx @@ -20,13 +20,14 @@ export class TodoApp extends React.Component { return ( diff --git a/step2-04/exercise/src/components/TodoFooter.tsx b/step2-04/exercise/src/components/TodoFooter.tsx index 80534f9..caecff6 100644 --- a/step2-04/exercise/src/components/TodoFooter.tsx +++ b/step2-04/exercise/src/components/TodoFooter.tsx @@ -3,15 +3,19 @@ import { DefaultButton, Stack, Text } from 'office-ui-fabric-react'; import { TodoContext } from '../TodoContext'; export const TodoFooter = () => { - const context = useContext(TodoContext); - const itemCount = Object.keys(context.todos).filter(id => !context.todos[id].completed).length; + // TODO: replace the following with a useContext(TodoContext) calls + const todos = {}; + const clear = () => {}; + // - end of exercise for this file - + + const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length; return ( {itemCount} item{itemCount === 1 ? '' : 's'} left - context.clear()}>Clear Completed + clear()}>Clear Completed ); }; diff --git a/step2-04/exercise/src/components/TodoHeader.tsx b/step2-04/exercise/src/components/TodoHeader.tsx index f39d416..809187e 100644 --- a/step2-04/exercise/src/components/TodoHeader.tsx +++ b/step2-04/exercise/src/components/TodoHeader.tsx @@ -48,7 +48,8 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> { } private onAdd = () => { - this.context.addTodo(this.state.labelInput); + // TODO: insert a this.context.addTodo call + // HINT: this.context.addTodo(this.state.labelInput); this.setState({ labelInput: undefined }); }; @@ -57,8 +58,9 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> { }; private onFilter = (item: PivotItem) => { - this.context.setFilter(item.props.headerText as FilterTypes); + // TODO: insert a this.context.setFilter call + // HINT: this.context.setFilter(item.props.headerText as FilterTypes); }; } -TodoHeader.contextType = TodoContext; +// TODO: TodoHeader.contextType = TodoContext;