lbry-desktop/ui/component/youtubeTransferStatus/view.jsx

// @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>,
  youtubeImportPending: boolean,
  claimChannels: () => void,
  updateUser: () => void,
  checkYoutubeTransfer: () => void,
  videosImported: ?Array<number>, // [currentAmountImported, totalAmountToImport]
  hideChannelLink: boolean,
};

export default function YoutubeTransferStatus(props: Props) {
  const {
    youtubeChannels,
    youtubeImportPending,
    claimChannels,
    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;
  if (hasPendingTransfers && videosImported) {
    complete = videosImported[0];
    total = videosImported[1];
  }

  function getMessage(channel) {
    const { transferable, transfer_state: transferState, sync_status: syncStatus } = channel;
    if (!transferable) {
      switch (transferState) {
        case YOUTUBE_STATUSES.NOT_TRANSFERRED:
          return syncStatus[0].toUpperCase() + syncStatus.slice(1);
        case YOUTUBE_STATUSES.PENDING_TRANSFER:
          return __('Transfer in progress');
        case YOUTUBE_STATUSES.COMPLETED_TRANSFER:
          return __('Completed transfer');
      }
    } else {
      return __('Ready to transfer');
    }
  }

  React.useEffect(() => {
    // If a channel is transferable, there's nothing to check
    if (hasPendingTransfers) {
      checkYoutubeTransfer();

      let interval = setInterval(() => {
        checkYoutubeTransfer();
        updateUser();
      }, 60 * 1000);

      return () => {
        clearInterval(interval);
      };
    }
  }, [hasPendingTransfers, checkYoutubeTransfer, updateUser]);

  return (
    hasChannels &&
    !isYoutubeTransferComplete && (
      <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.')}
            </span>
          }
          body={
            <section>
              {youtubeChannels.map((channel, index) => {
                const {
                  lbry_channel_name: channelName,
                  channel_claim_id: claimId,
                  status_token: statusToken,
                } = 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}
                      />
                    ) : (
                      <div className="section--padded">
                        <p>
                          <I18nMessage
                            tokens={{
                              channelName,
                            }}
                          >
                            %channelName% is not yet ready to be transferred. Please allow up to one week, though it is
                            frequently faster.
                          </I18nMessage>
                        </p>
                        <p className="help">
                          <I18nMessage
                            tokens={{
                              statusLink: <Button button="link" href={STATUS_URL + statusToken} label={__('here')} />,
                              faqLink: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/youtube" />,
                            }}
                          >
                            You can check your status %statusLink%. This %faqLink% explains the program in more detail.
                          </I18nMessage>
                        </p>
                      </div>
                    )}
                  </div>
                );
              })}
              {videosImported && (
                <div className="section help">{__('%complete% / %total% videos transferred', { complete, total })}</div>
              )}
            </section>
          }
          actions={
            transferEnabled ? (
              <div className="card__actions">
                <Button
                  button="primary"
                  disabled={youtubeImportPending}
                  onClick={claimChannels}
                  label={youtubeChannels.length > 1 ? __('Claim Channels') : __('Claim Channel')}
                />
                <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
            )
          }
        />
      </div>
    )
  );
}