+
)
diff --git a/examples/todoApp/out/src/entities/task/components/TaskList.js b/examples/todoApp/out/src/entities/task/components/TaskList.js
index 4cd200ace..80be7b1eb 100644
--- a/examples/todoApp/out/src/entities/task/components/TaskList.js
+++ b/examples/todoApp/out/src/entities/task/components/TaskList.js
@@ -29,13 +29,6 @@ export class TaskList extends React.Component {
taskBeingEdited: null
}
- updateTaskField = (fieldName, newFieldValue, task) => {
- const updatedTask = new Task(
- { ...task.toData(), [fieldName]: newFieldValue }
- )
- this.props.updateTask(task.id, updatedTask)
- }
-
setAsBeingEdited = task => this.setState({
taskBeingEdited: task.id
})
@@ -47,42 +40,29 @@ export class TaskList extends React.Component {
if (task.id === this.state.taskBeingEdited)
this.setState({ taskBeingEdited: null })
}
-
+
+ renderTaskDescription =
+ (task) => task.isDone ?
{task.description} : task.description
+
render() {
const taskListToShow = this.props.filter ?
this.props.taskList.filter(this.props.filter) :
this.props.taskList
return (
-
+
-
+
- description
- isDone
+ isDone
+ description
{taskListToShow.map((task) => (
- this.finishEditing(task) }>
- this.setAsBeingEdited(task)}
- >
- {this.props.editable && this.isBeingEdited(task) ? (
- this.updateTaskField(
- 'description', e.target.value, task
- )}
- />
- ) : (
- task.description
- )}
-
-
this.updateTaskField(
- 'isDone', e.target.checked, task
+ onChange={e => this.props.updateTask(
+ task.id, { 'isDone': e.target.checked }
)}
/>
+ this.finishEditing(task) }>
+ this.setAsBeingEdited(task)}
+ >
+ {this.props.editable && this.isBeingEdited(task) ? (
+ this.props.updateTask(
+ task.id, { 'description': e.target.value }
+ )}
+ />
+ ) : (
+ this.renderTaskDescription(task)
+ )}
+
+
))}
diff --git a/examples/todoApp/out/src/entities/task/state.js b/examples/todoApp/out/src/entities/task/state.js
index 41e9badb8..8d89083d4 100644
--- a/examples/todoApp/out/src/entities/task/state.js
+++ b/examples/todoApp/out/src/entities/task/state.js
@@ -24,7 +24,10 @@ const reducer = (state = initialState, action) => {
return {
...state,
all: state.all.map(
- task => task.id === action.id ? action.data : task
+ task =>
+ task.id === action.id
+ ? { ...task, ...action.data }
+ : task
)
}
diff --git a/examples/todoApp/out/src/ext-src/Main.css b/examples/todoApp/out/src/ext-src/Main.css
new file mode 100644
index 000000000..d260ba96a
--- /dev/null
+++ b/examples/todoApp/out/src/ext-src/Main.css
@@ -0,0 +1,71 @@
+div {
+ color: green;
+}
+
+button.selected {
+ border: 1px solid black;
+}
+
+.hidden {
+ visibility: hidden;
+}
+
+.todos {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.todos__container {
+ width: 550px;
+}
+
+.todos__toggleAndInput {
+ display: flex;
+ align-items: flex-end;
+ margin-bottom: 10px;
+}
+
+.todos__toggleButton {
+ height: 40px;
+ margin-bottom: 8px;
+ margin-left: 20px;
+
+ background-color: white;
+ border: none;
+ display: inline-block;
+ font-size: 24px;
+ cursor: pointer;
+}
+
+.todos__newTaskForm {
+ width: 100%;
+ margin-left: 10px;
+}
+
+.todos__footer {
+ width: 100%;
+ margin-top: 10px;
+
+ display: flex;
+ justify-content: space-between;
+}
+
+.todos__footer__filters .filter:not(:last-child) {
+ margin-right: 10px;
+}
+
+.mainPage__nav {
+ text-align: center;
+ margin-top: 30px;
+}
+
+.mainPage__nav__aboutLink {
+ color: lightgray;
+ font-size: 12px;
+ text-decoration: none;
+}
+.mainPage__nav__aboutLink:hover {
+ text-decoration: underline;
+}
diff --git a/examples/todoApp/out/src/ext-src/Todo.js b/examples/todoApp/out/src/ext-src/Todo.js
new file mode 100644
index 000000000..56806fc65
--- /dev/null
+++ b/examples/todoApp/out/src/ext-src/Todo.js
@@ -0,0 +1,108 @@
+// 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'
+
+// 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 '../entities/task/Task'
+import NewTaskForm from '../entities/task/components/NewTaskForm'
+import TaskList from '../entities/task/components/TaskList'
+
+const TASK_FILTER_TYPES = Object.freeze({
+ ALL: 'all',
+ ACTIVE: 'active',
+ COMPLETED: 'completed'
+})
+
+const TASK_FILTERS = Object.freeze({
+ [TASK_FILTER_TYPES.ALL]: null,
+ [TASK_FILTER_TYPES.ACTIVE]: task => !task.isDone,
+ [TASK_FILTER_TYPES.COMPLETED]: task => task.isDone
+})
+
+export default class Todo extends React.Component {
+ // TODO: prop types.
+
+ state = {
+ taskFilterName: TASK_FILTER_TYPES.ALL
+ }
+
+ 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
+
+ TaskFilterButton = ({ filterType, label }) => (
+ this.setState({ taskFilterName: filterType })}
+ >
+ {label}
+
+ )
+
+ render = () => {
+ return (
+
+
+
Todos
+
+
+
+ ✓
+
+
+ this.props.addTask(task)}
+ submitButtonLabel={'Create new task'}
+ />
+
+
+ { this.isThereAnyTask() && (<>
+
+
+
+
+ { this.props.taskList.filter(task => !task.isDone).length } items left
+
+
+
+
+
+
+
+ Clear completed
+
+
+
+ )}
+
+
+
+
+
this.setState({ taskFilterName: filterType })}
- >
- {label}
-
- )
-
- render = () => {
- return (
-
-
{ config.appName }
-
-
- Toggle completion {/* TODO: Use icon (but we need to either install @material-ui/icons
- or add font-awesome to the index.html. */}
-
-
-
this.props.addTask(task)}
- submitButtonLabel={'Create new task'}
- />
-
-
-
-
-
-
- { this.props.taskList.filter(task => !task.isDone).length } items left
-
- { this.props.taskList.some(t => t.isDone) &&
- Clear completed
- }
-
-
-
-
)
diff --git a/examples/todoApp/out/src/store/index.js b/examples/todoApp/out/src/store/index.js
index dc154a85b..3c2578e58 100644
--- a/examples/todoApp/out/src/store/index.js
+++ b/examples/todoApp/out/src/store/index.js
@@ -1,4 +1,4 @@
-import * as reduxStarterKit from 'redux-starter-kit'
+import * as RTK from '@reduxjs/toolkit'
import loggerMiddleware from './middleware/logger'
@@ -9,13 +9,13 @@ import loggerMiddleware from './middleware/logger'
*/
export const configureStore = (reducer, preloadedState) => {
const middleware = [
- loggerMiddleware,
- ...reduxStarterKit.getDefaultMiddleware()
+ ...RTK.getDefaultMiddleware(),
+ loggerMiddleware
]
const enhancers = []
- const store = reduxStarterKit.configureStore({
+ const store = RTK.configureStore({
reducer,
preloadedState,
middleware,
diff --git a/examples/todoApp/src/ext/Main.css b/examples/todoApp/src/ext/Main.css
new file mode 100644
index 000000000..d260ba96a
--- /dev/null
+++ b/examples/todoApp/src/ext/Main.css
@@ -0,0 +1,71 @@
+div {
+ color: green;
+}
+
+button.selected {
+ border: 1px solid black;
+}
+
+.hidden {
+ visibility: hidden;
+}
+
+.todos {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.todos__container {
+ width: 550px;
+}
+
+.todos__toggleAndInput {
+ display: flex;
+ align-items: flex-end;
+ margin-bottom: 10px;
+}
+
+.todos__toggleButton {
+ height: 40px;
+ margin-bottom: 8px;
+ margin-left: 20px;
+
+ background-color: white;
+ border: none;
+ display: inline-block;
+ font-size: 24px;
+ cursor: pointer;
+}
+
+.todos__newTaskForm {
+ width: 100%;
+ margin-left: 10px;
+}
+
+.todos__footer {
+ width: 100%;
+ margin-top: 10px;
+
+ display: flex;
+ justify-content: space-between;
+}
+
+.todos__footer__filters .filter:not(:last-child) {
+ margin-right: 10px;
+}
+
+.mainPage__nav {
+ text-align: center;
+ margin-top: 30px;
+}
+
+.mainPage__nav__aboutLink {
+ color: lightgray;
+ font-size: 12px;
+ text-decoration: none;
+}
+.mainPage__nav__aboutLink:hover {
+ text-decoration: underline;
+}
diff --git a/examples/todoApp/src/ext/Todo.js b/examples/todoApp/src/ext/Todo.js
new file mode 100644
index 000000000..26fc13384
--- /dev/null
+++ b/examples/todoApp/src/ext/Todo.js
@@ -0,0 +1,108 @@
+// 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'
+
+// 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'
+
+const TASK_FILTER_TYPES = Object.freeze({
+ ALL: 'all',
+ ACTIVE: 'active',
+ COMPLETED: 'completed'
+})
+
+const TASK_FILTERS = Object.freeze({
+ [TASK_FILTER_TYPES.ALL]: null,
+ [TASK_FILTER_TYPES.ACTIVE]: task => !task.isDone,
+ [TASK_FILTER_TYPES.COMPLETED]: task => task.isDone
+})
+
+export default class Todo extends React.Component {
+ // TODO: prop types.
+
+ state = {
+ taskFilterName: TASK_FILTER_TYPES.ALL
+ }
+
+ 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
+
+ TaskFilterButton = ({ filterType, label }) => (
+ this.setState({ taskFilterName: filterType })}
+ >
+ {label}
+
+ )
+
+ render = () => {
+ return (
+
+
+
Todos
+
+
+
+ ✓
+
+
+ this.props.addTask(task)}
+ submitButtonLabel={'Create new task'}
+ />
+
+
+ { this.isThereAnyTask() && (<>
+
+
+
+
+ { this.props.taskList.filter(task => !task.isDone).length } items left
+
+
+
+
+
+
+
+ Clear completed
+
+
+
+ )}
+
+
+
+
+
this.setState({ taskFilterName: filterType })}
- >
- {label}
-
- )
-
- render = () => {
- return (
-
-
{ config.appName }
-
-
- Toggle completion {/* TODO: Use icon (but we need to either install @material-ui/icons
- or add font-awesome to the index.html. */}
-
-
-
this.props.addTask(task)}
- submitButtonLabel={'Create new task'}
- />
-
-
-
-
-
-
- { this.props.taskList.filter(task => !task.isDone).length } items left
-
- { this.props.taskList.some(t => t.isDone) &&
- Clear completed
- }
-
-
-
-
+
+ jsx=}
+}
+
+page About {
+ route: "/about",
+ style: {=css
+ .aboutPage { color: black; text-align: center; }
+ css=},
+ content: {=jsx
+
+
About
+
This page was built with Wasp !
+
Check out source code
+ here .
+
+
NewTaskForm {
fields: {
description: {
- show: true
+ show: true,
+ label: none,
+ placeholder: "What needs to be done?"
},
isDone: {
show: false,
- defaultValue: false // Although not shown, this field will be set to "false".
+ defaultValue: false
}
},
submit: {
- onEnter: true, // Parsed but not generated yet.
+ onEnter: true,
button: { show: false }
}
}
-// Entity list definition.
entity-list TaskList {
- // Options TBD, not supported for now.
+ showHeader: false,
+ fields: {
+ description: {
+ // The contract for render is that user must provide a function that:
+ // - Receives a task as an input.
+ // - Returns a React Node or something that can be rendered by JSX.
+ // - Does not depend on any outer context.
+ render: {=js (task) => task.isDone ? {task.description} : task.description js=}
+ }
+ }
}