microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fixing up step 2.7 demo

Browse Source
This commit is contained in:
Ken
2019-03-03 20:14:51 -08:00
parent c2c5b99920
commit 74aeb5ad4b
8 changed files with 34 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
step2-06/demo/src/components/TodoHeader.tsx
View File

@@ -68,7 +68,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
}
const ConnectedTodoHeader = connect(
state => {},
state => ({}),
dispatch => ({
addTodo: label => dispatch(actions.addTodo(label)),
setFilter: filter => dispatch(actions.setFilter(filter))

17
step2-06/demo/src/components/TodoListItem.tsx
View File

@@ -24,9 +24,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
}
render() {
const { id } = this.props;
const { todos } = this.context.getState();
const dispatch = this.context.dispatch;
const { id, todos, complete, remove } = this.props;
const item = todos[id];
@@ -34,10 +32,10 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
<Stack horizontal verticalAlign="center" horizontalAlign="space-between">
{!this.state.editing && (
<>
<Checkbox label={item.label} checked={item.completed} onChange={() => dispatch(actions.complete(id))} />
<Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
<div>
<IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
<IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => dispatch(actions.remove(id))} />
<IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
</div>
</>
)}
@@ -57,8 +55,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
}
private onEdit = () => {
const { id } = this.props;
const { todos } = this.context.getState();
const { id, todos } = this.props;
const { label } = todos[id];
this.setState({
@@ -83,9 +80,9 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
const ConnectedTodoListItem = connect(
(state: Store) => ({ todos: state.todos }),
dispatch => ({
complete: label => dispatch(actions.addTodo(label)),
remove: label => dispatch(actions.addTodo(label)),
edit: filter => dispatch(actions.setFilter(filter))
complete: id => dispatch(actions.complete(id)),
remove: id => dispatch(actions.remove(id)),
edit: (id, label) => dispatch(actions.edit(id, label))
})
)(TodoListItem);

17
step2-06/exercise/src/components/TodoListItem.tsx
View File

@@ -24,9 +24,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
}
render() {
const { id } = this.props;
const { todos } = this.context.getState();
const dispatch = this.context.dispatch;
const { id, todos, complete, remove } = this.props;
const item = todos[id];
@@ -34,10 +32,10 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
<Stack horizontal verticalAlign="center" horizontalAlign="space-between">
{!this.state.editing && (
<>
<Checkbox label={item.label} checked={item.completed} onChange={() => dispatch(actions.complete(id))} />
<Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
<div>
<IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
<IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => dispatch(actions.remove(id))} />
<IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
</div>
</>
)}
@@ -57,8 +55,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
}
private onEdit = () => {
const { id } = this.props;
const { todos } = this.context.getState();
const { id, todos } = this.props;
const { label } = todos[id];
this.setState({
@@ -83,9 +80,9 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
const ConnectedTodoListItem = connect(
(state: Store) => ({ todos: state.todos }),
dispatch => ({
complete: label => dispatch(actions.addTodo(label)),
remove: label => dispatch(actions.addTodo(label)),
edit: filter => dispatch(actions.setFilter(filter))
complete: id => dispatch(actions.complete(id)),
remove: id => dispatch(actions.remove(id)),
edit: (id, label) => dispatch(actions.edit(id, label))
})
)(TodoListItem);