From 4aa6b530228352dbcd3f6387fcd88582d7866675 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 16 Aug 2017 22:32:44 +0700
Subject: [PATCH] PropTypes for StreamTabPanel

---
 .../src/components/Stream.js                  |  4 +--
 .../src/components/StreamTabPanel.js          | 24 ++++++++++++----
 .../src/containers/StreamTabPanel.js          | 28 +++++++++++++++++--
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index a9ea98a68..26b054e0d 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -220,12 +220,12 @@ class Stream extends React.Component {
                 tabPaneSlot={'streamTabPanes'}
                 slotProps={slotProps}
                 appendTabs={
-                  <Tab tabId={'all'}>
+                  <Tab tabId={'all'} key='all'>
                     All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
                   </Tab>
                 }
                 appendTabPanes={
-                  <TabPane tabId={'all'}>
+                  <TabPane tabId={'all'} key='all'>
                     <AllCommentsPane
                       data={data}
                       root={root}
diff --git a/client/coral-embed-stream/src/components/StreamTabPanel.js b/client/coral-embed-stream/src/components/StreamTabPanel.js
index c5a292179..0f2092092 100644
--- a/client/coral-embed-stream/src/components/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/components/StreamTabPanel.js
@@ -1,23 +1,37 @@
 import React from 'react';
 import {TabBar, TabContent} from 'coral-ui';
+import PropTypes from 'prop-types';
 
 class StreamTabPanel extends React.Component {
 
   render() {
-    const {activeTab, setActiveTab, appendTabs, appendTabPanes, pluginTabElements, pluginTabPaneElements, sub} = this.props;
+    const {activeTab, setActiveTab, tabs, tabPanes, sub} = this.props;
     return (
       <div>
         <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
-          {pluginTabElements}
-          {appendTabs}
+          {tabs}
         </TabBar>
         <TabContent activeTab={activeTab} sub={sub}>
-          {pluginTabPaneElements}
-          {appendTabPanes}
+          {tabPanes}
         </TabContent>
       </div>
     );
   }
 }
 
+StreamTabPanel.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  tabs: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  tabPanes: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  className: PropTypes.string,
+  sub: PropTypes.bool,
+};
+
 export default StreamTabPanel;
diff --git a/client/coral-embed-stream/src/containers/StreamTabPanel.js b/client/coral-embed-stream/src/containers/StreamTabPanel.js
index 574c4c881..4a313d2b4 100644
--- a/client/coral-embed-stream/src/containers/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/containers/StreamTabPanel.js
@@ -6,6 +6,7 @@ import {getSlotComponents} from 'coral-framework/helpers/plugins';
 import {Tab, TabPane} from 'coral-ui';
 import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
+import PropTypes from 'prop-types';
 
 class StreamTabPanelContainer extends React.Component {
 
@@ -69,14 +70,35 @@ class StreamTabPanelContainer extends React.Component {
   render() {
     return (
       <StreamTabPanel
-        {...this.props}
-        pluginTabElements={this.getPluginTabElements()}
-        pluginTabPaneElements={this.getPluginTabPaneElements()}
+        className={this.props.className}
+        activeTab={this.props.activeTab}
+        setActiveTab={this.props.setActiveTab}
+        tabs={this.getPluginTabElements().concat(this.props.appendTabs)}
+        tabPanes={this.getPluginTabPaneElements().concat(this.props.appendTabPanes)}
+        sub={this.props.sub}
       />
     );
   }
 }
 
+StreamTabPanelContainer.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  appendTabs: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  appendTabPanes: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  fallbackTab: PropTypes.string.isRequired,
+  tabSlot: PropTypes.string.isRequired,
+  tabPaneSlot: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  sub: PropTypes.bool,
+};
+
 const mapStateToProps = (state) => ({
   reduxState: omit(state, 'apollo'),
 });