support channel pending state

static/app-strings.json

@@ -1236,5 +1236,8 @@
   "Loading your channels...": "Loading your channels...",
   "Try Out the App!": "Try Out the App!",
   "Download the app to track files you've viewed and downloaded.": "Download the app to track files you've viewed and downloaded.",
-  "Create a New Channel": "Create a New Channel"
+  "Create a New Channel": "Create a New Channel",
+  "Thumbnail source": "Thumbnail source",
+  "Cover source": "Cover source",
+  "Your changes will be live in a few minutes": "Your changes will be live in a few minutes"
 }

ui/component/channelAbout/view.jsx

@@ -31,6 +31,7 @@ function ChannelAbout(props: Props) {
     <div className="card">
       <section className="section card--section">
         <Fragment>
+          <label>{__('Description')}</label>
           {description && (
             <div className="media__info-text media__info-text--constrained">
               <MarkdownPreview content={description} />

ui/component/channelEdit/index.js

@@ -8,6 +8,7 @@ import {
   doUpdateChannel,
   makeSelectAmountForUri,
   makeSelectClaimForUri,
+  selectUpdateChannelError,
 } from 'lbry-redux';
 import ChannelPage from './view';
 
@@ -24,6 +25,7 @@ const select = (state, props) => ({
   languages: makeSelectMetadataItemForUri(props.uri, 'languages')(state),
   amount: makeSelectAmountForUri(props.uri)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
+  updateError: selectUpdateChannelError(state),
 });
 
 const perform = dispatch => ({

ui/component/channelEdit/view.jsx

@@ -3,10 +3,10 @@ import React, { useState } from 'react';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import SelectAsset from 'component/selectAsset';
-import * as PAGES from 'constants/pages';
 import { MINIMUM_PUBLISH_BID } from 'constants/claim';
 import TagsSearch from 'component/tagsSearch';
 import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
+import ErrorText from 'component/common/error-text';
 
 type Props = {
   claim: ChannelClaim,
@@ -22,10 +22,11 @@ type Props = {
   tags: Array<string>,
   locations: Array<string>,
   languages: Array<string>,
-  updateChannel: any => void,
+  updateChannel: any => Promise<any>,
   updateThumb: string => void,
   updateCover: string => void,
-  setEditing: boolean => void,
+  doneEditing: () => void,
+  updateError: string,
 };
 
 function ChannelForm(props: Props) {
@@ -41,10 +42,11 @@ function ChannelForm(props: Props) {
     locations,
     languages,
     amount,
-    setEditing,
+    doneEditing,
     updateChannel,
     updateThumb,
     updateCover,
+    updateError,
   } = props;
   const { claim_id: claimId } = claim;
 
@@ -101,13 +103,17 @@ function ChannelForm(props: Props) {
   };
 
   const handleSubmit = () => {
-    updateChannel(params);
+    updateChannel(params).then(success => {
-    setEditing(false);
+      if (success) {
+        doneEditing();
+      }
+    });
   };
 
   // TODO clear and bail after submit
   return (
-    <section className={'card--section'}>
+    <div className="card">
+      <section className={'section card--section'}>
         <SelectAsset
           onUpdate={v => handleThumbnailChange(v)}
           currentValue={params.thumbnailUrl}
@@ -199,12 +205,17 @@ function ChannelForm(props: Props) {
         />
         <div className={'section__actions'}>
           <Button button="primary" label={__('Submit')} onClick={handleSubmit} />
-        <Button button="link" label={__('Cancel')} navigate={`$/${PAGES.CHANNELS}`} />
+          <Button button="link" label={__('Cancel')} onClick={doneEditing} />
         </div>
+        {updateError && updateError.length ? (
+          <ErrorText>{updateError}</ErrorText>
+        ) : (
           <p className="help">
             {__('After submitting, you will not see the changes immediately. Please check back in a few minutes.')}
           </p>
+        )}
       </section>
+    </div>
   );
 }
 

ui/component/claimAbandonButton/view.jsx

@@ -8,14 +8,15 @@ type Props = {
   doOpenModal: (string, {}) => void,
   claim: StreamClaim,
   abandonActionCallback: any => void,
+  iconSize: number,
 };
 
 export default function ClaimAbandonButton(props: Props) {
-  const { doOpenModal, claim, abandonActionCallback } = props;
+  const { doOpenModal, claim, abandonActionCallback, iconSize } = props;
 
   function abandonClaim() {
     doOpenModal(MODALS.CONFIRM_CLAIM_REVOKE, { claim: claim, cb: abandonActionCallback });
   }
 
-  return <Button button="secondary" icon={ICONS.DELETE} onClick={abandonClaim} />;
+  return <Button disabled={!claim} button="alt" iconSize={iconSize} icon={ICONS.DELETE} onClick={abandonClaim} />;
 }

ui/component/claimPreviewTile/view.jsx

@@ -61,7 +61,7 @@ function ClaimPreviewTile(props: Props) {
   const isRepost = claim && claim.repost_channel_url;
   const shouldFetch = claim === undefined;
   const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
-  const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
+  const claimsInChannel = (claim && claim.meta && claim.meta.claims_in_channel) || 0;
   const canonicalUrl = claim && claim.canonical_url;
   const navigateUrl = formatLbryUrlForWeb(canonicalUrl || uri || '/');
 

ui/page/channel/index.js

@@ -7,6 +7,7 @@ import {
   selectCurrentChannelPage,
   makeSelectClaimForUri,
   selectChannelIsBlocked,
+  makeSelectClaimIsPending,
 } from 'lbry-redux';
 import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
@@ -23,6 +24,7 @@ const select = (state, props) => ({
   channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   subCount: makeSelectSubCountForUri(props.uri)(state),
+  pending: makeSelectClaimIsPending(props.uri)(state),
 });
 
 const perform = dispatch => ({

ui/page/channel/view.jsx

@@ -46,6 +46,7 @@ type Props = {
   }>,
   fetchSubCount: string => void,
   subCount: number,
+  pending: boolean,
 };
 
 function ChannelPage(props: Props) {
@@ -64,6 +65,7 @@ function ChannelPage(props: Props) {
     blackListedOutpoints,
     fetchSubCount,
     subCount,
+    pending,
   } = props;
 
   const { channelName } = parseURI(uri);
@@ -98,6 +100,12 @@ function ChannelPage(props: Props) {
     history.push(`${url}${search}`);
   }
 
+  function doneEditing() {
+    setEditing(false);
+    setThumbPreview(thumbnail);
+    setCoverPreview(cover);
+  }
+
   useEffect(() => {
     Lbryio.call('yt', 'get_youtuber', { channel_claim_id: claimId }).then(response => {
       if (response.is_verified_youtuber) {
@@ -176,12 +184,28 @@ function ChannelPage(props: Props) {
               <HelpLink href="https://lbry.com/faq/views" />
             </span>
             {channelIsMine && !editing && (
+              <>
+                {pending ? (
+                  <span>{__('Your changes will be live in a few minutes')}</span>
+                ) : (
                   <Button
                     button="alt"
                     title={__('Edit')}
                     onClick={() => setEditing(!editing)}
                     icon={ICONS.EDIT}
                     iconSize={18}
+                    disabled={pending}
+                  />
+                )}
+              </>
+            )}
+            {channelIsMine && editing && (
+              <Button
+                button="alt"
+                title={__('Cancel')}
+                onClick={() => doneEditing()}
+                icon={ICONS.REMOVE}
+                iconSize={18}
               />
             )}
           </div>
@@ -203,7 +227,7 @@ function ChannelPage(props: Props) {
             {editing ? (
               <ChannelEdit
                 uri={uri}
-                setEditing={setEditing}
+                doneEditing={doneEditing}
                 updateThumb={v => setThumbPreview(v)}
                 updateCover={v => setCoverPreview(v)}
               />

ui/page/channels/index.js

@@ -1,10 +1,16 @@
 import { connect } from 'react-redux';
-import { selectMyChannelClaims, doFetchChannelListMine, selectFetchingMyChannels } from 'lbry-redux';
+import {
+  selectMyChannelClaims,
+  selectMyChannelUrls,
+  doFetchChannelListMine,
+  selectFetchingMyChannels,
+} from 'lbry-redux';
 import { selectYoutubeChannels } from 'redux/selectors/user';
 import { doOpenModal } from 'redux/actions/app';
 import ChannelsPage from './view';
 
 const select = state => ({
+  channelUrls: selectMyChannelUrls(state),
   channels: selectMyChannelClaims(state),
   fetchingChannels: selectFetchingMyChannels(state),
   youtubeChannels: selectYoutubeChannels(state),

ui/page/channels/view.jsx

@@ -11,6 +11,7 @@ import Card from 'component/common/card';
 
 type Props = {
   channels: Array<ChannelClaim>,
+  channelUrls: Array<string>,
   fetchChannelListMine: () => void,
   fetchingChannels: boolean,
   youtubeChannels: ?Array<any>,
@@ -18,30 +19,19 @@ type Props = {
 };
 
 export default function ChannelsPage(props: Props) {
-  const { channels, fetchChannelListMine, fetchingChannels, youtubeChannels, openModal } = props;
+  const { channels, channelUrls, fetchChannelListMine, fetchingChannels, youtubeChannels, openModal } = props;
   const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
   const hasPendingChannels = channels && channels.some(channel => channel.confirmations < 0);
 
   useEffect(() => {
     fetchChannelListMine();
-
-    let interval;
-    if (hasPendingChannels) {
-      interval = setInterval(() => {
-        fetchChannelListMine();
-      }, 5000);
-    }
-
-    return () => {
-      clearInterval(interval);
-    };
   }, [fetchChannelListMine, hasPendingChannels]);
 
   return (
     <Page>
       {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
 
-      {channels && Boolean(channels.length) && (
+      {channelUrls && Boolean(channelUrls.length) && (
         <Card
           title={__('Your Channels')}
           titleActions={
@@ -53,12 +43,10 @@ export default function ChannelsPage(props: Props) {
             />
           }
           isBodyList
-          body={
+          body={<ClaimList isCardBody loading={fetchingChannels} uris={channelUrls} />}
-            <ClaimList isCardBody loading={fetchingChannels} uris={channels.map(channel => channel.permanent_url)} />
-          }
         />
       )}
-      {!(channels && channels.length) && (
+      {!(channelUrls && channelUrls.length) && (
         <React.Fragment>
           {!fetchingChannels ? (
             <section className="main--empty">

ui/redux/actions/publish.js

@@ -6,7 +6,7 @@ import {
   batchActions,
   selectMyClaims,
   doPublish,
-  doCheckPendingPublishes,
+  doCheckPendingClaims,
   doCheckReflectingFiles,
   ACTIONS as LBRY_REDUX_ACTIONS,
 } from 'lbry-redux';
@@ -101,5 +101,5 @@ export const doCheckPendingPublishesApp = () => (dispatch: Dispatch, getState: G
       };
     }
   };
-  return dispatch(doCheckPendingPublishes(onConfirmed));
+  return dispatch(doCheckPendingClaims(onConfirmed));
 };