Update todo-typescript example for 0.11.6 (#1167)

Author: vincanger

examples/todo-typescript/main.wasp

@@ -7,7 +7,10 @@ app TodoTypescript {
   auth: {
     userEntity: User,
     methods: {
-      usernameAndPassword: {},
+      usernameAndPassword: {}, // this is a very naive implementation, use 'email' in production instead
+      //google: {}, //https://wasp-lang.dev/docs/integrations/google
+      //gitHub: {}, //https://wasp-lang.dev/docs/integrations/github
+      //email: {} //https://wasp-lang.dev/docs/guides/email-auth
     },
     onAuthFailedRedirectTo: "/login",
   }
@@ -24,11 +27,11 @@ entity User {=psl
 psl=}
 
 entity Task {=psl
-    id          Int     @id @default(autoincrement())
-    description String
-    isDone      Boolean @default(false)
-    user        User?   @relation(fields: [userId], references: [id])
-    userId      Int?
+  id          Int     @id @default(autoincrement())
+  description String
+  isDone      Boolean @default(false)
+  user        User   @relation(fields: [userId], references: [id])
+  userId      Int
 psl=}
 
 route RootRoute { path: "/", to: MainPage }
@@ -66,3 +69,8 @@ action updateTask {
   fn: import { updateTask } from "@server/actions.js",
   entities: [Task]
 }
+
+action deleteTasks {
+  fn: import { deleteTasks } from "@server/actions.js",
+  entities: [Task],
+}

examples/todo-typescript/migrations/20221219114539_init/migration.sql renamed to examples/todo-typescript/migrations/20231012121747_initial/migration.sql

@@ -10,8 +10,8 @@ CREATE TABLE "Task" (
     "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
     "description" TEXT NOT NULL,
     "isDone" BOOLEAN NOT NULL DEFAULT false,
-    "userId" INTEGER,
-    CONSTRAINT "Task_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+    "userId" INTEGER NOT NULL,
+    CONSTRAINT "Task_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
 );
 
 -- CreateIndex

examples/todo-typescript/src/client/LoginPage.tsx

@@ -1,16 +1,17 @@
-import { Link } from 'react-router-dom';
-import { LoginForm } from '@wasp/auth/forms/Login';
+import { Link } from "react-router-dom";
+import { LoginForm } from "@wasp/auth/forms/Login";
 
 export function LoginPage() {
   return (
     <main>
-      <h1>Login</h1>
-      {/** Wasp has built-in auth forms & flows, which you can also opt-out of, if you wish :) */}
+      {/** Wasp has built-in auth forms & flows, which you can customize or opt-out of, if you wish :)
+       * https://wasp-lang.dev/docs/guides/auth-ui
+       */}
       <LoginForm />
       <br />
       <span>
-        I don't have an account yet (<Link to='/signup'>go to signup</Link>).
+        I don't have an account yet (<Link to="/signup">go to signup</Link>).
       </span>
     </main>
   );
-};
+}

examples/todo-typescript/src/client/Main.css

@@ -26,7 +26,7 @@ img {
   max-height: 100px;
 }
 
-button {
+.logout {
   margin-top: 1rem;
 }
 
@@ -43,11 +43,31 @@ code {
   font-size: 1.2rem;
 }
 
+.buttons {
+  display: flex;
+  flex-direction: row;
+  width: 300px;
+  justify-content: space-between;
+}
+
 .tasklist {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   width: 300px;
   margin-top: 1rem;
+  padding: 0
+}
+
+li {
+  width: 100%;
+}
+
+.todo-item {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }

examples/todo-typescript/src/client/MainPage.tsx

@@ -1,88 +1,109 @@
-import './Main.css';
-import React, { useEffect, FormEventHandler, FormEvent } from 'react';
-import logout from '@wasp/auth/logout';
-import useAuth from '@wasp/auth/useAuth';
-import { useQuery } from '@wasp/queries'; // Wasp uses a thin wrapper around react-query
-import getTasks from '@wasp/queries/getTasks';
-import createTask from '@wasp/actions/createTask';
-import updateTask from '@wasp/actions/updateTask';
-import waspLogo from './waspLogo.png';
-import { Task } from './types'
+import React, { FormEventHandler, FormEvent } from "react";
+import waspLogo from "./waspLogo.png";
 
-export function MainPage() {
-  const { data: user } = useAuth();
-  const { data: tasks, isLoading, error } = useQuery<unknown, Task[]>(getTasks);
+import "./Main.css";
+// Wasp imports 🐝 = }
+import logout from "@wasp/auth/logout";
+import { useQuery } from "@wasp/queries"; // Wasp uses a thin wrapper around react-query
+import getTasks from "@wasp/queries/getTasks";
+import createTask from "@wasp/actions/createTask";
+import updateTask from "@wasp/actions/updateTask";
+import deleteTasks from "@wasp/actions/deleteTasks";
+import type { Task, User } from "@wasp/entities";
 
-  useEffect(() => {
-    console.log(user);
-  }, [user]);
+export const MainPage = ({ user }: { user: User }) => {
+  const { data: tasks, isLoading, error } = useQuery(getTasks);
 
-  if (isLoading) return 'Loading...';
-  if (error) return 'Error: ' + error;
+  if (isLoading) return "Loading...";
+  if (error) return "Error: " + error;
+
+  const completed = tasks?.filter((task) => task.isDone).map((task) => task.id);
 
   return (
     <main>
-      <img src={waspLogo} alt='wasp logo' />
-      <h1>
-        {user.username}
-        {`'s tasks :)`}
-      </h1>
+      <img src={waspLogo} alt="wasp logo" />
+      {user && (
+        <h1>
+          {user.username}
+          {`'s tasks :)`}
+        </h1>
+      )}
       <NewTaskForm />
-      {tasks && <TasksList tasks={tasks} /> }
-      <button onClick={logout}> Logout </button>
+      {tasks && <TasksList tasks={tasks} />}
+      <div className="buttons">
+        <button
+          className="logout"
+          onClick={() => void deleteTasks(completed ?? [])}
+        >
+          Delete completed
+        </button>
+        <button className="logout" onClick={logout}>
+          Logout
+        </button>
+      </div>
     </main>
   );
 };
 
 function Todo({ id, isDone, description }: Task) {
-  const handleIsDoneChange: FormEventHandler<HTMLInputElement> = async (event) => {
+  const handleIsDoneChange: FormEventHandler<HTMLInputElement> = async (
+    event
+  ) => {
     try {
       await updateTask({
         id,
         isDone: event.currentTarget.checked,
       });
     } catch (err: any) {
-      window.alert('Error while updating task ' + err?.message);
+      window.alert("Error while updating task " + err?.message);
     }
-  }
+  };
 
   return (
     <li>
-      <input type='checkbox' id={id.toString()} checked={isDone} onChange={handleIsDoneChange} />
-      <span>{description}</span>
+      <span className="todo-item">
+        <input
+          type="checkbox"
+          id={id.toString()}
+          checked={isDone}
+          onChange={handleIsDoneChange}
+        />
+        <span>{description}</span>
+        <button onClick={() => void deleteTasks([id])}>Delete</button>
+      </span>
     </li>
   );
-};
+}
 
-function TasksList({tasks}: { tasks: Task[] }) {
+function TasksList({ tasks }: { tasks: Task[] }) {
   if (tasks.length === 0) return <p>No tasks yet.</p>;
   return (
-    <ol className='tasklist'>
+    <ol className="tasklist">
       {tasks.map((task, idx) => (
         <Todo {...task} key={idx} />
       ))}
     </ol>
   );
-};
+}
 
 function NewTaskForm() {
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    
+
     try {
       const description = event.currentTarget.description.value;
-      console.log(description)
+      console.log(description);
       event.currentTarget.reset();
       await createTask({ description });
     } catch (err: any) {
-      window.alert('Error: ' + err?.message);
+      window.alert("Error: " + err?.message);
     }
   };
 
   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>
   );
-};
+}

examples/todo-typescript/src/client/SignupPage.tsx

@@ -1,16 +1,17 @@
-import { Link } from 'react-router-dom';
-import { SignupForm } from '@wasp/auth/forms/Signup';
+import { Link } from "react-router-dom";
+import { SignupForm } from "@wasp/auth/forms/Signup";
 
 export function SignupPage() {
   return (
     <main>
-      <h1>Sign Up</h1>
-      {/** Wasp has built-in auth forms & flows, which you can also opt-out of, if you wish :) */}
+      {/** Wasp has built-in auth forms & flows, which you can customize or opt-out of, if you wish :)
+       * https://wasp-lang.dev/docs/guides/auth-ui
+       */}
       <SignupForm />
       <br />
       <span>
-        I already have an account (<Link to='/login'>go to login</Link>).
+        I already have an account (<Link to="/login">go to login</Link>).
       </span>
     </main>
   );
-};
+}

examples/todo-typescript/src/client/types.ts

@@ -1,9 +1,13 @@
-import HttpError from '@wasp/core/HttpError.js';
-import { Context, Task } from './serverTypes'
+import HttpError from "@wasp/core/HttpError.js";
+import type { CreateTask, UpdateTask, DeleteTasks } from "@wasp/actions/types";
+import type { Task } from "@wasp/entities";
 
-type CreateArgs = Pick<Task, 'description'>;
+type CreateArgs = Pick<Task, "description">;
 
-export async function createTask({ description }: CreateArgs, context: Context) {
+export const createTask: CreateTask<CreateArgs, Task> = async (
+  { description },
+  context
+) => {
   if (!context.user) {
     throw new HttpError(401);
   }
@@ -16,18 +20,33 @@ export async function createTask({ description }: CreateArgs, context: Context)
   });
 };
 
-type UpdateArgs = Pick<Task, 'id' | 'isDone'>;
+type UpdateArgs = Pick<Task, "id" | "isDone">;
 
-export async function updateTask({ id, isDone }: UpdateArgs, context: Context) {
+export const updateTask: UpdateTask<UpdateArgs> = async (
+  { id, isDone },
+  context
+) => {
   if (!context.user) {
     throw new HttpError(401);
   }
 
-  return context.entities.Task.updateMany({
+  return context.entities.Task.update({
     where: {
       id,
-      user: { id: context.user.id },
     },
     data: { isDone },
   });
 };
+
+export const deleteTasks: DeleteTasks<Task["id"][]> = async (
+  idsToDelete,
+  context
+) => {
+  return context.entities.Task.deleteMany({
+    where: {
+      id: {
+        in: idsToDelete,
+      },
+    },
+  });
+};

examples/todo-typescript/src/server/actions.ts

@@ -1,9 +1,15 @@
-import HttpError from '@wasp/core/HttpError.js';
-import { Context, Task } from './serverTypes'
+import HttpError from "@wasp/core/HttpError.js";
+import type { GetTasks } from "@wasp/queries/types";
+import type { Task } from "@wasp/entities";
 
-export async function getTasks(args: unknown, context: Context): Promise<Task[]> {
+//Using TypeScript's new 'satisfies' keyword, it will infer the types of the arguments and return value
+export const getTasks = ((_args, context) => {
   if (!context.user) {
     throw new HttpError(401);
   }
-  return context.entities.Task.findMany({ where: { user: { id: context.user.id } } });
-};
+
+  return context.entities.Task.findMany({
+    where: { user: { id: context.user.id } },
+    orderBy: { id: "asc" },
+  });
+}) satisfies GetTasks<void, Task[]>;