update to latest zenstack

zenstackhq · Nov 30, 2023 · b34c904 · b34c904 · vercel · Nov 30, 2023
1 parent cf6321d
commit b34c904
Show file tree

Hide file tree

Showing 16 changed files with 1,101 additions and 608 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ logs
 node_modules/
 .env.local
 .next
+.zenstack_repl_history
diff --git a/components/ManageMembers.tsx b/components/ManageMembers.tsx
@@ -1,6 +1,6 @@
 import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { useCurrentUser } from '@lib/context';
-import { useFindManySpaceUser, useMutateSpaceUser } from '@lib/hooks';
+import { useCreateSpaceUser, useDeleteSpaceUser, useFindManySpaceUser } from '@lib/hooks';
 import { Space, SpaceUserRole } from '@prisma/client';
 import { ChangeEvent, KeyboardEvent, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -14,7 +14,8 @@ export default function ManageMembers({ space }: Props) {
     const [email, setEmail] = useState('');
     const [role, setRole] = useState<SpaceUserRole>(SpaceUserRole.USER);
     const user = useCurrentUser();
-    const { createSpaceUser, deleteSpaceUser } = useMutateSpaceUser();
+    const { trigger: createSpaceUser } = useCreateSpaceUser();
+    const { trigger: deleteSpaceUser } = useDeleteSpaceUser();
 
     const { data: members } = useFindManySpaceUser({
         where: {
@@ -62,9 +63,9 @@ export default function ManageMembers({ space }: Props) {
         }
     };
 
-    const removeMember = async (id: string) => {
+    const removeMember = (id: string) => {
         if (confirm(`Are you sure to remove this member from space?`)) {
-            await deleteSpaceUser({ where: { id } });
+            deleteSpaceUser({ where: { id } });
         }
     };
 
@@ -115,7 +116,7 @@ export default function ManageMembers({ space }: Props) {
                         <div className="flex items-center">
                             {user?.id !== member.user.id && (
                                 <TrashIcon
-                                    className="w-4 h-4 text-gray-500"
+                                    className="w-4 h-4 text-gray-500 cursor-pointer"
                                     onClick={() => {
                                         removeMember(member.id);
                                     }}

diff --git a/components/Todo.tsx b/components/Todo.tsx
@@ -1,37 +1,31 @@
 import { TrashIcon } from '@heroicons/react/24/outline';
-import { useMutateTodo } from '@lib/hooks';
+import { useDeleteTodo, useUpdateTodo } from '@lib/hooks';
 import { Todo, User } from '@prisma/client';
 import { ChangeEvent } from 'react';
 import Avatar from './Avatar';
 import TimeInfo from './TimeInfo';
 
 type Props = {
     value: Todo & { owner: User };
-    updated?: (value: Todo) => any;
-    deleted?: (value: Todo) => any;
+    optimistic?: boolean;
 };
 
-export default function TodoComponent({ value, updated, deleted }: Props) {
-    const { updateTodo, deleteTodo } = useMutateTodo();
+export default function TodoComponent({ value, optimistic }: Props) {
+    const { trigger: updateTodo } = useUpdateTodo({ optimisticUpdate: true });
+    const { trigger: deleteTodo } = useDeleteTodo({ optimisticUpdate: true });
 
     const onDeleteTodo = async () => {
-        await deleteTodo({ where: { id: value.id } });
-        if (deleted) {
-            deleted(value);
-        }
+        deleteTodo({ where: { id: value.id } });
     };
 
     const toggleCompleted = async (completed: boolean) => {
         if (completed === !!value.completedAt) {
             return;
         }
-        const newValue = await updateTodo({
+        updateTodo({
             where: { id: value.id },
             data: { completedAt: completed ? new Date() : null },
         });
-        if (updated && newValue) {
-            updated(newValue);
-        }
     };
 
     return (
@@ -43,18 +37,22 @@ export default function TodoComponent({ value, updated, deleted }: Props) {
                     }`}
                 >
                     {value.title}
+                    {optimistic && <span className="loading loading-spinner loading-sm ml-1"></span>}
                 </h3>
                 <div className="flex">
                     <input
                         type="checkbox"
                         className="checkbox mr-2"
                         checked={!!value.completedAt}
+                        disabled={optimistic}
                         onChange={(e: ChangeEvent<HTMLInputElement>) => toggleCompleted(e.currentTarget.checked)}
                     />
                     <TrashIcon
-                        className="w-6 h-6 text-gray-500 cursor-pointer"
+                        className={`w-6 h-6 ${
+                            optimistic ? 'text-gray-300 cursor-not-allowed' : 'text-gray-600 cursor-pointer'
+                        }`}
                         onClick={() => {
-                            onDeleteTodo();
+                            !optimistic && onDeleteTodo();
                         }}
                     />
                 </div>

diff --git a/components/TodoList.tsx b/components/TodoList.tsx
@@ -1,5 +1,5 @@
 import { LockClosedIcon, TrashIcon } from '@heroicons/react/24/outline';
-import { useMutateList } from '@lib/hooks';
+import { useDeleteList } from '@lib/hooks';
 import { List } from '@prisma/client';
 import { customAlphabet } from 'nanoid';
 import { User } from 'next-auth';
@@ -14,17 +14,14 @@ type Props = {
     deleted?: (value: List) => void;
 };
 
-export default function TodoList({ value, deleted }: Props) {
+export default function TodoList({ value }: Props) {
     const router = useRouter();
 
-    const { deleteList } = useMutateList();
+    const { trigger: deleteList } = useDeleteList();
 
-    const onDeleteList = async () => {
+    const onDeleteList = () => {
         if (confirm('Are you sure to delete this list?')) {
-            await deleteList({ where: { id: value.id } });
-            if (deleted) {
-                deleted(value);
-            }
+            deleteList({ where: { id: value.id } });
         }
     };