Merge pull request #979 from weseek/feat/thread_comments_frontend

Feat/thread comments frontend

src/client/js/app.js

@@ -114,7 +114,7 @@ const crowiRenderer = new GrowiRenderer(crowi, null, {
 window.crowiRenderer = crowiRenderer;
 
 // create unstated container instance
-const commentContainer = new CommentContainer(crowi, pageId, pageRevisionId);
+const commentContainer = new CommentContainer(crowi, pageId, pagePath, pageRevisionId);
 
 // FIXME
 const isEnabledPlugins = $('body').data('plugin-enabled');

src/client/js/components/PageComment/CommentContainer.jsx

@@ -8,11 +8,12 @@ import { Container } from 'unstated';
  */
 export default class CommentContainer extends Container {
 
-  constructor(crowi, pageId, revisionId) {
+  constructor(crowi, pageId, pagePath, revisionId) {
     super();
 
     this.crowi = crowi;
     this.pageId = pageId;
+    this.pagePath = pagePath;
     this.revisionId = revisionId;
 
     this.state = {
@@ -88,34 +89,14 @@ export default class CommentContainer extends Container {
   }
 
   uploadAttachment(file) {
-    // const endpoint = '/attachments.add';
-
-    // // create a FromData instance
-    // const formData = new FormData();
-    // formData.append('_csrf', this.props.data.crowi.csrfToken);
-    // formData.append('file', file);
-    // formData.append('path', this.props.data.pagePath);
-    // formData.append('page_id', this.props.data.pageId || 0);
-
-    // // post
-    // this.props.data.crowi.apiPost(endpoint, formData)
-    //   .then((res) => {
-    //     const attachment = res.attachment;
-    //     const fileName = attachment.originalName;
-
-    //     let insertText = `[${fileName}](${attachment.filePathProxied})`;
-    //     // when image
-    //     if (attachment.fileFormat.startsWith('image/')) {
-    //       // modify to "![fileName](url)" syntax
-    //       insertText = `!${insertText}`;
-    //     }
-    //     this.editor.insertText(insertText);
-    //   })
-    //   .catch(this.apiErrorHandler)
-    //   // finally
-    //   .then(() => {
-    //     this.editor.terminateUploadingState();
-    //   });
+    const endpoint = '/attachments.add';
+    const formData = new FormData();
+    formData.append('_csrf', this.crowi.csrfToken);
+    formData.append('file', file);
+    formData.append('path', this.pagePath);
+    formData.append('page_id', this.pageId);
+
+    return this.crowi.apiPost(endpoint, formData);
   }
 
 }

src/client/js/components/PageComment/CommentEditor.jsx

@@ -7,6 +7,7 @@ import { Subscribe } from 'unstated';
 import Button from 'react-bootstrap/es/Button';
 import Tab from 'react-bootstrap/es/Tab';
 import Tabs from 'react-bootstrap/es/Tabs';
+import * as toastr from 'toastr';
 import UserPicture from '../User/UserPicture';
 import ReactUtils from '../ReactUtils';
 
@@ -105,7 +106,7 @@ class CommentEditor extends React.Component {
     this.props.commentContainer.postComment(
       this.state.comment,
       this.state.isMarkdown,
-      null, // TODO set replyTo
+      this.props.replyTo, // TODO set replyTo
       this.state.isSlackEnabled,
       this.state.slackChannels,
     )
@@ -128,18 +129,7 @@ class CommentEditor extends React.Component {
   }
 
   uploadHandler(file) {
-    // const endpoint = '/attachments.add';
-
-    /*
-    // create a FromData instance
-    const formData = new FormData();
-    formData.append('_csrf', this.props.data.crowi.csrfToken);
-    formData.append('file', file);
-    formData.append('path', this.props.data.pagePath);
-    formData.append('page_id', this.props.data.pageId || 0);
-
-    // post
-    this.props.data.crowi.apiPost(endpoint, formData)
+    this.props.commentContainer.uploadAttachment(file)
       .then((res) => {
         const attachment = res.attachment;
         const fileName = attachment.originalName;
@@ -157,19 +147,18 @@ class CommentEditor extends React.Component {
       .then(() => {
         this.editor.terminateUploadingState();
       });
-    */
   }
 
-  // apiErrorHandler(error) {
-  //   toastr.error(error.message, 'Error occured', {
-  //     closeButton: true,
-  //     progressBar: true,
-  //     newestOnTop: false,
-  //     showDuration: '100',
-  //     hideDuration: '100',
-  //     timeOut: '3000',
-  //   });
-  // }
+  apiErrorHandler(error) {
+    toastr.error(error.message, 'Error occured', {
+      closeButton: true,
+      progressBar: true,
+      newestOnTop: false,
+      showDuration: '100',
+      hideDuration: '100',
+      timeOut: '3000',
+    });
+  }
 
   getCommentHtml() {
     return (
@@ -354,12 +343,14 @@ CommentEditor.propTypes = {
   commentContainer: PropTypes.instanceOf(CommentContainer).isRequired,
   editorOptions: PropTypes.object,
   slackChannels: PropTypes.string,
+  replyTo: PropTypes.string,
 };
 CommentEditorWrapper.propTypes = {
   crowi: PropTypes.object.isRequired,
   crowiOriginRenderer: PropTypes.object.isRequired,
   editorOptions: PropTypes.object,
   slackChannels: PropTypes.string,
+  replyTo: PropTypes.string,
 };
 
 export default CommentEditorWrapper;

src/client/js/components/PageComment/CommentEditorLazyRenderer.jsx

@@ -43,7 +43,13 @@ export default class CommentEditorLazyRenderer extends React.Component {
           )
         }
         { this.state.isEditorShown
-          && <CommentEditor {...this.props}></CommentEditor>
+          && (
+          <CommentEditor
+            {...this.props}
+            replyTo={undefined}
+          >
+          </CommentEditor>
+)
         }
       </React.Fragment>
     );

src/client/js/components/PageComments.jsx

@@ -141,6 +141,8 @@ class PageComments extends React.Component {
               crowi={this.props.crowi}
               crowiOriginRenderer={this.props.crowiOriginRenderer}
               editorOptions={this.props.editorOptions}
+              slackChannels={this.props.slackChannels}
+              replyTo={commentId}
             />
           )}
         </div>