do not pass isSlackEnabled props and

use customhook inside of each component

packages/app/src/client/services/ContextExtractor.tsx

@@ -16,7 +16,7 @@ import {
   useIsDeleted, useIsNotCreatable, useIsTrashPage, useIsUserPage, useLastUpdateUsername,
   useCurrentPageId, usePageIdOnHackmd, usePageUser, useCurrentPagePath, useRevisionCreatedAt, useRevisionId, useRevisionIdHackmdSynced,
   useShareLinkId, useShareLinksNumber, useTemplateTagData, useCurrentUpdatedAt, useCreator, useRevisionAuthor, useCurrentUser, useTargetAndAncestors,
-  useSlackChannels, useNotFoundTargetPathOrId, useIsSearchPage, useIsForbidden, useIsIdenticalPath,
+  useNotFoundTargetPathOrId, useIsSearchPage, useIsForbidden, useIsIdenticalPath,
   useIsAclEnabled, useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsEnabledAttachTitleHeader, useIsNotFoundPermalink,
   useDefaultIndentSize, useIsIndentSizeForced,
 } from '../../stores/context';
@@ -156,7 +156,6 @@ const ContextExtractorOnce: FC = () => {
   useIsDeviceSmallerThanMd();
 
   // Editor
-  useSlackChannels(slackChannels);
   useSelectedGrant(grant);
   useSelectedGrantGroupId(grantGroupId);
   useSelectedGrantGroupName(grantGroupName);

packages/app/src/components/Page.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -9,9 +9,9 @@ import EditorContainer from '~/client/services/EditorContainer';
 import PageContainer from '~/client/services/PageContainer';
 import { getOptionsToSave } from '~/client/util/editor';
 import {
-  useCurrentPagePath, useIsGuestUser, useSlackChannels,
+  useCurrentPagePath, useIsGuestUser,
 } from '~/stores/context';
-// import { useIsSlackEnabled } from '~/stores/editor';
+import { useSWRxSlackChannels, useSWRxIsSlackEnabled } from '~/stores/editor';
 import {
   useEditorMode, useIsMobile, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
@@ -191,12 +191,21 @@ const PageWrapper = (props) => {
   const { data: editorMode } = useEditorMode();
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isMobile } = useIsMobile();
-  // const { data: isSlackEnabled } = useIsSlackEnabled();
-  const { data: slackChannels } = useSlackChannels();
+  const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
+  const isSlackEnabledByDefault = (slackChannelsData != null && slackChannelsData.length > 0) || false;
+  const { data: isSlackEnabled } = useSWRxIsSlackEnabled(isSlackEnabledByDefault);
   const { data: grant } = useSelectedGrant();
   const { data: grantGroupId } = useSelectedGrantGroupId();
   const { data: grantGroupName } = useSelectedGrantGroupName();
 
+  const [slackChannelsStr, setSlackChannelsStr] = useState('');
+
+  useEffect(() => {
+    if (slackChannelsData != null) {
+      setSlackChannelsStr(slackChannelsData.toString());
+    }
+  }, [slackChannelsData]);
+
   if (currentPagePath == null || editorMode == null || isGuestUser == null) {
     return null;
   }
@@ -209,8 +218,8 @@ const PageWrapper = (props) => {
       editorMode={editorMode}
       isGuestUser={isGuestUser}
       isMobile={isMobile}
-      // isSlackEnabled={isSlackEnabled}
-      slackChannels={slackChannels}
+      isSlackEnabled={isSlackEnabled}
+      slackChannels={slackChannelsStr}
       grant={grant}
       grantGroupId={grantGroupId}
       grantGroupName={grantGroupName}

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -9,7 +9,6 @@ import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
 import {
   useCurrentPagePath, useIsSharedUser, useIsEditable, useCurrentPageId, useIsUserPage, usePageUser,
 } from '~/stores/context';
-import { useSWRxSlackChannels, useSWRxIsSlackEnabled } from '~/stores/editor';
 import { useDescendantsPageListModal } from '~/stores/modal';
 import { useSWRxPageByPath } from '~/stores/page';
 import { EditorMode, useEditorMode } from '~/stores/ui';
@@ -46,10 +45,6 @@ const DisplaySwitcher = (): JSX.Element => {
   const { data: pageUser } = usePageUser();
   const { data: currentPage } = useSWRxPageByPath(currentPagePath);
 
-  const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
-  const isSlackEnabledByDefault = (slackChannelsData != null && slackChannelsData.length > 0) || false;
-  const { data: isSlackEnabled } = useSWRxIsSlackEnabled(isSlackEnabledByDefault);
-
   const { data: editorMode } = useEditorMode();
 
   const { open: openDescendantPageListModal } = useDescendantsPageListModal();
@@ -113,7 +108,7 @@ const DisplaySwitcher = (): JSX.Element => {
 
             <div className="flex-grow-1 flex-basis-0 mw-0">
               { isUserPage && <UserInfo pageUser={pageUser} />}
-              <Page isSlackEnabled={isSlackEnabled} />
+              <Page />
             </div>
 
           </div>
@@ -121,14 +116,14 @@ const DisplaySwitcher = (): JSX.Element => {
         { isEditable && (
           <TabPane tabId={EditorMode.Editor}>
             <div data-testid="page-editor" id="page-editor">
-              <Editor isSlackEnabled={isSlackEnabled} />
+              <Editor />
             </div>
           </TabPane>
         ) }
         { isEditable && (
           <TabPane tabId={EditorMode.HackMD}>
             <div id="page-editor-with-hackmd">
-              <PageEditorByHackmd isSlackEnabled={isSlackEnabled} />
+              <PageEditorByHackmd />
             </div>
           </TabPane>
         ) }

packages/app/src/components/PageEditor.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { envUtils } from '@growi/core';
 import detectIndent from 'detect-indent';
@@ -10,8 +10,12 @@ import EditorContainer from '~/client/services/EditorContainer';
 import PageContainer from '~/client/services/PageContainer';
 import { apiGet, apiPost } from '~/client/util/apiv1-client';
 import { getOptionsToSave } from '~/client/util/editor';
-import { useIsEditable, useIsIndentSizeForced, useSlackChannels } from '~/stores/context';
-import { useCurrentIndentSize, useIsSlackEnabled, useIsTextlintEnabled } from '~/stores/editor';
+import {
+  useIsEditable, useIsIndentSizeForced, useCurrentPagePath,
+} from '~/stores/context';
+import {
+  useCurrentIndentSize, useSWRxSlackChannels, useSWRxIsSlackEnabled, useIsTextlintEnabled,
+} from '~/stores/editor';
 import {
   useEditorMode, useIsMobile, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
@@ -404,7 +408,10 @@ const PageEditorWrapper = (props) => {
   const { data: editorMode } = useEditorMode();
   const { data: isMobile } = useIsMobile();
   // const { data: isSlackEnabled } = useIsSlackEnabled();
-  const { data: slackChannels } = useSlackChannels();
+  const { data: currentPagePath } = useCurrentPagePath();
+  const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
+  const isSlackEnabledByDefault = (slackChannelsData != null && slackChannelsData.length > 0) || false;
+  const { data: isSlackEnabled } = useSWRxIsSlackEnabled(isSlackEnabledByDefault);
   const { data: grant, mutate: mutateGrant } = useSelectedGrant();
   const { data: grantGroupId } = useSelectedGrantGroupId();
   const { data: grantGroupName } = useSelectedGrantGroupName();
@@ -412,6 +419,14 @@ const PageEditorWrapper = (props) => {
   const { data: isIndentSizeForced } = useIsIndentSizeForced();
   const { data: indentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
 
+  const [slackChannelsStr, setSlackChannelsStr] = useState('');
+
+  useEffect(() => {
+    if (slackChannelsData != null) {
+      setSlackChannelsStr(slackChannelsData.toString());
+    }
+  }, [slackChannelsData]);
+
   if (isEditable == null || editorMode == null) {
     return null;
   }
@@ -422,8 +437,8 @@ const PageEditorWrapper = (props) => {
       isEditable={isEditable}
       editorMode={editorMode}
       isMobile={isMobile}
-      // isSlackEnabled={isSlackEnabled}
-      slackChannels={slackChannels}
+      isSlackEnabled={isSlackEnabled}
+      slackChannels={slackChannelsStr}
       grant={grant}
       grantGroupId={grantGroupId}
       grantGroupName={grantGroupName}

packages/app/src/components/PageEditorByHackmd.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
@@ -9,8 +9,8 @@ import EditorContainer from '~/client/services/EditorContainer';
 import PageContainer from '~/client/services/PageContainer';
 import { apiPost } from '~/client/util/apiv1-client';
 import { getOptionsToSave } from '~/client/util/editor';
-import { useSlackChannels } from '~/stores/context';
-// import { useIsSlackEnabled } from '~/stores/editor';
+import { useCurrentPagePath } from '~/stores/context';
+import { useSWRxSlackChannels, useSWRxIsSlackEnabled } from '~/stores/editor';
 import {
   useEditorMode, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
@@ -431,12 +431,22 @@ const PageEditorByHackmdHOCWrapper = withUnstatedContainers(PageEditorByHackmd,
 
 const PageEditorByHackmdWrapper = (props) => {
   const { data: editorMode } = useEditorMode();
-  // const { data: isSlackEnabled } = useIsSlackEnabled();
-  const { data: slackChannels } = useSlackChannels();
+  const { data: currentPagePath } = useCurrentPagePath();
+  const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
+  const isSlackEnabledByDefault = (slackChannelsData != null && slackChannelsData.length > 0) || false;
+  const { data: isSlackEnabled } = useSWRxIsSlackEnabled(isSlackEnabledByDefault);
   const { data: grant } = useSelectedGrant();
   const { data: grantGroupId } = useSelectedGrantGroupId();
   const { data: grantGroupName } = useSelectedGrantGroupName();
 
+  const [slackChannelsStr, setSlackChannelsStr] = useState('');
+
+  useEffect(() => {
+    if (slackChannelsData != null) {
+      setSlackChannelsStr(slackChannelsData.toString());
+    }
+  }, [slackChannelsData]);
+
   if (editorMode == null) {
     return null;
   }
@@ -445,8 +455,8 @@ const PageEditorByHackmdWrapper = (props) => {
     <PageEditorByHackmdHOCWrapper
       {...props}
       editorMode={editorMode}
-      // isSlackEnabled={isSlackEnabled}
-      slackChannels={slackChannels}
+      isSlackEnabled={isSlackEnabled}
+      slackChannels={slackChannelsStr}
       grant={grant}
       grantGroupId={grantGroupId}
       grantGroupName={grantGroupName}

packages/app/src/stores/context.tsx

@@ -120,10 +120,6 @@ export const useRevisionAuthor = (initialData?: Nullable<any>): SWRResponse<Null
   return useStaticSWR<Nullable<any>, Error>('revisionAuthor', initialData);
 };
 
-export const useSlackChannels = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {
-  return useStaticSWR<Nullable<any>, Error>('slackChannels', initialData);
-};
-
 export const useIsSearchPage = (initialData?: Nullable<any>) : SWRResponse<Nullable<any>, Error> => {
   return useStaticSWR<Nullable<any>, Error>('isSearchPage', initialData);
 };