add filip's suggested changes

examples/todo-typescript/main.wasp

@@ -34,17 +34,17 @@ psl=}
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
   authRequired: true,
-  component: import Main from "@client/MainPage"
+  component: import { MainPage } from "@client/MainPage"
 }
 
 route LoginRoute { path: "/login", to: LoginPage }
 page LoginPage {
-  component: import Login from "@client/LoginPage"
+  component: import { LoginPage } from "@client/LoginPage"
 }
 
 route SignupRoute { path: "/signup", to: SignupPage }
 page SignupPage {
-  component: import Signup from "@client/SignupPage"
+  component: import { SignupPage } from "@client/SignupPage"
 }
 
 query getTasks {

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 import LoginForm from '@wasp/auth/forms/Login';
 
-const LoginPage = () => {
+export function LoginPage() {
   return (
     <main>
       <h1>Login</h1>
@@ -15,5 +14,3 @@ const LoginPage = () => {
     </main>
   );
 };
-
-export default LoginPage;

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

@@ -1,5 +1,5 @@
 import './Main.css';
-import React from 'react';
+import React, { useEffect, FormEventHandler } from 'react';
 import logout from '@wasp/auth/logout.js';
 import useAuth from '@wasp/auth/useAuth.js';
 import { useQuery } from '@wasp/queries'; // Wasp uses a thin wrapper around react-query
@@ -9,11 +9,11 @@ import updateTask from '@wasp/actions/updateTask';
 import waspLogo from './waspLogo.png';
 import { Task } from './types'
 
-const MainPage = () => {
+export function MainPage() {
   const { data: user } = useAuth();
-  const { data: tasks, isLoading, error } = useQuery(getTasks);
+  const { data: tasks, isLoading, error } = useQuery<unknown, Task[]>(getTasks);
 
-  React.useEffect(() => {
+  useEffect(() => {
     console.log(user);
   }, [user]);
 
@@ -34,42 +34,38 @@ const MainPage = () => {
   );
 };
 
-const Todo = ({task, number}: {task: Task, number: number}) => { 
-  const handleIsDoneChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+function Todo({ id, isDone, description }: Task) {
+  const handleIsDoneChange = async (event: FormEventHandler<HTMLInputElement>) => {
     try {
       await updateTask({
-        taskId: task.id,
+        taskId: 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 (
-    <div>
-      <span>
-        {number + 1}
-        {''}
-      </span>
-      <input type='checkbox' id={task.id.toString()} checked={task.isDone} onChange={handleIsDoneChange} />
-      <span>{task.description}</span>{' '}
-    </div>
+    <li>
+      <input type='checkbox' id={id.toString()} checked={isDone} onChange={handleIsDoneChange} />
+      <span>{description}</span>{' '}
+    </li>
   );
 };
 
-const TasksList = ({tasks}: { tasks: Task[] }) => {
+function TasksList({tasks}: { tasks: Task[] }) {
   if (tasks.length === 0) return <p>No tasks yet.</p>;
   return (
-    <div className='tasklist'>
+    <ol className='tasklist'>
       {tasks.map((tsk, idx) => (
-        <Todo task={tsk} number={idx} key={idx} />
+        <Todo {...tsk} key={idx} />
       ))}
-    </div>
+    </ol>
   );
 };
 
-const NewTaskForm = () => {
+function NewTaskForm() {
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     
@@ -90,5 +86,3 @@ const NewTaskForm = () => {
     </form>
   );
 };
-
-export default MainPage;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 import SignupForm from '@wasp/auth/forms/Signup';
 
-const SignupPage = () => {
+export function SignupPage() {
   return (
     <main>
       <h1>Sign Up</h1>
@@ -15,5 +14,3 @@ const SignupPage = () => {
     </main>
   );
 };
-
-export default SignupPage;

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

@@ -1,9 +1,9 @@
 import HttpError from '@wasp/core/HttpError.js';
 import { Context, Task } from './serverTypes'
 
-type createArgs = { description: Task['description'] };
+type CreateArgs = { description: Task['description'] };
 
-export const createTask = async ({ description }: createArgs, context: Context) => {
+export async function createTask({ description }: CreateArgs, context: Context) {
   if (!context.user) {
     throw new HttpError(401);
   }
@@ -16,9 +16,9 @@ export const createTask = async ({ description }: createArgs, context: Context)
   });
 };
 
-type updateArgs = { taskId: Task['id']; isDone: Task['isDone'] };
+type UpdateArgs = { taskId: Task['id']; isDone: Task['isDone'] };
 
-export const updateTask = async ({ taskId, isDone }: updateArgs, context: Context) => {
+export async function updateTask({ taskId, isDone }: UpdateArgs, context: Context) {
   if (!context.user) {
     throw new HttpError(401);
   }

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

@@ -1,7 +1,7 @@
 import HttpError from '@wasp/core/HttpError.js';
 import { Context, Task } from './serverTypes'
 
-export const getTasks = async (args: null, context: Context): Promise<Task[]> => {
+export async function getTasks(args: unknown, context: Context): Promise<Task[]> {
   if (!context.user) {
     throw new HttpError(401);
   }

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

@@ -1,6 +1,6 @@
-import { Task as TaskType, User, Prisma } from '@prisma/client';
+import { User, Prisma } from '@prisma/client';
 
-export type Task = TaskType;
+export { Task } from '@prisma/client';
 
 export type Context = {
   user: User;