ui pieces in place and enabled

src/ui/component/youtubeChannelList/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
-// fetchUserInfo
-import { selectYoutubeChannels } from 'lbryinc';
+import { selectYoutubeChannels, doClaimYoutubeChannels, doUserFetch } from 'lbryinc';
 
 import YoutubeChannelList from './view';
 
@@ -8,15 +7,12 @@ const select = state => ({
   ytChannels: selectYoutubeChannels(state),
 });
 
-// const perform = dispatch => ({
-//   claimChannels: () => dispatch(doTransfer)
-// });
-
-/*
-
- */
+const perform = dispatch => ({
+  claimChannels: () => dispatch(doClaimYoutubeChannels()),
+  updateUser: () => dispatch(doUserFetch()),
+});
 
 export default connect(
   select,
-  null
+  perform
 )(YoutubeChannelList);

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

@@ -20,24 +20,29 @@ 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 = () => {};
+  const LBRY_YT_URL = 'https://lbry.com/youtube/status/';
+  const NOT_TRANSFERED = 'not_transferred';
+  const PENDING_TRANSFER = 'pending_transfer';
+  const COMPLETED_TRANSFER = 'completed_transfer';
+
+  function renderSwitch(param) {
+    switch (param) {
+      case NOT_TRANSFERED:
+        return __('Not Transferred');
+      case PENDING_TRANSFER:
+        return __('Pending Transfer');
+      case COMPLETED_TRANSFER:
+        return __('Completed Transfer');
+    }
+  }
+
+  // | Youtube Name | LBRY Name | SyncStatus | TransferStatus |
 
   return (
     <tr>
@@ -46,13 +51,9 @@ export default function YoutubeChannelItem(props: Props) {
         <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}
+        <Button button={'link'} href={`${LBRY_YT_URL}${statusToken}`} label={syncStatus} />
       </td>
+      <td>{transferable ? renderSwitch(transferState) : __('Not Transferable')}</td>
     </tr>
   );
 }

src/ui/component/youtubeChannelList/view.jsx

@@ -1,21 +1,45 @@
 // @flow
 import * as React from 'react';
 import YoutubeChannelListItem from './internal/youtubeChannel';
+import Button from 'component/button';
+
+type Props = {
+  ytChannels: Array<any>,
+  claimChannels: () => void,
+  updateUser: () => void,
+};
+
 export default function YoutubeChannelList(props: Props) {
-  const { ytChannels } = props;
+  const { ytChannels, claimChannels, updateUser } = props;
+  const hasChannels = ytChannels && ytChannels.length;
+  const transferEnabled = ytChannels && ytChannels.some(el => el.transferable === true);
   return (
-    ytChannels &&
-    ytChannels.length && (
+    hasChannels && (
       <section className="card card--section">
-        <h2 className="card__title">Channels</h2>
-        <p className="card__subtitle">You got em</p>
+        <h2 className="card__title--between">
+          <span>Synced Youtube Channels</span>
+          <div className="card__actions--inline">
+            <Button button="inverse" onClick={updateUser} label={__('Refresh')} />
+          </div>
+        </h2>
+        {transferEnabled && !IS_WEB && (
+          <p className="card__subtitle">LBRY is currently holding channels you can take control of.</p>
+        )}
+        {!transferEnabled && !IS_WEB && (
+          <p className="card__subtitle">LBRY is currently holding channels but none are ready for transfer yet.</p>
+        )}
+        {IS_WEB && (
+          <p className="card__subtitle">
+            {__(`LBRY.tv can't import accounts yet. `)}
+            <Button button="link" label={__('Download the app')} href="https://lbry.com/get" />
+          </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>
@@ -28,6 +52,10 @@ export default function YoutubeChannelList(props: Props) {
             ))}
           </tbody>
         </table>
+        <div className="card__actions">
+          <Button disabled={IS_WEB} button="primary" onClick={claimChannels} label={__('Claim Channels')} />
+          <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
+        </div>
       </section>
     )
   );

static/locales/en.json

@@ -706,4 +706,4 @@
   "to fix it. If that doesn't work, press CMD/CTRL-R to reset to the homepage.": "to fix it. If that doesn't work, press CMD/CTRL-R to reset to the homepage.",
   "LBRY names cannot contain spaces or reserved symbols ($#@;/\"<>%{}|^~[]`)": "LBRY names cannot contain spaces or reserved symbols ($#@;/\"<>%{}|^~[]`)",
   "Creating channel...": "Creating channel..."
-}
+}