From a73b93b0c34e7fa9c3287c3e3a91eda0cc2378cb Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 16:04:03 +0100
Subject: [PATCH] Move label and placeholder to plugins

---
 .../src/tabs/stream/components/CommentForm.js | 16 +----
 .../src/tabs/stream/components/DraftArea.js   | 10 +---
 .../stream/components/DraftAreaContent.js     | 60 +++++++++++++------
 .../components/EditableCommentContent.js      |  2 +-
 .../src/tabs/stream/containers/CommentBox.js  |  4 +-
 .../src/tabs/stream/containers/DraftArea.js   |  4 --
 6 files changed, 49 insertions(+), 47 deletions(-)

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 64e0fbf84..a65950d7d 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -18,14 +18,8 @@ class CommentForm extends React.Component {
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
 
-    // DOM ID for form input that edits comment body
-    bodyInputId: PropTypes.string,
-
-    // screen reader label for input that edits comment body
-    bodyLabel: PropTypes.string,
-
-    // Placeholder for input that edits comment body
-    bodyPlaceholder: PropTypes.string,
+    // Unique identifier for this form
+    id: PropTypes.string,
 
     // render at start of button container (useful for extra buttons)
     buttonContainerStart: PropTypes.node,
@@ -59,8 +53,6 @@ class CommentForm extends React.Component {
   };
   static get defaultProps() {
     return {
-      bodyLabel: t('comment_box.comment'),
-      bodyPlaceholder: t('comment_box.comment'),
       submitText: t('comment_box.post'),
       submitButtonCStyle: 'darkGrey',
       submitEnabled: () => true,
@@ -114,10 +106,8 @@ class CommentForm extends React.Component {
         <DraftArea
           root={root}
           comment={comment}
-          id={this.props.bodyInputId}
-          label={this.props.bodyLabel}
+          id={this.props.id}
           input={input}
-          placeholder={this.props.bodyPlaceholder}
           onInputChange={this.props.onInputChange}
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
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 8f8430d27..15e1711d4 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -35,10 +35,8 @@ export default class DraftArea extends React.Component {
   render() {
     const {
       input,
-      placeholder,
       id,
       disabled,
-      label,
       charCountEnable,
       maxCharCount,
       onInputChange,
@@ -55,21 +53,17 @@ export default class DraftArea extends React.Component {
         <div
           className={cn(styles.container, 'talk-plugin-commentbox-container')}
         >
-          <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
-            {label}
-          </label>
           <Slot
             fill="draftArea"
             defaultComponent={DraftAreaContent}
             className={styles.content}
             passthrough={{
+              id,
               root,
               comment,
               registerHook,
               unregisterHook,
               input,
-              placeholder,
-              id,
               onInputChange,
               disabled,
               isReply,
@@ -89,8 +83,6 @@ DraftArea.propTypes = {
   maxCharCount: PropTypes.number,
   id: PropTypes.string,
   input: PropTypes.object,
-  placeholder: PropTypes.string,
-  label: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
   root: PropTypes.object.isRequired,
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
index 793583d33..2639d5b2d 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -2,24 +2,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './DraftAreaContent.css';
+import t from 'coral-framework/services/i18n';
 
-const DraftAreaContent = ({
-  input,
-  placeholder,
-  id,
-  onInputChange,
-  disabled,
-}) => (
-  <textarea
-    className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
-    value={input.body}
-    placeholder={placeholder}
-    id={id}
-    onChange={e => onInputChange({ body: e.target.value })}
-    rows={3}
-    disabled={disabled}
-  />
-);
+class DraftAreaContent extends React.Component {
+  getLabel() {
+    if (this.props.isEdit) {
+      return t('edit_comment.body_input_label');
+    }
+    return this.props.isReply ? t('comment_box.reply') : t('comment.comment');
+  }
+
+  getPlaceholder() {
+    if (this.props.isEdit) {
+      return '';
+    }
+    return this.getLabel();
+  }
+
+  render() {
+    const { input, id, onInputChange, disabled } = this.props;
+    const inputId = `${id}-textarea`;
+    return (
+      <div>
+        <label
+          htmlFor={inputId}
+          className="screen-reader-text"
+          aria-hidden={true}
+        >
+          {this.getLabel()}
+        </label>
+        <textarea
+          id={inputId}
+          className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
+          value={input.body}
+          placeholder={this.getPlaceholder()}
+          onChange={e => onInputChange({ body: e.target.value })}
+          rows={3}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+}
 
 DraftAreaContent.propTypes = {
   id: PropTypes.string,
@@ -27,6 +51,8 @@ DraftAreaContent.propTypes = {
   placeholder: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  isReply: PropTypes.bool,
 };
 
 export default DraftAreaContent;
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 cd41a02b2..00f8ebe17 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -67,7 +67,7 @@ class EditableCommentContent extends React.Component {
           bodyPlaceholder=""
           submitText={<span>{t('edit_comment.save_button')}</span>}
           submitButtonCStyle="green"
-          bodyInputId={id}
+          id={id}
         />
       </div>
     );
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 96bfd434c..8ff9b8ec4 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -147,11 +147,9 @@ class CommentBox extends React.Component {
           root={root}
           comment={comment}
           defaultValue={this.props.defaultValue}
-          bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
           maxCharCount={maxCharCount}
           charCountEnable={this.props.charCountEnable}
-          bodyPlaceholder={t('comment.comment')}
-          bodyInputId={id}
+          id={id}
           input={this.state.input}
           registerHook={registerHook}
           unregisterHook={unregisterHook}
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 c890931ea..5cbadae8f 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -54,13 +54,11 @@ class DraftAreaContainer extends React.Component {
         root={this.props.root}
         comment={this.props.comment}
         input={this.props.input}
-        placeholder={this.props.placeholder}
         id={this.props.id}
         onInputChange={this.props.onInputChange}
         disabled={this.props.disabled}
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
-        label={this.props.label}
         registerHook={this.props.registerHook}
         unregisterHook={this.props.unregisterHook}
         isReply={this.props.isReply}
@@ -81,10 +79,8 @@ DraftAreaContainer.propTypes = {
   maxCharCount: PropTypes.number,
   id: PropTypes.string.isRequired,
   input: PropTypes.object.isRequired,
-  placeholder: PropTypes.string,
   onInputChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  label: PropTypes.string.isRequired,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,