comment-notif-slack is react-component

resource/js/components/PageComment/CommentForm.js

@@ -12,6 +12,7 @@ import GrowiRenderer from '../../util/GrowiRenderer';
 
 import Editor from '../PageEditor/Editor';
 import CommentPreview from '../PageComment/CommentPreview';
+import SlackNotification from '../SlackNotification';
 
 /**
  *
@@ -34,8 +35,6 @@ export default class CommentForm extends React.Component {
     this.state = {
       comment: '',
       isMarkdown: true,
-      isNotification: false,
-      notifSlackChannel: '',
       html: '',
       key: 1,
       isUploadable,
@@ -45,10 +44,8 @@ export default class CommentForm extends React.Component {
 
     this.growiRenderer = new GrowiRenderer(this.props.crowi, this.props.crowiOriginRenderer, {mode: 'comment'});
 
-    this.init = this.init.bind(this);
     this.updateState = this.updateState.bind(this);
     this.updateStateCheckbox = this.updateStateCheckbox.bind(this);
-    this.updateChannel =this.updateChannel.bind(this);
     this.postComment = this.postComment.bind(this);
     this.renderHtml = this.renderHtml.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
@@ -56,36 +53,6 @@ export default class CommentForm extends React.Component {
     this.onUpload = this.onUpload.bind(this);
   }
 
-  componentWillMount() {
-    const pageId = this.props.pageId;
-
-    if (pageId) {
-      this.init();
-    }
-
-    this.retrieveData = this.retrieveData.bind(this);
-  }
-
-  init() {
-    if (!this.props.pageId) {
-      return ;
-    }
-    this.retrieveData();
-  }
-
-  /**
-   * Load data of comments and store them in state
-   */
-  retrieveData() {
-    // get data (desc order array)
-    this.props.crowi.apiGet('/pages.updatePost', {path: this.props.pagePath})
-    .then(res => {
-      if (res.ok) {
-        this.setState({notifSlackChannel: res.updatePost.join(',')});
-      }
-    });
-  }
-
   updateState(value) {
     this.setState({comment: value});
   }
@@ -103,10 +70,6 @@ export default class CommentForm extends React.Component {
     }
   }
 
-  updateChannel(value) {
-    this.setState({notifSlackChannel: value})
-  }
-
   handleSelect(key) {
     this.setState({ key });
     this.renderHtml(this.state.comment);
@@ -292,24 +255,7 @@ export default class CommentForm extends React.Component {
                   { this.state.errorMessage &&
                     <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>
                   }
-                  <div className="form-inline d-flex align-items-center" id="comment-form-setting">
-                    <span className="input-group input-group-sm input-group-slack extended-setting m-r-5">
-                      <label className="input-group-addon">
-                        <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18"/>
-                        <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18"/>
-                        <input className="comment-form-slack" type="checkbox" name="slack" value="1" onChange={this.updateStateCheckbox}/>
-                      </label>
-                      <input className="form-control" type="text" value={this.state.notifSlackChannel} placeholder="slack-channel-name"
-                        id="comment-form-slack-channel"
-                        data-toggle="popover"
-                        title="Slack通知"
-                        data-content="通知するにはチェックを入れてください。カンマ区切りで複数チャンネルに通知することができます。"
-                        data-trigger="focus"
-                        data-placement="top"
-                        onChange={e => this.updateChannel(e.target.value)}
-                      />
-                    </span>
-                  </div>
+                  <SlackNotification crowi={this.props.crowi} pageId={this.props.pageId} pagePath={this.props.pagePath}/>
                   <Button type="submit" value="Submit" bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
                     Comment
                   </Button>

resource/js/components/SlackNotification.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ *
+ * @author Yuki Takei <yuki@weseek.co.jp>
+ *
+ * @export
+ * @class SlackNotification
+ * @extends {React.Component}
+ */
+
+export default class SlackNotification extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isNotification: false,
+      notifSlackChannel: '',
+    };
+
+    this.init = this.init.bind(this);
+    this.updateState = this.updateState.bind(this);
+    this.updateStateCheckbox = this.updateStateCheckbox.bind(this);
+  }
+
+  componentWillMount() {
+    const pageId = this.props.pageId;
+
+    if (pageId) {
+      this.init();
+    }
+
+    this.retrieveData = this.retrieveData.bind(this);
+  }
+
+  init() {
+    if (!this.props.pageId) {
+      return ;
+    }
+    this.retrieveData();
+  }
+
+  /**
+   * Load data of comments and store them in state
+   */
+  retrieveData() {
+    // get data (desc order array)
+    this.props.crowi.apiGet('/pages.updatePost', {path: this.props.pagePath})
+    .then(res => {
+      if (res.ok) {
+        this.setState({notifSlackChannel: res.updatePost.join(',')});
+      }
+    });
+  }
+
+  updateState(value) {
+    this.setState({notifSlackChannel: value})
+  }
+
+  updateStateCheckbox(event) {
+    const value = event.target.checked;
+    this.setState({isNotification: value})
+  }
+
+  render() {
+    return (
+      <div className="form-inline d-flex align-items-center" id="comment-form-setting">
+        <span className="input-group input-group-sm input-group-slack extended-setting m-r-5">
+          <label className="input-group-addon">
+            <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18"/>
+            <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18"/>
+            <input className="comment-form-slack" type="checkbox" name="slack" value="1" onChange={this.updateStateCheckbox}/>
+          </label>
+          <input className="form-control" type="text" value={this.state.notifSlackChannel} placeholder="slack-channel-name"
+            id="comment-form-slack-channel"
+            data-toggle="popover"
+            title="Slack通知"
+            data-content="通知するにはチェックを入れてください。カンマ区切りで複数チャンネルに通知することができます。"
+            data-trigger="focus"
+            data-placement="top"
+            onChange={e => this.updateState(e.target.value)}
+            />
+        </span>
+      </div>
+    );
+  }
+}
+
+
+
+SlackNotification.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  pageId: PropTypes.string,
+  pagePath: PropTypes.string,
+};