feat: implement Slack notification state management with custom hook

apps/app/src/client/components/PageComment/CommentEditor.tsx

@@ -21,12 +21,11 @@ import { toastError } from '~/client/util/toastr';
 import { useCurrentUser } from '~/states/global';
 import { useCurrentPagePath } from '~/states/page';
 import { isSlackConfiguredAtom, useAcceptedUploadFileType } from '~/states/server-configurations';
+import { useIsSlackEnabled } from '~/states/ui/editor';
 import { useCommentEditorsDirtyMap } from '~/states/ui/unsaved-warning';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
 import { useSWRxPageComment } from '~/stores/comment';
-import {
-  useSWRxSlackChannels, useIsSlackEnabled, useEditorSettings,
-} from '~/stores/editor';
+import { useSWRxSlackChannels, useEditorSettings } from '~/stores/editor';
 import loggerFactory from '~/utils/logger';
 
 import { NotAvailableForGuest } from '../NotAvailableForGuest';
@@ -79,7 +78,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
   const currentUser = useCurrentUser();
   const currentPagePath = useCurrentPagePath();
   const { update: updateComment, post: postComment } = useSWRxPageComment(pageId);
-  const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
+  const [isSlackEnabled, setIsSlackEnabled] = useIsSlackEnabled();
   const acceptedUploadFileType = useAcceptedUploadFileType();
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
   const isSlackConfigured = useAtomValue(isSlackConfiguredAtom);
@@ -115,15 +114,15 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
   const slackChannelsDataString = slackChannelsData?.toString();
   const initializeSlackEnabled = useCallback(() => {
     setSlackChannels(slackChannelsDataString ?? '');
-    mutateIsSlackEnabled(false);
-  }, [mutateIsSlackEnabled, slackChannelsDataString]);
+    setIsSlackEnabled(false);
+  }, [setIsSlackEnabled, slackChannelsDataString]);
 
   useEffect(() => {
     initializeSlackEnabled();
   }, [initializeSlackEnabled]);
 
   const isSlackEnabledToggleHandler = (isSlackEnabled: boolean) => {
-    mutateIsSlackEnabled(isSlackEnabled, false);
+    setIsSlackEnabled(isSlackEnabled);
   };
 
   const slackChannelsChangedHandler = useCallback((slackChannels: string) => {

apps/app/src/client/components/PageEditor/EditorNavbarBottom/SavePageControls.tsx

@@ -20,8 +20,10 @@ import {
   isSlackConfiguredAtom,
 } from '~/states/server-configurations';
 import { useDeviceLargerThanMd } from '~/states/ui/device';
-import { useEditorMode, useSelectedGrant, useWaitingSaveProcessing } from '~/states/ui/editor';
-import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
+import {
+  useEditorMode, useSelectedGrant, useWaitingSaveProcessing, useIsSlackEnabled, EditorMode,
+} from '~/states/ui/editor';
+import { useSWRxSlackChannels } from '~/stores/editor';
 import loggerFactory from '~/utils/logger';
 
 import { NotAvailable } from '../../NotAvailable';
@@ -153,7 +155,7 @@ export const SavePageControls = (): JSX.Element | null => {
   const { editorMode } = useEditorMode();
   const currentPagePath = useCurrentPagePath();
   const isSlackConfigured = useAtomValue(isSlackConfiguredAtom);
-  const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
+  const [isSlackEnabled, setIsSlackEnabled] = useIsSlackEnabled();
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
   const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
 
@@ -163,16 +165,12 @@ export const SavePageControls = (): JSX.Element | null => {
   // DO NOT dependent on slackChannelsData directly: https://github.com/growilabs/growi/pull/7332
   const slackChannelsDataString = slackChannelsData?.toString();
   useEffect(() => {
-    if (editorMode === 'editor') {
+    if (editorMode === EditorMode.Editor) {
       setSlackChannels(slackChannelsDataString ?? '');
-      mutateIsSlackEnabled(false);
+      setIsSlackEnabled(false);
     }
-  }, [editorMode, mutateIsSlackEnabled, slackChannelsDataString]);
-
+  }, [editorMode, setIsSlackEnabled, slackChannelsDataString]);
 
-  const isSlackEnabledToggleHandler = (bool: boolean) => {
-    mutateIsSlackEnabled(bool, false);
-  };
 
   const slackChannelsChangedHandler = useCallback((slackChannels: string) => {
     setSlackChannels(slackChannels);
@@ -200,7 +198,7 @@ export const SavePageControls = (): JSX.Element | null => {
                     <SlackNotification
                       isSlackEnabled={isSlackEnabled}
                       slackChannels={slackChannels}
-                      onEnabledFlagChange={isSlackEnabledToggleHandler}
+                      onEnabledFlagChange={setIsSlackEnabled}
                       onChannelChange={slackChannelsChangedHandler}
                       id="idForEditorNavbarBottom"
                     />
@@ -252,7 +250,7 @@ export const SavePageControls = (): JSX.Element | null => {
                       <SlackNotification
                         isSlackEnabled={isSlackEnabled}
                         slackChannels={slackChannels}
-                        onEnabledFlagChange={isSlackEnabledToggleHandler}
+                        onEnabledFlagChange={setIsSlackEnabled}
                         onChannelChange={slackChannelsChangedHandler}
                         id="idForEditorNavbarBottom"
                       />

apps/app/src/states/ui/editor/index.ts

@@ -3,6 +3,7 @@
 export * from './current-indent-size';
 export * from './editing-markdown';
 export * from './editor-mode';
+export * from './is-slack-enabled';
 export * from './reserved-next-caret-line';
 export * from './selected-grant';
 export type { EditorMode as EditorModeType } from './types';

apps/app/src/states/ui/editor/is-slack-enabled.ts

@@ -0,0 +1,11 @@
+import { atom, useAtom } from 'jotai';
+
+/**
+ * Atom for managing Slack notification enabled state
+ */
+const isSlackEnabledAtom = atom<boolean>(false);
+
+/**
+ * Hook for Slack enabled state
+ */
+export const useIsSlackEnabled = () => useAtom(isSlackEnabledAtom);

apps/app/src/stores/editor.tsx

@@ -1,5 +1,5 @@
 import { type Nullable } from '@growi/core';
-import { withUtils, type SWRResponseWithUtils, useSWRStatic } from '@growi/core/dist/swr';
+import { withUtils, type SWRResponseWithUtils } from '@growi/core/dist/swr';
 import type { EditorSettings } from '@growi/editor';
 import useSWR, { type SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
@@ -66,14 +66,6 @@ export const useSWRxSlackChannels = (currentPagePath: Nullable<string>): SWRResp
   );
 };
 
-export const useIsSlackEnabled = (): SWRResponse<boolean, Error> => {
-  return useSWRStatic(
-    'isSlackEnabled',
-    undefined,
-    { fallbackData: false },
-  );
-};
-
 export type IPageTagsForEditorsOption = {
   sync: (tags?: string[]) => void;
 };