Merge pull request #6511 from weseek/feat/render-page-accessories-modal

feat: Render page accessories modal

packages/app/src/components/Layout/BasicLayout.tsx

@@ -18,6 +18,7 @@ const PageDuplicateModal = dynamic(() => import('../PageDuplicateModal'), { ssr:
 const PageDeleteModal = dynamic(() => import('../PageDeleteModal'), { ssr: false });
 const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false });
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
+const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal'), { ssr: false });
 
 
 type Props = {
@@ -54,6 +55,7 @@ export const BasicLayout = ({
       <PageDeleteModal />
       <PageRenameModal />
       <PagePresentationModal />
+      <PageAccessoriesModal />
       {/* <HotkeysManager /> */}
 
       <ShortcutsModal />

packages/app/src/components/PageAccessoriesModal.tsx

@@ -6,8 +6,7 @@ import {
 } from 'reactstrap';
 
 
-import AppContainer from '~/client/services/AppContainer';
-import { useIsGuestUser, useIsSharedUser } from '~/stores/context';
+import { useDisableLinkSharing, useIsGuestUser, useIsSharedUser } from '~/stores/context';
 import { usePageAccessoriesModal, PageAccessoriesModalContents } from '~/stores/modal';
 
 import { CustomNavTab } from './CustomNavigation/CustomNav';
@@ -19,21 +18,10 @@ import ShareLinkIcon from './Icons/ShareLinkIcon';
 import PageAttachment from './PageAttachment';
 import PageHistory from './PageHistory';
 import ShareLink from './ShareLink/ShareLink';
-import { withUnstatedContainers } from './UnstatedUtils';
 
 import styles from './PageAccessoriesModal.module.scss';
 
-type Props = {
-  appContainer: AppContainer,
-  isLinkSharingDisabled: boolean,
-}
-
-const PageAccessoriesModal = (props: Props): JSX.Element => {
-  const {
-    appContainer,
-  } = props;
-
-  const isLinkSharingDisabled = appContainer.config.disableLinkSharing;
+const PageAccessoriesModal = (): JSX.Element => {
 
   const { t } = useTranslation();
 
@@ -42,6 +30,7 @@ const PageAccessoriesModal = (props: Props): JSX.Element => {
 
   const { data: isSharedUser } = useIsSharedUser();
   const { data: isGuestUser } = useIsGuestUser();
+  const { data: isLinkSharingDisabled } = useDisableLinkSharing();
 
   const { data: status, mutate, close } = usePageAccessoriesModal();
 
@@ -59,29 +48,45 @@ const PageAccessoriesModal = (props: Props): JSX.Element => {
   }, [mutate, status]);
 
   const navTabMapping = useMemo(() => {
+    const isOpened = status == null ? false : status.isOpened;
     return {
       [PageAccessoriesModalContents.PageHistory]: {
         Icon: HistoryIcon,
-        Content: () => <PageHistory />,
+        Content: () => {
+          if (!isOpened) {
+            return <></>;
+          }
+          return <PageHistory />;
+        },
         i18n: t('History'),
         index: 0,
         isLinkEnabled: () => !isGuestUser && !isSharedUser,
       },
       [PageAccessoriesModalContents.Attachment]: {
         Icon: AttachmentIcon,
-        Content: () => <PageAttachment />,
+        Content: () => {
+          if (!isOpened) {
+            return <></>;
+          }
+          return <PageAttachment />;
+        },
         i18n: t('attachment_data'),
         index: 1,
       },
       [PageAccessoriesModalContents.ShareLink]: {
         Icon: ShareLinkIcon,
-        Content: () => <ShareLink />,
+        Content: () => {
+          if (!isOpened) {
+            return <></>;
+          }
+          return <ShareLink />;
+        },
         i18n: t('share_links.share_link_management'),
         index: 2,
         isLinkEnabled: () => !isGuestUser && !isSharedUser && !isLinkSharingDisabled,
       },
     };
-  }, [t, isGuestUser, isSharedUser, isLinkSharingDisabled]);
+  }, [status, t, isGuestUser, isSharedUser, isLinkSharingDisabled]);
 
   const buttons = useMemo(() => (
     <div className="d-flex flex-nowrap">
@@ -128,9 +133,4 @@ const PageAccessoriesModal = (props: Props): JSX.Element => {
   );
 };
 
-/**
- * Wrapper component for using unstated
- */
-const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, [AppContainer]);
-
-export default PageAccessoriesModalWrapper;
+export default PageAccessoriesModal;