From 0d5db5b003b776da04797c7fa24e117065eaf9a4 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 3 Oct 2019 14:24:45 -0400
Subject: [PATCH] Revert "fix: deal with youtube channels that are queued to
 sync but haven't started yet"

This reverts commit 6843d5ca07c28ce4a0228894c4819d9764b0d8f8.
---
 src/ui/component/header/view.jsx              |  6 --
 src/ui/component/userSignIn/view.jsx          | 21 ++----
 .../component/youtubeTransferStatus/view.jsx  | 52 +++-----------
 .../component/youtubeTransferWelcome/index.js | 25 +++++++
 .../component/youtubeTransferWelcome/view.jsx | 72 +++++++++++++++++++
 src/ui/page/channels/view.jsx                 |  2 +-
 src/ui/scss/component/_card.scss              |  5 --
 src/ui/scss/component/_main.scss              |  4 --
 src/ui/scss/component/section.scss            |  2 +-
 static/app-strings.json                       | 24 +------
 10 files changed, 115 insertions(+), 98 deletions(-)
 create mode 100644 src/ui/component/youtubeTransferWelcome/index.js
 create mode 100644 src/ui/component/youtubeTransferWelcome/view.jsx

diff --git a/src/ui/component/header/view.jsx b/src/ui/component/header/view.jsx
index cada976a8..af57ab392 100644
--- a/src/ui/component/header/view.jsx
+++ b/src/ui/component/header/view.jsx
@@ -71,12 +71,6 @@ const Header = (props: Props) => {
             icon={ICONS.LBRY}
             navigate="/"
           />
-          <Button
-            className="header__navigation-item header__navigation-item--lbry"
-            label={__('auth')}
-            icon={ICONS.LBRY}
-            navigate="/$/signin"
-          />
 
           {/* @if TARGET='app' */}
           {!minimal && (
diff --git a/src/ui/component/userSignIn/view.jsx b/src/ui/component/userSignIn/view.jsx
index a029d43fd..a422f2709 100644
--- a/src/ui/component/userSignIn/view.jsx
+++ b/src/ui/component/userSignIn/view.jsx
@@ -8,10 +8,9 @@ import { DEFAULT_BID_FOR_FIRST_CHANNEL } from 'component/userFirstChannel/view';
 import { rewards as REWARDS, YOUTUBE_STATUSES } from 'lbryinc';
 import UserVerify from 'component/userVerify';
 import Spinner from 'component/spinner';
-import YoutubeTransferStatus from 'component/youtubeTransferStatus';
+import YoutubeTransferWelcome from 'component/youtubeTransferWelcome';
 import SyncPassword from 'component/syncPassword';
 import useFetched from 'effects/use-fetched';
-import Confetti from 'react-confetti';
 
 type Props = {
   user: ?User,
@@ -60,12 +59,9 @@ function UserSignIn(props: Props) {
   const channelCount = channels ? channels.length : 0;
   const hasClaimedEmailAward = claimedRewards.some(reward => reward.reward_type === REWARDS.TYPE_CONFIRM_EMAIL);
   const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
-  // const hasTransferrableYoutubeChannels = hasYoutubeChannels && youtubeChannels.some(channel => channel.transferable);
-  // const hasPendingYoutubeTransfer =
-  //   hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
-  const isYoutubeTransferComplete =
-    hasYoutubeChannels &&
-    youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
+  const hasTransferrableYoutubeChannels = hasYoutubeChannels && youtubeChannels.some(channel => channel.transferable);
+  const hasPendingYoutubeTransfer =
+    hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
 
   // Complexity warning
   // We can't just check if we are currently fetching something
@@ -85,7 +81,8 @@ function UserSignIn(props: Props) {
   const showSyncPassword = syncEnabled && getSyncError && !hasSynced;
   const showChannelCreation =
     hasVerifiedEmail && balance && balance > DEFAULT_BID_FOR_FIRST_CHANNEL && channelCount === 0 && !hasYoutubeChannels;
-  const showYoutubeTransfer = hasVerifiedEmail && hasYoutubeChannels && !isYoutubeTransferComplete;
+  const showYoutubeTransfer =
+    hasVerifiedEmail && hasYoutubeChannels && (hasTransferrableYoutubeChannels || hasPendingYoutubeTransfer);
   const showLoadingSpinner =
     canHijackSignInFlowWithSpinner && (isCurrentlyFetchingSomething || isWaitingForSomethingToFinish);
 
@@ -112,11 +109,7 @@ function UserSignIn(props: Props) {
     showSyncPassword && <SyncPassword />,
     showChannelCreation && <UserFirstChannel />,
     // @if TARGET='app'
-    showYoutubeTransfer && (
-      <div>
-        <YoutubeTransferStatus /> <Confetti recycle={false} style={{ position: 'fixed' }} />
-      </div>
-    ),
+    showYoutubeTransfer && <YoutubeTransferWelcome />,
     // @endif
     showLoadingSpinner && (
       <div className="main--empty">
diff --git a/src/ui/component/youtubeTransferStatus/view.jsx b/src/ui/component/youtubeTransferStatus/view.jsx
index 3d46ab64a..421eba975 100644
--- a/src/ui/component/youtubeTransferStatus/view.jsx
+++ b/src/ui/component/youtubeTransferStatus/view.jsx
@@ -1,14 +1,10 @@
 // @flow
-import * as PAGES from 'constants/pages';
 import * as React from 'react';
 import Button from 'component/button';
 import ClaimPreview from 'component/claimPreview';
 import Card from 'component/common/card';
 import { YOUTUBE_STATUSES } from 'lbryinc';
 import { buildURI } from 'lbry-redux';
-import I18nMessage from 'component/i18nMessage';
-
-const STATUS_URL = 'https://lbry.com/youtube/status/';
 
 type Props = {
   youtubeChannels: Array<any>,
@@ -17,7 +13,6 @@ type Props = {
   updateUser: () => void,
   checkYoutubeTransfer: () => void,
   videosImported: ?Array<number>, // [currentAmountImported, totalAmountToImport]
-  hideChannelLink: boolean,
 };
 
 export default function YoutubeTransferStatus(props: Props) {
@@ -28,15 +23,13 @@ export default function YoutubeTransferStatus(props: Props) {
     videosImported,
     checkYoutubeTransfer,
     updateUser,
-    hideChannelLink = false,
   } = props;
   const hasChannels = youtubeChannels && youtubeChannels.length;
+
   const transferEnabled = youtubeChannels.some(status => status.transferable);
   const hasPendingTransfers = youtubeChannels.some(
     status => status.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER
   );
-  const isYoutubeTransferComplete =
-    hasChannels && youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
 
   let total;
   let complete;
@@ -79,49 +72,26 @@ export default function YoutubeTransferStatus(props: Props) {
 
   return (
     hasChannels &&
-    !isYoutubeTransferComplete && (
+    (hasPendingTransfers || transferEnabled) && (
       <div>
         <Card
           title={youtubeChannels.length > 1 ? __('Your YouTube Channels') : __('Your YouTube Channel')}
           subtitle={
             <span>
-              {hasPendingTransfers &&
-                __('Your videos are currently being transferred. There is nothing else for you to do.')}
-              {transferEnabled && !hasPendingTransfers && __('Your videos are ready to be transferred.')}
-              {!transferEnabled && !hasPendingTransfers && __('Please check back later.')}
+              {hasPendingTransfers
+                ? __('Your videos are currently being transferred. There is nothing else for you to do.')
+                : __('Your videos are ready to be transferred.')}
             </span>
           }
           body={
             <section>
               {youtubeChannels.map((channel, index) => {
-                const {
-                  lbry_channel_name: channelName,
-                  channel_claim_id: claimId,
-                  status_token: statusToken,
-                } = channel;
+                const { lbry_channel_name: channelName, channel_claim_id: claimId } = channel;
                 const url = buildURI({ channelName, channelClaimId: claimId });
                 const transferState = getMessage(channel);
                 return (
                   <div key={url} className="card--inline">
-                    {claimId ? (
-                      <ClaimPreview
-                        uri={url}
-                        actions={<span className="help">{transferState}</span>}
-                        properties={false}
-                      />
-                    ) : (
-                      <p className="section--padded">
-                        <I18nMessage
-                          tokens={{
-                            statusLink: <Button button="link" href={STATUS_URL + statusToken} label={__('here')} />,
-                            channelName,
-                          }}
-                        >
-                          %channelName% is not ready to be transferred. You can check the status %statusLink% or check
-                          back later.
-                        </I18nMessage>
-                      </p>
-                    )}
+                    <ClaimPreview uri={url} actions={<span className="help">{transferState}</span>} properties={''} />
                   </div>
                 );
               })}
@@ -131,7 +101,7 @@ export default function YoutubeTransferStatus(props: Props) {
             </section>
           }
           actions={
-            transferEnabled ? (
+            transferEnabled && (
               <div className="card__actions">
                 <Button
                   button="primary"
@@ -141,12 +111,6 @@ export default function YoutubeTransferStatus(props: Props) {
                 />
                 <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
               </div>
-            ) : !hideChannelLink ? (
-              <div className="card__actions">
-                <Button button="primary" navigate={`/$/${PAGES.CHANNELS}`} label={__('View Your Channels')} />
-              </div>
-            ) : (
-              false
             )
           }
         />
diff --git a/src/ui/component/youtubeTransferWelcome/index.js b/src/ui/component/youtubeTransferWelcome/index.js
new file mode 100644
index 000000000..c61bb8514
--- /dev/null
+++ b/src/ui/component/youtubeTransferWelcome/index.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import {
+  selectYoutubeChannels,
+  selectYouTubeImportPending,
+  selectUserIsPending,
+  doClaimYoutubeChannels,
+  doUserFetch,
+} from 'lbryinc';
+import YoutubeChannelList from './view';
+
+const select = state => ({
+  youtubeChannels: selectYoutubeChannels(state),
+  youtubeImportPending: selectYouTubeImportPending(state),
+  userFetchPending: selectUserIsPending(state),
+});
+
+const perform = dispatch => ({
+  claimChannels: () => dispatch(doClaimYoutubeChannels()),
+  updateUser: () => dispatch(doUserFetch()),
+});
+
+export default connect(
+  select,
+  perform
+)(YoutubeChannelList);
diff --git a/src/ui/component/youtubeTransferWelcome/view.jsx b/src/ui/component/youtubeTransferWelcome/view.jsx
new file mode 100644
index 000000000..6a7692e60
--- /dev/null
+++ b/src/ui/component/youtubeTransferWelcome/view.jsx
@@ -0,0 +1,72 @@
+// @flow
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import classnames from 'classnames';
+import ClaimPreview from 'component/claimPreview';
+import Button from 'component/button';
+import Confetti from 'react-confetti';
+import { YOUTUBE_STATUSES } from 'lbryinc';
+
+type Props = {
+  youtubeChannels: Array<{ lbry_channel_name: string, channel_claim_id: string, transfer_state: string }>,
+  claimChannels: () => void,
+};
+
+export default function UserYoutubeTransfer(props: Props) {
+  const { youtubeChannels, claimChannels } = props;
+  const hasYoutubeChannels = youtubeChannels && youtubeChannels.length;
+  const hasPendingYoutubeTransfer =
+    hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
+
+  return (
+    <div>
+      <div className="section__header">
+        {!hasPendingYoutubeTransfer ? (
+          <React.Fragment>
+            <h1 className="section__title--large">{__('Welcome back!')}</h1>
+            <p className="section__subtitle">{__('Your channel is ready to be sent over.')}</p>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <h1 className="section__title--large">{__('Good To Go!')}</h1>
+            <p className="section__subtitle">
+              {__('You now control your channel and your videos are being transferred to your account.')}
+            </p>
+          </React.Fragment>
+        )}
+      </div>
+
+      <section className="section">
+        {youtubeChannels.map(({ lbry_channel_name: channelName, channel_claim_id: claimId }) => (
+          <div key={channelName} className={classnames('card--inline')}>
+            <ClaimPreview disabled onClick={() => {}} actions={false} uri={`lbry://${channelName}#${claimId}`} />
+          </div>
+        ))}
+      </section>
+
+      {hasPendingYoutubeTransfer ? (
+        <section className="section">
+          <h1 className="section__title">{__('Transfer In Progress...')}</h1>
+          <p className="section__subtitle">{__('You can now publish and comment using your official channel.')}</p>
+
+          <div className="card__actions">
+            <Button
+              button="primary"
+              label={youtubeChannels.length > 1 ? __('View Your Channels') : __('View Your Channel')}
+              navigate={`/$/${PAGES.CHANNELS}`}
+            />
+          </div>
+        </section>
+      ) : (
+        <section className="section">
+          <h1 className="section__title">{__('Begin Transfer')}</h1>
+          <div className="section__actions">
+            <Button button="primary" label={__('Transfer')} onClick={claimChannels} />
+          </div>
+        </section>
+      )}
+
+      {hasPendingYoutubeTransfer && <Confetti recycle={false} style={{ position: 'fixed' }} />}
+    </div>
+  );
+}
diff --git a/src/ui/page/channels/view.jsx b/src/ui/page/channels/view.jsx
index cf5e05748..c27ebfc0e 100644
--- a/src/ui/page/channels/view.jsx
+++ b/src/ui/page/channels/view.jsx
@@ -23,7 +23,7 @@ export default function ChannelsPage(props: Props) {
   return (
     <Page>
       {/* @if TARGET='app' */}
-      {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
+      {hasYoutubeChannels && <YoutubeTransferStatus />}
       {/* @endif */}
 
       {channels && channels.length ? (
diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss
index 384fb0d6d..0eb742ed2 100644
--- a/src/ui/scss/component/_card.scss
+++ b/src/ui/scss/component/_card.scss
@@ -40,11 +40,6 @@
 .card--inline {
   border: 1px solid $lbry-gray-1;
   border-radius: var(--card-radius);
-  margin-bottom: var(--spacing-medium);
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
 
   [data-mode='dark'] & {
     border-color: var(--dm-color-03);
diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss
index 85f999ecd..c4b2f9b12 100644
--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@@ -74,10 +74,6 @@
   align-items: flex-start;
   max-width: 40rem;
   text-align: left;
-
-  & > * {
-    width: 100%;
-  }
 }
 
 .main--full-width {
diff --git a/src/ui/scss/component/section.scss b/src/ui/scss/component/section.scss
index a1ab8abfb..da895cea0 100644
--- a/src/ui/scss/component/section.scss
+++ b/src/ui/scss/component/section.scss
@@ -7,7 +7,7 @@
 }
 
 .section--padded {
-  padding: var(--spacing-medium);
+  padding: var(--spacing-large);
 }
 
 .section--small {
diff --git a/static/app-strings.json b/static/app-strings.json
index e4968bddb..e3c4aefa8 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -746,27 +746,5 @@
   "Transfer in progress": "Transfer in progress",
   "%complete% / %total% videos transferred": "%complete% / %total% videos transferred",
   "Available Rewards": "Available Rewards",
-  "You have %credit_amount% in unclaimed rewards.": "You have %credit_amount% in unclaimed rewards.",
-  "No Channels Created Yet": "No Channels Created Yet",
-  "Create A Channel": "Create A Channel",
-  "Something about it not being here": "Something about it not being here",
-  "%channelName% is not ready to be transferred. Please check back later.": "%channelName% is not ready to be transferred. Please check back later.",
-  "Here": "Here",
-  "'%channelName% is not ready to be transferred. You can check the status %link% or check back later.": "'%channelName% is not ready to be transferred. You can check the status %link% or check back later.",
-  "%channelName% is not ready to be transferred. You can check the status %link% or check back later.": "%channelName% is not ready to be transferred. You can check the status %link% or check back later.",
-  "here": "here",
-  "Live help is available most hours in the %channel% channel of our Discord chat room. Or you can always email us at help@lbry.com.": "Live help is available most hours in the %channel% channel of our Discord chat room. Or you can always email us at help@lbry.com.",
-  "Your LBRY credits are controllable by you and only you, via a wallet file stored locally on your computer.": "Your LBRY credits are controllable by you and only you, via a wallet file stored locally on your computer.",
-  "However, it is easy to back up manually. To backup your wallet, make a copy of the folder listed below:": "However, it is easy to back up manually. To backup your wallet, make a copy of the folder listed below:",
-  "Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place. For more details on backing up and best practices %helpLink%.": "Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place. For more details on backing up and best practices %helpLink%.",
-  "%channelName% is not ready to be transferred. You can check the status %statusLink% or check back later.": "%channelName% is not ready to be transferred. You can check the status %statusLink% or check back later.",
-  "Your videos are ready to be transferred.": "Your videos are ready to be transferred.",
-  "Ready to transfer": "Ready to transfer",
-  "Claim Channels": "Claim Channels",
-  "Please check back later": "Please check back later",
-  "Your YouTube Channel": "Your YouTube Channel",
-  "Claim Channel": "Claim Channel",
-  "auth": "auth",
-  "Your videos are currently being transferred. .": "Your videos are currently being transferred. .",
-  "Please check back later.": "Please check back later."
+  "You have %credit_amount% in unclaimed rewards.": "You have %credit_amount% in unclaimed rewards."
 }
\ No newline at end of file