Update error message

components/Todo.tsx

@@ -2,6 +2,7 @@ import { TrashIcon } from "@heroicons/react/24/outline";
 import { useTodo } from "@zenstackhq/runtime/hooks";
 import { Todo, User } from "@zenstackhq/runtime/types";
 import { ChangeEvent, useEffect, useState } from "react";
+import { notAuthorizedList } from "../lib/error";
 import Avatar from "./Avatar";
 import TimeInfo from "./TimeInfo";
 
@@ -19,18 +20,27 @@ export default function Component({ value, updated, deleted }: Props) {
     if (!!value.completedAt !== completed) {
       update(value.id, {
         data: { completedAt: completed ? new Date() : null },
-      }).then((newValue) => {
-        if (updated && newValue) {
-          updated(newValue);
-        }
-      });
+      })
+        .then((newValue: any) => {
+          if (updated && newValue) {
+            updated(newValue);
+          }
+        })
+        .catch((error: any) => {
+          notAuthorizedList();
+          setCompleted(!completed);
+        });
     }
   });
 
   const deleteTodo = async () => {
-    await del(value.id);
-    if (deleted) {
-      deleted(value);
+    try {
+      await del(value.id);
+      if (deleted) {
+        deleted(value);
+      }
+    } catch (error: any) {
+      notAuthorizedList();
     }
   };
 

components/TodoList.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useList } from "@zenstackhq/runtime/hooks";
 import TimeInfo from "./TimeInfo";
+import { notAuthorizedList } from "../lib/error";
 
 type Props = {
   value: List & { owner: User };
@@ -22,23 +23,23 @@ export default function TodoList({ value }: Props) {
         await del(value.id);
       } catch (error: any) {
         if (error.status == 403) {
-          alert("You are now allowed to do so");
+          notAuthorizedList();
         }
       }
     }
   };
 
   return (
     <div className="card w-80 bg-base-100 shadow-xl cursor-pointer hover:bg-gray-50">
-      <Link href={`${router.asPath}/list/${value.id}`}>
+      <Link href={`${router.asPath}list/${value.id}`}>
         <a>
           <figure>
             <Image src={`https://picsum.photos/300/200?r=${value.id}`} width={320} height={200} alt="Cover" />
           </figure>
         </a>
       </Link>
       <div className="card-body">
-        <Link href={`${router.asPath}/${value.id}`}>
+        <Link href={`${router.asPath}${value.id}`}>
           <a>
             <h2 className="card-title line-clamp-1">{value.title || "Missing Title"}</h2>
           </a>

lib/error.ts

@@ -0,0 +1,3 @@
+export function notAuthorizedList() {
+  alert("This is not your todo list, you are not allowed to do so");
+}

package.json

@@ -11,8 +11,8 @@
     "db:browse": "zenstack studio"
   },
   "dependencies": {
-    "@zenstackhq/internal": "^0.2.4",
-    "@zenstackhq/runtime": "^0.2.4",
+    "@zenstackhq/internal": "^0.3.1",
+    "@zenstackhq/runtime": "^0.3.1",
     "next": "^12.3.0",
     "next-auth": "^4.15.0",
     "react": "18.2.0",
@@ -29,7 +29,7 @@
     "eslint": "8.26.0",
     "eslint-config-next": "^12.3.0",
     "typescript": "4.8.4",
-    "zenstack": "^0.2.4",
+    "zenstack": "^0.3.1",
     "autoprefixer": "^10.4.12",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8",

pages/list/[listId]/index.tsx

@@ -4,6 +4,7 @@ import { PlusIcon } from "@heroicons/react/24/outline";
 import { ChangeEvent, KeyboardEvent, useState } from "react";
 import { useCurrentUser } from "@lib/context";
 import TodoComponent from "components/Todo";
+import { notAuthorizedList } from "../../../lib/error";
 
 export default function TodoList() {
   const user = useCurrentUser();
@@ -30,15 +31,21 @@ export default function TodoList() {
   }
 
   const _createTodo = async () => {
-    const todo = await createTodo({
-      data: {
-        title,
-        ownerId: user!.id,
-        listId: list!.id,
-      },
-    });
-    console.log(`Todo created: ${todo}`);
-    setTitle("");
+    try {
+      const todo = await createTodo({
+        data: {
+          title,
+          ownerId: user!.id,
+          listId: list!.id,
+        },
+      });
+      console.log(`Todo created: ${todo}`);
+      setTitle("");
+    } catch (error: any) {
+      if (error.status == 403) {
+        notAuthorizedList();
+      }
+    }
   };
 
   return (