wasp/waspc/examples/todoApp/ext/Todo.js

// 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.
// Note that Task, NewTaskForm and TaskList are generated based on the declarations
// we made in todoApp.wasp file.
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'

class Todo extends React.Component {
  // TODO: prop types.

  toggleIsDoneForAllTasks = () => {
    const areAllDone = this.props.taskList.every(t => t.isDone)
    this.props.taskList.map(t => this.props.updateTask(t.id, { isDone: !areAllDone }))
  }

  deleteCompletedTasks = () => {
    this.props.taskList.map((t) => { if (t.isDone) this.props.removeTask(t.id) })
  }

  isAnyTaskCompleted = () => this.props.taskList.some(t => t.isDone)

  isThereAnyTask = () => this.props.taskList.length > 0

  render = () => {
    return (
      <div className="todos">
        <div className="todos__container">
          <h1> Todos </h1>

          <div className="todos__toggleAndInput">
            <button
              disabled={!this.isThereAnyTask()}
              className="todos__toggleButton"
              onClick={this.toggleIsDoneForAllTasks}>
                ✓
            </button>

            <NewTaskForm
              className="todos__newTaskForm"
              onCreate={task => this.props.addTask(task)}
              submitButtonLabel={'Create new task'}
            />
          </div>

          { this.isThereAnyTask() && (<>
            <TaskList
              editable
            />

            <div className="todos__footer">
              <div className="todos__footer__itemsLeft">
                { this.props.taskList.filter(task => !task.isDone).length } items left
              </div>

              <div className="todos__footer__clearCompleted">
                  <button
                    className={this.isAnyTaskCompleted() ? '' : 'hidden' }
                    onClick={this.deleteCompletedTasks}>
                    Clear completed
                  </button>
              </div>
            </div>
          </>)}
        </div>
      </div>
    )
  }
}

export default connect(state => ({
  taskList: taskState.selectors.all(state)
}), {
  addTask: taskActions.add,
  updateTask: taskActions.update,
  removeTask: taskActions.remove
})(Todo)