From 57bbc38f1dbdcb35595b14dd7943899421d09538 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Fri, 22 Sep 2023 17:00:38 +0800
Subject: [PATCH] chore(web): fix create & remove story block (#700)

---
 web/src/beta/lib/core/StoryPanel/Block/index.tsx      |  7 ++++++-
 web/src/beta/lib/core/StoryPanel/Block/types.ts       |  2 +-
 web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx |  8 +++++---
 web/src/beta/lib/core/StoryPanel/Page/index.tsx       | 10 ++++++++--
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/web/src/beta/lib/core/StoryPanel/Block/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/index.tsx
index efa212af5f..6586551d48 100644
--- a/web/src/beta/lib/core/StoryPanel/Block/index.tsx
+++ b/web/src/beta/lib/core/StoryPanel/Block/index.tsx
@@ -7,6 +7,7 @@ import builtin, { isBuiltinStoryBlock } from "./builtin";
 import type { CommonProps, BlockProps } from "./types";
 
 export type Props = {
+  pageId?: string;
   renderBlock?: (block: BlockProps) => ReactNode;
   layer?: Layer;
 } & CommonProps;
@@ -14,6 +15,7 @@ export type Props = {
 export type Component = ComponentType<CommonProps>;
 
 export default function StoryBlockComponent({
+  pageId,
   renderBlock,
   onRemove,
   ...props
@@ -21,7 +23,10 @@ export default function StoryBlockComponent({
   const builtinBlockId = `${props.block?.pluginId}/${props.block?.extensionId}`;
   const Builtin = isBuiltinStoryBlock(builtinBlockId) ? builtin[builtinBlockId] : undefined;
 
-  const handleRemove = useCallback(() => onRemove?.(props.block?.id), [props.block?.id, onRemove]);
+  const handleRemove = useCallback(
+    () => onRemove?.(pageId, props.block?.id),
+    [pageId, props.block?.id, onRemove],
+  );
 
   return Builtin ? (
     <Builtin {...props} onRemove={onRemove ? handleRemove : undefined} />
diff --git a/web/src/beta/lib/core/StoryPanel/Block/types.ts b/web/src/beta/lib/core/StoryPanel/Block/types.ts
index 1213f3febe..040dadde61 100644
--- a/web/src/beta/lib/core/StoryPanel/Block/types.ts
+++ b/web/src/beta/lib/core/StoryPanel/Block/types.ts
@@ -28,7 +28,7 @@ export type CommonProps = {
   theme?: Theme;
   onClick?: () => void;
   onClickAway?: () => void;
-  onRemove?: (id?: string) => void;
+  onRemove?: (pageId?: string, id?: string) => void;
   onChange?: (
     propertyId?: string,
     schemaItemId?: string,
diff --git a/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx b/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx
index c491e80839..a7788745ac 100644
--- a/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx
+++ b/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx
@@ -9,13 +9,15 @@ import { styled } from "@reearth/services/theme";
 type Props = {
   openBlocks: boolean;
   installableStoryBlocks?: InstallableStoryBlock[];
+  pageId?: string;
   onBlockOpen: () => void;
-  onBlockAdd?: (extensionId: string, pluginId: string) => void;
+  onBlockAdd?: (pageId?: string, extensionId?: string, pluginId?: string) => void;
 };
 
 const BlockAddBar: React.FC<Props> = ({
   installableStoryBlocks,
   openBlocks,
+  pageId,
   onBlockOpen,
   onBlockAdd,
 }) => {
@@ -26,12 +28,12 @@ const BlockAddBar: React.FC<Props> = ({
           name: sb.name,
           icon: "plugin",
           onClick: () => {
-            onBlockAdd?.(sb.extensionId, sb.pluginId);
+            onBlockAdd?.(pageId, sb.extensionId, sb.pluginId);
             onBlockOpen();
           },
         };
       }) ?? [],
-    [installableStoryBlocks, onBlockAdd, onBlockOpen],
+    [installableStoryBlocks, pageId, onBlockAdd, onBlockOpen],
   );
 
   return (
diff --git a/web/src/beta/lib/core/StoryPanel/Page/index.tsx b/web/src/beta/lib/core/StoryPanel/Page/index.tsx
index e08b665d33..2743f07ce3 100644
--- a/web/src/beta/lib/core/StoryPanel/Page/index.tsx
+++ b/web/src/beta/lib/core/StoryPanel/Page/index.tsx
@@ -21,8 +21,10 @@ type Props = {
   isEditable?: boolean;
   onPageSettingsToggle?: () => void;
   onPageSelect?: (pageId?: string | undefined) => void;
-  onBlockCreate?: (index?: number) => (extensionId?: string, pluginId?: string) => Promise<void>;
-  onBlockDelete?: (blockId?: string) => Promise<void>;
+  onBlockCreate?: (
+    index?: number,
+  ) => (pageId?: string, extensionId?: string, pluginId?: string) => Promise<void>;
+  onBlockDelete?: (pageId?: string, blockId?: string) => Promise<void>;
   onBlockSelect?: (blockId?: string) => void;
   onPropertyUpdate?: (
     propertyId?: string,
@@ -85,6 +87,7 @@ const StoryPage: React.FC<Props> = ({
                 items: [titleProperty],
               },
             }}
+            pageId={page?.id}
             isEditable={isEditable}
             isSelected={selectedStoryBlockId === titleId}
             onClick={() => onBlockSelect?.(titleId)}
@@ -94,6 +97,7 @@ const StoryPage: React.FC<Props> = ({
         )}
         {isEditable && (
           <BlockAddBar
+            pageId={page?.id}
             openBlocks={openBlocksIndex === -1}
             installableStoryBlocks={installableStoryBlocks}
             onBlockOpen={() => handleBlockOpen(-1)}
@@ -104,6 +108,7 @@ const StoryPage: React.FC<Props> = ({
           <Fragment key={idx}>
             <StoryBlock
               block={b}
+              pageId={page?.id}
               isSelected={selectedStoryBlockId === b.id}
               isEditable={isEditable}
               onClick={() => onBlockSelect?.(b.id)}
@@ -113,6 +118,7 @@ const StoryPage: React.FC<Props> = ({
             />
             {isEditable && (
               <BlockAddBar
+                pageId={page?.id}
                 openBlocks={openBlocksIndex === idx}
                 installableStoryBlocks={installableStoryBlocks}
                 onBlockOpen={() => handleBlockOpen(idx)}