display youtube channels

src/ui/component/youtubeChannelList/index.js

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+// fetchUserInfo
+import { selectYoutubeChannels } from 'lbryinc';
+
+import YoutubeChannelList from './view';
+
+const select = state => ({
+  ytChannels: selectYoutubeChannels(state),
+});
+
+// const perform = dispatch => ({
+//   claimChannels: () => dispatch(doTransfer)
+// });
+
+/*
+
+ */
+
+export default connect(
+  select,
+  null
+)(YoutubeChannelList);

src/ui/component/youtubeChannelList/internal/youtubeChannel.jsx

@@ -0,0 +1,58 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+type Channel = {
+  yt_channel_name: string,
+  lbry_channel_name: string,
+  channel_claim_id: string,
+  sync_status: string,
+  status_token: string,
+  transferable: boolean,
+  transfer_state: string,
+  publish_to_address: Array<string>,
+};
+
+type Props = {
+  channel: Channel,
+};
+
+export default function YoutubeChannelItem(props: Props) {
+  const {
+    yt_channel_name: ytName,
+    lbry_channel_name: lbryName,
+    channel_claim_id: claimId,
+    sync_status: syncStatus,
+    status_token: statusToken,
+    transferable,
+    transfer_state: transferState,
+    publish_to_address: publishAddresses,
+  } = props.channel;
+  const LbryYtUrl = 'https://lbry.com/youtube/status/';
+
+  //  <thead>
+  //   <tr>
+  //    <th>{__('Youtube Name')}</th>
+  //    <th>{__('LBRY Name')} </th>
+  //    <th>{__('Sync Status')} </th>
+  //    <th>{__('Transfer Status')}</th>
+  //   </tr>
+  //  </thead>
+  const doTransfer = () => {};
+
+  return (
+    <tr>
+      <td>{ytName}</td>
+      <td>
+        <Button button={'link'} navigate={`lbry://${lbryName}`} label={lbryName} />
+      </td>
+      <td>
+        <Button button={'link'} href={`${LbryYtUrl}${statusToken}`} label={syncStatus} />
+      </td>
+      <td>{claimId}</td>
+      <td>
+        {transferable && <Button button={'link'} onClick={doTransfer} label={'Claim It'} />}
+        {!transferable && transferState}
+      </td>
+    </tr>
+  );
+}

src/ui/component/youtubeChannelList/view.jsx

@@ -0,0 +1,34 @@
+// @flow
+import * as React from 'react';
+import YoutubeChannelListItem from './internal/youtubeChannel';
+export default function YoutubeChannelList(props: Props) {
+  const { ytChannels } = props;
+  return (
+    ytChannels &&
+    ytChannels.length && (
+      <section className="card card--section">
+        <h2 className="card__title">Channels</h2>
+        <p className="card__subtitle">You got em</p>
+        <table className="table">
+          <thead>
+            <tr>
+              <th>{__('Youtube Name')}</th>
+              <th>{__('LBRY Name')} </th>
+              <th>{__('Sync Status')} </th>
+              <th>{__('Channel ClaimId')}</th>
+              <th>{__('Transfer Status')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {ytChannels.map(channel => (
+              <YoutubeChannelListItem
+                key={`yt${channel.yt_channel_name}${channel.lbry_channel_name}`}
+                channel={channel}
+              />
+            ))}
+          </tbody>
+        </table>
+      </section>
+    )
+  );
+}

src/ui/page/account/view.jsx

@@ -6,6 +6,7 @@ import Page from 'component/page';
 import UnsupportedOnWeb from 'component/common/unsupported-on-web';
 import UserEmail from 'component/userEmail';
 import InvitePage from 'page/invite';
+import YoutubeChannelList from 'component/youtubeChannelList';
 
 const AccountPage = () => (
   <Page>
@@ -21,6 +22,7 @@ const AccountPage = () => (
           <RewardTotal />
         </div>
       </div>
+      <YoutubeChannelList />
       <InvitePage />
     </div>
   </Page>