From a3158a494c46f02f1c5b43d9fdb2737fa9852697 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 10:29:03 -0300
Subject: [PATCH] Changes added

---
 .../src/tabs/stream/components/Comment.js        |  2 +-
 .../src/tabs/stream/components/CommentForm.js    |  4 +++-
 .../src/tabs/stream/components/DraftArea.js      |  2 +-
 .../stream/components/EditableCommentContent.js  |  6 ++++--
 .../src/tabs/stream/containers/Comment.js        |  2 +-
 .../src/tabs/stream/containers/CommentBox.js     |  7 ++-----
 .../src/tabs/stream/containers/CommentForm.js    | 16 ++++++++++++++++
 .../src/tabs/stream/containers/DraftArea.js      |  2 +-
 .../stream/containers/EditableCommentContent.js  | 16 ++++++++++++++++
 .../talk-plugin-rich-text-pell/client/index.js   |  2 +-
 10 files changed, 46 insertions(+), 13 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
 create mode 100644 client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index f0dcc1017..1f6af9d87 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -21,7 +21,7 @@ import CommentContent from 'coral-framework/components/CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import CommentTombstone from './CommentTombstone';
 import InactiveCommentLabel from './InactiveCommentLabel';
-import { EditableCommentContent } from './EditableCommentContent';
+import EditableCommentContent from '../containers/EditableCommentContent';
 import {
   getActionSummary,
   iPerformedThisAction,
diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
index a9ea8f150..8055d3d1c 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -13,7 +13,7 @@ import DraftArea from '../containers/DraftArea';
 /**
  * Common UI for Creating or Editing a Comment
  */
-export class CommentForm extends React.Component {
+class CommentForm extends React.Component {
   static propTypes = {
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
@@ -145,3 +145,5 @@ export class CommentForm extends React.Component {
     );
   }
 }
+
+export default CommentForm;
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
index 11607ae7c..9f62b38a5 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -57,7 +57,7 @@ export default class DraftArea extends React.Component {
             {label}
           </label>
           <Slot
-            fill="commentBox"
+            fill="draftArea"
             defaultComponent={DraftAreaContent}
             className={styles.content}
             queryData={queryData}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
index 297ab0136..5917dfc54 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { notifyForNewCommentStatus } from '../helpers';
-import { CommentForm } from './CommentForm';
+import CommentForm from '../containers/CommentForm';
 import styles from './Comment.css';
 import { CountdownSeconds } from './CountdownSeconds';
 import { getEditableUntilDate } from './util';
@@ -14,7 +14,7 @@ import t from 'coral-framework/services/i18n';
 /**
  * Renders a Comment's body in such a way that the end-user can edit it and save changes
  */
-export class EditableCommentContent extends React.Component {
+class EditableCommentContent extends React.Component {
   static propTypes = {
     // show notification to the user (e.g. for errors)
     notify: PropTypes.func.isRequired,
@@ -196,3 +196,5 @@ export class EditableCommentContent extends React.Component {
     );
   }
 }
+
+export default EditableCommentContent;
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
index ea0fd33e4..496bf16ce 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -25,7 +25,6 @@ const slots = [
   'commentAuthorTags',
   'commentTimestamp',
   'commentContent',
-  'commentBox',
 ];
 
 /**
@@ -99,6 +98,7 @@ const singleCommentFragment = gql`
     }
     ${getSlotFragmentSpreads(slots, 'comment')}.
     ...${getDefinitionName(CommentBox.fragments.comment)}
+    ${CommentBox.fragments.comment}
   }
 `;
 
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
index 17459fe49..17237de21 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gql } from 'react-apollo';
-import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getDefinitionName } from 'coral-framework/utils';
 import t, { timeago } from 'coral-framework/services/i18n';
@@ -10,7 +9,7 @@ import { isSuspended } from 'coral-framework/utils/user';
 import DraftArea from './DraftArea';
 import Slot from 'coral-framework/components/Slot';
 import { connect } from 'react-redux';
-import { CommentForm } from '../components/CommentForm';
+import CommentForm from '../containers/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
 import { compose } from 'react-apollo';
 
@@ -213,8 +212,6 @@ CommentBox.propTypes = {
   tags: PropTypes.array,
 };
 
-const slots = ['commentBox'];
-
 const mapStateToProps = state => ({
   tags: state.stream.commentBoxTags,
 });
@@ -225,9 +222,9 @@ export default compose(
     comment: gql`
     fragment TalkEmbedStream_CommentBox_comment on Comment {
       __typename
-      ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(DraftArea.fragments.comment)}
     }
+    ${DraftArea.fragments.comment}
 `,
   })
 )(CommentBox);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
new file mode 100644
index 000000000..474233e4f
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
@@ -0,0 +1,16 @@
+import { gql } from 'react-apollo';
+import CommentForm from '../components/CommentForm';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getDefinitionName } from 'coral-framework/utils';
+import DraftArea from './DraftArea';
+
+export default withFragments({
+  comment: gql`
+  fragment TalkEmbedStream_CommentForm_comment on Comment {
+    __typename
+    ...${getDefinitionName(DraftArea.fragments.comment)}
+  }
+
+  ${DraftArea.fragments.comment}
+`,
+})(CommentForm);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
index d9b016a06..1dd2a9f16 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -80,7 +80,7 @@ DraftAreaContainer.propTypes = {
   comment: PropTypes.object,
 };
 
-const slots = ['commentBox'];
+const slots = ['draftArea'];
 
 export default withFragments({
   comment: gql`
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
new file mode 100644
index 000000000..60cfff236
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
@@ -0,0 +1,16 @@
+import { gql } from 'react-apollo';
+import EditableCommentContent from '../components/EditableCommentContent';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getDefinitionName } from 'coral-framework/utils';
+import CommentForm from './CommentForm';
+
+export default withFragments({
+  comment: gql`
+  fragment TalkEmbedStream_EditableCommentContent_comment on Comment {
+    __typename
+    ...${getDefinitionName(CommentForm.fragments.comment)}
+  }
+
+  ${CommentForm.fragments.comment}
+`,
+})(EditableCommentContent);
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 56cfcfe3b..55185ed6d 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -4,7 +4,7 @@ import { gql } from 'react-apollo';
 
 export default {
   slots: {
-    commentBox: [Editor],
+    draftArea: [Editor],
     commentContent: [CommentContent],
   },
   fragments: {