chore(web): refactor storypanel to remove any gql use (#697)

web/src/beta/features/Editor/Visualizer/hooks.ts

@@ -4,7 +4,14 @@ import { useMemo, useEffect, useCallback } from "react";
 import type { Alignment, Location } from "@reearth/beta/lib/core/Crust";
 import type { LatLng, Tag, ValueTypes, ComputedLayer } from "@reearth/beta/lib/core/mantle";
 import type { Layer, LayerSelectionReason, Cluster } from "@reearth/beta/lib/core/Map";
-import { useLayersFetcher, useSceneFetcher, useWidgetsFetcher } from "@reearth/services/api";
+import type { ValueType } from "@reearth/beta/utils/value";
+import {
+  useLayersFetcher,
+  useSceneFetcher,
+  useWidgetsFetcher,
+  useStorytellingFetcher,
+  usePropertyFetcher,
+} from "@reearth/services/api";
 import { config } from "@reearth/services/config";
 import {
   useSceneMode,
@@ -18,13 +25,28 @@ import {
 } from "@reearth/services/state";
 
 import { convertWidgets, processLayers } from "./convert";
-import { BlockType } from "./type";
+import type { BlockType } from "./type";
 
-export default ({ sceneId, isBuilt }: { sceneId?: string; isBuilt?: boolean }) => {
+export default ({
+  sceneId,
+  isBuilt,
+  storyId,
+  pageId,
+}: {
+  sceneId?: string;
+  isBuilt?: boolean;
+  storyId?: string;
+  pageId?: string;
+}) => {
   const { useUpdateWidget, useUpdateWidgetAlignSystem } = useWidgetsFetcher();
   const { useGetLayersQuery } = useLayersFetcher();
-  const { nlsLayers } = useGetLayersQuery({ sceneId });
   const { useSceneQuery } = useSceneFetcher();
+  const { useInstalledStoryBlocksQuery, useCreateStoryBlock, useDeleteStoryBlock } =
+    useStorytellingFetcher();
+  const { useUpdatePropertyValue } = usePropertyFetcher();
+
+  const { nlsLayers } = useGetLayersQuery({ sceneId });
+
   const { scene } = useSceneQuery({ sceneId });
 
   const [sceneMode, setSceneMode] = useSceneMode();
@@ -173,6 +195,50 @@ export default ({ sceneId, isBuilt }: { sceneId?: string; isBuilt?: boolean }) =
     [sceneId, useUpdateWidgetAlignSystem],
   );
 
+  const { installedStoryBlocks } = useInstalledStoryBlocksQuery({
+    sceneId,
+    lang: undefined,
+    storyId,
+    pageId,
+  });
+
+  const handleStoryBlockCreate = useCallback(
+    (index?: number) => async (extensionId?: string, pluginId?: string) => {
+      if (!extensionId || !pluginId || !storyId || !pageId) return;
+      await useCreateStoryBlock({
+        pluginId,
+        extensionId,
+        storyId,
+        pageId,
+        index,
+      });
+    },
+    [storyId, pageId, useCreateStoryBlock],
+  );
+
+  const handleStoryBlockDelete = useCallback(
+    async (blockId?: string) => {
+      if (!blockId || !storyId || !pageId) return;
+      await useDeleteStoryBlock({ blockId, pageId, storyId });
+    },
+    [storyId, pageId, useDeleteStoryBlock],
+  );
+
+  const handlePropertyValueUpdate = useCallback(
+    async (
+      propertyId?: string,
+      schemaItemId?: string,
+      fieldId?: string,
+      itemId?: string,
+      vt?: ValueType,
+      v?: ValueTypes[ValueType],
+    ) => {
+      if (!propertyId || !schemaItemId || !fieldId || !vt) return;
+      await useUpdatePropertyValue(propertyId, schemaItemId, itemId, fieldId, "en", v, vt);
+    },
+    [useUpdatePropertyValue],
+  );
+
   const engineMeta = useMemo(
     () => ({
       cesiumIonAccessToken: config()?.cesiumIonAccessToken,
@@ -206,6 +272,10 @@ export default ({ sceneId, isBuilt }: { sceneId?: string; isBuilt?: boolean }) =
     useExperimentalSandbox,
     isVisualizerReady,
     selectWidgetArea: selectedWidgetAreaVar,
+    installedStoryBlocks,
+    handleStoryBlockCreate,
+    handleStoryBlockDelete,
+    handlePropertyValueUpdate,
     selectLayer,
     selectBlock,
     onBlockChange,

web/src/beta/features/Editor/Visualizer/index.tsx

@@ -2,13 +2,10 @@ import { MutableRefObject, useCallback } from "react";
 
 import ContentPicker from "@reearth/beta/components/ContentPicker";
 import type { MapRef } from "@reearth/beta/lib/core/Map/ref";
-import StoryPanel, {
-  type InstallableStoryBlock,
-  type GQLStory,
-  type GQLStoryPage,
-} from "@reearth/beta/lib/core/StoryPanel";
+import StoryPanel, { type InstallableStoryBlock } from "@reearth/beta/lib/core/StoryPanel";
 import CoreVisualizer, { type Props as VisualizerProps } from "@reearth/beta/lib/core/Visualizer";
 import type { Camera } from "@reearth/beta/utils/value";
+import type { Page, Story } from "@reearth/services/api/storytellingApi/utils";
 import { config } from "@reearth/services/config";
 import { styled } from "@reearth/services/theme";
 
@@ -22,8 +19,8 @@ export type Props = {
   currentCamera?: Camera;
   // storytelling
   showStoryPanel?: boolean;
-  selectedStory?: GQLStory;
-  currentPage?: GQLStoryPage;
+  selectedStory?: Story;
+  currentPage?: Page;
   isAutoScrolling?: boolean;
   installableBlocks?: InstallableStoryBlock[];
   onAutoScrollingChange: (isScrolling: boolean) => void;
@@ -64,6 +61,10 @@ const Visualizer: React.FC<Props> = ({
     layerSelectionReason,
     useExperimentalSandbox,
     isVisualizerReady: _isVisualizerReady,
+    installedStoryBlocks,
+    handleStoryBlockCreate,
+    handleStoryBlockDelete,
+    handlePropertyValueUpdate,
     selectLayer,
     selectBlock,
     onBlockChange,
@@ -76,7 +77,7 @@ const Visualizer: React.FC<Props> = ({
     handleDropLayer,
     zoomToLayer,
     handleMount,
-  } = useHooks({ sceneId, isBuilt });
+  } = useHooks({ sceneId, isBuilt, storyId: selectedStory?.id, pageId: currentPage?.id });
 
   const renderInfoboxInsertionPopUp = useCallback<
     NonNullable<VisualizerProps["renderInfoboxInsertionPopup"]>
@@ -132,12 +133,15 @@ const Visualizer: React.FC<Props> = ({
         renderInfoboxInsertionPopup={renderInfoboxInsertionPopUp}>
         {showStoryPanel && (
           <StoryPanel
-            sceneId={sceneId}
             selectedStory={selectedStory}
             currentPage={currentPage}
             isAutoScrolling={isAutoScrolling}
             installableBlocks={installableBlocks}
+            installedBlocks={installedStoryBlocks}
             isEditable={!!inEditor}
+            onBlockCreate={handleStoryBlockCreate}
+            onBlockDelete={handleStoryBlockDelete}
+            onPropertyUpdate={handlePropertyValueUpdate}
             onAutoScrollingChange={onAutoScrollingChange}
             onCurrentPageChange={onCurrentPageChange}
           />

web/src/beta/features/Editor/index.tsx

@@ -6,7 +6,6 @@ import useStorytelling from "@reearth/beta/features/Editor/useStorytelling";
 import Visualizer from "@reearth/beta/features/Editor/Visualizer";
 import Navbar, { type Tab } from "@reearth/beta/features/Navbar";
 import { Provider as DndProvider } from "@reearth/beta/utils/use-dnd";
-import { StoryFragmentFragment } from "@reearth/services/gql";
 import { metrics, styled } from "@reearth/services/theme";
 
 import DataSourceManager from "./DataSourceManager";
@@ -19,10 +18,9 @@ type Props = {
   tab: Tab;
   projectId?: string;
   workspaceId?: string;
-  stories: StoryFragmentFragment[];
 };
 
-const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab, stories }) => {
+const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
   const {
     visualizerRef,
     selectedSceneSetting,
@@ -55,7 +53,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab, stories
     handlePageMove,
   } = useStorytelling({
     sceneId,
-    stories,
+    onFlyTo: handleFlyTo,
   });
 
   const {

web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.stories.tsx

@@ -13,7 +13,10 @@ const dummyPages = [...Array(25)].map((_, i) => ({
   title: `Page ${i}`,
   swipeable: i % 2 === 0,
   blocks: [],
-  propertyId: "1234",
+  property: {
+    id: "1234",
+    items: [],
+  },
 }));
 
 export const Default: Story = {

web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.tsx

@@ -6,14 +6,13 @@ import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 import Action from "@reearth/beta/features/Editor/tabs/story/LeftPanel/Action";
 import PageItemWrapper from "@reearth/beta/features/Editor/tabs/story/LeftPanel/PageItemWrapper";
 import { getFieldValue } from "@reearth/beta/lib/core/StoryPanel/utils";
-import { convert } from "@reearth/services/api/propertyApi/utils";
-import { StoryPageFragmentFragment } from "@reearth/services/gql";
+import type { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 type Props = {
-  storyPages: StoryPageFragmentFragment[];
-  selectedPage?: StoryPageFragmentFragment;
+  storyPages: Page[];
+  selectedPage?: Page;
   onPageSelect: (id: string) => void;
   onPageAdd: (isSwipeable: boolean) => void;
   onPageDuplicate: (id: string) => void;
@@ -59,7 +58,7 @@ const ContentPage: React.FC<Props> = ({
             await onPageMove(item.id, index);
           }}
           renderItem={(storyPage, i) => {
-            const title = (getFieldValue(convert(storyPage.property) ?? [], "title", "title") ??
+            const title = (getFieldValue(storyPage.property.items ?? [], "title", "title") ??
               t("Untitled")) as string;
             return (
               <PageItemWrapper

web/src/beta/features/Editor/tabs/story/LeftPanel/index.tsx

@@ -1,11 +1,11 @@
 import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
 import ContentPage from "@reearth/beta/features/Editor/tabs/story/LeftPanel/ContentPage";
-import { StoryFragmentFragment, StoryPageFragmentFragment } from "@reearth/services/gql";
+import { Page, Story } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 
 type Props = {
-  selectedStory?: StoryFragmentFragment;
-  selectedPage?: StoryPageFragmentFragment;
+  selectedStory?: Story;
+  selectedPage?: Page;
   onPageSelect: (id: string) => void;
   onPageDuplicate: (id: string) => void;
   onPageDelete: (id: string) => void;

web/src/beta/features/Editor/tabs/story/RightPanel/index.tsx

@@ -2,15 +2,14 @@ import { useMemo } from "react";
 
 import Settings from "@reearth/beta/features/Editor/Settings";
 import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
-import type { GQLStoryPage } from "@reearth/beta/lib/core/StoryPanel/hooks";
 import type { FlyTo } from "@reearth/beta/lib/core/types";
 import type { Camera } from "@reearth/beta/utils/value";
-import { convert } from "@reearth/services/api/propertyApi/utils";
+import type { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 
 type Props = {
   sceneId?: string;
-  selectedPage?: GQLStoryPage;
+  selectedPage?: Page;
   currentCamera?: Camera;
   onFlyTo?: FlyTo;
 };
@@ -20,7 +19,7 @@ const StoryRightPanel: React.FC<Props> = ({ selectedPage, currentCamera, onFlyTo
 
   const propertyItems = useMemo(
     () =>
-      convert(selectedPage?.property)?.filter(
+      selectedPage?.property.items?.filter(
         p => p.schemaGroup !== "panel" && p.schemaGroup !== "title",
       ),
     [selectedPage?.property],
@@ -35,7 +34,7 @@ const StoryRightPanel: React.FC<Props> = ({ selectedPage, currentCamera, onFlyTo
           title: t("Page Settings"),
           children: selectedPage && (
             <Settings
-              propertyId={selectedPage.propertyId}
+              propertyId={selectedPage.property.id}
               propertyItems={propertyItems}
               currentCamera={currentCamera}
               onFlyTo={onFlyTo}

web/src/beta/features/Editor/useLeftPanel.tsx

@@ -4,7 +4,7 @@ import MapSidePanel from "@reearth/beta/features/Editor/tabs/map/LeftPanel";
 import StorySidePanel from "@reearth/beta/features/Editor/tabs/story/LeftPanel";
 import { Tab } from "@reearth/beta/features/Navbar";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
-import { StoryFragmentFragment, StoryPageFragmentFragment } from "@reearth/services/gql";
+import type { Page, Story } from "@reearth/services/api/storytellingApi/utils";
 
 import type { LayerNameUpdateProps } from "./useLayers";
 
@@ -13,8 +13,8 @@ type Props = {
   nlsLayers: NLSLayer[];
 
   // storytelling
-  selectedStory?: StoryFragmentFragment;
-  currentPage?: StoryPageFragmentFragment;
+  selectedStory?: Story;
+  currentPage?: Page;
   onCurrentPageChange: (id: string) => void;
   onPageDuplicate: (id: string) => void;
   onPageDelete: (id: string) => void;

web/src/beta/features/Editor/useRightPanel.tsx

@@ -1,9 +1,9 @@
 import { ReactNode, useMemo } from "react";
 
 import type { Tab } from "@reearth/beta/features/Navbar";
-import type { GQLStoryPage } from "@reearth/beta/lib/core/StoryPanel/hooks";
 import type { FlyTo } from "@reearth/beta/lib/core/types";
 import type { Camera } from "@reearth/beta/utils/value";
+import type { Page } from "@reearth/services/api/storytellingApi/utils";
 
 import MapSidePanel from "./tabs/map/RightPanel";
 import StorySidePanel from "./tabs/story/RightPanel";
@@ -12,7 +12,7 @@ import WidgetSidePanel from "./tabs/widgets/RightPanel";
 type Props = {
   tab: Tab;
   sceneId?: string;
-  currentPage?: GQLStoryPage;
+  currentPage?: Page;
   showSceneSettings?: boolean;
   currentCamera?: Camera;
   onFlyTo?: FlyTo;