Update tutorials for v0.11.6 (#1504)

Author: sodic

examples/tutorials/TodoApp/main.wasp

@@ -1,25 +1,25 @@
 app TodoApp {
   wasp: {
-    version: "^0.11.0"
+    version: "^0.11.6" // Pins the version of Wasp to use.
   },
-
-  title: "Todo app",
-
+  title: "Todo app", // Used as the browser tab title. Note that all strings in Wasp are double quoted!
   auth: {
+    // Tells Wasp which entity to use for storing users.
     userEntity: User,
     methods: {
+      // Enable username and password auth.
       usernameAndPassword: {}
     },
+    // We'll see how this is used a bit later.
     onAuthFailedRedirectTo: "/login"
-  },
-
-  dependencies: [
-    ("react-clock", "3.0.0")
-  ]
+  }
 }
 
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
+  // We specify that the React implementation of the page is the default export
+  // of `src/client/MainPage.jsx`. This statement uses standard JS import syntax.
+  // Use `@client` to reference files inside the `src/client` folder.
   authRequired: true,
   component: import Main from "@client/MainPage.jsx"
 }
@@ -35,22 +35,26 @@ page LoginPage {
 }
 
 entity User {=psl
-    id          Int     @id @default(autoincrement())
-    username    String  @unique
-    password    String
-    tasks       Task[]
+    id       Int    @id @default(autoincrement())
+    username String @unique
+    password String
+    tasks    Task[]
 psl=}
 
 entity Task {=psl
     id          Int     @id @default(autoincrement())
     description String
     isDone      Boolean @default(false)
-    user        User?    @relation(fields: [userId], references: [id])
+    user        User?   @relation(fields: [userId], references: [id])
     userId      Int?
 psl=}
 
 query getTasks {
+  // Specifies where the implementation for the query function is.
+  // Use `@server` to import files inside the `src/server` folder.
   fn: import { getTasks } from "@server/queries.js",
+  // Tell Wasp that this query reads from the `Task` entity. By doing this, Wasp
+  // will automatically update the results of this query when tasks are modified.
   entities: [Task]
 }
 

examples/tutorials/TodoApp/src/client/Clocks.jsx

@@ -1,19 +1,16 @@
 import { Link } from 'react-router-dom'
-
 import { LoginForm } from '@wasp/auth/forms/Login'
 
 const LoginPage = () => {
   return (
-    <>
-      <div style={{maxWidth: "400px", margin: "0 auto"}}>
-        <LoginForm/>
-        <br/>
-        <span>
-          I don't have an account yet (<Link to="/signup">go to signup</Link>).
-        </span>
-      </div>
-    </>
+    <div style={{maxWidth: "400px", margin: "0 auto"}}>
+      <LoginForm />
+      <br />
+      <span>
+        I don't have an account yet (<Link to="/signup">go to signup</Link>).
+      </span>
+    </div>
   )
 }
 
-export default LoginPage
+export default LoginPage

examples/tutorials/TodoApp/src/client/LoginPage.jsx

@@ -1,35 +1,31 @@
-import { useQuery } from '@wasp/queries'
 import getTasks from '@wasp/queries/getTasks'
 import createTask from '@wasp/actions/createTask'
+import { useQuery } from '@wasp/queries'
 import updateTask from '@wasp/actions/updateTask'
 import logout from '@wasp/auth/logout'
-import Clocks from './Clocks'
 
 const MainPage = () => {
-  const { data: tasks, isFetching, error } = useQuery(getTasks)
+  const { data: tasks, isLoading, error } = useQuery(getTasks)
 
   return (
     <div>
       <NewTaskForm />
 
       {tasks && <TasksList tasks={tasks} />}
 
-      <div> <Clocks /> </div>
-
-      {isFetching && 'Fetching...'}
+      {isLoading && 'Loading...'}
       {error && 'Error: ' + error}
-
-      <button onClick={logout}> Logout </button>
+      <button onClick={logout}>Logout</button>
     </div>
   )
 }
 
-const Task = (props) => {
+const Task = ({ task }) => {
   const handleIsDoneChange = async (event) => {
     try {
       await updateTask({
-        taskId: props.task.id,
-        data: { isDone: event.target.checked }
+        id: task.id,
+        isDone: event.target.checked,
       })
     } catch (error) {
       window.alert('Error while updating task: ' + error.message)
@@ -38,26 +34,35 @@ const Task = (props) => {
   return (
     <div>
       <input
-        type='checkbox' id={props.task.id}
-        checked={props.task.isDone}
+        type="checkbox"
+        id={String(task.id)}
+        checked={task.isDone}
         onChange={handleIsDoneChange}
       />
-      {props.task.description}
+      {task.description}
     </div>
   )
 }
 
-const TasksList = (props) => {
-  if (!props.tasks?.length) return 'No tasks'
-  return props.tasks.map((task, idx) => <Task task={task} key={idx} />)
+const TasksList = ({ tasks }) => {
+  if (!tasks?.length) return <div>No tasks</div>
+
+  return (
+    <div>
+      {tasks.map((task, idx) => (
+        <Task task={task} key={idx} />
+      ))}
+    </div>
+  )
 }
 
-const NewTaskForm = (props) => {
+const NewTaskForm = () => {
   const handleSubmit = async (event) => {
     event.preventDefault()
     try {
-      const description = event.target.description.value
-      event.target.reset()
+      const target = event.target
+      const description = target.description.value
+      target.reset()
       await createTask({ description })
     } catch (err) {
       window.alert('Error: ' + err.message)
@@ -66,15 +71,10 @@ const NewTaskForm = (props) => {
 
   return (
     <form onSubmit={handleSubmit}>
-      <input
-        name='description'
-        type='text'
-        defaultValue=''
-      />
-      <input type='submit' value='Create task' />
+      <input name="description" type="text" defaultValue="" />
+      <input type="submit" value="Create task" />
     </form>
   )
 }
 
 export default MainPage
-

examples/tutorials/TodoApp/src/client/MainPage.jsx

@@ -1,19 +1,16 @@
 import { Link } from 'react-router-dom'
-
 import { SignupForm } from '@wasp/auth/forms/Signup'
 
 const SignupPage = () => {
   return (
-    <>
-      <div style={{maxWidth: "400px", margin: "0 auto"}}>
-        <SignupForm/>
-        <br/>
-        <span>
-          I already have an account (<Link to="/login">go to login</Link>).
-        </span>
-      </div>
-    </>
+    <div style={{maxWidth: "400px", margin: "0 auto"}}>
+      <SignupForm />
+      <br />
+      <span>
+        I already have an account (<Link to="/login">go to login</Link>).
+      </span>
+    </div>
   )
 }
 
-export default SignupPage
+export default SignupPage

examples/tutorials/TodoApp/src/client/SignupPage.jsx

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {
+    open: true,
+  },
+})

examples/tutorials/TodoApp/src/client/vite.config.ts

@@ -1,19 +1,23 @@
 import HttpError from '@wasp/core/HttpError.js'
 
 export const createTask = async (args, context) => {
-  if (!context.user) { throw new HttpError(401) }
+  if (!context.user) {
+    throw new HttpError(401)
+  }
   return context.entities.Task.create({
     data: {
       description: args.description,
-      user: { connect: { id: context.user.id } }
-    }
+      user: { connect: { id: context.user.id } },
+    },
   })
 }
 
 export const updateTask = async (args, context) => {
-  if (!context.user) { throw new HttpError(401) }
+  if (!context.user) {
+    throw new HttpError(401)
+  }
   return context.entities.Task.updateMany({
-    where: { id: args.taskId, user: { id: context.user.id } },
-    data: { isDone: args.data.isDone }
+    where: { id: args.id, user: { id: context.user.id } },
+    data: { isDone: args.isDone },
   })
 }

examples/tutorials/TodoApp/src/server/actions.js

@@ -1,8 +1,10 @@
 import HttpError from '@wasp/core/HttpError.js'
 
 export const getTasks = async (args, context) => {
-  if (!context.user) { throw new HttpError(401) }
-  return context.entities.Task.findMany(
-    { where: { user: { id: context.user.id } } }
-  )
+  if (!context.user) {
+    throw new HttpError(401)
+  }
+  return context.entities.Task.findMany({
+    where: { user: { id: context.user.id } },
+  })
 }

examples/tutorials/TodoApp/src/server/queries.js

@@ -0,0 +1,11 @@
+/.wasp/
+
+# We ignore env files recognized and used by Wasp.
+.env.server
+.env.client
+
+# To be extra safe, we by default ignore any files with `.env` extension in them.
+# If this is too agressive for you, consider allowing specific files with `!` operator,
+# or modify/delete these two lines.
+*.env
+*.env.*

examples/tutorials/TodoAppTs/.gitignore

@@ -0,0 +1 @@
+File marking the root of Wasp project.