From 4be1dcdae93a3d93ccf213cb8280c821a0361cdb Mon Sep 17 00:00:00 2001 From: Ken Date: Sat, 2 Mar 2019 21:23:22 -0800 Subject: [PATCH] context demo works --- index.html | 2 +- package-lock.json | 22 ++--- package.json | 5 +- step2-02/demo/src/components/TodoApp.tsx | 1 + step2-04/demo/README.md | 11 +-- step2-04/demo/src/TodoContext.ts | 4 + step2-04/demo/src/components/TodoApp.tsx | 99 +++++++++++++++++++ step2-04/demo/src/components/TodoFooter.tsx | 17 ++++ step2-04/demo/src/components/TodoHeader.tsx | 64 ++++++++++++ step2-04/demo/src/components/TodoList.tsx | 21 ++++ step2-04/demo/src/components/TodoListItem.tsx | 76 ++++++++++++++ step2-04/demo/src/index.tsx | 10 ++ step2-04/demo/src/store/index.ts | 14 +++ 13 files changed, 326 insertions(+), 20 deletions(-) create mode 100644 step2-04/demo/src/TodoContext.ts create mode 100644 step2-04/demo/src/components/TodoApp.tsx create mode 100644 step2-04/demo/src/components/TodoFooter.tsx create mode 100644 step2-04/demo/src/components/TodoHeader.tsx create mode 100644 step2-04/demo/src/components/TodoList.tsx create mode 100644 step2-04/demo/src/components/TodoListItem.tsx create mode 100644 step2-04/demo/src/index.tsx create mode 100644 step2-04/demo/src/store/index.ts diff --git a/index.html b/index.html index 6fbe1cc..cfcb13e 100644 --- a/index.html +++ b/index.html @@ -109,7 +109,7 @@
  • - Testing with jest + React Context
    demo | exercise
    diff --git a/package-lock.json b/package-lock.json index fc22f36..5e52d08 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8363,25 +8363,25 @@ } }, "react": { - "version": "16.7.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz", - "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==", + "version": "16.8.3", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.3.tgz", + "integrity": "sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.12.0" + "scheduler": "^0.13.3" } }, "react-dom": { - "version": "16.7.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz", - "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==", + "version": "16.8.3", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.3.tgz", + "integrity": "sha512-ttMem9yJL4/lpItZAQ2NTFAbV7frotHk5DZEHXUOws2rMmrsvh1Na7ThGT0dTzUIl6pqTOi5tYREfL8AEna3lA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.12.0" + "scheduler": "^0.13.3" } }, "react-is": { @@ -8888,9 +8888,9 @@ "dev": true }, "scheduler": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz", - "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==", + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.3.tgz", + "integrity": "sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/package.json b/package.json index d290100..cda9618 100644 --- a/package.json +++ b/package.json @@ -63,12 +63,13 @@ "live-server": "^1.2.1", "marked": "^0.6.1", "office-ui-fabric-react": "^6.144.0", - "react": "^16.7.0", - "react-dom": "^16.7.0", + "react": "^16.8.3", + "react-dom": "^16.8.3", "react-redux": "^6.0.0", "redux": "^4.0.1", "redux-devtools-extension": "^2.13.8", "redux-starter-kit": "^0.4.3", + "redux-react-hook": "^3.2.0", "redux-thunk": "^2.3.0" } } diff --git a/step2-02/demo/src/components/TodoApp.tsx b/step2-02/demo/src/components/TodoApp.tsx index 1ace4c7..5276fd8 100644 --- a/step2-02/demo/src/components/TodoApp.tsx +++ b/step2-02/demo/src/components/TodoApp.tsx @@ -18,6 +18,7 @@ export class TodoApp extends React.Component { filter: 'all' }; } + render() { const { filter, todos } = this.state; return ( diff --git a/step2-04/demo/README.md b/step2-04/demo/README.md index 3034d6e..5bc50fd 100644 --- a/step2-04/demo/README.md +++ b/step2-04/demo/README.md @@ -12,7 +12,7 @@ We will solve these problems with the React Context API. The Context API consist --- -For a single component, React gives us a mental model like this: +React represents a single component like this: ``` (props) => view; @@ -24,7 +24,7 @@ In a real application, these functions are composed. It looks more like this: ## Problems in a Complex Application -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. +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 @@ -48,12 +48,11 @@ All of these props are not used, except to be passed down to a child Component, ## Context API -Let's solve the first one with the Context API. A `context` is a special way for React to share data from components to their descendant children components without having to explicitly pass down through props at every level of the tree. - -We create a context by calling `createContext()` with some initial data: +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: ```ts -const TodoContext = React.createContext(); +// To create a completed empty context +const TodoContext = React.createContext(undefined); ``` Now that we have a `TodoContext` stuffed with some initial state, we will wrap `TodoApp` component with `TodoContext.Provider` so that it can provide data to all its children: diff --git a/step2-04/demo/src/TodoContext.ts b/step2-04/demo/src/TodoContext.ts new file mode 100644 index 0000000..9ec0028 --- /dev/null +++ b/step2-04/demo/src/TodoContext.ts @@ -0,0 +1,4 @@ +import React from 'react'; + +// The typing forces us to put something inside createContext(); start with undefined +export const TodoContext = React.createContext(undefined); diff --git a/step2-04/demo/src/components/TodoApp.tsx b/step2-04/demo/src/components/TodoApp.tsx new file mode 100644 index 0000000..971b527 --- /dev/null +++ b/step2-04/demo/src/components/TodoApp.tsx @@ -0,0 +1,99 @@ +import React from 'react'; +import { Stack } from 'office-ui-fabric-react'; +import { TodoFooter } from './TodoFooter'; +import { TodoHeader } from './TodoHeader'; +import { TodoList } from './TodoList'; +import { Store } from '../store'; +import { TodoContext } from '../TodoContext'; + +let index = 0; + +export class TodoApp extends React.Component { + constructor(props) { + super(props); + this.state = { + todos: {}, + filter: 'all' + }; + } + render() { + return ( + + + + + + + + + + ); + } + + private _addTodo = label => { + const { todos } = this.state; + const id = index++; + + this.setState({ + todos: { ...todos, [id]: { label } } + }); + }; + + private _remove = id => { + const newTodos = { ...this.state.todos }; + delete newTodos[id]; + + this.setState({ + todos: newTodos + }); + }; + + private _complete = id => { + const newTodos = { ...this.state.todos }; + newTodos[id].completed = !newTodos[id].completed; + + this.setState({ + todos: newTodos + }); + }; + + private _edit = (id, label) => { + const newTodos = { ...this.state.todos }; + newTodos[id] = { ...newTodos[id], label }; + + this.setState({ + todos: newTodos + }); + }; + + private _clear = () => { + const { todos } = this.state; + const newTodos = {}; + + Object.keys(this.state.todos).forEach(id => { + if (!todos[id].completed) { + newTodos[id] = todos[id]; + } + }); + + this.setState({ + todos: newTodos + }); + }; + + private _setFilter = filter => { + this.setState({ + filter: filter + }); + }; +} diff --git a/step2-04/demo/src/components/TodoFooter.tsx b/step2-04/demo/src/components/TodoFooter.tsx new file mode 100644 index 0000000..80534f9 --- /dev/null +++ b/step2-04/demo/src/components/TodoFooter.tsx @@ -0,0 +1,17 @@ +import React, { useContext } from 'react'; +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; + + return ( + + + {itemCount} item{itemCount === 1 ? '' : 's'} left + + context.clear()}>Clear Completed + + ); +}; diff --git a/step2-04/demo/src/components/TodoHeader.tsx b/step2-04/demo/src/components/TodoHeader.tsx new file mode 100644 index 0000000..f39d416 --- /dev/null +++ b/step2-04/demo/src/components/TodoHeader.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react'; +import { FilterTypes } from '../store'; +import { TodoContext } from '../TodoContext'; + +interface TodoHeaderState { + labelInput: string; +} + +export class TodoHeader extends React.Component<{}, TodoHeaderState> { + constructor(props: {}) { + super(props); + this.state = { labelInput: undefined }; + } + + render() { + return ( + + + todos + + + + + ({ + ...(props.focused && { + field: { + backgroundColor: '#c7e0f4' + } + }) + })} + /> + + Add + + + + + + + + + ); + } + + private onAdd = () => { + this.context.addTodo(this.state.labelInput); + this.setState({ labelInput: undefined }); + }; + + private onChange = (evt: React.FormEvent, newValue: string) => { + this.setState({ labelInput: newValue }); + }; + + private onFilter = (item: PivotItem) => { + this.context.setFilter(item.props.headerText as FilterTypes); + }; +} + +TodoHeader.contextType = TodoContext; diff --git a/step2-04/demo/src/components/TodoList.tsx b/step2-04/demo/src/components/TodoList.tsx new file mode 100644 index 0000000..1033d8e --- /dev/null +++ b/step2-04/demo/src/components/TodoList.tsx @@ -0,0 +1,21 @@ +import React, { useContext } from 'react'; +import { Stack } from 'office-ui-fabric-react'; +import { TodoListItem } from './TodoListItem'; +import { Store, FilterTypes } from '../store'; +import { TodoContext } from '../TodoContext'; + +export const TodoList = () => { + const context = useContext(TodoContext); + const { filter, todos } = context; + const filteredTodos = Object.keys(todos).filter(id => { + return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed); + }); + + return ( + + {filteredTodos.map(id => ( + + ))} + + ); +}; diff --git a/step2-04/demo/src/components/TodoListItem.tsx b/step2-04/demo/src/components/TodoListItem.tsx new file mode 100644 index 0000000..fa89047 --- /dev/null +++ b/step2-04/demo/src/components/TodoListItem.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react'; +import { TodoContext } from '../TodoContext'; + +interface TodoListItemProps { + id: string; +} + +interface TodoListItemState { + editing: boolean; + editLabel: string; +} + +export class TodoListItem extends React.Component { + constructor(props: TodoListItemProps) { + super(props); + this.state = { editing: false, editLabel: undefined }; + } + + render() { + const { id } = this.props; + const { todos, complete, remove } = this.context; + + const item = todos[id]; + + return ( + + {!this.state.editing && ( + <> + complete(id)} /> +
    + + remove(id)} /> +
    + + )} + + {this.state.editing && ( + + + + + + Save + + + )} +     + ); + } + + private onEdit = () => { + const { id } = this.props; + const { todos } = this.context; + const { label } = todos[id]; + + this.setState({ + editing: true, + editLabel: this.state.editLabel || label + }); + }; + + private onDoneEdit = () => { + this.context.edit(this.props.id, this.state.editLabel); + this.setState({ + editing: false, + editLabel: undefined + }); + }; + + private onChange = (evt: React.FormEvent, newValue: string) => { + this.setState({ editLabel: newValue }); + }; +} + +TodoListItem.contextType = TodoContext; diff --git a/step2-04/demo/src/index.tsx b/step2-04/demo/src/index.tsx new file mode 100644 index 0000000..2587243 --- /dev/null +++ b/step2-04/demo/src/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { TodoApp } from './components/TodoApp'; +import { initializeIcons } from '@uifabric/icons'; + +// Initializes the UI Fabric icons that we can use +// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons +initializeIcons(); + +ReactDOM.render(, document.getElementById('app')); diff --git a/step2-04/demo/src/store/index.ts b/step2-04/demo/src/store/index.ts new file mode 100644 index 0000000..221b5f4 --- /dev/null +++ b/step2-04/demo/src/store/index.ts @@ -0,0 +1,14 @@ +export type FilterTypes = 'all' | 'active' | 'completed'; + +export interface TodoItem { + label: string; + completed: boolean; +} + +export interface Store { + todos: { + [id: string]: TodoItem; + }; + + filter: FilterTypes; +}