need to update slackChannels componentDidUpdate

packages/app/src/client/services/CommentContainer.js

@@ -32,8 +32,8 @@ export default class CommentContainer extends Container {
       comments: [],
 
       // settings shared among all of CommentEditor
-      isSlackEnabled: false,
-      slackChannels: mainContent.getAttribute('data-slack-channels') || '',
+      // isSlackEnabled: false,
+      // slackChannels: mainContent.getAttribute('data-slack-channels') || '',
     };
 
     this.retrieveComments = this.retrieveComments.bind(this);

packages/app/src/components/PageComment/CommentEditor.jsx

@@ -13,7 +13,7 @@ import CommentContainer from '~/client/services/CommentContainer';
 import EditorContainer from '~/client/services/EditorContainer';
 import PageContainer from '~/client/services/PageContainer';
 import GrowiRenderer from '~/client/util/GrowiRenderer';
-import { useCurrentUser } from '~/stores/context';
+import { useCurrentUser } from '~/stores/context'; import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
 import { useIsMobile } from '~/stores/ui';
 
 import { CustomNavTab } from '../CustomNavigation/CustomNav';
@@ -54,6 +54,8 @@ class CommentEditor extends React.Component {
     const isUploadable = config.upload.image || config.upload.file;
     const isUploadableFile = config.upload.file;
 
+    console.log('this.props', this.props);
+
     this.state = {
       isReadyToUse: !this.props.isForNewComment,
       comment: this.props.commentBody || '',
@@ -64,6 +66,7 @@ class CommentEditor extends React.Component {
       isUploadableFile,
       errorMessage: undefined,
       isSlackConfigured: config.isSlackConfigured,
+      slackChannels: this.props.slackChannels,
     };
 
     this.updateState = this.updateState.bind(this);
@@ -77,8 +80,14 @@ class CommentEditor extends React.Component {
 
     this.renderHtml = this.renderHtml.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
-    this.onSlackEnabledFlagChange = this.onSlackEnabledFlagChange.bind(this);
+    // this.onSlackEnabledFlagChange = this.onSlackEnabledFlagChange.bind(this);
     this.onSlackChannelsChange = this.onSlackChannelsChange.bind(this);
+    this.fetchSlackChannels = this.fetchSlackChannels.bind(this);
+  }
+
+  fetchSlackChannels(slackChannels) {
+    console.log('fetchSlackChannels', slackChannels);
+    this.setState({ slackChannels });
   }
 
   updateState(value) {
@@ -97,12 +106,24 @@ class CommentEditor extends React.Component {
     this.renderHtml(this.state.comment);
   }
 
-  onSlackEnabledFlagChange(isSlackEnabled) {
-    this.props.commentContainer.setState({ isSlackEnabled });
+  componentDidUpdate(prevProps) {
+    console.log('componentDidUpdate', prevProps);
+    if (this.props.slackChannels !== prevProps.slackChannels) {
+      console.log('aaaa_prevProps.slackChannels', this.props.slackChannels);
+      this.fetchSlackChannels(prevProps.slackChannels);
+    }
+    // eslint-disable-next-line react/no-did-update-set-state
+    // this.setState({ slackChannels: this.props.slackChannels });
   }
 
+  // onSlackEnabledFlagChange(isSlackEnabled) {
+  //   // this.props.commentContainer.setState({ isSlackEnabled });
+  //   this.props.commentContainer.setState({ isSlackEnabled });
+  // }
+
   onSlackChannelsChange(slackChannels) {
-    this.props.commentContainer.setState({ slackChannels });
+    // this.props.commentContainer.setState({ slackChannels });
+    this.setState({ slackChannels });
   }
 
   initializeEditor() {
@@ -165,8 +186,10 @@ class CommentEditor extends React.Component {
           this.state.comment,
           this.state.isMarkdown,
           replyTo,
-          commentContainer.state.isSlackEnabled,
-          commentContainer.state.slackChannels,
+          // commentContainer.state.isSlackEnabled,
+          // commentContainer.state.slackChannels,
+          this.props.isSlackEnabled,
+          this.state.slackChannels,
         );
       }
       this.initializeEditor();
@@ -358,9 +381,12 @@ class CommentEditor extends React.Component {
               && (
                 <div className="form-inline align-self-center mr-md-2">
                   <SlackNotification
-                    isSlackEnabled={commentContainer.state.isSlackEnabled}
-                    slackChannels={commentContainer.state.slackChannels}
-                    onEnabledFlagChange={this.onSlackEnabledFlagChange}
+                    // isSlackEnabled={commentContainer.state.isSlackEnabled}
+                    isSlackEnabled={this.props.isSlackEnabled}
+                    // slackChannels={commentContainer.state.slackChannels}
+                    slackChannels={this.state.slackChannels}
+                    // onEnabledFlagChange={this.onSlackEnabledFlagChange}
+                    onEnabledFlagChange={this.props.onSlackEnabledFlagChange}
                     onChannelChange={this.onSlackChannelsChange}
                     id="idForComment"
                   />
@@ -416,6 +442,8 @@ CommentEditor.propTypes = {
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
   commentContainer: PropTypes.instanceOf(CommentContainer).isRequired,
 
+  slackChannels: PropTypes.array.isRequired,
+  isSlackEnabled: PropTypes.bool.isRequired,
   growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
   currentUser: PropTypes.instanceOf(Object),
   isMobile: PropTypes.bool,
@@ -426,15 +454,34 @@ CommentEditor.propTypes = {
   commentCreator: PropTypes.string,
   onCancelButtonClicked: PropTypes.func,
   onCommentButtonClicked: PropTypes.func,
+  onSlackEnabledFlagChange: PropTypes.func,
 };
 
 const CommentEditorWrapper = (props) => {
   const { data: isMobile } = useIsMobile();
   const { data: currentUser } = useCurrentUser();
+  const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
+  const { data: slackChannelsData } = useSWRxSlackChannels();
+
+  console.log('slackChannelsData', slackChannelsData);
+
+
+  const onSlackEnabledFlagChange = (isSlackEnabled) => {
+    // this.props.commentContainer.setState({ isSlackEnabled });
+    mutateIsSlackEnabled(isSlackEnabled, false);
+  };
+
+  // const onSlackChannelsChange = (slackChannels) => {
+  //   this.props.commentContainer.setState({ slackChannels });
+  // };
+
 
   return (
     <CommentEditorHOCWrapper
       {...props}
+      onSlackEnabledFlagChange={onSlackEnabledFlagChange}
+      slackChannels={slackChannelsData.toString()}
+      isSlackEnabled={isSlackEnabled}
       currentUser={currentUser}
       isMobile={isMobile}
     />

packages/app/src/stores/editor.tsx

@@ -90,6 +90,7 @@ export const useIsSlackEnabledBydefault = (): SWRResponse<boolean, Error> => {
   return useSWR(
     ['isSlackEnabledByDefault', isSlackEnabledByDefault],
     (key: string, isSlackEnabledByDefault: boolean) => isSlackEnabledByDefault,
+    { fallbackData: false },
   );
 };