refactor: Adds App and AppConfig.

Author: ryasmi

src/presenter/App.tsx

@@ -1,24 +1,18 @@
 import * as React from 'react';
-import Service from '../service/Facade';
-import Footer from './Footer';
-import NewTodo from './NewTodo';
-import TodoItems from './TodoItems';
+import repoFactory from '../repo/factory';
+import serviceFactory from '../service/factory';
+import AppConfig from './AppConfig';
+import Todos from './Todos';
 
-export interface Props {
-  readonly service: Service;
-}
+export default ({ repo }: AppConfig) => {
+  const repo = repoFactory(repo);
+  const service = serviceFactory({ repo });
+  const presenter = <Todos service={service} />;
 
-export default ({ service }: Props) => {
-  return (
-    <div>
-      <header className="header">
-        <h1>todos</h1>
-        <NewTodo service={service} />
-      </header>
-      <section className="main">
-        <TodoItems service={service} />
-      </section>
-      <Footer service={service} />
-    </div>
-  );
+  window.addEventListener('hashchange', () => {
+    const route = location.hash.split('#').slice(1).join('#');
+    service.setRoute(route);
+  }, false);
+
+  return presenter;
 };

src/presenter/AppConfig.ts

@@ -0,0 +1,5 @@
+import RepoFactoryConfig from '../repo/FactoryConfig';
+
+export default interface AppConfig {
+  readonly repo: RepoFactoryConfig;
+}

src/presenter/Todos.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Service from '../service/Facade';
+import Footer from './Footer';
+import NewTodo from './NewTodo';
+import TodoItems from './TodoItems';
+
+export interface Props {
+  readonly service: Service;
+}
+
+export default ({ service }: Props) => {
+  return (
+    <div>
+      <header className="header">
+        <h1>todos</h1>
+        <NewTodo service={service} />
+      </header>
+      <section className="main">
+        <TodoItems service={service} />
+      </section>
+      <Footer service={service} />
+    </div>
+  );
+};

src/presenter/index.tsx

@@ -1,14 +1,34 @@
 import * as React from 'react';
 import * as dom from 'react-dom';
-import service from '../service/index';
+import observer from '../utils/observer';
 import App from './App';
 
-window.addEventListener('hashchange', () => {
-  const route = location.hash.split('#').slice(1).join('#');
-  service.setRoute(route);
-}, false);
+const initialState: State = {
+  editedTitles: {},
+  isEditing: {},
+  newTodoTitle: '',
+  route: '',
+  todos: [],
+};
+
+const getState = (): State => {
+  const localStorageState = window.localStorage.getItem('state');
+  if (localStorageState === null) {
+    return initialState;
+  }
+  return JSON.parse(localStorageState);
+};
+
+const patchState = (patch: Partial<State>) => {
+  const prevState = getState();
+  const nextState = { ...prevState, ...patch };
+  // tslint:disable-next-line:no-console
+  console.log('PATCH STATE', patch);
+  window.localStorage.setItem('state', JSON.stringify(nextState));
+  observer.emit('change', patch);
+};
 
 dom.render(
-  <App service={service} />,
+  <App repo={{ getState, patchState }} />,
   document.getElementsByClassName('todoapp')[0],
 );