WEB-49 Fix unable to create new pages (#74)

- Pass current path to Puck client, use it to add "pageName" to payloads
- When a new page is created in the editor, initiate page reload to
refresh newly-generated data (pageId, drafts...)
- Slightly sloppy, but both lower-code and safer than trying to get the
new state (pageId) everywhere it needs to be

Author: wlenig

sga-puck/app/puck/[...puckPath]/DraftPlugin.tsx

@@ -1,10 +1,10 @@
-import { PencilLine } from "lucide-react";
 import { DraftPluginContainer } from "./DraftPluginContainer";
 import type { Plugin } from "@puckeditor/core";
 
 export const DraftPlugin: Plugin = {
   name: "draft-plugin",
   label: "Drafts",
-  icon: <PencilLine />,
+  // icon: <PencilLine />,
+  icon: "📝",
   render: DraftPluginContainer,
 };

sga-puck/app/puck/[...puckPath]/DraftPluginContainer.tsx

@@ -14,8 +14,8 @@ export function DraftPluginContainer() {
   const data = usePuck((s) => s.appState.data);
   const dispatch = usePuck((s) => s.dispatch);
 
-  // Get pageId, draftId, and finalDraftId from context
-  const { pageId, draftId: draftIdFromContext, finalDraftId: finalDraftIdFromContext } = useDraftContext();
+  // Get path, pageId, draftId, and finalDraftId from context
+  const { path, pageId, draftId: draftIdFromContext, finalDraftId: finalDraftIdFromContext } = useDraftContext();
 
   // State for notifications and confirmations dialogs
   const [notification, setNotification] = useState<string | null>(null);
@@ -37,6 +37,7 @@ export function DraftPluginContainer() {
     createNewDraft,
     loadDraft,
   } = useDraftState({
+    path,
     pageId,
     initialDraftId: draftIdFromContext,
     initialFinalDraftId: finalDraftIdFromContext,

sga-puck/app/puck/[...puckPath]/client.tsx

@@ -7,23 +7,26 @@ import { useState, createContext, useContext } from "react";
 import { DraftPlugin } from "./DraftPlugin";
 
 type DraftContextType = {
+  path: string;
   pageId?: number;
   draftId?: number;
   finalDraftId?: number;
 };
 
-const DraftContext = createContext<DraftContextType>({});
+const DraftContext = createContext<DraftContextType>({ path: "" });
 
 export function useDraftContext() {
   return useContext(DraftContext);
 }
 
 export function Client({
+  path,
   data,
   pageId,
   draftId,
   finalDraftId,
 }: {
+  path: string;
   data: Partial<Data>;
   pageId?: number;
   draftId?: number;
@@ -32,7 +35,7 @@ export function Client({
   const [currentData, setCurrentData] = useState<Data>(data as Data);
 
   return (
-    <DraftContext.Provider value={{ pageId, draftId, finalDraftId }}>
+    <DraftContext.Provider value={{ path, pageId, draftId, finalDraftId }}>
       <Puck
         config={config}
         data={currentData}

sga-puck/app/puck/[...puckPath]/page.tsx

@@ -127,6 +127,7 @@ export default async function Page({
   return (
     <Client
       key={`${path}-${draftId || 'no-draft'}`} // Force re-render when draftId changes
+      path={path}
       data={data || {}}
       pageId={pageId}
       draftId={draftId}

sga-puck/app/puck/[...puckPath]/useDraftState.ts

@@ -2,13 +2,16 @@ import type { Data } from "@puckeditor/core";
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import type { Draft, UseDraftStateReturn } from "./types";
+import { unslugify } from "../../../lib/path-utils";
 
 export function useDraftState({
+  path,
   pageId,
   initialDraftId,
   initialFinalDraftId,
   initialData,
 }: {
+  path: string;
   pageId?: number;
   initialDraftId?: number;
   initialFinalDraftId?: number;
@@ -124,6 +127,8 @@ export function useDraftState({
 
       if (pageId) {
         payload.pageId = pageId;
+      } else if (path) {
+        payload.pageName = unslugify(path);
       }
 
       if (currentDraftId !== undefined) {
@@ -150,6 +155,10 @@ export function useDraftState({
         const currentUrl = new URL(window.location.href);
         currentUrl.searchParams.set("draftId", result.draftId.toString());
         router.push(currentUrl.pathname + currentUrl.search);
+        // If a new page was created, refresh to get the new pageId
+        if (!pageId && result.pageId) {
+          router.refresh();
+        }
       }
 
       // Refresh drafts list
@@ -176,6 +185,8 @@ export function useDraftState({
 
       if (pageId) {
         payload.pageId = pageId;
+      } else if (path) {
+        payload.pageName = unslugify(path);
       }
 
       if (currentDraftId !== undefined) {
@@ -202,6 +213,11 @@ export function useDraftState({
         setFinalDraftId(result.draftId);
       }
 
+      // If a new page was created, refresh to get the new pageId
+      if (!pageId && result.pageId) {
+        router.refresh();
+      }
+
       // Refresh drafts list and page info
       if (pageId) {
         fetchDrafts();