diff --git a/examples/todoApp/ext/Todo.js b/examples/todoApp/ext/Todo.js index 26fc13384..ac1ada5ba 100644 --- a/examples/todoApp/ext/Todo.js +++ b/examples/todoApp/ext/Todo.js @@ -1,6 +1,7 @@ // As seen here, we can import npm packages used in code generated by Wasp, which will be clearly defined. // In the future, we will of course also be able to specify additional packages as dependencies. import React from 'react' +import { connect } from 'react-redux' // As seen here, we can import specific components/code generated by Wasp. // These will have well defined and documented APIs and paths. @@ -9,6 +10,8 @@ import React from 'react' import Task from '@wasp/entities/task/Task' import NewTaskForm from '@wasp/entities/task/components/NewTaskForm' import TaskList from '@wasp/entities/task/components/TaskList' +import * as taskState from '@wasp/entities/task/state.js' +import * as taskActions from '@wasp/entities/task/actions.js' const TASK_FILTER_TYPES = Object.freeze({ ALL: 'all', @@ -22,7 +25,7 @@ const TASK_FILTERS = Object.freeze({ [TASK_FILTER_TYPES.COMPLETED]: task => task.isDone }) -export default class Todo extends React.Component { +class Todo extends React.Component { // TODO: prop types. state = { @@ -106,3 +109,11 @@ export default class Todo extends React.Component { ) } } + +export default connect(state => ({ + taskList: taskState.selectors.all(state) +}), { + addTask: taskActions.add, + updateTask: taskActions.update, + removeTask: taskActions.remove +})(Todo) diff --git a/examples/todoApp/todoApp.wasp b/examples/todoApp/todoApp.wasp index 963b0ca0a..bc0d4b286 100644 --- a/examples/todoApp/todoApp.wasp +++ b/examples/todoApp/todoApp.wasp @@ -14,16 +14,8 @@ page Main { style: "@ext/Main.css", // TODO: We need to make this nicer / more explicit, it is not clear where is this coming from (these props). // Also, this wiring is not elegant. - content: {=jsx - { /* Here we use Todo React component that we imported at the beginning of this file. */ } - - - jsx=} + // Here we use Todo React component that we imported at the beginning of this file. + content: {=jsx jsx=} } entity-form NewTaskForm {