fix page/block mutations

reearth · Aug 7, 2023 · 2def96c · 2def96c
1 parent 75442d7
commit 2def96c
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 43 deletions.
diff --git a/web/src/beta/features/Editor/tabs/story/StoryPanel/Page/BlockAddBar.tsx b/web/src/beta/features/Editor/tabs/story/StoryPanel/Page/BlockAddBar.tsx
@@ -19,21 +19,20 @@ const BlockAddBar: React.FC<Props> = ({
   onBlockOpen,
   onBlockAdd,
 }) => {
-  const items = useMemo(() => {
-    const blockSelection: MenuItem[] =
+  const items: MenuItem[] = useMemo(
+    () =>
       installableStoryBlocks?.map?.(sb => {
         return {
           name: sb.name,
           icon: "plugin",
           onClick: () => {
             onBlockAdd(sb.extensionId, sb.pluginId);
             onBlockOpen();
-            console.log("SB: ", sb);
           },
         };
-      }) ?? [];
-    return blockSelection;
-  }, [installableStoryBlocks, onBlockAdd, onBlockOpen]);
+      }) ?? [],
+    [installableStoryBlocks, onBlockAdd, onBlockOpen],
+  );
 
   return (
     <Wrapper>

diff --git a/web/src/beta/features/Editor/tabs/story/StoryPanel/Page/hooks.ts b/web/src/beta/features/Editor/tabs/story/StoryPanel/Page/hooks.ts
@@ -1,3 +1,5 @@
+import { useCallback } from "react";
+
 import useStorytellingAPI from "@reearth/services/api/storytellingApi";
 
 export default ({
@@ -9,7 +11,7 @@ export default ({
   storyId?: string;
   pageId?: string;
 }) => {
-  const { useInstalledStoryBlocksQuery } = useStorytellingAPI();
+  const { useInstalledStoryBlocksQuery, useCreateStoryBlock } = useStorytellingAPI();
 
   const { installedStoryBlocks } = useInstalledStoryBlocksQuery({
     sceneId,
@@ -18,5 +20,18 @@ export default ({
     pageId,
   });
 
-  return { installedStoryBlocks };
+  const handleStoryBlockCreate = useCallback(
+    async (extensionId?: string, pluginId?: string) => {
+      if (!extensionId || !pluginId || !storyId || !pageId) return;
+      await useCreateStoryBlock({
+        pluginId,
+        extensionId,
+        storyId,
+        pageId,
+      });
+    },
+    [storyId, pageId, useCreateStoryBlock],
+  );
+
+  return { installedStoryBlocks, handleStoryBlockCreate };
 };
diff --git a/web/src/beta/features/Editor/tabs/story/StoryPanel/Page/index.tsx b/web/src/beta/features/Editor/tabs/story/StoryPanel/Page/index.tsx
@@ -13,10 +13,6 @@ type Props = {
   pageId?: string;
   pageTitle?: string;
   installableStoryBlocks?: InstallableStoryBlock[];
-  onStoryBlockCreate?: (
-    extensionId?: string | undefined,
-    pluginId?: string | undefined,
-  ) => Promise<void>;
 };
 
 const StoryPage: React.FC<Props> = ({
@@ -25,30 +21,28 @@ const StoryPage: React.FC<Props> = ({
   pageId,
   pageTitle,
   installableStoryBlocks,
-  onStoryBlockCreate,
 }) => {
   const [openBlocks, setOpenBlocks] = useState(false);
 
-  const { installedStoryBlocks } = useHooks({ sceneId, storyId, pageId });
+  const { installedStoryBlocks, handleStoryBlockCreate } = useHooks({ sceneId, storyId, pageId });
 
   const handleBlockOpen = useCallback(() => {
     setOpenBlocks(o => !o);
   }, []);
 
   const handleBlockAdd = useCallback(
     (extensionId: string, pluginId: string) => {
-      console.log("ADDDDD BLOCK w ID: ", extensionId, pluginId);
-      onStoryBlockCreate?.(extensionId, pluginId);
+      handleStoryBlockCreate(extensionId, pluginId);
     },
-    [onStoryBlockCreate],
+    [handleStoryBlockCreate],
   );
 
   return (
     <Wrapper>
       <Text size="h2" customColor>
         {pageTitle ?? "No Title"}
       </Text>
-      {installedStoryBlocks ? (
+      {installedStoryBlocks && installedStoryBlocks.length > 0 ? (
         installedStoryBlocks?.map((b, idx) => (
           <Fragment key={idx}>
             <Block>{b.title}</Block>
@@ -83,5 +77,5 @@ const Wrapper = styled.div`
 const Block = styled.div`
   padding: 5px;
   height: 50px;
-  background: yellow;
+  border: 1px dotted black;
 `;
diff --git a/web/src/beta/features/Editor/tabs/story/StoryPanel/hooks.ts b/web/src/beta/features/Editor/tabs/story/StoryPanel/hooks.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 
 import useStorytellingAPI from "@reearth/services/api/storytellingApi";
 import { StoryFragmentFragment, StoryPageFragmentFragment } from "@reearth/services/gql";
@@ -16,7 +16,7 @@ export default ({
   selectedPage?: StoryPageFragmentFragment;
   onPageSelect: (id: string) => void;
 }) => {
-  const { useInstallableStoryBlocksQuery, useCreateStoryBlock } = useStorytellingAPI();
+  const { useInstallableStoryBlocksQuery } = useStorytellingAPI();
 
   const pageInfo = useMemo(() => {
     const pages = selectedStory?.pages ?? [];
@@ -37,23 +37,9 @@ export default ({
 
   const { installableStoryBlocks } = useInstallableStoryBlocksQuery({ sceneId });
 
-  const handleStoryBlockCreate = useCallback(
-    async (extensionId?: string, pluginId?: string) => {
-      if (!extensionId || !pluginId || !selectedPage || !selectedStory) return;
-      await useCreateStoryBlock({
-        extensionId,
-        pageId: selectedPage.id,
-        storyId: selectedStory.id,
-        pluginId,
-      });
-    },
-    [selectedPage, selectedStory, useCreateStoryBlock],
-  );
-
   return {
     pageInfo,
     pageHeight,
     installableStoryBlocks,
-    handleStoryBlockCreate,
   };
 };
diff --git a/web/src/beta/features/Editor/tabs/story/StoryPanel/index.tsx b/web/src/beta/features/Editor/tabs/story/StoryPanel/index.tsx
@@ -15,7 +15,7 @@ type Props = {
 };
 
 export const StoryPanel: FC<Props> = ({ sceneId, selectedStory, selectedPage, onPageSelect }) => {
-  const { pageInfo, pageHeight, installableStoryBlocks, handleStoryBlockCreate } = useHooks({
+  const { pageInfo, pageHeight, installableStoryBlocks } = useHooks({
     sceneId,
     selectedStory,
     selectedPage,
@@ -37,10 +37,9 @@ export const StoryPanel: FC<Props> = ({ sceneId, selectedStory, selectedPage, on
             <StoryPage
               sceneId={sceneId}
               storyId={selectedStory.id}
-              pageId={selectedPage?.id}
-              pageTitle={selectedPage?.title}
+              pageId={p.id}
+              pageTitle={p.title}
               installableStoryBlocks={installableStoryBlocks}
-              onStoryBlockCreate={handleStoryBlockCreate}
             />
             <PageGap height={pageHeight} />
           </Fragment>

diff --git a/web/src/services/api/storytellingApi/blocks.ts b/web/src/services/api/storytellingApi/blocks.ts
@@ -95,7 +95,7 @@ export default () => {
   const [createStoryBlockMutation] = useMutation<
     CreateStoryBlockMutation,
     MutationCreateStoryBlockArgs
-  >(CREATE_STORY_BLOCK);
+  >(CREATE_STORY_BLOCK, { refetchQueries: ["GetScene"] });
 
   const useCreateStoryBlock = useCallback(
     async (input: CreateStoryBlockInput): Promise<MutationReturn<CreateStoryBlockMutation>> => {
@@ -115,7 +115,7 @@ export default () => {
   const [removeStoryBlockMutation] = useMutation<
     RemoveStoryBlockMutation,
     MutationRemoveStoryBlockArgs
-  >(REMOVE_STORY_BLOCK);
+  >(REMOVE_STORY_BLOCK, { refetchQueries: ["GetScene"] });
 
   const useDeleteStoryBlock = useCallback(
     async (input: RemoveStoryBlockInput): Promise<MutationReturn<RemoveStoryBlockMutation>> => {
@@ -134,6 +134,7 @@ export default () => {
 
   const [moveStoryBlockMutation] = useMutation<MoveStoryBlockMutation, MutationMoveStoryBlockArgs>(
     MOVE_STORY_BLOCK,
+    { refetchQueries: ["GetScene"] },
   );
 
   const useMoveStoryBlock = useCallback(

diff --git a/web/src/services/api/storytellingApi/pages.ts b/web/src/services/api/storytellingApi/pages.ts
@@ -32,7 +32,7 @@ export default () => {
   const [createStoryPageMutation] = useMutation<
     CreateStoryPageMutation,
     MutationCreateStoryPageArgs
-  >(CREATE_STORY_PAGE);
+  >(CREATE_STORY_PAGE, { refetchQueries: ["GetScene"] });
 
   const useCreateStoryPage = useCallback(
     async (input: CreateStoryPageInput): Promise<MutationReturn<CreateStoryPageMutation>> => {
@@ -56,7 +56,7 @@ export default () => {
   const [deleteStoryPageMutation] = useMutation<
     DeleteStoryPageMutation,
     MutationRemoveStoryPageArgs
-  >(DELETE_STORY_PAGE);
+  >(DELETE_STORY_PAGE, { refetchQueries: ["GetScene"] });
 
   const useDeleteStoryPage = useCallback(
     async (input: DeleteStoryPageInput): Promise<MutationReturn<DeleteStoryPageMutation>> => {
@@ -79,6 +79,7 @@ export default () => {
 
   const [moveStoryPageMutation] = useMutation<MoveStoryPageMutation, MutationMoveStoryPageArgs>(
     MOVE_STORY_PAGE,
+    { refetchQueries: ["GetScene"] },
   );
 
   const useMoveStoryPage = useCallback(