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

adding a redux todo list to playground

Browse Source
This commit is contained in:
Ken
2019-01-24 12:56:23 -08:00
parent 8b0a0f7569
commit a61d89ea14
12 changed files with 212 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
playground/src/components/TodoList.tsx
View File

@@ -1,16 +1,22 @@
import React from 'react';
import { Stack } from '@uifabric/experiments';
import { TodoListItem } from './TodoListItem';
import { Pivot, PivotItem } from 'office-ui-fabric-react';
import { TodoItem, FilterTypes } from '../store';
export class TodoList extends React.Component {
export interface TodoListProps {
todos: { [id: string]: TodoItem };
filter: FilterTypes;
}
export class TodoList extends React.Component<TodoListProps> {
render() {
const { filter, todos } = this.props;
return (
<Stack verticalGap={10}>
<TodoListItem checked={false} label="nothing" />
<TodoListItem checked={false} label="nothing" />
<TodoListItem checked={false} label="nothing" />
<TodoListItem checked={false} label="nothing" />
{Object.keys(todos).map(id => {
const todo = todos[id];
return <TodoListItem key={id} checked={todo.completed} label={todo.label} />;
})}
</Stack>
);
}