chore: action hooks update to use new page action

web/app/hooks/actions/use-command-actions.ts

@@ -2,7 +2,6 @@ import * as React from "react"
 import { ensureUrlProtocol } from "@/lib/utils"
 import { useTheme } from "next-themes"
 import { toast } from "sonner"
-import { LaAccount } from "@/lib/schema"
 import { usePageActions } from "./use-page-actions"
 import { useNavigate } from "@tanstack/react-router"
 
@@ -35,19 +34,11 @@ export const useCommandActions = () => {
     toast.success("URL copied to clipboard.", { position: "bottom-right" })
   }, [])
 
-  const createNewPage = React.useCallback(
-    (me: LaAccount) => {
-      const page = newPage(me)
-      navigate({ to: `/pages/${page.id}` })
-    },
-    [navigate, newPage],
-  )
-
   return {
     changeTheme,
     navigateTo,
     openLinkInNewTab,
     copyCurrentURL,
-    createNewPage,
+    createNewPage: newPage,
   }
 }

web/app/hooks/actions/use-page-actions.ts

@@ -2,16 +2,25 @@ import * as React from "react"
 import { toast } from "sonner"
 import { LaAccount, PersonalPage } from "@/lib/schema"
 import { ID } from "jazz-tools"
+import { useNavigate } from "@tanstack/react-router"
+import { useAccount } from "~/lib/providers/jazz-provider"
 
 export const usePageActions = () => {
-  const newPage = React.useCallback((me: LaAccount) => {
-    const newPersonalPage = PersonalPage.create(
+  const { me } = useAccount()
+  const navigate = useNavigate()
+
+  const newPage = React.useCallback(() => {
+    if (!me) return
+
+    const page = PersonalPage.create(
       { public: false, createdAt: new Date(), updatedAt: new Date() },
       { owner: me },
     )
-    me.root?.personalPages?.push(newPersonalPage)
-    return newPersonalPage
-  }, [])
+
+    me.root?.personalPages?.push(page)
+
+    navigate({ to: "/pages/$pageId", params: { pageId: page.id } })
+  }, [me, navigate])
 
   const deletePage = React.useCallback(
     (me: LaAccount, pageId: ID<PersonalPage>): void => {