From 6e4765a743136c46471f5f923aaa863d0901ebf0 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Sun, 25 Aug 2019 17:07:50 +0100
Subject: [PATCH] fixes from ui/ux review

---
 src/component/channelSelector/view.js |  3 +-
 src/page/publish/view.js              | 71 +++++++++++++++++++--------
 src/page/publishes/view.js            |  8 +--
 3 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/component/channelSelector/view.js b/src/component/channelSelector/view.js
index 96b02a5..4584ce9 100644
--- a/src/component/channelSelector/view.js
+++ b/src/component/channelSelector/view.js
@@ -178,7 +178,7 @@ export default class ChannelSelector extends React.PureComponent {
 
   render() {
     const channel = this.state.addingChannel ? 'new' : this.props.channel;
-    const { fetchingChannels, channels = [] } = this.props;
+    const { enabled, fetchingChannels, channels = [] } = this.props;
     const pickerItems = [Constants.ITEM_ANONYMOUS, Constants.ITEM_CREATE_A_CHANNEL].concat(channels.map(ch => ch.name));
 
     const {
@@ -195,6 +195,7 @@ export default class ChannelSelector extends React.PureComponent {
     return (
       <View style={channelSelectorStyle.container}>
         <Picker
+          enabled={enabled}
           selectedValue={this.state.currentSelectedValue}
           style={channelSelectorStyle.channelPicker}
           itemStyle={channelSelectorStyle.channelPickerItem}
diff --git a/src/page/publish/view.js b/src/page/publish/view.js
index b7e7893..190ad51 100644
--- a/src/page/publish/view.js
+++ b/src/page/publish/view.js
@@ -77,6 +77,7 @@ class PublishPage extends React.PureComponent {
   camera = null;
 
   state = {
+    canPublish: false,
     canUseCamera: false,
     editMode: false,
     titleFocused: false,
@@ -109,6 +110,7 @@ class PublishPage extends React.PureComponent {
     priceSet: false,
 
     // input data
+    hasEditedContentAddress: false,
     bid: 0.1,
     description: null,
     title: null,
@@ -159,7 +161,7 @@ class PublishPage extends React.PureComponent {
   };
 
   onComponentFocused = () => {
-    const { pushDrawerStack, setPlayerVisible, navigation } = this.props;
+    const { balance, pushDrawerStack, setPlayerVisible, navigation } = this.props;
     pushDrawerStack();
     setPlayerVisible();
 
@@ -168,6 +170,7 @@ class PublishPage extends React.PureComponent {
       NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
       this.setState(
         {
+          canPublish: balance >= 0.1,
           loadingVideos: true,
         },
         () => {
@@ -216,6 +219,7 @@ class PublishPage extends React.PureComponent {
         editMode: true,
         currentPhase: Constants.PHASE_DETAILS,
 
+        hasEditedContentAddress: true,
         bid: amount,
         channelName,
         description,
@@ -335,7 +339,11 @@ class PublishPage extends React.PureComponent {
   };
 
   handlePublishSuccess = data => {
-    this.setState({ publishStarted: false, currentPhase: Constants.PHASE_PUBLISH });
+    const { navigation, notify } = this.props;
+    notify({
+      message: `Your content was successfully published to ${this.state.uri}. It will be available in a few mintues.`,
+    });
+    navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISHES, params: { publishSuccess: true } });
   };
 
   handlePublishFailure = error => {
@@ -371,7 +379,7 @@ class PublishPage extends React.PureComponent {
     this.setState(
       {
         currentMedia: media,
-        title: name,
+        title: null, // no title autogeneration (user will fill this in)
         name: this.formatNameForTitle(name),
         currentPhase: Constants.PHASE_DETAILS,
       },
@@ -404,6 +412,7 @@ class PublishPage extends React.PureComponent {
         priceSet: false,
 
         // input data
+        hasEditedContentAddress: false,
         bid: 0.1,
         description: null,
         title: null,
@@ -534,9 +543,13 @@ class PublishPage extends React.PureComponent {
     this.setState({ price });
   };
 
-  handleNameChange = name => {
+  handleNameChange = (name, userInput) => {
     const { notify } = this.props;
     this.setState({ name });
+    if (userInput) {
+      this.setState({ hasEditedContentAddress: true });
+    }
+
     if (!isNameValid(name, false)) {
       notify({ message: 'Your content address contains invalid characters' });
       return;
@@ -553,7 +566,7 @@ class PublishPage extends React.PureComponent {
   };
 
   handleAddTag = tag => {
-    if (!tag) {
+    if (!tag || !this.state.canPublish || this.state.publishStarted) {
       return;
     }
 
@@ -570,7 +583,7 @@ class PublishPage extends React.PureComponent {
   };
 
   handleRemoveTag = tag => {
-    if (!tag) {
+    if (!tag || !this.state.canPublish || this.state.publishStarted) {
       return;
     }
 
@@ -626,15 +639,20 @@ class PublishPage extends React.PureComponent {
   };
 
   handleTitleChange = title => {
-    this.setState(
-      {
-        title,
-        name: this.formatNameForTitle(title),
-      },
-      () => {
-        this.handleNameChange(this.state.name);
-      }
-    );
+    this.setState({ title });
+
+    if (!this.state.editMode && !this.state.hasEditedContentAddress) {
+      // only autogenerate url if the user has not yet edited the field
+      // also shouldn't change url in edit mode
+      this.setState(
+        {
+          name: this.formatNameForTitle(title),
+        },
+        () => {
+          this.handleNameChange(this.state.name);
+        }
+      );
+    }
   };
 
   handleDescriptionChange = description => {
@@ -774,7 +792,7 @@ class PublishPage extends React.PureComponent {
               />
             </View>
           )}
-          {balance < 0.1 && <PublishRewardsDriver navigation={navigation} />}
+          {!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
 
           {this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
             <View style={publishStyle.thumbnailUploadContainer}>
@@ -789,6 +807,7 @@ class PublishPage extends React.PureComponent {
                 <Text style={publishStyle.textInputTitle}>Title</Text>
               )}
               <TextInput
+                editable={this.state.canPublish && !this.state.publishStarted}
                 placeholder={this.state.titleFocused ? '' : 'Title'}
                 style={publishStyle.inputText}
                 value={this.state.title}
@@ -806,6 +825,7 @@ class PublishPage extends React.PureComponent {
                 <Text style={publishStyle.textInputTitle}>Description</Text>
               )}
               <TextInput
+                editable={this.state.canPublish && !this.state.publishStarted}
                 placeholder={this.state.descriptionFocused ? '' : 'Description'}
                 style={publishStyle.inputText}
                 value={this.state.description}
@@ -837,7 +857,11 @@ class PublishPage extends React.PureComponent {
           <View style={publishStyle.card}>
             <Text style={publishStyle.cardTitle}>Channel</Text>
 
-            <ChannelSelector channelName={this.state.channelName} onChannelChange={this.handleChannelChange} />
+            <ChannelSelector
+              enabled={this.state.canPublish && !this.state.publishStarted}
+              channelName={this.state.channelName}
+              onChannelChange={this.handleChannelChange}
+            />
           </View>
 
           <View style={publishStyle.card}>
@@ -855,6 +879,7 @@ class PublishPage extends React.PureComponent {
             {this.state.priceSet && (
               <View style={[publishStyle.inputRow, publishStyle.priceInputRow]}>
                 <TextInput
+                  editable={this.state.canPublish && !this.state.publishStarted}
                   placeholder={'0.00'}
                   keyboardType={'number-pad'}
                   style={publishStyle.priceInput}
@@ -869,7 +894,7 @@ class PublishPage extends React.PureComponent {
           </View>
 
           <View style={publishStyle.card}>
-            <Text style={publishStyle.cardTitle}>Content Address</Text>
+            <Text style={publishStyle.cardTitle}>Content address</Text>
             <Text style={publishStyle.helpText}>
               The address where people can find your content (ex. lbry://myvideo).
               {this.state.editMode &&
@@ -877,16 +902,17 @@ class PublishPage extends React.PureComponent {
             </Text>
 
             <TextInput
+              editable={!this.state.editMode && this.state.canPublish && !this.state.publishStarted}
               placeholder={'lbry://'}
-              editable={!this.state.editMode}
               style={publishStyle.inputText}
               underlineColorAndroid={Colors.NextLbryGreen}
               numberOfLines={1}
               value={this.state.name}
-              onChangeText={this.handleNameChange}
+              onChangeText={value => this.handleNameChange(value, true)}
             />
             <View style={publishStyle.inputRow}>
               <TextInput
+                editable={this.state.canPublish && !this.state.publishStarted}
                 placeholder={'0.00'}
                 style={publishStyle.priceInput}
                 underlineColorAndroid={Colors.NextLbryGreen}
@@ -906,6 +932,7 @@ class PublishPage extends React.PureComponent {
               <View>
                 <Text style={publishStyle.cardText}>Language</Text>
                 <Picker
+                  enabled={this.state.canPublish && !this.state.publishStarted}
                   selectedValue={this.state.language}
                   style={publishStyle.picker}
                   itemStyle={publishStyle.pickerItem}
@@ -920,6 +947,7 @@ class PublishPage extends React.PureComponent {
               <View>
                 <Text style={publishStyle.cardText}>License</Text>
                 <Picker
+                  enabled={this.state.canPublish && !this.state.publishStarted}
                   selectedValue={this.state.license}
                   style={publishStyle.picker}
                   itemStyle={publishStyle.pickerItem}
@@ -935,6 +963,7 @@ class PublishPage extends React.PureComponent {
                 </Picker>
                 {[LICENSES.COPYRIGHT, LICENSES.OTHER].includes(this.state.license) && (
                   <TextInput
+                    editable={this.state.canPublish && !this.state.publishStarted}
                     placeholder={'License description'}
                     style={publishStyle.inputText}
                     underlineColorAndroid={Colors.NextLbryGreen}
@@ -977,7 +1006,7 @@ class PublishPage extends React.PureComponent {
               <View style={publishStyle.rightActionButtons}>
                 <Button
                   style={publishStyle.publishButton}
-                  disabled={balance < 0.1 || !this.state.uploadedThumbnailUri}
+                  disabled={!this.state.canPublish || !this.state.uploadedThumbnailUri}
                   text={this.state.editMode ? 'Save changes' : 'Publish'}
                   onPress={this.handlePublishPressed}
                 />
diff --git a/src/page/publishes/view.js b/src/page/publishes/view.js
index b2be4ba..e0cd223 100644
--- a/src/page/publishes/view.js
+++ b/src/page/publishes/view.js
@@ -37,10 +37,10 @@ class PublishesPage extends React.PureComponent {
     const { checkPendingPublishes, fetchMyClaims, pushDrawerStack, setPlayerVisible } = this.props;
     pushDrawerStack();
     setPlayerVisible();
-    NativeModules.Firebase.setCurrentScreen('Publishes');
-
-    fetchMyClaims();
-    checkPendingPublishes();
+    NativeModules.Firebase.setCurrentScreen('Publishes').then(result => {
+      fetchMyClaims();
+      checkPendingPublishes();
+    });
   };
 
   addOrRemoveItem = (uri, claim) => {