chore(web): beta story project publishing (#784)

reearth · Nov 4, 2023 · 4e38836 · 4e38836
1 parent e844ddd
commit 4e38836
Show file tree

Hide file tree

Showing 68 changed files with 730 additions and 392 deletions.
diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts
@@ -1,4 +1,3 @@
-import { useReactiveVar } from "@apollo/client";
 import { useMemo, useEffect, useCallback } from "react";
 
 import type { Alignment, Location } from "@reearth/beta/lib/core/Crust";
@@ -20,10 +19,11 @@ import {
   useIsCapturing,
   useSelectedBlock,
   useWidgetAlignEditorActivated,
-  selectedWidgetAreaVar,
-  isVisualizerReadyVar,
+  useSelectedWidgetArea,
+  useIsVisualizerReady,
   useZoomedLayerId,
-  selectedLayerVar,
+  useSelectedLayer,
+  useSelectedStoryPageId,
 } from "@reearth/services/state";
 
 import { convertWidgets, processLayers } from "./convert";
@@ -58,15 +58,16 @@ export default ({
   const [sceneMode, setSceneMode] = useSceneMode();
   const [isCapturing, onIsCapturingChange] = useIsCapturing();
   const [selectedBlock, selectBlock] = useSelectedBlock();
+  const [_, selectSelectedStoryPageId] = useSelectedStoryPageId();
   const [widgetAlignEditorActivated] = useWidgetAlignEditorActivated();
   const [zoomedLayerId, zoomToLayer] = useZoomedLayerId();
 
-  const selectedLayer = useReactiveVar(selectedLayerVar);
+  const [selectedLayer, setSelectedLayer] = useSelectedLayer();
 
-  const selectedWidgetArea = useReactiveVar(selectedWidgetAreaVar);
-  const isVisualizerReady = useReactiveVar(isVisualizerReadyVar);
+  const [selectedWidgetArea, setSelectedWidgetArea] = useSelectedWidgetArea();
+  const [isVisualizerReady, setIsVisualizerReady] = useIsVisualizerReady();
 
-  const handleMount = useCallback(() => isVisualizerReadyVar(true), []);
+  const handleMount = useCallback(() => setIsVisualizerReady(true), [setIsVisualizerReady]);
 
   const onBlockMove = useCallback(
     async (_id: string, _fromIndex: number, _toIndex: number) => {
@@ -125,11 +126,11 @@ export default ({
     ) => {
       if (id === selectedLayer?.layerId && featureId === selectedLayer?.featureId) return;
 
-      selectedLayerVar(
+      setSelectedLayer(
         id ? { layerId: id, featureId, layer: await layer?.(), layerSelectionReason } : undefined,
       );
     },
-    [selectedLayer],
+    [selectedLayer, setSelectedLayer],
   );
 
   const onBlockChange = useCallback(
@@ -205,6 +206,11 @@ export default ({
     [storyId, scene?.stories],
   );
 
+  const handleCurrentPageChange = useCallback(
+    (pageId?: string) => selectSelectedStoryPageId(pageId),
+    [selectSelectedStoryPageId],
+  );
+
   const handleStoryBlockCreate = useCallback(
     async (pageId?: string, extensionId?: string, pluginId?: string, index?: number) => {
       if (!extensionId || !pluginId || !storyId || !pageId) return;
@@ -272,8 +278,9 @@ export default ({
     engineMeta,
     useExperimentalSandbox,
     isVisualizerReady,
-    selectWidgetArea: selectedWidgetAreaVar,
+    selectWidgetArea: setSelectedWidgetArea,
     zoomedLayerId,
+    handleCurrentPageChange,
     handleStoryBlockCreate,
     handleStoryBlockDelete,
     handlePropertyValueUpdate,

diff --git a/web/src/beta/features/Editor/Visualizer/index.tsx b/web/src/beta/features/Editor/Visualizer/index.tsx
@@ -2,7 +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 } from "@reearth/beta/lib/core/StoryPanel";
+import StoryPanel, {
+  StoryPanelRef,
+  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 { Story, Page } from "@reearth/services/api/storytellingApi/utils";
@@ -18,12 +21,11 @@ export type Props = {
   inEditor?: boolean;
   currentCamera?: Camera;
   // storytelling
+  storyPanelRef?: MutableRefObject<StoryPanelRef | null>;
   showStoryPanel?: boolean;
   selectedStory?: Story;
   currentPage?: Page;
-  isAutoScrolling?: MutableRefObject<boolean>;
   installableBlocks?: InstallableStoryBlock[];
-  onCurrentPageChange: (id: string, disableScrollIntoView?: boolean) => void;
   onStoryBlockMove: (id: string, targetId: number, blockId: string) => void;
   onCameraChange: (camera: Camera) => void;
 };
@@ -34,12 +36,11 @@ const Visualizer: React.FC<Props> = ({
   isBuilt,
   inEditor,
   currentCamera,
+  storyPanelRef,
   showStoryPanel,
   selectedStory,
   currentPage,
-  isAutoScrolling,
   installableBlocks,
-  onCurrentPageChange,
   onStoryBlockMove,
   onCameraChange,
 }) => {
@@ -60,6 +61,7 @@ const Visualizer: React.FC<Props> = ({
     useExperimentalSandbox,
     isVisualizerReady: _isVisualizerReady,
     zoomedLayerId,
+    handleCurrentPageChange,
     handleStoryBlockCreate,
     handleStoryBlockDelete,
     handlePropertyValueUpdate,
@@ -129,25 +131,18 @@ const Visualizer: React.FC<Props> = ({
         renderInfoboxInsertionPopup={renderInfoboxInsertionPopUp}>
         {showStoryPanel && (
           <StoryPanel
+            ref={storyPanelRef}
             selectedStory={story}
-            currentPageId={currentPage?.id}
-            isAutoScrolling={isAutoScrolling}
             installableBlocks={installableBlocks}
             isEditable={!!inEditor}
+            onCurrentPageChange={handleCurrentPageChange}
             onBlockCreate={handleStoryBlockCreate}
             onBlockDelete={handleStoryBlockDelete}
             onPropertyUpdate={handlePropertyValueUpdate}
-            onCurrentPageChange={onCurrentPageChange}
             onStoryBlockMove={onStoryBlockMove}
           />
         )}
       </CoreVisualizer>
-      {/* <FovSlider
-        visible={isCapturing && sceneMode && sceneMode !== "2d"}
-        onIsCapturingChange={onIsCapturingChange}
-        camera={camera}
-        onFovChange={onFovChange}
-      /> */}
     </Wrapper>
   );
 };

diff --git a/web/src/beta/features/Editor/hooks.ts b/web/src/beta/features/Editor/hooks.ts
@@ -1,4 +1,3 @@
-import { useReactiveVar } from "@apollo/client";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { devices } from "@reearth/beta/features/Editor/tabs/widgets/Nav/Devices";
@@ -7,8 +6,8 @@ import type { FlyTo } from "@reearth/beta/lib/core/types";
 import type { Camera } from "@reearth/beta/utils/value";
 import {
   useWidgetAlignEditorActivated,
-  isVisualizerReadyVar,
-  currentCameraVar,
+  useIsVisualizerReady,
+  useCurrentCamera,
 } from "@reearth/services/state";
 
 import type { Tab } from "../Navbar";
@@ -19,8 +18,8 @@ import type { Device } from "./tabs/widgets/Nav";
 export default ({ tab }: { sceneId: string; tab: Tab }) => {
   const visualizerRef = useRef<MapRef | null>(null);
 
-  const isVisualizerReady = useReactiveVar(isVisualizerReadyVar);
-  const currentCamera = useReactiveVar(currentCameraVar);
+  const [isVisualizerReady] = useIsVisualizerReady();
+  const [currentCamera, setCurrentCamera] = useCurrentCamera();
 
   const [selectedSceneSetting, setSceneSetting] = useState(false);
   const [selectedDevice, setDevice] = useState<Device>("desktop");
@@ -85,7 +84,10 @@ export default ({ tab }: { sceneId: string; tab: Tab }) => {
     [isVisualizerReady],
   );
 
-  const handleCameraUpdate = useCallback((camera: Camera) => currentCameraVar(camera), []);
+  const handleCameraUpdate = useCallback(
+    (camera: Camera) => setCurrentCamera(camera),
+    [setCurrentCamera],
+  );
 
   return {
     visualizerRef,

diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -46,8 +46,8 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
 
   const {
     selectedStory,
+    storyPanelRef,
     currentPage,
-    isAutoScrolling,
     installableStoryBlocks,
     handleCurrentPageChange,
     handlePageDuplicate,
@@ -58,7 +58,6 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     handlePageUpdate,
   } = useStorytelling({
     sceneId,
-    onFlyTo: handleFlyTo,
   });
 
   const {
@@ -152,7 +151,8 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
 
   const { secondaryNavbar } = useSecondaryNavbar({
     tab,
-    projectId,
+    sceneId,
+    id: selectedProjectType === "story" ? selectedStory?.id : projectId,
     selectedDevice,
     selectedProjectType,
     showWidgetEditor,
@@ -190,14 +190,13 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
                 <Visualizer
                   inEditor={tab !== "publish"}
                   visualizerRef={visualizerRef}
+                  storyPanelRef={storyPanelRef}
                   sceneId={sceneId}
                   showStoryPanel={selectedProjectType === "story"}
                   selectedStory={selectedStory}
-                  currentPage={currentPage}
-                  isAutoScrolling={isAutoScrolling}
                   installableBlocks={installableStoryBlocks}
+                  currentPage={currentPage}
                   currentCamera={currentCamera}
-                  onCurrentPageChange={handleCurrentPageChange}
                   onStoryBlockMove={onStoryBlockMove}
                   onCameraChange={handleCameraUpdate}
                 />

diff --git a/web/src/beta/features/Editor/tabs/map/RightPanel/index.tsx b/web/src/beta/features/Editor/tabs/map/RightPanel/index.tsx
@@ -1,4 +1,3 @@
-import { useReactiveVar } from "@apollo/client";
 import { useMemo } from "react";
 
 import SceneSettings from "@reearth/beta/features/Editor/Settings";
@@ -12,7 +11,7 @@ import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { convert } from "@reearth/services/api/propertyApi/utils";
 import { useT } from "@reearth/services/i18n";
-import { selectedLayerVar } from "@reearth/services/state";
+import { useSelectedLayer } from "@reearth/services/state";
 
 import LayerInspector from "./LayerInspector";
 import LayerStyleEditor from "./LayerStyleValueEditor";
@@ -48,7 +47,7 @@ const MapRightPanel: React.FC<Props> = ({
   const scenePropertyId = useMemo(() => scene?.property?.id, [scene?.property?.id]);
   const sceneSettings = useMemo(() => convert(scene?.property), [scene?.property]);
 
-  const selectedLayerId = useReactiveVar(selectedLayerVar);
+  const [selectedLayerId] = useSelectedLayer();
 
   return (
     <SidePanelCommon

diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/hooks.ts b/web/src/beta/features/Editor/tabs/publish/Nav/hooks.ts
@@ -2,21 +2,60 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { useSettingsNavigation } from "@reearth/beta/hooks";
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
-import { useProjectFetcher } from "@reearth/services/api";
+import { useProjectFetcher, useStorytellingFetcher } from "@reearth/services/api";
 
 import { publishingType } from "./PublishModal";
 import { type PublishStatus } from "./PublishModal/hooks";
 
-export default ({ projectId }: { projectId?: string }) => {
-  const handleNavigationToSettings = useSettingsNavigation({ projectId });
+export type ProjectType = "default" | "story";
+
+type SelectedProject = {
+  id: string;
+  alias?: string;
+  publishmentStatus?: string;
+};
+
+export default ({
+  id,
+  sceneId,
+  selectedProjectType,
+}: {
+  id?: string;
+  sceneId?: string;
+  selectedProjectType?: ProjectType;
+}) => {
+  const handleNavigationToSettings = useSettingsNavigation({ projectId: id });
+  const [project, setProject] = useState<SelectedProject>();
+
+  // Regular Project
   const {
+    publishProjectLoading,
     useProjectQuery,
     useProjectAliasCheckLazyQuery,
     usePublishProject,
-    publishProjectLoading,
   } = useProjectFetcher();
 
-  const { project } = useProjectQuery(projectId);
+  const { project: defaultProject } = useProjectQuery(id);
+
+  // Storytelling Project
+  const { useStoriesQuery, usePublishStory } = useStorytellingFetcher();
+
+  const { stories } = useStoriesQuery({ sceneId });
+
+  // General
+  useEffect(() => {
+    setProject(() => {
+      const proj =
+        selectedProjectType === "story" ? stories?.find(s => s.id === id) : defaultProject;
+      return proj
+        ? {
+            id: proj.id,
+            alias: proj.alias,
+            publishmentStatus: proj.publishmentStatus,
+          }
+        : undefined;
+    });
+  }, [id, defaultProject, stories, selectedProjectType]);
 
   const [publishing, setPublishing] = useState<publishingType>("unpublishing");
   const [dropdownOpen, setDropdown] = useState(false);
@@ -51,21 +90,23 @@ export default ({ projectId }: { projectId?: string }) => {
     );
   }, [validatingAlias, checkProjectAliasData, project]);
 
-  const publishStatus: PublishStatus = useMemo(() => {
-    const status =
+  const publishStatus: PublishStatus = useMemo(
+    () =>
       project?.publishmentStatus === "PUBLIC"
         ? "published"
         : project?.publishmentStatus === "LIMITED"
         ? "limited"
-        : "unpublished";
-    return status;
-  }, [project?.publishmentStatus]);
+        : "unpublished",
+    [project?.publishmentStatus],
+  );
 
   const handleProjectPublish = useCallback(
     async (alias: string | undefined, publishStatus: PublishStatus) => {
-      await usePublishProject(publishStatus, projectId, alias);
+      selectedProjectType === "story"
+        ? await usePublishStory(publishStatus, project?.id, alias)
+        : await usePublishProject(publishStatus, project?.id, alias);
     },
-    [projectId, usePublishProject],
+    [project?.id, selectedProjectType, usePublishStory, usePublishProject],
   );
 
   const handleOpenProjectSettings = useCallback(() => {

diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx b/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx
@@ -10,21 +10,22 @@ import { config } from "@reearth/services/config";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
-import useHooks from "./hooks";
+import useHooks, { type ProjectType } from "./hooks";
 import PublishModal from "./PublishModal";
 import { PublishStatus } from "./PublishModal/hooks";
 
-export { SECONDARY_NAVBAR_HEIGHT } from "@reearth/beta/features/Editor/SecondaryNav";
+export type { ProjectType } from "./hooks";
 
-export type ProjectType = "default" | "story";
+export { SECONDARY_NAVBAR_HEIGHT } from "@reearth/beta/features/Editor/SecondaryNav";
 
 type Props = {
-  projectId?: string;
+  id?: string;
+  sceneId?: string;
   selectedProjectType?: ProjectType;
   onProjectTypeChange: (type: ProjectType) => void;
 };
 
-const Nav: React.FC<Props> = ({ projectId, selectedProjectType, onProjectTypeChange }) => {
+const Nav: React.FC<Props> = ({ id, sceneId, selectedProjectType, onProjectTypeChange }) => {
   const t = useT();
 
   const {
@@ -43,7 +44,7 @@ const Nav: React.FC<Props> = ({ projectId, selectedProjectType, onProjectTypeCha
     handleProjectAliasCheck,
     handleOpenProjectSettings,
     handleNavigationToSettings,
-  } = useHooks({ projectId });
+  } = useHooks({ id, sceneId, selectedProjectType });
 
   const text = useMemo(
     () =>