From bc96b7bc50c0f10252779d0f2a99d7424ea74e6c Mon Sep 17 00:00:00 2001
From: Matija Sosic <matija.sosic@gmail.com>
Date: Fri, 14 Feb 2020 14:14:59 +0100
Subject: [PATCH] Updated example code.

---
 examples/todoApp/out/.waspinfo           |  2 +-
 examples/todoApp/out/src/Main.js         | 14 +----------
 examples/todoApp/out/src/ext-src/Todo.js | 13 +++++++++-
 examples/todoApp/out/src/router.js       |  2 --
 examples/todoApp/src/ext/Todo.js         | 13 +++++++++-
 examples/todoApp/src/todoApp.wasp        | 31 ++----------------------
 6 files changed, 28 insertions(+), 47 deletions(-)

diff --git a/examples/todoApp/out/.waspinfo b/examples/todoApp/out/.waspinfo
index cef4949e4..3dba25db1 100644
--- a/examples/todoApp/out/.waspinfo
+++ b/examples/todoApp/out/.waspinfo
@@ -1 +1 @@
-Generated on 2020-02-06 11:29:32.520063004 UTC by waspc version "0.1.0.0" .
\ No newline at end of file
+Generated on 2020-02-14 13:11:20.518192 UTC by waspc version "0.1.0.0" .
\ No newline at end of file
diff --git a/examples/todoApp/out/src/Main.js b/examples/todoApp/out/src/Main.js
index 34b91a9fb..ac783fa8d 100644
--- a/examples/todoApp/out/src/Main.js
+++ b/examples/todoApp/out/src/Main.js
@@ -17,19 +17,7 @@ export class Main extends Component {
 
   render() {
     return (
-      <>
-        { /* 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>
-        <div className="mainPage__nav">
-            <a href="/about" className="mainPage__nav__aboutLink"> About </a>
-        </div>
-    </>
+      <Todo/>
     )
   }
 }
diff --git a/examples/todoApp/out/src/ext-src/Todo.js b/examples/todoApp/out/src/ext-src/Todo.js
index 56806fc65..25255b934 100644
--- a/examples/todoApp/out/src/ext-src/Todo.js
+++ b/examples/todoApp/out/src/ext-src/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 '../entities/task/Task'
 import NewTaskForm from '../entities/task/components/NewTaskForm'
 import TaskList from '../entities/task/components/TaskList'
+import * as taskState from '../entities/task/state.js'
+import * as taskActions from '../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/out/src/router.js b/examples/todoApp/out/src/router.js
index 706fc59b7..550eaeccd 100644
--- a/examples/todoApp/out/src/router.js
+++ b/examples/todoApp/out/src/router.js
@@ -2,14 +2,12 @@ import React from 'react'
 import { Route, BrowserRouter as Router } from 'react-router-dom'
 
 import Main from './Main'
-import About from './About'
 
 
 const router = (
   <Router>
     <div>
       <Route exact path="/" component={ Main }/>
-      <Route exact path="/about" component={ About }/>
     </div>
   </Router>
 )
diff --git a/examples/todoApp/src/ext/Todo.js b/examples/todoApp/src/ext/Todo.js
index 26fc13384..ac1ada5ba 100644
--- a/examples/todoApp/src/ext/Todo.js
+++ b/examples/todoApp/src/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/src/todoApp.wasp b/examples/todoApp/src/todoApp.wasp
index b9ec0da55..bc0d4b286 100644
--- a/examples/todoApp/src/todoApp.wasp
+++ b/examples/todoApp/src/todoApp.wasp
@@ -14,35 +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>
-        <div className="mainPage__nav">
-            <a href="/about" className="mainPage__nav__aboutLink"> About </a>
-        </div>
-    </> jsx=}
-}
-
-page About {
-    route: "/about",
-    style: {=css
-        .aboutPage { color: black; text-align: center; }
-    css=},
-    content: {=jsx
-        <div className="aboutPage">
-            <h1> About </h1>
-            <p>This page was built with <a href="https://wasp-lang.dev">Wasp</a>!</p>
-            <p> Check out source code &nbsp;
-              <a href="https://github.com/wasp-lang/wasp/tree/master/examples/todoApp">here</a>.
-            </p>
-        </div>
-    jsx=}
+    // Here we use Todo React component that we imported at the beginning of this file.
+    content: {=jsx <Todo/> jsx=}
 }
 
 entity-form<Task> NewTaskForm {