adding exercise for step 7

step2-07/exercise/src/components/TodoApp.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Stack, Customizer, mergeStyles, getTheme } from 'office-ui-fabric-react';
+import { TodoFooter } from './TodoFooter';
+import { TodoHeader } from './TodoHeader';
+import { TodoList } from './TodoList';
+import { FluentCustomizations } from '@uifabric/fluent-theme';
+
+const className = mergeStyles({
+  padding: 25,
+  ...getTheme().effects.elevation4
+});
+
+export const TodoApp = () => {
+  return (
+    <Customizer {...FluentCustomizations}>
+      <Stack horizontalAlign="center">
+        <Stack style={{ width: 400 }} gap={25} className={className}>
+          <TodoHeader />
+          <TodoList />
+          <TodoFooter />
+        </Stack>
+      </Stack>
+    </Customizer>
+  );
+};

step2-07/exercise/src/components/TodoFooter.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text } from '@uifabric/experiments';
+import { Stack } from 'office-ui-fabric-react';
+import { Store } from '../store';
+import { DefaultButton } from 'office-ui-fabric-react';
+import { connect } from 'react-redux';
+import { actions } from '../actions';
+
+// TODO: after connecting to view, erase the ?'s
+interface TodoFooterProps {
+  clear?: () => void;
+  todos?: Store['todos'];
+}
+
+export const TodoFooter = (props: TodoFooterProps) => {
+  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
+
+  return (
+    <Stack horizontal horizontalAlign="space-between">
+      <Text>
+        {itemCount} item{itemCount > 1 ? 's' : ''} left
+      </Text>
+      <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
+    </Stack>
+  );
+};
+
+/*
+TODO: uncomment this and fill out the below code
+
+function mapStateToProps(state: Store) {
+  // TODO: FILL THIS OUT
+}
+
+function mapDispatchToProps(dispatch: any) {
+  // TODO: FILL THIS OUT
+}
+
+const component = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoFooter);
+
+export { component as TodoFooter };
+*/

step2-07/exercise/src/components/TodoHeader.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text } from '@uifabric/experiments';
+import { Stack } from 'office-ui-fabric-react';
+import { TextField, PrimaryButton } from 'office-ui-fabric-react';
+import { Store } from '../store';
+import { connect } from 'react-redux';
+import { actions } from '../actions';
+
+// TODO: after connecting to view, erase the ?'s
+interface TodoHeaderProps {
+  addTodo?: (label: string) => void;
+}
+
+interface TodoHeaderState {
+  labelInput: string;
+}
+
+export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
+  constructor(props: TodoHeaderProps) {
+    super(props);
+    this.state = { labelInput: undefined };
+  }
+
+  render() {
+    return (
+      <Stack gap={10}>
+        <Stack horizontal horizontalAlign="center">
+          <Text variant="xxLarge">todos</Text>
+        </Stack>
+
+        <Stack horizontal gap={10}>
+          <Stack.Item grow>
+            <TextField placeholder="What needs to be done?" value={this.state.labelInput} onChange={this.onChange} />
+          </Stack.Item>
+          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  private onAdd = () => {
+    this.props.addTodo(this.state.labelInput);
+    this.setState({ labelInput: undefined });
+  };
+
+  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
+    this.setState({ labelInput: newValue });
+  };
+}
+
+/*
+
+TODO: uncomment the following and fill out the TODO's
+
+function mapStateToProps(state: Store) {
+  // TODO: fill this out
+}
+
+function mapDispatchToProps(dispatch: any) {
+  // TODO: fill this out
+}
+
+const component = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoHeader);
+
+export { component as TodoHeader };
+
+*/

step2-07/exercise/src/components/TodoList.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Stack } from 'office-ui-fabric-react';
+import { TodoListItem } from './TodoListItem';
+import { Store } from '../store';
+import { connect } from 'react-redux';
+
+interface TodoListProps {
+  todos: Store['todos'];
+}
+
+const TodoList = (props: TodoListProps) => {
+  const { todos } = props;
+  const filteredTodos = Object.keys(todos);
+
+  return (
+    <Stack gap={10}>
+      {filteredTodos.map(id => (
+        <TodoListItem key={id} id={id} />
+      ))}
+    </Stack>
+  );
+};
+
+function mapStateToProps(state: Store) {
+  return { ...state };
+}
+
+function mapDispatchToProps(dispatch: any) {
+  return {};
+}
+
+const component = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoList);
+
+export { component as TodoList };

step2-07/exercise/src/components/TodoListItem.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Stack, Checkbox, IconButton } from 'office-ui-fabric-react';
+import { Store } from '../store';
+import { connect } from 'react-redux';
+import { actions } from '../actions';
+
+interface TodoListItemProps {
+  id: string;
+  todos: Store['todos'];
+  remove: (id: string) => void;
+  complete: (id: string) => void;
+}
+
+class TodoListItem extends React.Component<TodoListItemProps, {}> {
+  render() {
+    const { todos, id, complete, remove } = this.props;
+    const item = todos[id];
+
+    return (
+      <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
+        <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
+        <div>
+          <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
+        </div>
+      </Stack>
+    );
+  }
+}
+
+function mapStateToProps({ todos }: Store) {
+  return {
+    todos
+  };
+}
+
+function mapDispatchToProps(dispatch: any) {
+  return {
+    remove: (id: string) => dispatch(actions.remove(id)),
+    complete: (id: string) => dispatch(actions.complete(id))
+  };
+}
+
+const component = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoListItem);
+
+export { component as TodoListItem };