From 36dff43a0a716e2b23a434f581594ef1766aefce Mon Sep 17 00:00:00 2001 From: Bradley Maier Date: Fri, 5 Jan 2018 12:57:49 -0500 Subject: [PATCH] Use stores in todo mvc kitchen sink (#261) Resolves #254 --- todo-mvc-kitchensink/package.json | 1 + todo-mvc-kitchensink/src/StoreInjector.ts | 11 + todo-mvc-kitchensink/src/TodoAppContext.ts | 192 ------------------ .../src/containers/ThemeSwitcherContainer.ts | 19 +- .../src/containers/TodoAppContainer.ts | 43 ++-- .../src/containers/TodoDetailsContainer.ts | 16 +- todo-mvc-kitchensink/src/main.ts | 11 +- todo-mvc-kitchensink/src/todoProcesses.ts | 142 +++++++++++++ todo-mvc-kitchensink/src/widgets/TodoApp.ts | 16 +- todo-mvc-kitchensink/src/widgets/TodoCard.ts | 2 +- .../src/widgets/TodoDetails.ts | 6 +- .../src/widgets/TodoHeader.ts | 12 +- todo-mvc-kitchensink/src/widgets/TodoItem.ts | 2 +- todo-mvc-kitchensink/src/widgets/TodoList.ts | 2 +- .../src/widgets/TodoSearch.ts | 4 +- 15 files changed, 239 insertions(+), 240 deletions(-) create mode 100644 todo-mvc-kitchensink/src/StoreInjector.ts delete mode 100644 todo-mvc-kitchensink/src/TodoAppContext.ts create mode 100644 todo-mvc-kitchensink/src/todoProcesses.ts diff --git a/todo-mvc-kitchensink/package.json b/todo-mvc-kitchensink/package.json index 2fdbc413..9b291946 100644 --- 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 new file mode 100644 index 00000000..b987eaf0 --- /dev/null +++ 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 deleted file mode 100644 index d334a387..00000000 --- a/todo-mvc-kitchensink/src/TodoAppContext.ts +++ /dev/null @@ -1,192 +0,0 @@ -import uuid from '@dojo/core/uuid'; -import { switchLocale } from '@dojo/i18n/i18n'; -import { Injector } from '@dojo/widget-core/Injector'; - -import pirateThemeStyles from './themes/pirate'; -export interface Todo { - id: string; - label: string; - completed?: boolean; - editing?: boolean; -} - -export interface Todos { - [key: string]: Todo; -} - -export class TodoAppContext extends Injector { - - private _todos: Todos = Object.create(null); - - private _completed = false; - - private _completedCount = 0; - - private _todoCount = 0; - - private _currentTodo = ''; - - private _currentSearch = ''; - - private _editedTodo: Todo | undefined; - - private _themeContext: any; - - public constructor(themeContext: any) { - super({}); - this._themeContext = themeContext; - } - - public get todos(): Todo[] { - return Object.keys(this._todos).map((key) => { - return { ...this._todos[key] }; - }); - } - - public get currentTodo(): string { - return this._currentTodo; - } - - public get currentSearch(): string { - return this._currentSearch; - } - - public get todoCount(): number { - return this._todoCount; - } - - public get completedCount(): number { - return this._completedCount; - } - - public get activeCount(): number { - return this._todoCount - this._completedCount; - } - - public get completed(): boolean { - return this._completed; - } - - public get editedTodo(): Todo | undefined { - return this._editedTodo; - } - - public getTodo(id: string) { - return this._todos[id]; - } - - public addTodo = () => { - if (this._currentTodo.trim()) { - const id = uuid(); - this._todos[id] = { id, label: this._currentTodo }; - this._currentTodo = ''; - this._todoCount++; - this._invalidate(); - } - } - - public todoInput = (todo: string) => { - this._currentTodo = todo; - this._invalidate(); - } - - public editTodoInput = (todo: Todo) => { - this._editedTodo = todo; - this._invalidate(); - } - - public saveTodo = (todo?: Todo) => { - if (this._editedTodo) { - this._todos[this._editedTodo.id] = this._editedTodo; - this._editedTodo = undefined; - this._invalidate(); - } - } - - public searchInput = (search: string) => { - this._currentSearch = search; - this._invalidate(); - } - - public toggleTodos = () => { - this._completed = !this._completed; - if (this._completed) { - this._completedCount = this._todoCount; - } - else { - this._completedCount = 0; - } - this._toggleAllTodos(); - this._invalidate(); - } - - public toggleTodo = (id: string) => { - const todo = this._todos[id]; - if (todo) { - todo.completed = !todo.completed; - todo.completed ? this._completedCount++ : this._completedCount--; - if (this._completedCount === this._todoCount) { - this._completed = true; - } - else { - this._completed = false; - } - } - this._invalidate(); - } - - public removeTodo = (id: string) => { - const todo = this._todos[id]; - if (todo) { - if (todo.completed) { - this._completedCount--; - } - delete this._todos[id]; - this._todoCount--; - } - if (this._completedCount === this._todoCount && this._todoCount > 0) { - this._completed = true; - } - else { - this._completed = false; - } - this._invalidate(); - } - - public clearCompleted = () => { - Object.keys(this._todos).forEach((todoId) => { - if (this._todos[todoId].completed) { - delete this._todos[todoId]; - } - }); - this._completedCount = 0; - this._todoCount = Object.keys(this._todos).length; - this._completed = false; - this._invalidate(); - } - - public changeTheme(wantsPirate: boolean) { - if (wantsPirate) { - switchLocale('en-PR'); - this._themeContext.set(pirateThemeStyles); - } - else { - switchLocale('en'); - this._themeContext.set(undefined); - } - } - - private _toggleAllTodos() { - Object.keys(this._todos).forEach((todo) => { - this._todos[todo].completed = this._completed; - }); - } - - private _invalidate() { - this.emit({ type: 'invalidate' }); - } - - get() { - return this; - } -} diff --git a/todo-mvc-kitchensink/src/containers/ThemeSwitcherContainer.ts b/todo-mvc-kitchensink/src/containers/ThemeSwitcherContainer.ts index 68b61b17..fb23d96d 100644 --- 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 index 1efedd9b..b7eabc29 100644 --- 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) { + 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 index 3af22b71..768ef251 100644 --- 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, 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 index 03b91e5e..a0e38360 100644 --- 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(); diff --git a/todo-mvc-kitchensink/src/todoProcesses.ts b/todo-mvc-kitchensink/src/todoProcesses.ts new file mode 100644 index 00000000..ac623746 --- /dev/null +++ b/todo-mvc-kitchensink/src/todoProcesses.ts @@ -0,0 +1,142 @@ +import { createCommandFactory, createProcess } from '@dojo/stores/process'; +import { PatchOperation } from '@dojo/stores/state/Patch'; +import { add, remove, replace } from '@dojo/stores/state/operations'; +import uuid from '@dojo/core/uuid'; + +export type TodoStore = { + completedCount: number; + completed: boolean; + currentSearch: string; + currentTodo: string; + editedTodo: Todo | undefined; + todoCount: number; + todos: Todos; +}; + +const commandFactory = createCommandFactory(); + +export interface Todo { + id: string; + label: string; + completed?: boolean; + editing?: boolean; +} + +export interface Todos { + [key: string]: Todo; +} + +const addTodoCommand = commandFactory(({ get, path }): PatchOperation[] => { + const id = uuid(); + const todo = { label: get(path('currentTodo')).trim(), id }; + + return todo.label ? [ + add(path('todos', id), todo), + replace(path('currentTodo'), '') + ] : []; +}); + +const updateCompletedFlagCommand = commandFactory(({ get, path }): PatchOperation[] => { + const todoCount = get(path('todoCount')); + const completed = todoCount > 0 && todoCount === get(path('completedCount')); + + return [ + replace(path('completed'), completed) + ]; +}); + +const updateTodoCountsCommand = commandFactory(({ get, path }): PatchOperation[] => { + const todos = get(path('todos')); + const todoArray = Object.keys(todos).map(key => todos[key]); + + return [ + replace(path('todoCount'), todoArray.length), + replace(path('completedCount'), todoArray.filter(({ completed }) => completed).length) + ]; +}); + +const setCurrentTodoCommand = commandFactory(({ payload: [ currentTodo ], path }): PatchOperation[] => { + return [ + replace(path('currentTodo'), currentTodo) + ]; +}); + +const removeTodoCommand = commandFactory(({ payload: [ id ], path }): PatchOperation[] => { + return [ remove(path('todos', id)) ]; +}); + +const toggleTodoCommand = commandFactory(({ get, path, payload: [ id ] }): PatchOperation[] => { + const completed = !get(path('todos', id, 'completed')); + + return [ + replace(path('todos', id, 'completed'), completed) + ]; + +}); + +const toggleTodosCommand = commandFactory(({ get, path }): PatchOperation[] => { + const completed = !get(path('completed')); + + return [ + replace(path('completed'), completed), + ...Object.keys(get(path('todos'))).map(key => replace(path('todos', key, 'completed'), completed)) + ]; +}); + +const editTodoCommand = commandFactory(({ payload: [ todo ], path }): PatchOperation[] => { + return [ replace(path('editedTodo'), todo) ]; +}); + +const clearCompletedCommand = commandFactory(({ get, path }): PatchOperation[] => { + const todos: Todos = get(path('todos')); + const keys = Object.keys(todos); + + return [ + ...keys.filter(key => todos[key].completed).map(key => remove(path('todos', key))) + ]; +}); + +const saveTodoCommand = commandFactory(({ get, path }): PatchOperation[] => { + const editedTodo = get(path('editedTodo')); + + return editedTodo ? [ + replace(path('todos', editedTodo.id), editedTodo), + replace(path('editedTodo'), undefined) + ] : []; +}); + +const searchCommand = commandFactory(({ payload: [ search ], path }): PatchOperation[] => { + return [ replace(path('currentSearch'), search) ]; +}); + +const initialStateCommand = commandFactory(({ path }) => { + return [ + add(path('completedCount'), 0), + add(path('completed'), false), + add(path('currentSearch'), ''), + add(path('currentTodo'), ''), + add(path('editedTodo'), undefined), + add(path('todoCount'), 0), + add(path('todos'), {}) + ]; +}); + +export const initialStateProcess = createProcess([ initialStateCommand ]); + +export const addTodoProcess = createProcess([ addTodoCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]); + +export const removeTodoProcess = createProcess([ removeTodoCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]); + +export const toggleTodoProcess = createProcess([ toggleTodoCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]); + +export const toggleTodosProcess = createProcess([ toggleTodosCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]); + +export const editTodoProcess = createProcess([ editTodoCommand ]); + +export const clearCompletedProcess = createProcess([ clearCompletedCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]); + +export const saveTodoProcess = createProcess([ saveTodoCommand ]); + +export const searchProcess = createProcess([ searchCommand ]); + +export const setCurrentTodoProcess = createProcess([ setCurrentTodoCommand ]); diff --git a/todo-mvc-kitchensink/src/widgets/TodoApp.ts b/todo-mvc-kitchensink/src/widgets/TodoApp.ts index 1da427bb..6bcd1d0b 100644 --- a/todo-mvc-kitchensink/src/widgets/TodoApp.ts +++ b/todo-mvc-kitchensink/src/widgets/TodoApp.ts @@ -8,7 +8,7 @@ import { TodoFooterOutlet } from './../outlets/TodoFooterOutlet'; import { TodoHeader } from './TodoHeader'; import { TodoSearch } from './TodoSearch'; import { Credits } from './Credits'; -import { Todo } from './../TodoAppContext'; +import { Todo } from './../todoProcesses'; import * as css from './styles/todoApp.m.css'; @@ -21,8 +21,8 @@ export interface TodoAppProperties { completed: boolean; addTodo: () => void; editTodo: (id: string) => void; - todoInput: (id: string) => void; - searchInput: (id: string) => void; + setCurrentTodo: (id: string) => void; + search: (id: string) => void; removeTodo: (id: string) => void; toggleTodo: (id: string) => void; toggleTodos: () => void; @@ -37,14 +37,14 @@ export class TodoApp extends TodoAppBase { const { todos, addTodo, - todoInput, completed: allCompleted, toggleTodos, editTodo, removeTodo, toggleTodo, currentTodo: todo, - searchInput, + setCurrentTodo, + search, searchValue, todoCount, activeCount, @@ -56,13 +56,13 @@ export class TodoApp extends TodoAppBase { w(ThemeSwitcherContainer, {}), w(TodoHeader, { allCompleted, + todo, todoCount, toggleTodos, addTodo, - todo, - todoInput + setCurrentTodo }), - todoCount > 0 ? w(TodoSearch, { searchInput, searchValue }) : null, + todoCount > 0 ? w(TodoSearch, { search, searchValue }) : null, todoCount > 0 ? w(TodoListOutlet, { todos, searchValue, toggleTodo, removeTodo, editTodo }) : null, todoCount > 0 ? w(TodoFooterOutlet, { activeCount, todoCount, clearCompleted }) : null ]), diff --git a/todo-mvc-kitchensink/src/widgets/TodoCard.ts b/todo-mvc-kitchensink/src/widgets/TodoCard.ts index 2c878712..b1d13e05 100644 --- a/todo-mvc-kitchensink/src/widgets/TodoCard.ts +++ b/todo-mvc-kitchensink/src/widgets/TodoCard.ts @@ -3,7 +3,7 @@ import { DNode, WidgetProperties } from '@dojo/widget-core/interfaces'; import { ThemedMixin, theme } from '@dojo/widget-core/mixins/Themed'; import { v } from '@dojo/widget-core/d'; -import { Todo } from './../TodoAppContext'; +import { Todo } from './../todoProcesses'; import * as css from './styles/todoCard.m.css'; diff --git a/todo-mvc-kitchensink/src/widgets/TodoDetails.ts b/todo-mvc-kitchensink/src/widgets/TodoDetails.ts index e79f2ba2..07566493 100644 --- a/todo-mvc-kitchensink/src/widgets/TodoDetails.ts +++ b/todo-mvc-kitchensink/src/widgets/TodoDetails.ts @@ -3,7 +3,7 @@ import { v } from '@dojo/widget-core/d'; import { WidgetBase } from '@dojo/widget-core/WidgetBase'; import { theme, ThemedMixin } from '@dojo/widget-core/mixins/Themed'; -import { Todo } from './../TodoAppContext'; +import { Todo } from './../todoProcesses'; import * as css from './styles/todoDetails.m.css'; @@ -11,7 +11,7 @@ export interface TodoDetailsProperties { todo: Todo; onRequestExit: () => void; saveTodo: () => void; - editTodoInput: (todo: Todo) => void; + editTodo: (todo: Todo) => void; } @theme(css) @@ -23,7 +23,7 @@ export class TodoDetails extends ThemedMixin(WidgetBase) } protected onInput({ target: { value } }: TypedTargetEvent): void { - this.properties.editTodoInput({ ...this.properties.todo, label: value }); + this.properties.editTodo({ ...this.properties.todo, label: value }); } protected onElementCreated(element: HTMLElement, key: string) { diff --git a/todo-mvc-kitchensink/src/widgets/TodoHeader.ts b/todo-mvc-kitchensink/src/widgets/TodoHeader.ts index 701522d5..24354626 100644 --- a/todo-mvc-kitchensink/src/widgets/TodoHeader.ts +++ b/todo-mvc-kitchensink/src/widgets/TodoHeader.ts @@ -13,7 +13,7 @@ export interface TodoHeaderProperties { todoCount: number; toggleTodos: () => void; addTodo: () => void; - todoInput: (todo: string) => void; + setCurrentTodo: (todo: string) => void; } export const TodoHeaderBase = I18nMixin(ThemedMixin(WidgetBase)); @@ -21,7 +21,7 @@ export const TodoHeaderBase = I18nMixin(ThemedMixin(WidgetBase)); @theme(css) export class TodoHeader extends TodoHeaderBase { - protected toggleAllTodos() { + protected toggleTodos() { this.properties.toggleTodos(); } @@ -31,8 +31,8 @@ export class TodoHeader extends TodoHeaderBase { } } - protected todoInput({ target: { value } }: TypedTargetEvent): void { - this.properties.todoInput(value); + protected setCurrentTodo({ target: { value } }: TypedTargetEvent): void { + this.properties.setCurrentTodo(value); } protected onElementCreated(element: HTMLElement, key: string): void { @@ -51,13 +51,13 @@ export class TodoHeader extends TodoHeaderBase { key: 'todo-input', classes: this.theme(css.newTodo), onkeydown: this.addTodo, - oninput: this.todoInput, + oninput: this.setCurrentTodo, value: todo, placeholder: messages.editPlaceholder }), v('input', { classes: this.theme(css.toggleAll), - onchange: this.toggleAllTodos, + onchange: this.toggleTodos, checked: allCompleted, type: 'checkbox', disabled: todoCount === 0 ? true : false diff --git a/todo-mvc-kitchensink/src/widgets/TodoItem.ts b/todo-mvc-kitchensink/src/widgets/TodoItem.ts index 759fbb97..d5a530fe 100644 --- a/todo-mvc-kitchensink/src/widgets/TodoItem.ts +++ b/todo-mvc-kitchensink/src/widgets/TodoItem.ts @@ -3,7 +3,7 @@ import { WidgetProperties } from '@dojo/widget-core/interfaces'; import { ThemedMixin, theme } from '@dojo/widget-core/mixins/Themed'; import { v } from '@dojo/widget-core/d'; -import { Todo } from './../TodoAppContext'; +import { Todo } from './../todoProcesses'; import * as css from './styles/todoItem.m.css'; diff --git a/todo-mvc-kitchensink/src/widgets/TodoList.ts b/todo-mvc-kitchensink/src/widgets/TodoList.ts index f9ff9125..bde9d48a 100644 --- a/todo-mvc-kitchensink/src/widgets/TodoList.ts +++ b/todo-mvc-kitchensink/src/widgets/TodoList.ts @@ -3,7 +3,7 @@ import { ThemedMixin, theme } from '@dojo/widget-core/mixins/Themed'; import { DNode, WidgetProperties } from '@dojo/widget-core/interfaces'; import { v, w } from '@dojo/widget-core/d'; -import { Todo } from './../TodoAppContext'; +import { Todo } from './../todoProcesses'; import { TodoItem } from './TodoItem'; import { TodoCard } from './TodoCard'; import { TodoDetailsOutlet } from './../outlets/TodoDetailsOutlet'; diff --git a/todo-mvc-kitchensink/src/widgets/TodoSearch.ts b/todo-mvc-kitchensink/src/widgets/TodoSearch.ts index 16378303..0218a885 100644 --- a/todo-mvc-kitchensink/src/widgets/TodoSearch.ts +++ b/todo-mvc-kitchensink/src/widgets/TodoSearch.ts @@ -8,7 +8,7 @@ import appBundle from '../nls/common'; import * as css from './styles/todoSearch.m.css'; export interface TodoSearchProperties { - searchInput: (id: string) => void; + search: (id: string) => void; searchValue: string; } @@ -18,7 +18,7 @@ export const TodoSearchBase = I18nMixin(ThemedMixin(WidgetBase)); export class TodoSearch extends TodoSearchBase { protected onInput({ target: { value } }: TypedTargetEvent) { - this.properties.searchInput(value); + this.properties.search(value); } protected render(): DNode[] {