Use stores in todo mvc kitchen sink (#261)

Resolves #254
dojo · Jan 5, 2018 · 36dff43 · 36dff43
1 parent 978ce49
commit 36dff43
Show file tree

Hide file tree

Showing 15 changed files with 239 additions and 240 deletions.
diff --git a/todo-mvc-kitchensink/package.json b/todo-mvc-kitchensink/package.json
@@ -34,6 +34,7 @@
     "@dojo/i18n": "~0.2.0",
     "@dojo/routing": "~0.2.0",
     "@dojo/shim": "~0.2.2",
+    "@dojo/stores": "~0.2.0",
     "@dojo/widget-core": "~0.3.0",
     "@webcomponents/custom-elements": "^1.0.0-alpha.3",
     "cldr-data": "~30.0.2"

diff --git a/todo-mvc-kitchensink/src/StoreInjector.ts b/todo-mvc-kitchensink/src/StoreInjector.ts
@@ -0,0 +1,11 @@
+import Injector from '@dojo/widget-core/Injector';
+import Store from '@dojo/stores/Store';
+
+export default class StoreInjector extends Injector {
+	constructor(payload: Store) {
+		super(payload);
+		payload.on('invalidate', () => {
+			this.emit({ type: 'invalidate' });
+		});
+	}
+}
diff --git a/todo-mvc-kitchensink/src/TodoAppContext.ts b/todo-mvc-kitchensink/src/TodoAppContext.ts
diff --git a/todo-mvc-kitchensink/src/containers/ThemeSwitcherContainer.ts b/todo-mvc-kitchensink/src/containers/ThemeSwitcherContainer.ts
@@ -1,12 +1,23 @@
 import { Container } from '@dojo/widget-core/Container';
+import Injector from '@dojo/widget-core/Injector';
+import { switchLocale } from '@dojo/i18n/i18n';
 
-import { TodoAppContext } from './../TodoAppContext';
 import { ThemeSwitcher } from './../widgets/ThemeSwitcher';
+import pirateThemeStyles from './../themes/pirate';
 
-function getProperties(todoAppContext: TodoAppContext, properties: any) {
+function getProperties(themeContext: Injector) {
 	return {
-		changeTheme: todoAppContext.changeTheme.bind(todoAppContext)
+		changeTheme(wantsPirate: boolean) {
+			if (wantsPirate) {
+				switchLocale('en-PR');
+				themeContext.set(pirateThemeStyles);
+			}
+			else {
+				switchLocale('en');
+				themeContext.set(undefined);
+			}
+		}
 	};
 }
 
-export const ThemeSwitcherContainer = Container(ThemeSwitcher, 'state', { getProperties });
+export const ThemeSwitcherContainer = Container(ThemeSwitcher, 'theme-context', { getProperties });
diff --git a/todo-mvc-kitchensink/src/containers/TodoAppContainer.ts b/todo-mvc-kitchensink/src/containers/TodoAppContainer.ts
@@ -1,23 +1,36 @@
 import { Container } from '@dojo/widget-core/Container';
+import Store from '@dojo/stores/Store';
 
-import { TodoAppContext } from './../TodoAppContext';
 import { TodoApp } from './../widgets/TodoApp';
+import {
+	addTodoProcess,
+	editTodoProcess,
+	setCurrentTodoProcess,
+	searchProcess,
+	clearCompletedProcess,
+	toggleTodoProcess,
+	toggleTodosProcess,
+	removeTodoProcess,
+	TodoStore
+} from '../todoProcesses';
 
-function getProperties(todoAppContext: TodoAppContext, properties: any) {
+function getProperties(store: Store<TodoStore>) {
+	const { get, path } = store;
 	return {
-		todos: todoAppContext.todos,
-		currentTodo: todoAppContext.currentTodo,
-		addTodo: todoAppContext.addTodo,
-		todoInput: todoAppContext.todoInput,
-		searchInput: todoAppContext.searchInput,
-		searchValue: todoAppContext.currentSearch,
-		completed: todoAppContext.completed,
-		clearCompleted: todoAppContext.clearCompleted,
-		toggleTodos: todoAppContext.toggleTodos,
-		toggleTodo: todoAppContext.toggleTodo,
-		activeCount: todoAppContext.activeCount,
-		todoCount: todoAppContext.todoCount,
-		removeTodo: todoAppContext.removeTodo
+		todos: Object.keys(get(path('todos'))).map(key => get(path('todos', key))),
+		currentTodo: get(path('currentTodo')),
+		addTodo: addTodoProcess(store),
+		editTodo: editTodoProcess(store),
+		setCurrentTodo: setCurrentTodoProcess(store),
+		search: searchProcess(store),
+		searchValue: get(path('currentSearch')),
+		completed: get(path('completed')),
+		clearCompleted: clearCompletedProcess(store),
+		toggleTodos: toggleTodosProcess(store),
+		toggleTodo: toggleTodoProcess(store),
+		activeCount: get(path('todoCount')) - get(path('completedCount')),
+		todoCount: get(path('todoCount')),
+		removeTodo: removeTodoProcess(store)
 	};
 }
 

diff --git a/todo-mvc-kitchensink/src/containers/TodoDetailsContainer.ts b/todo-mvc-kitchensink/src/containers/TodoDetailsContainer.ts
@@ -1,13 +1,19 @@
 import { Container } from '@dojo/widget-core/Container';
+import Store from '@dojo/stores/Store';
 
-import { TodoAppContext } from './../TodoAppContext';
 import { TodoDetails } from './../widgets/TodoDetails';
+import {
+	editTodoProcess,
+	saveTodoProcess,
+	TodoStore
+} from './../todoProcesses';
 
-function getProperties(todoAppContext: TodoAppContext, properties: any) {
+function getProperties(store: Store<TodoStore>, properties: any) {
+	const { get, path } = store;
 	return {
-		todo: todoAppContext.editedTodo || todoAppContext.getTodo(properties.id),
-		editTodoInput: todoAppContext.editTodoInput,
-		saveTodo: todoAppContext.saveTodo
+		todo: get(path('editedTodo')) || get(path('todos', 'properties.id')),
+		editTodo: editTodoProcess(store),
+		saveTodo: saveTodoProcess(store)
 	};
 }
 

diff --git a/todo-mvc-kitchensink/src/main.ts b/todo-mvc-kitchensink/src/main.ts
@@ -1,15 +1,22 @@
+import Store from '@dojo/stores/Store';
 import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
 import { registerRouterInjector } from '@dojo/routing/RouterInjector';
 import { Registry } from '@dojo/widget-core/Registry';
 
 import setLocaleData from './setLocaleData';
-import { TodoAppContext } from './TodoAppContext';
 import { TodoAppContainer } from './containers/TodoAppContainer';
 import { registerThemeInjector } from '@dojo/widget-core/mixins/Themed';
+import { initialStateProcess } from './todoProcesses';
+import StoreInjector from './StoreInjector';
+import Injector from '@dojo/widget-core/Injector';
 
 const registry = new Registry();
+const store = new Store();
 const themeContext = registerThemeInjector(undefined, registry);
-registry.defineInjector('state', new TodoAppContext(themeContext));
+
+initialStateProcess(store)();
+registry.defineInjector('state', new StoreInjector(store));
+registry.defineInjector('theme-context', new Injector(themeContext));
 
 const Projector = ProjectorMixin(TodoAppContainer);
 const projector = new Projector();