persist publish form state

src/page/channelCreator/view.js

@@ -110,8 +110,8 @@ export default class ChannelCreator extends React.PureComponent {
   };
 
   componentWillReceiveProps(nextProps) {
-    const { currentRoute, drawerStack, updatingChannel, updateChannelError } = nextProps;
     const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify } = this.props;
+    const { currentRoute, drawerStack, updatingChannel, updateChannelError } = nextProps;
 
     if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR === currentRoute && currentRoute !== prevRoute) {
       this.onComponentFocused();
@@ -169,7 +169,9 @@ export default class ChannelCreator extends React.PureComponent {
           this.setState({ editChannelUrl, currentPhase: Constants.PHASE_CREATE });
         } else if (displayForm) {
           this.loadPendingFormState();
-          this.setState({ currentPhase: Constants.PHASE_CREATE });
+          this.setState({ currentPhase: Constants.PHASE_CREATE }, () =>
+            pushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM)
+          );
         }
       }
     });

src/page/publish/index.js

@@ -8,22 +8,30 @@ import {
   selectBalance,
   selectPublishFormValues,
 } from 'lbry-redux';
-import { doPushDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
+import { selectDrawerStack } from 'redux/selectors/drawer';
+import { doUpdatePublishFormState, doClearPublishFormState } from 'redux/actions/form';
+import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
+import { selectPublishFormState } from 'redux/selectors/form';
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import PublishPage from './view';
 
 const select = state => ({
   balance: selectBalance(state),
+  drawerStack: selectDrawerStack(state),
+  publishFormState: selectPublishFormState(state),
   publishFormValues: selectPublishFormValues(state),
 });
 
 const perform = dispatch => ({
   notify: data => dispatch(doToast(data)),
+  clearPublishFormState: () => dispatch(doClearPublishFormState()),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
+  updatePublishFormState: data => dispatch(doUpdatePublishFormState(data)),
   uploadThumbnail: (filePath, fsAdapter) => dispatch(doUploadThumbnail(filePath, null, fsAdapter)),
   publish: (success, fail) => dispatch(doPublish(success, fail)),
   resolveUri: uri => dispatch(doResolveUri(uri)),
-  pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH)),
+  pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)),
+  popDrawerStack: () => dispatch(doPopDrawerStack()),
   setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
 });
 

src/page/publish/view.js

@@ -167,12 +167,19 @@ class PublishPage extends React.PureComponent {
     this.setState({ allThumbnailsChecked: true });
   };
 
+  loadPendingFormState = () => {
+    const { publishFormState } = this.props;
+    const advancedMode = publishFormState.license;
+    this.setState({ ...publishFormState, advancedMode });
+  };
+
   onComponentFocused = () => {
     const { balance, pushDrawerStack, setPlayerVisible, navigation } = this.props;
-    pushDrawerStack();
-    setPlayerVisible();
-
     NativeModules.Firebase.setCurrentScreen('Publish').then(result => {
+      console.log(navigation.state.params);
+      pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH, navigation.state.params ? navigation.state.params : null);
+      setPlayerVisible();
+
       NativeModules.Gallery.canUseCamera().then(canUseCamera => this.setState({ canUseCamera }));
       NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
       this.setState(
@@ -187,7 +194,7 @@ class PublishPage extends React.PureComponent {
 
       // Check if this is an edit action
       if (navigation.state.params) {
-        const { editMode, claimToEdit, vanityUrl } = navigation.state.params;
+        const { displayForm, editMode, claimToEdit, vanityUrl } = navigation.state.params;
         if (editMode) {
           this.prepareEdit(claimToEdit);
         } else if (vanityUrl) {
@@ -197,15 +204,22 @@ class PublishPage extends React.PureComponent {
             hasEditedContentAddress: true,
             vanityUrlSet: true,
           });
+        } else if (displayForm) {
+          this.loadPendingFormState();
+          this.setState({ currentPhase: Constants.PHASE_DETAILS }, () =>
+            pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM)
+          );
         }
       }
     });
   };
 
   prepareEdit = claim => {
-    let channelName;
+    const { pushDrawerStack } = this.props;
     const { amount, name, signing_channel: signingChannel, value } = claim;
     const { description, fee, languages, license, license_url: licenseUrl, tags, thumbnail, title } = value;
+
+    let channelName;
     if (signingChannel) {
       channelName = signingChannel.name;
     }
@@ -256,6 +270,7 @@ class PublishPage extends React.PureComponent {
         if (channelName) {
           this.handleChannelChange(channelName);
         }
+        pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM);
       }
     );
   };
@@ -374,8 +389,8 @@ class PublishPage extends React.PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { currentRoute, publishFormValues } = nextProps;
+    const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify, updatePublishFormState } = this.props;
-    const { currentRoute: prevRoute, notify } = this.props;
+    const { currentRoute, drawerStack, publishFormValues } = nextProps;
 
     if (Constants.DRAWER_ROUTE_PUBLISH === currentRoute && currentRoute !== prevRoute) {
       this.onComponentFocused();
@@ -383,24 +398,42 @@ class PublishPage extends React.PureComponent {
 
     if (publishFormValues) {
       if (publishFormValues.thumbnail && !this.state.uploadedThumbnailUri) {
-        this.setState({
+        const { thumbnail } = publishFormValues;
-          currentThumbnailUri: publishFormValues.thumbnail,
+        updatePublishFormState({ currentThumbnailUri: thumbnail, uploadedThumbnailUri: thumbnail });
-          uploadedThumbnailUri: publishFormValues.thumbnail,
+        this.setState({ currentThumbnailUri: thumbnail, uploadedThumbnailUri: thumbnail });
-        });
       }
     }
+
+    if (
+      this.state.currentPhase === Constants.PHASE_DETAILS &&
+      prevDrawerStack[prevDrawerStack.length - 1].route === Constants.DRAWER_ROUTE_PUBLISH_FORM &&
+      drawerStack[drawerStack.length - 1].route === Constants.DRAWER_ROUTE_PUBLISH
+    ) {
+      // navigated back from the form
+      this.showSelector();
+    }
   }
 
   setCurrentMedia(media) {
+    const { pushDrawerStack, updatePublishFormState } = this.props;
     const name = generateCombination(2, ' ', true);
+    const newName = this.state.hasEditedContentAddress ? this.state.name : this.formatNameForTitle(name);
+    updatePublishFormState({ currentMedia: media, name: newName });
     this.setState(
       {
         currentMedia: media,
         title: null, // no title autogeneration (user will fill this in)
-        name: this.state.hasEditedContentAddress ? this.state.name : this.formatNameForTitle(name),
+        name: newName,
         currentPhase: Constants.PHASE_DETAILS,
       },
-      () => this.handleNameChange(this.state.name)
+      () => {
+        this.handleNameChange(this.state.name);
+        pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM);
+        if (!this.state.editMode) {
+          // overwrite media with previous?
+          this.loadPendingFormState();
+        }
+      }
     );
   }
 
@@ -505,6 +538,8 @@ class PublishPage extends React.PureComponent {
   };
 
   handleCameraActionPressed = () => {
+    const { pushDrawerStack } = this.props;
+
     // check if it's video or photo mode
     if (this.state.videoRecordingMode) {
       if (this.state.recordingVideo) {
@@ -522,14 +557,17 @@ class PublishPage extends React.PureComponent {
             duration: 0,
           };
           this.setCurrentMedia(currentMedia);
-          this.setState({
+          this.setState(
-            currentThumbnailUri: null,
+            {
-            updatingThumbnailUri: false,
+              currentThumbnailUri: null,
-            currentPhase: Constants.PHASE_DETAILS,
+              updatingThumbnailUri: false,
-            showCameraOverlay: false,
+              currentPhase: Constants.PHASE_DETAILS,
-            videoRecordingMode: false,
+              showCameraOverlay: false,
-            recordingVideo: false,
+              videoRecordingMode: false,
-          });
+              recordingVideo: false,
+            },
+            () => pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM)
+          );
         });
       }
     } else {
@@ -543,13 +581,16 @@ class PublishPage extends React.PureComponent {
           duration: 0,
         };
         this.setCurrentMedia(currentMedia);
-        this.setState({
+        this.setState(
-          currentPhase: Constants.PHASE_DETAILS,
+          {
-          currentThumbnailUri: null,
+            currentPhase: Constants.PHASE_DETAILS,
-          updatingThumbnailUri: false,
+            currentThumbnailUri: null,
-          showCameraOverlay: false,
+            updatingThumbnailUri: false,
-          videoRecordingMode: false,
+            showCameraOverlay: false,
-        });
+            videoRecordingMode: false,
+          },
+          () => pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH)
+        );
       });
     }
   };
@@ -575,15 +616,20 @@ class PublishPage extends React.PureComponent {
   };
 
   handleBidChange = bid => {
+    const { updatePublishFormState } = this.props;
+    updatePublishFormState({ bid });
     this.setState({ bid });
   };
 
   handlePriceChange = price => {
+    const { updatePublishFormState } = this.props;
+    updatePublishFormState({ price });
     this.setState({ price });
   };
 
   handleNameChange = (name, userInput) => {
-    const { notify } = this.props;
+    const { notify, updatePublishFormState } = this.props;
+    updatePublishFormState({ name });
     this.setState({ name });
     if (userInput) {
       this.setState({ hasEditedContentAddress: true });
@@ -599,8 +645,10 @@ class PublishPage extends React.PureComponent {
   };
 
   handleChannelChange = channel => {
+    const { updatePublishFormState } = this.props;
     const { name } = this.state;
     const uri = this.getNewUri(name, channel);
+    updatePublishFormState({ uri, channelName: channel, selectedChannel: channel });
     this.setState({ uri, channelName: channel, selectedChannel: channel });
   };
 
@@ -609,12 +657,13 @@ class PublishPage extends React.PureComponent {
       return;
     }
 
-    const { notify } = this.props;
+    const { notify, updatePublishFormState } = this.props;
     const { tags } = this.state;
     const index = tags.indexOf(tag.toLowerCase());
     if (index === -1) {
       const newTags = tags.slice();
       newTags.push(tag);
+      updatePublishFormState({ tags: newTags });
       this.setState({ tags: newTags });
     } else {
       notify({ message: __(`You already added the "${tag}" tag.`) });
@@ -626,11 +675,13 @@ class PublishPage extends React.PureComponent {
       return;
     }
 
+    const { updatePublishFormState } = this.props;
     const newTags = this.state.tags.slice();
     const index = newTags.indexOf(tag.toLowerCase());
 
     if (index > -1) {
       newTags.splice(index, 1);
+      updatePublishFormState({ tags: newTags });
       this.setState({ tags: newTags });
     }
   };
@@ -678,6 +729,8 @@ class PublishPage extends React.PureComponent {
   };
 
   handleTitleChange = title => {
+    const { updatePublishFormState } = this.props;
+    updatePublishFormState({ title });
     this.setState({ title });
 
     if (!this.state.editMode && !this.state.hasEditedContentAddress) {
@@ -695,38 +748,46 @@ class PublishPage extends React.PureComponent {
   };
 
   handleCurrencyValueChange = currency => {
+    const { updatePublishFormState } = this.props;
+    updatePublishFormState({ currency });
     this.setState({ currency });
   };
 
   handleDescriptionChange = description => {
+    const { updatePublishFormState } = this.props;
+    updatePublishFormState({ description });
     this.setState({ description });
   };
 
   handleLanguageValueChange = language => {
+    const { updatePublishFormState } = this.props;
+    updatePublishFormState({ language });
     this.setState({ language });
   };
 
   handleLicenseValueChange = license => {
+    const { updatePublishFormState } = this.props;
+
     const otherLicenseDescription = [LICENSES.COPYRIGHT, LICENSES.OTHER].includes(license)
       ? this.state.otherLicenseDescription
       : '';
-
+    const licenseUrl = LICENSES.CC_LICENSES.reduce((value, item) => {
-    this.setState({
+      if (typeof value === 'object') {
-      otherLicenseDescription,
+        value = '';
-      license,
+      }
-      licenseUrl: LICENSES.CC_LICENSES.reduce((value, item) => {
+      if (license === item.value) {
-        if (typeof value === 'object') {
+        value = item.url;
-          value = '';
+      }
-        }
+      return value;
-        if (license === item.value) {
-          value = item.url;
-        }
-        return value;
-      }),
     });
+
+    updatePublishFormState({ otherLicenseDescription, license, licenseUrl });
+    this.setState({ otherLicenseDescription, license, licenseUrl });
   };
 
   handleChangeLicenseDescription = otherLicenseDescription => {
+    const { updatePublishFormState } = this.props;
+    updatePublishFormState({ otherLicenseDescription });
     this.setState({ otherLicenseDescription });
   };
 
@@ -831,17 +892,17 @@ class PublishPage extends React.PureComponent {
                 resizeMode={FastImage.resizeMode.contain}
                 source={{ uri: currentThumbnailUri }}
               />
+
+              {this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
+                <View style={publishStyle.thumbnailUploadContainer}>
+                  <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
+                  <Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
+                </View>
+              )}
             </View>
           )}
           {!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
 
-          {this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
-            <View style={publishStyle.thumbnailUploadContainer}>
-              <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
-              <Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
-            </View>
-          )}
-
           <View style={publishStyle.card}>
             <View style={publishStyle.textInputLayout}>
               {(this.state.titleFocused || (this.state.title != null && this.state.title.trim().length > 0)) && (

src/styles/publish.js

@@ -328,18 +328,24 @@ const publishStyle = StyleSheet.create({
     marginLeft: 4,
   },
   thumbnailUploadContainer: {
-    marginTop: 16,
-    marginLeft: 16,
-    marginRight: 16,
-    paddingLeft: 2,
-    paddingRight: 2,
-    flexDirection: 'row',
     alignItems: 'center',
+    borderRadius: 16,
+    flexDirection: 'row',
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    backgroundColor: '#00000077',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
+    justifyContent: 'center',
   },
   thumbnailUploadText: {
-    fontFamily: 'Inter-UI-Regular',
+    color: Colors.White,
-    fontSize: 14,
+    fontFamily: 'Inter-UI-SemiBold',
-    marginLeft: 8,
+    fontSize: 12,
+    marginLeft: 4,
   },
   toggleField: {
     flexDirection: 'row',