From 2def96c67e3109275f98a6690ed19d71231c8549 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Mon, 7 Aug 2023 23:05:45 +0900 Subject: [PATCH] fix page/block mutations --- .../story/StoryPanel/Page/BlockAddBar.tsx | 11 +++++------ .../tabs/story/StoryPanel/Page/hooks.ts | 19 +++++++++++++++++-- .../tabs/story/StoryPanel/Page/index.tsx | 16 +++++----------- .../Editor/tabs/story/StoryPanel/hooks.ts | 18 ++---------------- .../Editor/tabs/story/StoryPanel/index.tsx | 7 +++---- .../services/api/storytellingApi/blocks.ts | 5 +++-- web/src/services/api/storytellingApi/pages.ts | 5 +++-- 7 files changed, 38 insertions(+), 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 index ada625941d..94079e3599 100644 --- 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,8 +19,8 @@ const BlockAddBar: React.FC = ({ onBlockOpen, onBlockAdd, }) => { - const items = useMemo(() => { - const blockSelection: MenuItem[] = + const items: MenuItem[] = useMemo( + () => installableStoryBlocks?.map?.(sb => { return { name: sb.name, @@ -28,12 +28,11 @@ const BlockAddBar: React.FC = ({ onClick: () => { onBlockAdd(sb.extensionId, sb.pluginId); onBlockOpen(); - console.log("SB: ", sb); }, }; - }) ?? []; - return blockSelection; - }, [installableStoryBlocks, onBlockAdd, onBlockOpen]); + }) ?? [], + [installableStoryBlocks, onBlockAdd, onBlockOpen], + ); return ( 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 index 24f57bf685..5657371076 100644 --- 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 index 9a09b2ac77..1260da1371 100644 --- 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; }; const StoryPage: React.FC = ({ @@ -25,11 +21,10 @@ const StoryPage: React.FC = ({ 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); @@ -37,10 +32,9 @@ const StoryPage: React.FC = ({ const handleBlockAdd = useCallback( (extensionId: string, pluginId: string) => { - console.log("ADDDDD BLOCK w ID: ", extensionId, pluginId); - onStoryBlockCreate?.(extensionId, pluginId); + handleStoryBlockCreate(extensionId, pluginId); }, - [onStoryBlockCreate], + [handleStoryBlockCreate], ); return ( @@ -48,7 +42,7 @@ const StoryPage: React.FC = ({ {pageTitle ?? "No Title"} - {installedStoryBlocks ? ( + {installedStoryBlocks && installedStoryBlocks.length > 0 ? ( installedStoryBlocks?.map((b, idx) => ( {b.title} @@ -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 index 175c1c8670..e8619e71a5 100644 --- 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 index e714054cda..b7f549d2b6 100644 --- 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 = ({ 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 = ({ sceneId, selectedStory, selectedPage, on diff --git a/web/src/services/api/storytellingApi/blocks.ts b/web/src/services/api/storytellingApi/blocks.ts index de0ffac160..f140f76f67 100644 --- 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> => { @@ -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> => { @@ -134,6 +134,7 @@ export default () => { const [moveStoryBlockMutation] = useMutation( 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 index ca15c3329a..9658c77937 100644 --- 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> => { @@ -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> => { @@ -79,6 +79,7 @@ export default () => { const [moveStoryPageMutation] = useMutation( MOVE_STORY_PAGE, + { refetchQueries: ["GetScene"] }, ); const useMoveStoryPage = useCallback(