Use tanstackdb for space creation

packages/ui/src/components/spaces/space-create-dialog.tsx

@@ -1,6 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
-import { SpaceForm } from '@colanode/ui/components/spaces/space-form';
+import { LocalPageNode, LocalSpaceNode } from '@colanode/client/types';
+import { generateId, IdType } from '@colanode/core';
+import { collections } from '@colanode/ui/collections';
+import {
+  SpaceForm,
+  SpaceFormValues,
+} from '@colanode/ui/components/spaces/space-form';
 import {
   Dialog,
   DialogContent,
@@ -9,7 +16,6 @@ import {
   DialogTitle,
 } from '@colanode/ui/components/ui/dialog';
 import { useWorkspace } from '@colanode/ui/contexts/workspace';
-import { useMutation } from '@colanode/ui/hooks/use-mutation';
 
 interface SpaceCreateDialogProps {
   open: boolean;
@@ -21,7 +27,65 @@ export const SpaceCreateDialog = ({
   onOpenChange,
 }: SpaceCreateDialogProps) => {
   const workspace = useWorkspace();
-  const { mutate, isPending } = useMutation();
+
+  const { mutate } = useMutation({
+    mutationFn: async (values: SpaceFormValues) => {
+      const nodes = collections.workspace(workspace.userId).nodes;
+
+      const spaceId = generateId(IdType.Space);
+      const space: LocalSpaceNode = {
+        id: spaceId,
+        type: 'space',
+        attributes: {
+          type: 'space',
+          name: values.name,
+          description: values.description,
+          avatar: values.avatar,
+          collaborators: {
+            [workspace.userId]: 'admin',
+          },
+          visibility: 'private',
+        },
+        parentId: '',
+        rootId: spaceId,
+        createdAt: new Date().toISOString(),
+        createdBy: workspace.userId,
+        updatedAt: null,
+        updatedBy: null,
+        localRevision: '0',
+        serverRevision: '0',
+      };
+      console.log('space', JSON.stringify(space, null, 2));
+
+      const pageId = generateId(IdType.Page);
+      const page: LocalPageNode = {
+        id: pageId,
+        type: 'page',
+        attributes: {
+          type: 'page',
+          name: 'Home',
+          parentId: spaceId,
+        },
+        parentId: spaceId,
+        rootId: spaceId,
+        createdAt: new Date().toISOString(),
+        createdBy: workspace.userId,
+        updatedAt: null,
+        updatedBy: null,
+        localRevision: '0',
+        serverRevision: '0',
+      };
+
+      nodes.insert([space, page]);
+      return space;
+    },
+    onSuccess: () => {
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -33,36 +97,9 @@ export const SpaceCreateDialog = ({
           </DialogDescription>
         </DialogHeader>
         <SpaceForm
-          onSubmit={(values) => {
-            if (isPending) {
-              return;
-            }
-
-            if (values.name.length < 3) {
-              return;
-            }
-
-            mutate({
-              input: {
-                type: 'space.create',
-                name: values.name,
-                description: values.description,
-                avatar: values.avatar,
-                userId: workspace.userId,
-              },
-              onSuccess() {
-                onOpenChange(false);
-              },
-              onError(error) {
-                toast.error(error.message);
-              },
-            });
-          }}
-          isSaving={isPending}
-          onCancel={() => {
-            onOpenChange(false);
-          }}
-          saveText="Create"
+          onSubmit={(values) => mutate(values)}
+          submitText="Create"
+          onCancel={() => onOpenChange(false)}
         />
       </DialogContent>
     </Dialog>