Using queryData and fragments to request data

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,
 };

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);

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;

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);

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';