better handling of pending form states

src/page/channelCreator/index.js

@@ -15,7 +15,7 @@ import {
 import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
 import { doUpdateChannelFormState, doClearChannelFormState } from 'redux/actions/form';
 import { selectDrawerStack } from 'redux/selectors/drawer';
-import { selectChannelFormState } from 'redux/selectors/form';
+import { selectChannelFormState, selectHasChannelFormState } from 'redux/selectors/form';
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import ChannelCreator from './view';
 
@@ -26,6 +26,7 @@ const select = state => ({
   drawerStack: selectDrawerStack(state),
   fetchingChannels: selectFetchingMyChannels(state),
   balance: selectBalance(state),
+  hasFormState: selectHasChannelFormState(state),
   updatingChannel: selectUpdatingChannel(state),
   updateChannelError: selectUpdateChannelError(state),
 });

src/page/channelCreator/view.js

@@ -35,7 +35,7 @@ export default class ChannelCreator extends React.PureComponent {
     canSave: false,
     claimId: null,
     currentSelectedValue: Constants.ITEM_ANONYMOUS,
-    currentPhase: Constants.PHASE_LIST,
+    currentPhase: null,
     displayName: null,
     channelNameUserEdited: false,
     newChannelTitle: '',
@@ -148,6 +148,7 @@ export default class ChannelCreator extends React.PureComponent {
       navigation,
       pushDrawerStack,
       setPlayerVisible,
+      hasFormState,
     } = this.props;
 
     NativeModules.Firebase.setCurrentScreen('Channels').then(result => {
@@ -163,17 +164,21 @@ export default class ChannelCreator extends React.PureComponent {
       DeviceEventEmitter.addListener('onDocumentPickerFilePicked', this.onFilePicked);
       DeviceEventEmitter.addListener('onDocumentPickerCanceled', this.onPickerCanceled);
 
+      let isEditMode = false;
       if (navigation.state.params) {
         const { editChannelUrl, displayForm } = navigation.state.params;
         if (editChannelUrl) {
+          isEditMode = true;
           this.setState({ editChannelUrl, currentPhase: Constants.PHASE_CREATE });
-        } else if (displayForm) {
-          this.loadPendingFormState();
-          this.setState({ currentPhase: Constants.PHASE_CREATE }, () =>
-            pushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM)
-          );
         }
       }
+
+      if (!isEditMode && hasFormState) {
+        this.loadPendingFormState();
+        this.setState({ currentPhase: Constants.PHASE_CREATE });
+      } else {
+        this.setState({ currentPhase: Constants.PHASE_LIST });
+      }
     });
   };
 
@@ -521,7 +526,6 @@ export default class ChannelCreator extends React.PureComponent {
   handleNewChannelPress = () => {
     const { pushDrawerStack } = this.props;
     pushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM);
-    this.loadPendingFormState();
     this.setState({ currentPhase: Constants.PHASE_CREATE });
   };
 

src/page/publish/index.js

@@ -11,13 +11,14 @@ import {
 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 { selectPublishFormState, selectHasPublishFormState } 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),
+  hasFormState: selectHasPublishFormState(state),
   publishFormState: selectPublishFormState(state),
   publishFormValues: selectPublishFormValues(state),
 });

src/page/publish/view.js

@@ -84,6 +84,7 @@ class PublishPage extends React.PureComponent {
     titleFocused: false,
     descriptionFocused: false,
     loadingVideos: false,
+    vanityUrl: null,
 
     // gallery videos
     videos: null,
@@ -102,7 +103,7 @@ class PublishPage extends React.PureComponent {
     currentMedia: null,
     currentThumbnailUri: null,
     updatingThumbnailUri: false,
-    currentPhase: Constants.PHASE_SELECTOR,
+    currentPhase: null,
 
     // publish
     advancedMode: false,
@@ -169,14 +170,13 @@ class PublishPage extends React.PureComponent {
 
   loadPendingFormState = () => {
     const { publishFormState } = this.props;
-    const advancedMode = publishFormState.license;
+    const advancedMode = publishFormState.license !== null;
     this.setState({ ...publishFormState, advancedMode });
   };
 
   onComponentFocused = () => {
-    const { balance, pushDrawerStack, setPlayerVisible, navigation } = this.props;
+    const { balance, hasFormState, pushDrawerStack, setPlayerVisible, navigation } = this.props;
     NativeModules.Firebase.setCurrentScreen('Publish').then(result => {
-      console.log(navigation.state.params);
       pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH, navigation.state.params ? navigation.state.params : null);
       setPlayerVisible();
 
@@ -193,24 +193,35 @@ class PublishPage extends React.PureComponent {
       );
 
       // Check if this is an edit action
+      let isEditMode = false,
+        vanityUrlSet = false;
       if (navigation.state.params) {
         const { displayForm, editMode, claimToEdit, vanityUrl } = navigation.state.params;
         if (editMode) {
           this.prepareEdit(claimToEdit);
+          isEditMode = true;
         } else if (vanityUrl) {
           const { claimName } = parseURI(vanityUrl);
+          vanityUrlSet = true;
           this.setState({
             name: claimName,
             hasEditedContentAddress: true,
-            vanityUrlSet: true,
+            vanityUrlSet,
+            vanityUrl: claimName,
           });
-        } else if (displayForm) {
-          this.loadPendingFormState();
-          this.setState({ currentPhase: Constants.PHASE_DETAILS }, () =>
-            pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM)
-          );
         }
       }
+
+      if (!isEditMode && hasFormState) {
+        this.loadPendingFormState();
+        if (vanityUrlSet) {
+          // replace name with the specified vanity URL if there was one in the pending state
+          this.setState({ name: this.state.vanityUrl });
+        }
+        this.setState({ currentPhase: Constants.PHASE_DETAILS });
+      } else {
+        this.setState({ currentPhase: Constants.PHASE_SELECTOR });
+      }
     });
   };
 
@@ -429,10 +440,6 @@ class PublishPage extends React.PureComponent {
       () => {
         this.handleNameChange(this.state.name);
         pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM);
-        if (!this.state.editMode) {
-          // overwrite media with previous?
-          this.loadPendingFormState();
-        }
       }
     );
   }
@@ -449,6 +456,7 @@ class PublishPage extends React.PureComponent {
         publishStarted: false,
         documentPickerOpen: false,
         editMode: false,
+        vanityUrl: null,
 
         currentMedia: null,
         currentThumbnailUri: null,

src/page/publishes/view.js

@@ -157,6 +157,15 @@ class PublishesPage extends React.PureComponent {
             initialNumToRender={8}
             maxToRenderPerBatch={24}
             removeClippedSubviews
+            ListFooterComponent={
+              <View style={publishStyle.publishesFooter}>
+                <Button
+                  style={publishStyle.publishesFooterButton}
+                  text={__('Publish something new')}
+                  onPress={() => navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISH })}
+                />
+              </View>
+            }
             renderItem={({ item }) => (
               <FileListItem
                 key={item}

src/redux/selectors/form.js

@@ -11,3 +11,13 @@ export const selectChannelFormState = createSelector(
   selectState,
   state => state.channelFormValues || {}
 );
+
+export const selectHasPublishFormState = createSelector(
+  selectPublishFormState,
+  values => Object.keys(values).length > 0
+);
+
+export const selectHasChannelFormState = createSelector(
+  selectChannelFormState,
+  values => Object.keys(values).length > 0
+);

src/styles/channelCreator.js

@@ -129,11 +129,9 @@ const channelCreatorStyle = StyleSheet.create({
   },
   scrollContainer: {
     marginTop: 60,
-    marginLeft: 16,
-    marginRight: 16,
   },
   scrollPadding: {
-    paddingTop: 16,
+    padding: 16,
   },
   channelListItem: {
     flexDirection: 'row',

src/styles/publish.js

@@ -433,6 +433,16 @@ const publishStyle = StyleSheet.create({
     fontSize: 14,
     color: Colors.DescriptionGrey,
   },
+  publishesFooter: {
+    marginTop: 16,
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  publishesFooterButton: {
+    alignSelf: 'flex-start',
+    backgroundColor: Colors.LbryGreen,
+    marginTop: 16,
+  },
 });
 
 export default publishStyle;