demo: support deleting todo

samples/todo/components/ManageMembers.tsx

@@ -1,4 +1,5 @@
 import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useCurrentUser } from '@lib/context';
 import { ServerErrorCode } from '@zenstackhq/internal';
 import { HooksError, useSpaceUser } from '@zenstackhq/runtime/hooks';
 import { Space, SpaceUserRole } from '@zenstackhq/runtime/types';
@@ -13,8 +14,9 @@ type Props = {
 export default function ManageMembers({ space }: Props) {
     const [email, setEmail] = useState('');
     const [role, setRole] = useState<SpaceUserRole>(SpaceUserRole.USER);
+    const user = useCurrentUser();
 
-    const { find, create: addMember } = useSpaceUser();
+    const { find, create: addMember, del: delMember } = useSpaceUser();
     const { data: members } = find({
         where: {
             spaceId: space.id,
@@ -59,6 +61,12 @@ export default function ManageMembers({ space }: Props) {
         }
     };
 
+    const removeMember = async (id: string) => {
+        if (confirm(`Are you sure to remove this member from space?`)) {
+            await delMember(id);
+        }
+    };
+
     return (
         <div>
             <div className="flex flex-wrap gap-2 items-center mb-8 w-full">
@@ -84,8 +92,8 @@ export default function ManageMembers({ space }: Props) {
                         setRole(e.currentTarget.value as SpaceUserRole);
                     }}
                 >
-                    <option value={SpaceUserRole.USER}>Member</option>
-                    <option value={SpaceUserRole.ADMIN}>Admin</option>
+                    <option value={SpaceUserRole.USER}>USER</option>
+                    <option value={SpaceUserRole.ADMIN}>ADMIN</option>
                 </select>
 
                 <button>
@@ -109,14 +117,14 @@ export default function ManageMembers({ space }: Props) {
                             <p>{member.role}</p>
                         </div>
                         <div className="flex items-center">
-                            <button className="justify-self-end btn btn-link btn-xs text-gray-500">
+                            {user?.id !== member.user.id && (
                                 <TrashIcon
                                     className="w-4 h-4 text-gray-500"
                                     onClick={() => {
-                                        // TODO
+                                        removeMember(member.id);
                                     }}
                                 />
-                            </button>
+                            )}
                         </div>
                     </li>
                 ))}

samples/todo/components/Todo.tsx

@@ -1,3 +1,4 @@
+import { TrashIcon } from '@heroicons/react/24/outline';
 import { useTodo } from '@zenstackhq/runtime/hooks';
 import { Todo, User } from '@zenstackhq/runtime/types';
 import moment from 'moment';
@@ -7,11 +8,12 @@ import Avatar from './Avatar';
 type Props = {
     value: Todo & { owner: User };
     updated?: (value: Todo) => any;
+    deleted?: (value: Todo) => any;
 };
 
-export default function Component({ value, updated }: Props) {
+export default function Component({ value, updated, deleted }: Props) {
     const [completed, setCompleted] = useState(!!value.completedAt);
-    const { update } = useTodo();
+    const { update, del } = useTodo();
 
     useEffect(() => {
         if (!!value.completedAt !== completed) {
@@ -25,6 +27,13 @@ export default function Component({ value, updated }: Props) {
         }
     });
 
+    const deleteTodo = async () => {
+        await del(value.id);
+        if (deleted) {
+            deleted(value);
+        }
+    };
+
     return (
         <div className="border rounded-lg px-8 py-4 shadow-lg flex flex-col items-center w-full lg:w-[480px]">
             <div className="flex justify-between w-full mb-4">
@@ -37,14 +46,22 @@ export default function Component({ value, updated }: Props) {
                 >
                     {value.title}
                 </h3>
-                <input
-                    type="checkbox"
-                    className="checkbox"
-                    checked={completed}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        setCompleted(e.currentTarget.checked)
-                    }
-                />
+                <div className="flex">
+                    <input
+                        type="checkbox"
+                        className="checkbox mr-2"
+                        checked={completed}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            setCompleted(e.currentTarget.checked)
+                        }
+                    />
+                    <TrashIcon
+                        className="w-6 h-6 text-gray-500 cursor-pointer"
+                        onClick={() => {
+                            deleteTodo();
+                        }}
+                    />
+                </div>
             </div>
             <div className="flex justify-end w-full space-x-2">
                 <p className="text-sm text-gray-500">

samples/todo/pages/space/[slug]/[listId]/index.tsx

@@ -76,6 +76,9 @@ export default function TodoList() {
                             updated={() => {
                                 invalidateTodos();
                             }}
+                            deleted={() => {
+                                invalidateTodos();
+                            }}
                         />
                     ))}
                 </ul>