Adds channelDiscussion to components & creates discussion tab

src/ui/component/channelDiscussion/index.js

@@ -0,0 +1,7 @@
+import { connect } from 'react-redux';
+import ChannelDiscussion from './view';
+
+export default connect(
+  null,
+  null
+)(ChannelDiscussion);

src/ui/component/channelDiscussion/view.jsx

@@ -0,0 +1,20 @@
+// @flow
+import React from 'react';
+import CommentsList from 'component/commentsList';
+import CommentCreate from 'component/commentCreate';
+
+type Props = {
+  uri: string,
+};
+
+function ChannelDiscussion(props: Props) {
+  const uri = props.uri;
+  return (
+    <section className="card--section">
+      <CommentCreate uri={uri} />
+      <CommentsList uri={uri} />
+    </section>
+  );
+}
+
+export default ChannelDiscussion;

src/ui/page/channel/view.jsx

@@ -11,6 +11,7 @@ import Button from 'component/button';
 import { formatLbryUriForWeb } from 'util/uri';
 import ChannelContent from 'component/channelContent';
 import ChannelAbout from 'component/channelAbout';
+import ChannelDiscussion from 'component/channelDiscussion';
 import ChannelThumbnail from 'component/channelThumbnail';
 import ChannelEdit from 'component/channelEdit';
 import ClaimUri from 'component/claimUri';
@@ -24,6 +25,7 @@ import HelpLink from 'component/common/help-link';
 
 const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
+const DISCUSSION_PAGE = `discussion`;
 const LIGHTHOUSE_URL = 'https://lighthouse.lbry.com/search';
 
 type Props = {
@@ -84,17 +86,20 @@ function ChannelPage(props: Props) {
   // If a user changes tabs, update the url so it stays on the same page if they refresh.
   // We don't want to use links here because we can't animate the tab change and using links
   // would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers.
-  const tabIndex = currentView === ABOUT_PAGE || editing ? 1 : 0;
+  const tabIndex = currentView === ABOUT_PAGE || editing ? 1 : currentView === DISCUSSION_PAGE ? 2 : 0;
+
   function onTabChange(newTabIndex) {
     let url = formatLbryUriForWeb(uri);
     let search = '?';
-    if (newTabIndex !== 0) {
-      search += `${PAGE_VIEW_QUERY}=${ABOUT_PAGE}`;
-    } else {
+
+    if (newTabIndex === 0) {
       setSearchResults(null);
       search += `page=${page}`;
+    } else if (newTabIndex === 1) {
+      search += `${PAGE_VIEW_QUERY}=${ABOUT_PAGE}`;
+    } else {
+      search += `${PAGE_VIEW_QUERY}=${DISCUSSION_PAGE}`;
     }
-
     history.push(`${url}${search}`);
   }
 
@@ -200,6 +205,7 @@ function ChannelPage(props: Props) {
           <TabList className="tabs__list--channel-page">
             <Tab disabled={editing}>{__('Content')}</Tab>
             <Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
+            <Tab disabled={editing}>{__('Discussion')}</Tab>
             <Form onSubmit={handleSearch} className="wunderbar--channel">
               <Icon icon={ICONS.SEARCH} />
               <FormField
@@ -232,6 +238,9 @@ function ChannelPage(props: Props) {
                 <ChannelAbout uri={uri} />
               )}
             </TabPanel>
+            <TabPanel>
+              <ChannelDiscussion uri={uri} />
+            </TabPanel>
           </TabPanels>
         </Tabs>
       </div>