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
This commit is contained in:
SleeplessOne1917 2024-06-07 13:21:04 -04:00 committed by GitHub
parent 46fd196019
commit c9b7f66925
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 63 additions and 37 deletions

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

View file

@ -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);

View file

@ -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 });
}
}