move the alert for link sharing disabled to ForbiddenPage

packages/app/src/client/app.jsx

@@ -101,7 +101,7 @@ Object.assign(componentMappings, {
 
   'not-found-page': <NotFoundPage />,
 
-  'forbidden-page': <ForbiddenPage />,
+  'forbidden-page': <ForbiddenPage isSharePage={appContainer.config.disableLinkSharing} />,
 
   'page-timeline': <PageTimeline />,
 

packages/app/src/components/ForbiddenPage.tsx

@@ -6,7 +6,11 @@ import CustomNavAndContents from './CustomNavigation/CustomNavAndContents';
 import PageList from './PageList';
 
 
-const ForbiddenPage = (): JSX.Element => {
+type Props = {
+  isSharePage?: boolean,
+}
+
+const ForbiddenPage = React.memo((props: Props): JSX.Element => {
   const { t } = useTranslation();
 
   const navTabMapping = useMemo(() => {
@@ -31,22 +35,23 @@ const ForbiddenPage = (): JSX.Element => {
         </div>
       </div>
 
-
       <div className="row row-alerts d-edit-none">
         <div className="col-sm-12">
           <p className="alert alert-primary py-3 px-4">
             <i className="icon-fw icon-lock" aria-hidden="true" />
-            {t('Browsing of this page is restricted')}
+            { props.isSharePage ? t('custom_navigation.link_sharing_is_disabled') : t('Browsing of this page is restricted')}
           </p>
         </div>
       </div>
 
-      <div className="mt-5">
-        <CustomNavAndContents navTabMapping={navTabMapping} />
-      </div>
+      { !props.isSharePage && (
+        <div className="mt-5">
+          <CustomNavAndContents navTabMapping={navTabMapping} />
+        </div>
+      ) }
 
     </>
   );
-};
+});
 
 export default ForbiddenPage;

packages/app/src/components/PageList.jsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import Page from './PageList/Page';
 import { withUnstatedContainers } from './UnstatedUtils';
 
-import AppContainer from '~/client/services/AppContainer';
 import PageContainer from '~/client/services/PageContainer';
 
 import { useSWRxPageList } from '~/stores/page';
@@ -14,7 +13,7 @@ import PaginationWrapper from './PaginationWrapper';
 
 
 const PageList = (props) => {
-  const { appContainer, pageContainer, t } = props;
+  const { t } = useTranslation();
   const { path } = pageContainer.state;
 
   const [activePage, setActivePage] = useState(1);
@@ -53,19 +52,10 @@ const PageList = (props) => {
   if (pageList.length === 0) {
     return (
       <div className="mt-2">
-        {/* eslint-disable-next-line react/no-danger */}
         <p>{t('custom_navigation.no_page_list')}</p>
       </div>
     );
   }
-  if (appContainer.config.disableLinkSharing) {
-    return (
-      <div className="mt-2">
-        {/* eslint-disable-next-line react/no-danger */}
-        <p>{t('custom_navigation.link_sharing_is_disabled')}</p>
-      </div>
-    );
-  }
 
   return (
     <div className="page-list">
@@ -83,20 +73,11 @@ const PageList = (props) => {
   );
 };
 
-const PageListWrapper = withUnstatedContainers(PageList, [AppContainer, PageContainer]);
-
-const PageListTranslation = withTranslation()(PageListWrapper);
-
-
 PageList.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer),
-  pageContainer: PropTypes.instanceOf(PageContainer),
-
   liClasses: PropTypes.arrayOf(PropTypes.string),
 };
 PageList.defaultProps = {
   liClasses: ['mb-3'],
 };
 
-export default PageListTranslation;
+export default PageList;