fix auto populate title logic

ui/component/publishFile/view.jsx

@@ -35,6 +35,7 @@ type Props = {
   autoPopulateName: boolean,
   setPublishMode: string => void,
   setPrevFileText: string => void,
+  setAutoPopulateName: boolean => void,
 };
 
 function PublishFile(props: Props) {
@@ -60,6 +61,7 @@ function PublishFile(props: Props) {
     setPublishMode,
     setPrevFileText,
     autoPopulateName,
+    setAutoPopulateName,
   } = props;
 
   const ffmpegAvail = ffmpegStatus.available;
@@ -217,15 +219,13 @@ function PublishFile(props: Props) {
     return newName.replace(INVALID_URI_CHARS, '-');
   }
 
-  function handleTitleChange(e) {
-    const newTitle = e.target.value;
-    const noName = !name || name.trim() === '';
-    const hasTitle = newTitle && newTitle.trim() !== '';
+  function handleTitleChange(event) {
+    const title = event.target.value;
     // Update title
-    updatePublishForm({ title: newTitle });
-    // Auto-populate name from title
-    if (hasTitle && (noName || autoPopulateName)) {
-      updatePublishForm({ name: parseName(newTitle) });
+    updatePublishForm({ title });
+    // Auto populate name from title
+    if (autoPopulateName) {
+      updatePublishForm({ name: parseName(title) });
     }
   }
 
@@ -313,6 +313,12 @@ function PublishFile(props: Props) {
     if (!isStillEditing) {
       publishFormParams.name = parseName(fileName);
     }
+
+    // Prevent name autopopulation from title
+    if (autoPopulateName) {
+      setAutoPopulateName(false);
+    }
+
     // File path is not supported on web for security reasons so we use the name instead.
     setCurrentFile(file.path || file.name);
     updatePublishForm(publishFormParams);

ui/component/publishForm/view.jsx

@@ -64,7 +64,6 @@ type Props = {
   licenseType: string,
   otherLicenseDescription: ?string,
   licenseUrl: ?string,
-  uri: ?string,
   useLBRYUploader: ?boolean,
   publishing: boolean,
   balance: number,
@@ -86,6 +85,9 @@ function PublishForm(props: Props) {
   const [mode, setMode] = React.useState(PUBLISH_MODES.FILE);
   const [autoSwitchMode, setAutoSwitchMode] = React.useState(true);
 
+  // Used to checl if the url name has changed:
+  // A new file needs to be provided
+  const [prevName, setPrevName] = React.useState(false);
   // Used to checl if the file has been modified by user
   const [fileEdited, setFileEdited] = React.useState(false);
   const [prevFileText, setPrevFileText] = React.useState('');
@@ -124,9 +126,11 @@ function PublishForm(props: Props) {
   const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === '');
   const formDisabled = (fileFormDisabled && !editingURI) || emptyPostError || publishing;
   const isInProgress = filePath || editingURI || name || title;
+
   // Editing content info
   const uri = myClaimForUri ? myClaimForUri.permanent_url : undefined;
   const fileMimeType = myClaimForUri ? myClaimForUri.value.source.media_type : undefined;
+  const nameEdited = isStillEditing && name !== prevName;
 
   // If they are editing, they don't need a new file chosen
   const formValidLessFile =
@@ -159,6 +163,15 @@ function PublishForm(props: Props) {
     }
   }, [thumbnail, resetThumbnailStatus]);
 
+  // Save current name of the editing claim
+  useEffect(() => {
+    if (isStillEditing && (!prevName || !prevName.trim() === '')) {
+      if (name !== prevName) {
+        setPrevName(name);
+      }
+    }
+  }, [name, prevName, setPrevName, isStillEditing]);
+
   // Check for content changes on the text editor
   useEffect(() => {
     if (!fileEdited && fileText !== prevFileText && fileText !== '') {
@@ -238,9 +251,9 @@ function PublishForm(props: Props) {
 
     if (mode === PUBLISH_MODES.POST) {
       let outputFile = filePath;
-      // If user modified content on the text editor:
+      // If user modified content on the text editor or editing name has changed:
       // Save changes and updat file path
-      if (fileEdited) {
+      if (fileEdited || nameEdited) {
         // @if TARGET='app'
         outputFile = await saveFileChanges();
         // @endif
@@ -306,6 +319,7 @@ function PublishForm(props: Props) {
         setPublishMode={setMode}
         setPrevFileText={setPrevFileText}
         autoPopulateName={autoPopulateNameFromTitle}
+        setAutoPopulateName={setAutoPopulateNameFromTitle}
       />
       {!publishing && (
         <div className={classnames({ 'card--disabled': formDisabled })}>

ui/component/publishName/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { isNameValid } from 'lbry-redux';
 import { FormField } from 'component/common/form';
 import NameHelpText from './name-help-text';
@@ -48,23 +48,22 @@ function PublishName(props: Props) {
       prepareEdit(myClaimForUri, uri);
     }
   }
-  const handleNameChange = useCallback(
-    event => {
-      const newName = event.target.value;
-      const hasName = newName && newName.trim() !== '';
-      updatePublishForm({ name: newName });
 
-      // Don't autoPopulate name from title if user sets a custom name
-      if (hasName && autoPopulateName) {
-        setAutoPopulateName(false);
-      }
-      // Enable name autopopulation from title
-      if (!hasName && !autoPopulateName) {
-        setAutoPopulateName(true);
-      }
-    },
-    [autoPopulateName, setAutoPopulateName]
-  );
+  function handleNameChange(event) {
+    updatePublishForm({ name: event.target.value });
+
+    if (autoPopulateName) {
+      setAutoPopulateName(false);
+    }
+  }
+
+  useEffect(() => {
+    const hasName = name && name.trim() !== '';
+    // Enable name autopopulation from title
+    if (!hasName && !autoPopulateName) {
+      setAutoPopulateName(true);
+    }
+  }, [name, autoPopulateName, setAutoPopulateName]);
 
   useEffect(() => {
     let nameError;