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

7
assets/step.css
View File

@@ -7,6 +7,11 @@ body {
padding: 0; padding: 0;
} }
body.ms-Fabric {
font-size: 14px;
line-height: 20px;
}
#app { #app {
flex: 1 1 40%; flex: 1 1 40%;
padding: 50px; padding: 50px;
@@ -41,7 +46,7 @@ body {
} }
#markdownReadme code { #markdownReadme code {
font-family: Consolas,Menlo,Monaco,monospace; font-family: Consolas, Menlo, Monaco, monospace;
font-size: 0.9em; font-size: 0.9em;
background-color: white; background-color: white;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;

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

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

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

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

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

@@ -44,7 +44,7 @@ export const actionsWithService = {
edit: (id: string, label: string) => { edit: (id: string, label: string) => {
return async (dispatch: any, getState: () => Store) => { return async (dispatch: any, getState: () => Store) => {
dispatch(actions.complete(id)); dispatch(actions.edit(id, label));
await service.update(id, getState().todos[id]); 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( const ConnectedTodoHeader = connect(
state => {}, state => ({}),
(dispatch: any) => ({ (dispatch: any) => ({
addTodo: label => dispatch(actionsWithService.addTodo(label)), addTodo: label => dispatch(actionsWithService.addTodo(label)),
setFilter: filter => dispatch(actions.setFilter(filter)) 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 React from 'react';
import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-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 { Store } from '../store';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@@ -24,9 +24,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
} }
render() { render() {
const { id } = this.props; const { id, todos, complete, remove } = this.props;
const { todos } = this.context.getState();
const dispatch = this.context.dispatch;
const item = todos[id]; const item = todos[id];
@@ -34,10 +32,10 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
<Stack horizontal verticalAlign="center" horizontalAlign="space-between"> <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
{!this.state.editing && ( {!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> <div>
<IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} /> <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
<IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => dispatch(actions.remove(id))} /> <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
</div> </div>
</> </>
)} )}
@@ -57,8 +55,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
} }
private onEdit = () => { private onEdit = () => {
const { id } = this.props; const { id, todos } = this.props;
const { todos } = this.context.getState();
const { label } = todos[id]; const { label } = todos[id];
this.setState({ this.setState({
@@ -83,9 +80,9 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
const ConnectedTodoListItem = connect( const ConnectedTodoListItem = connect(
(state: Store) => ({ todos: state.todos }), (state: Store) => ({ todos: state.todos }),
(dispatch: any) => ({ (dispatch: any) => ({
complete: label => dispatch(actionsWithService.addTodo(label)), complete: id => dispatch(actionsWithService.complete(id)),
remove: label => dispatch(actionsWithService.addTodo(label)), remove: id => dispatch(actionsWithService.remove(id)),
edit: filter => dispatch(actions.setFilter(filter)) edit: (id, label) => dispatch(actionsWithService.edit(id, label))
}) })
)(TodoListItem); )(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 { initializeIcons } from '@uifabric/icons';
import { composeWithDevTools } from 'redux-devtools-extension'; import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import { FilterTypes } from './store'; import * as service from './service';
import { Store, FilterTypes } from './store';
(async () => { (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 = { const preloadStore = {
todos: {}, todos: (await service.getAll()) as Store['todos'],
filter: 'all' as FilterTypes filter: 'all' as FilterTypes
}; };