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

5
assets/step.css
View File

@@ -7,6 +7,11 @@ body {
padding: 0;
}
body.ms-Fabric {
font-size: 14px;
line-height: 20px;
}
#app {
flex: 1 1 40%;
padding: 50px;

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);

2
step2-07/demo/src/actions/index.ts
View File

@@ -44,7 +44,7 @@ export const actionsWithService = {
edit: (id: string, label: string) => {
return async (dispatch: any, getState: () => Store) => {
dispatch(actions.complete(id));
dispatch(actions.edit(id, label));
await service.update(id, getState().todos[id]);
};
}

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

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

19
step2-07/demo/src/components/TodoListItem.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
import { actions, actionsWithService } from '../actions';
import { actionsWithService } from '../actions';
import { Store } from '../store';
import { connect } from 'react-redux';
@@ -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: any) => ({
complete: label => dispatch(actionsWithService.addTodo(label)),
remove: label => dispatch(actionsWithService.addTodo(label)),
edit: filter => dispatch(actions.setFilter(filter))
complete: id => dispatch(actionsWithService.complete(id)),
remove: id => dispatch(actionsWithService.remove(id)),
edit: (id, label) => dispatch(actionsWithService.edit(id, label))
})
)(TodoListItem);

7
step2-07/demo/src/index.tsx
View File

@@ -7,13 +7,12 @@ import { Provider } from 'react-redux';
import { initializeIcons } from '@uifabric/icons';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import { FilterTypes } from './store';
import * as service from './service';
import { Store, FilterTypes } from './store';
(async () => {
// TODO: to make the store pre-populate with data from the service,
// replace the todos value below with a call to "await service.getAll()"
const preloadStore = {
todos: {},
todos: (await service.getAll()) as Store['todos'],
filter: 'all' as FilterTypes
};