improve initializing contents of PageAccessoriesModal

packages/app/src/components/CustomNavigation/CustomNav.jsx

@@ -78,8 +78,8 @@ export const CustomNavDropdown = (props) => {
 };
 
 CustomNavDropdown.propTypes = {
-  activeTab: PropTypes.string.isRequired,
   navTabMapping: PropTypes.object.isRequired,
+  activeTab: PropTypes.string,
   onNavSelected: PropTypes.func,
 };
 
@@ -119,7 +119,7 @@ export const CustomNavTab = (props) => {
   }
 
   useEffect(() => {
-    if (activeTab === '') {
+    if (activeTab == null || activeTab === '') {
       return;
     }
 

packages/app/src/components/CustomNavigation/CustomTabContent.tsx

@@ -10,8 +10,8 @@ import { LazyRenderer } from '../Common/LazyRenderer';
 
 
 type Props = {
-  activeTab: string,
   navTabMapping: ICustomNavTabMappings,
+  activeTab?: string,
   additionalClassNames?: string[],
 }
 

packages/app/src/components/PageAccessoriesModal.tsx

@@ -26,7 +26,7 @@ const PageAccessoriesModal = (): JSX.Element => {
 
   const { t } = useTranslation();
 
-  const [activeTab, setActiveTab] = useState<PageAccessoriesModalContents>(PageAccessoriesModalContents.PageHistory);
+  const [activeTab, setActiveTab] = useState<PageAccessoriesModalContents>();
   const [sourceRevisionId, setSourceRevisionId] = useState<string>();
   const [targetRevisionId, setTargetRevisionId] = useState<string>();
 
@@ -38,18 +38,15 @@ const PageAccessoriesModal = (): JSX.Element => {
 
   const { data: status, mutate, close } = usePageAccessoriesModal();
 
-  // add event handler when opened
+  // activate tab when open
   useEffect(() => {
-    if (status == null || status.onOpened != null) {
-      return;
+    if (status == null) return;
+
+    const { isOpened, activatedContents } = status;
+    if (isOpened && activatedContents != null) {
+      setActiveTab(activatedContents);
     }
-    mutate({
-      ...status,
-      onOpened: (activatedContents) => {
-        setActiveTab(activatedContents);
-      },
-    }, false);
-  }, [mutate, status]);
+  }, [status]);
 
   // Set sourceRevisionId and targetRevisionId as state with valid object id string
   useEffect(() => {
@@ -74,14 +71,10 @@ const PageAccessoriesModal = (): JSX.Element => {
   }, [mutate]);
 
   const navTabMapping = useMemo(() => {
-    const isOpened = status == null ? false : status.isOpened;
     return {
       [PageAccessoriesModalContents.PageHistory]: {
         Icon: HistoryIcon,
         Content: () => {
-          if (!isOpened) {
-            return <></>;
-          }
           return <PageHistory onClose={close} sourceRevisionId={sourceRevisionId} targetRevisionId={targetRevisionId}/>;
         },
         i18n: t('History'),
@@ -91,9 +84,6 @@ const PageAccessoriesModal = (): JSX.Element => {
       [PageAccessoriesModalContents.Attachment]: {
         Icon: AttachmentIcon,
         Content: () => {
-          if (!isOpened) {
-            return <></>;
-          }
           return <PageAttachment />;
         },
         i18n: t('attachment_data'),
@@ -102,9 +92,6 @@ const PageAccessoriesModal = (): JSX.Element => {
       [PageAccessoriesModalContents.ShareLink]: {
         Icon: ShareLinkIcon,
         Content: () => {
-          if (!isOpened) {
-            return <></>;
-          }
           return <ShareLink />;
         },
         i18n: t('share_links.share_link_management'),
@@ -112,7 +99,7 @@ const PageAccessoriesModal = (): JSX.Element => {
         isLinkEnabled: () => !isGuestUser && !isSharedUser && !isLinkSharingDisabled,
       },
     };
-  }, [status, t, close, sourceRevisionId, targetRevisionId, isGuestUser, isSharedUser, isLinkSharingDisabled]);
+  }, [t, close, sourceRevisionId, targetRevisionId, isGuestUser, isSharedUser, isLinkSharingDisabled]);
 
   const buttons = useMemo(() => (
     <div className="d-flex flex-nowrap">

packages/app/src/stores/modal.tsx

@@ -345,7 +345,7 @@ export type PageAccessoriesModalContents = typeof PageAccessoriesModalContents[k
 
 type PageAccessoriesModalStatus = {
   isOpened: boolean,
-  onOpened?: (initialActivatedContents: PageAccessoriesModalContents) => void,
+  activatedContents?: PageAccessoriesModalContents,
 }
 
 type PageAccessoriesModalUtils = {
@@ -364,11 +364,10 @@ export const usePageAccessoriesModal = (): SWRResponse<PageAccessoriesModalStatu
       if (swrResponse.data == null) {
         return;
       }
-      swrResponse.mutate({ isOpened: true });
-
-      if (swrResponse.data.onOpened != null) {
-        swrResponse.data.onOpened(activatedContents);
-      }
+      swrResponse.mutate({
+        isOpened: true,
+        activatedContents,
+      });
     },
     close: () => {
       if (swrResponse.data == null) {