step 9 exercise complete!

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

@@ -0,0 +1,36 @@
+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 { Store } from '../store';
+import { FluentCustomizations } from '@uifabric/fluent-theme';
+
+const className = mergeStyles({
+  padding: 25,
+  ...getTheme().effects.elevation4
+});
+
+export class TodoApp extends React.Component<any, Store> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: {},
+      filter: 'all'
+    };
+  }
+  render() {
+    const { filter, todos } = this.state;
+    return (
+      <Customizer {...FluentCustomizations}>
+        <Stack horizontalAlign="center">
+          <Stack style={{ width: 400 }} gap={25} className={className}>
+            <TodoHeader />
+            <TodoList />
+            <TodoFooter />
+          </Stack>
+        </Stack>
+      </Customizer>
+    );
+  }
+}