From c8ad8965b8f27f846efa2c3cc34c8376d39f4351 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 1 Dec 2023 17:54:39 +0900 Subject: [PATCH] chore(web): fixing a few bugs (#849) --- web/src/beta/features/Editor/index.tsx | 6 ------ web/src/beta/features/Navbar/index.tsx | 3 --- .../beta/features/Navbar/useRightSection.tsx | 5 ++--- .../innerPages/PublicSettings/index.tsx | 21 +++++++++++++------ .../features/PublishedVisualizer/hooks.ts | 10 ++++----- web/src/beta/hooks/navigationHooks.ts | 11 ++-------- web/src/beta/lib/core/StoryPanel/hooks.ts | 5 +++++ 7 files changed, 29 insertions(+), 32 deletions(-) diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx index 98c507a183..c50d5fbeb0 100644 --- a/web/src/beta/features/Editor/index.tsx +++ b/web/src/beta/features/Editor/index.tsx @@ -179,11 +179,6 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { handleWidgetEditorToggle, }); - const handleTabChange = useCallback( - () => storyPanelRef.current?.handleCurrentPageChange(undefined), - [storyPanelRef], - ); - return ( @@ -192,7 +187,6 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { projectId={projectId} workspaceId={workspaceId} currentTab={tab} - onTabChange={handleTabChange} /> {leftPanel && ( diff --git a/web/src/beta/features/Navbar/index.tsx b/web/src/beta/features/Navbar/index.tsx index ab1e10a534..b6f91322a5 100644 --- 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 = ({ currentTab = "map", isDashboard = false, page = "editor", - onTabChange, }) => { const { currentProject, @@ -50,7 +48,6 @@ const Navbar: React.FC = ({ currentTab, sceneId, page, - onTabChange, }); return ( diff --git a/web/src/beta/features/Navbar/useRightSection.tsx b/web/src/beta/features/Navbar/useRightSection.tsx index 8de3bce1ea..38e67feb3d 100644 --- 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 index 7592f461b4..ef656edc6e 100644 --- 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,6 +60,7 @@ const PublicSettings: React.FC = ({ onUpdateProjectAlias, }) => { const t = useT(); + const [selectedTab, selectTab] = useState(currentStory ? currentStory.id : "map"); const menu = useMemo( () => [ @@ -67,29 +68,37 @@ const PublicSettings: React.FC = ({ 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 ( {menu.map(s => ( - + handleTabChange(s.id)} + /> ))} {project.isArchived ? ( - ) : currentStory ? ( + ) : selectedTab === currentStory?.id ? ( { 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 index 7cd1a1950b..2dccd9a0b8 100644 --- 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 index 04cb5a895f..7f4fdd576b 100644 --- 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,