chore(web): fixing a few bugs (#849)

reearth · Dec 1, 2023 · c8ad896 · c8ad896
1 parent 76f514f
commit c8ad896
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 32 deletions.
diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -179,11 +179,6 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     handleWidgetEditorToggle,
   });
 
-  const handleTabChange = useCallback(
-    () => storyPanelRef.current?.handleCurrentPageChange(undefined),
-    [storyPanelRef],
-  );
-
   return (
     <DndProvider>
       <Wrapper>
@@ -192,7 +187,6 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
           projectId={projectId}
           workspaceId={workspaceId}
           currentTab={tab}
-          onTabChange={handleTabChange}
         />
         <MainSection>
           {leftPanel && (

diff --git a/web/src/beta/features/Navbar/index.tsx b/web/src/beta/features/Navbar/index.tsx
@@ -11,7 +11,6 @@ type Props = {
   isDashboard?: boolean;
   currentTab?: Tab;
   page?: "editor" | "settings";
-  onTabChange?: () => void;
 };
 
 export const Tabs = ["map", "story", "widgets", "publish"] as const;
@@ -30,7 +29,6 @@ const Navbar: React.FC<Props> = ({
   currentTab = "map",
   isDashboard = false,
   page = "editor",
-  onTabChange,
 }) => {
   const {
     currentProject,
@@ -50,7 +48,6 @@ const Navbar: React.FC<Props> = ({
     currentTab,
     sceneId,
     page,
-    onTabChange,
   });
 
   return (

diff --git a/web/src/beta/features/Navbar/useRightSection.tsx b/web/src/beta/features/Navbar/useRightSection.tsx
@@ -11,12 +11,11 @@ type Props = {
   currentTab?: Tab;
   sceneId?: string;
   page: "editor" | "settings";
-  onTabChange?: () => void;
 };
 
-const useRightSide = ({ currentTab, page, sceneId, onTabChange }: Props) => {
+const useRightSide = ({ currentTab, page, sceneId }: Props) => {
   const t = useT();
-  const handleEditorNavigation = useEditorNavigation({ sceneId, onTabChange });
+  const handleEditorNavigation = useEditorNavigation({ sceneId });
 
   const rightSide = useMemo(() => {
     if (page === "editor") {

diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { Story } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
@@ -60,36 +60,45 @@ const PublicSettings: React.FC<Props> = ({
   onUpdateProjectAlias,
 }) => {
   const t = useT();
+  const [selectedTab, selectTab] = useState(currentStory ? currentStory.id : "map");
 
   const menu = useMemo(
     () => [
       {
         id: "map",
         title: t("Map"),
         linkTo: `/settings/project/${project.id}/public/`,
-        active: !currentStory,
+        active: selectedTab === "map",
       },
       ...stories.map(s => ({
         id: s.id,
         title: s.title,
         linkTo: `/settings/project/${project.id}/public/${s.id}`,
-        active: s.id === currentStory?.id,
+        active: selectedTab === s.id,
       })),
     ],
-    [stories, project.id, currentStory, t],
+    [stories, selectedTab, project.id, t],
   );
 
+  const handleTabChange = useCallback((tab: string) => selectTab(tab), []);
+
   return (
     <InnerPage wide>
       <InnerMenu>
         {menu.map(s => (
-          <MenuItem key={s.id} text={s.title} active={s.active} linkTo={s.linkTo} />
+          <MenuItem
+            key={s.id}
+            text={s.title}
+            active={s.active}
+            linkTo={s.linkTo}
+            onClick={() => handleTabChange(s.id)}
+          />
         ))}
       </InnerMenu>
       <SettingsWrapper>
         {project.isArchived ? (
           <ArchivedSettingNotice />
-        ) : currentStory ? (
+        ) : selectedTab === currentStory?.id ? (
           <PublicSettingsDetail
             key={currentStory.id}
             settingsItem={currentStory}

diff --git a/web/src/beta/features/PublishedVisualizer/hooks.ts b/web/src/beta/features/PublishedVisualizer/hooks.ts
@@ -110,12 +110,12 @@ export default (alias?: string) => {
       return {
         align: align ?? "start",
         padding: {
-          top: padding?.top ?? 6,
-          bottom: padding?.bottom ?? 6,
-          left: padding?.left ?? 6,
-          right: padding?.right ?? 6,
+          top: padding?.top || 6,
+          bottom: padding?.bottom || 6,
+          left: padding?.left || 6,
+          right: padding?.right || 6,
         },
-        gap: area?.gap ?? 6,
+        gap: area?.gap || 6,
         widgets: areaWidgets || [],
         background: area?.background as string | undefined,
         centered: area?.centered,

diff --git a/web/src/beta/hooks/navigationHooks.ts b/web/src/beta/hooks/navigationHooks.ts
@@ -3,22 +3,15 @@ import { useNavigate } from "react-router-dom";
 
 import { Tab } from "@reearth/beta/features/Navbar";
 
-export const useEditorNavigation = ({
-  sceneId,
-  onTabChange,
-}: {
-  sceneId?: string;
-  onTabChange?: () => void;
-}) => {
+export const useEditorNavigation = ({ sceneId }: { sceneId?: string }) => {
   const navigate = useNavigate();
 
   const handleNavigate = useCallback(
     (tab: Tab) => {
       if (!sceneId) return;
-      onTabChange?.();
       navigate(`/scene/${sceneId}/${tab}`);
     },
-    [sceneId, onTabChange, navigate],
+    [sceneId, navigate],
   );
 
   return sceneId ? handleNavigate : undefined;

diff --git a/web/src/beta/lib/core/StoryPanel/hooks.ts b/web/src/beta/lib/core/StoryPanel/hooks.ts
@@ -199,6 +199,11 @@ export default (
     };
   }, [currentPageId, selectedStory?.pages, visualizer, handleLayerReset]);
 
+  // Reset parent of core's current page on StoryPanel unmount
+  useEffect(() => {
+    return () => onCurrentPageChange?.();
+  }, [onCurrentPageChange]);
+
   return {
     pageInfo,
     selectedPageId,