From 73355ab542b812da3df1479a2234de81ba13821e Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 27 Feb 2018 15:12:44 -0300
Subject: [PATCH] Using queryData and fragments to request data

---
 .../src/tabs/stream/components/DraftArea.js    |  5 +++--
 .../src/tabs/stream/containers/DraftArea.js    | 18 +++++++++++++++++-
 .../client/components/Editor.js                |  3 +++
 .../client/containers/Editor.js                | 12 ++++++++++++
 .../talk-plugin-rich-text-pell/client/index.js |  2 +-
 5 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 plugins/talk-plugin-rich-text-pell/client/containers/Editor.js

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 43bce64ea..11607ae7c 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -38,7 +38,7 @@ export default class DraftArea extends React.Component {
       charCountEnable,
       maxCharCount,
       onChange,
-      comment,
+      queryData,
     } = this.props;
 
     const tASettings = {
@@ -48,7 +48,6 @@ export default class DraftArea extends React.Component {
       onChange,
       rows,
       disabled,
-      comment,
     };
 
     return (
@@ -61,6 +60,7 @@ export default class DraftArea extends React.Component {
             fill="commentBox"
             defaultComponent={DraftAreaContent}
             className={styles.content}
+            queryData={queryData}
             {...tASettings}
           />
           <Slot fill="commentInputArea" />
@@ -85,4 +85,5 @@ DraftArea.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   rows: PropTypes.number,
+  queryData: PropTypes.object.isRequired,
 };
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 e32225218..aeee8765d 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -1,6 +1,9 @@
 import React from 'react';
+import { gql } from 'react-apollo';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import PropTypes from 'prop-types';
 import DraftArea from '../components/DraftArea';
+import withFragments from 'coral-framework/hocs/withFragments';
 
 const STORAGE_PATH = 'DraftArea';
 
@@ -39,8 +42,11 @@ class DraftAreaContainer extends React.Component {
   }
 
   render() {
+    const queryData = { comment: this.props.comment };
+
     return (
       <DraftArea
+        queryData={queryData}
         value={this.props.value}
         placeholder={this.props.placeholder}
         id={this.props.id}
@@ -71,6 +77,16 @@ DraftAreaContainer.propTypes = {
   disabled: PropTypes.bool,
   rows: PropTypes.number,
   label: PropTypes.string.isRequired,
+  comment: PropTypes.object,
 };
 
-export default DraftAreaContainer;
+const slots = ['commentBox'];
+
+export default withFragments({
+  comment: gql`
+  fragment CoralAdmin_CommentDetails_comment on Comment {
+    __typename
+    ${getSlotFragmentSpreads(slots, 'comment')}
+  }
+`,
+})(DraftAreaContainer);
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index e85c48731..d2f0b56e8 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -78,6 +78,9 @@ Editor.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   rows: PropTypes.number,
+  comment: PropTypes.object,
+  classNames: PropTypes.object,
+  actions: PropTypes.array,
 };
 
 export default Editor;
diff --git a/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js b/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js
new file mode 100644
index 000000000..2bdc3490f
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js
@@ -0,0 +1,12 @@
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import Editor from '../components/Editor';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkPluginRTE_Editor_comment on Comment {
+      body
+      richTextBody
+    }
+  `,
+})(Editor);
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 96acd9f56..d7e593f75 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -1,4 +1,4 @@
-import Editor from './components/Editor';
+import Editor from './containers/Editor';
 import update from 'immutability-helper';
 import CommentContent from './containers/CommentContent';
 import { gql } from 'react-apollo';