connected TODO to redux to make wasp code cleaner.

This commit is contained in:
Matija Sosic 2020-02-14 12:30:16 +01:00
parent cb9bbacc4f
commit 56e9bc6b0a
2 changed files with 14 additions and 11 deletions

View File

@ -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)

View File

@ -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. */ }
<Todo
addTask={this.props.addTask}
taskList={this.props.taskList}
updateTask={this.props.updateTask}
removeTask={this.props.removeTask}
>
</Todo>
jsx=}
// Here we use Todo React component that we imported at the beginning of this file.
content: {=jsx <Todo/> jsx=}
}
entity-form<Task> NewTaskForm {