Fix copy title from metadata (#2518)

* Fix copy title bug

* Refactor

* Update translations

* Fix it for real this time

* Remove query params when field is empty

lemmy-translations

@@ -1 +1 @@
-Subproject commit b3bdd9cf78a234438dcc7ccb904739280eda5915
+Subproject commit 866cf9f6469f99598be93dcce5e40f85d202ac22

src/shared/components/post/create-post.tsx

@@ -80,6 +80,10 @@ function fetchCommunitiesForOptions(client: WrappedLemmyHttp) {
   return client.listCommunities({ limit: 30, sort: "TopMonth", type_: "All" });
 }
 
+function stringAsQueryParam(param?: string) {
+  return (param?.length ?? 0) > 0 ? param : undefined;
+}
+
 interface CreatePostState {
   siteRes: GetSiteResponse;
   loading: boolean;
@@ -123,6 +127,7 @@ export class CreatePost extends Component<
     this.handleNsfwChange = this.handleNsfwChange.bind(this);
     this.handleThumbnailUrlBlur = this.handleThumbnailUrlBlur.bind(this);
     this.handleAltTextBlur = this.handleAltTextBlur.bind(this);
+    this.handleCopySuggestedTitle = this.handleCopySuggestedTitle.bind(this);
 
     // Only fetch the data if coming from another routeupdate
     if (FirstLoadService.isFirstLoad) {
@@ -253,6 +258,7 @@ export class CreatePost extends Component<
               onUrlBlur={this.handleUrlBlur}
               onThumbnailUrlBlur={this.handleThumbnailUrlBlur}
               onNsfwChange={this.handleNsfwChange}
+              onCopySuggestedTitle={this.handleCopySuggestedTitle}
             />
           </div>
         </div>
@@ -276,14 +282,14 @@ export class CreatePost extends Component<
     };
 
     const createPostQueryParams: QueryParams<CreatePostProps> = {
-      body,
+      body: stringAsQueryParam(body),
       communityId: communityId?.toString(),
-      customThumbnailUrl,
+      customThumbnailUrl: stringAsQueryParam(customThumbnailUrl),
       languageId: languageId?.toString(),
-      title,
+      title: stringAsQueryParam(title),
       nsfw,
-      url,
-      altText,
+      url: stringAsQueryParam(url),
+      altText: stringAsQueryParam(altText),
     };
 
     this.props.history.replace({
@@ -328,6 +334,10 @@ export class CreatePost extends Component<
     this.updateUrl({ altText });
   }
 
+  handleCopySuggestedTitle(url: string, title: string) {
+    this.updateUrl({ url, title });
+  }
+
   async handlePostCreate(form: CreatePostI, bypassNavWarning: () => void) {
     this.setState({ loading: true });
     const res = await HttpService.client.createPost(form);

src/shared/components/post/post-form.tsx

@@ -70,6 +70,7 @@ interface PostFormProps {
   onNsfwChange?: (nsfw: StringBoolean) => void;
   onThumbnailUrlBlur?: (thumbnailUrl: string) => void;
   onAltTextBlur?: (altText: string) => void;
+  onCopySuggestedTitle?: (url: string, title: string) => void;
 }
 
 interface PostFormState {
@@ -93,6 +94,7 @@ interface PostFormState {
   previewMode: boolean;
   submitted: boolean;
   bypassNavWarning: boolean;
+  urlBlurTimeout?: NodeJS.Timeout;
 }
 
 function handlePostSubmit(i: PostForm, event: any) {
@@ -144,18 +146,32 @@ function handlePostSubmit(i: PostForm, event: any) {
   }
 }
 
-function copySuggestedTitle(d: { i: PostForm; suggestedTitle?: string }) {
-  const sTitle = d.suggestedTitle;
-  if (sTitle) {
-    d.i.setState(
-      s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s),
+function copySuggestedTitle({
+  i,
+  suggestedTitle,
+}: {
+  i: PostForm;
+  suggestedTitle?: string;
+}) {
+  if (suggestedTitle) {
+    clearTimeout(i.state.urlBlurTimeout);
+    i.setState({ urlBlurTimeout: undefined });
+
+    i.setState(
+      s => (
+        (s.form.name = suggestedTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s
+      ),
     );
-    d.i.setState({ suggestedPostsRes: EMPTY_REQUEST });
+    i.setState({ suggestedPostsRes: EMPTY_REQUEST });
     setTimeout(() => {
-      if (d.i.postTitleRef.current) {
-        autosize.update(d.i.postTitleRef.current);
+      if (i.postTitleRef.current) {
+        autosize.update(i.postTitleRef.current);
       }
     }, 10);
+
+    i.updateUrl(() =>
+      i.props.onCopySuggestedTitle?.(i.state.form.url!, suggestedTitle),
+    );
   }
 }
 
@@ -175,17 +191,19 @@ function handlePostUrlChange(i: PostForm, event: any) {
 }
 
 function handlePostUrlBlur(i: PostForm, event: any) {
-  i.setState({ bypassNavWarning: true });
-  i.props.onUrlBlur?.(event.target.value);
-  i.setState({ bypassNavWarning: false });
+  i.setState({
+    urlBlurTimeout: setTimeout(() => {
+      i.updateUrl(() => i.props.onUrlBlur?.(event.target.value));
+    }, 500),
+  });
 }
 
 function handlePostNsfwChange(i: PostForm, event: any) {
   i.setState(s => ((s.form.nsfw = event.target.checked), s));
 
-  i.setState({ bypassNavWarning: true });
-  i.props.onNsfwChange?.(event.target.checked ? "true" : "false");
-  i.setState({ bypassNavWarning: false });
+  i.updateUrl(() =>
+    i.props.onNsfwChange?.(event.target.checked ? "true" : "false"),
+  );
 }
 
 function handleHoneyPotChange(i: PostForm, event: any) {
@@ -197,9 +215,7 @@ function handleAltTextChange(i: PostForm, event: any) {
 }
 
 function handleAltTextBlur(i: PostForm, event: any) {
-  i.setState({ bypassNavWarning: true });
-  i.props.onAltTextBlur?.(event.target.value);
-  i.setState({ bypassNavWarning: false });
+  i.updateUrl(() => i.props.onAltTextBlur?.(event.target.value));
 }
 
 function handleCustomThumbnailChange(i: PostForm, event: any) {
@@ -207,9 +223,7 @@ function handleCustomThumbnailChange(i: PostForm, event: any) {
 }
 
 function handleCustomThumbnailBlur(i: PostForm, event: any) {
-  i.setState({ bypassNavWarning: true });
-  i.props.onThumbnailUrlBlur?.(event.target.value);
-  i.setState({ bypassNavWarning: false });
+  i.updateUrl(() => i.props.onThumbnailUrlBlur?.(event.target.value));
 }
 
 function handleCancel(i: PostForm) {
@@ -261,9 +275,7 @@ function handlePostNameChange(i: PostForm, event: any) {
 }
 
 function handlePostNameBlur(i: PostForm, event: any) {
-  i.setState({ bypassNavWarning: true });
-  i.props.onTitleBlur?.(event.target.value);
-  i.setState({ bypassNavWarning: false });
+  i.updateUrl(() => i.props.onTitleBlur?.(event.target.value));
 }
 
 function handleImageDelete(i: PostForm) {
@@ -306,6 +318,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     this.handlePostBodyBlur = this.handlePostBodyBlur.bind(this);
     this.handleLanguageChange = this.handleLanguageChange.bind(this);
     this.handleCommunitySelect = this.handleCommunitySelect.bind(this);
+    this.updateUrl = this.updateUrl.bind(this);
 
     const { post_view, selectedCommunityChoice, params } = this.props;
 
@@ -354,6 +367,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         },
       };
     }
+
+    if (this.state.form.url) {
+      this.fetchPageTitle();
+    }
   }
 
   componentDidMount() {
@@ -816,17 +833,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   }
 
   handlePostBodyBlur(val: string) {
-    this.setState({ bypassNavWarning: true });
-    this.props.onBodyBlur?.(val);
-    this.setState({ bypassNavWarning: false });
+    this.updateUrl(() => this.props.onBodyBlur?.(val));
   }
 
   handleLanguageChange(val: number[]) {
     this.setState(s => ((s.form.language_id = val.at(0)), s));
-
-    this.setState({ bypassNavWarning: true });
-    this.props.onLanguageChange?.(val.at(0));
-    this.setState({ bypassNavWarning: false });
+    this.updateUrl(() => this.props.onLanguageChange?.(val.at(0)));
   }
 
   handleCommunitySearch = debounce(async (text: string) => {
@@ -853,8 +865,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   });
 
   handleCommunitySelect(choice: Choice) {
+    this.updateUrl(() => this.props.onSelectCommunity?.(choice));
+  }
+
+  updateUrl(update: () => void) {
     this.setState({ bypassNavWarning: true });
-    this.props.onSelectCommunity?.(choice);
+    update();
     this.setState({ bypassNavWarning: false });
   }
 }