Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix emojis being unable to save #1539

Merged
merged 4 commits into from
Jun 25, 2023
Merged

Fix emojis being unable to save #1539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ad285b
Fix emojis being unable to save
SleeplessOne1917 Jun 24, 2023
77ff6b4
Merge branch 'main' into emoji-upload-button
alectrocute Jun 24, 2023
90ee8d3
Merge branch 'main' into emoji-upload-button
SleeplessOne1917 Jun 25, 2023
b770a4e
Merge branch 'main' into emoji-upload-button
SleeplessOne1917 Jun 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions src/shared/components/home/admin-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ interface AdminSettingsState {
instancesRes: RequestState<GetFederatedInstancesResponse>;
bannedRes: RequestState<BannedPersonsResponse>;
leaveAdminTeamRes: RequestState<GetSiteResponse>;
emojiLoading: boolean;
loading: boolean;
themeList: string[];
isIsomorphic: boolean;
Expand All @@ -59,7 +58,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes: { state: "empty" },
instancesRes: { state: "empty" },
leaveAdminTeamRes: { state: "empty" },
emojiLoading: false,
loading: false,
themeList: [],
isIsomorphic: false,
Expand Down Expand Up @@ -215,7 +213,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onCreate={this.handleCreateEmoji}
onDelete={this.handleDeleteEmoji}
onEdit={this.handleEditEmoji}
loading={this.state.emojiLoading}
/>
</div>
</div>
Expand Down Expand Up @@ -345,35 +342,23 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
}

async handleEditEmoji(form: EditCustomEmoji) {
this.setState({ emojiLoading: true });

const res = await HttpService.client.editCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}

this.setState({ emojiLoading: false });
}

async handleDeleteEmoji(form: DeleteCustomEmoji) {
this.setState({ emojiLoading: true });

const res = await HttpService.client.deleteCustomEmoji(form);
if (res.state === "success") {
removeFromEmojiDataModel(res.data.id);
}

this.setState({ emojiLoading: false });
}

async handleCreateEmoji(form: CreateCustomEmoji) {
this.setState({ emojiLoading: true });

const res = await HttpService.client.createCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}

this.setState({ emojiLoading: false });
}
}
192 changes: 115 additions & 77 deletions src/shared/components/home/emojis-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { myAuthRequired, setIsoData } from "@utils/app";
import { capitalizeFirstLetter } from "@utils/helpers";
import { Component, linkEvent } from "inferno";
import {
CreateCustomEmoji,
Expand All @@ -11,14 +12,13 @@ import { HttpService, I18NextService } from "../../services";
import { pictrsDeleteToast, toast } from "../../toast";
import { EmojiMart } from "../common/emoji-mart";
import { HtmlTags } from "../common/html-tags";
import { Icon } from "../common/icon";
import { Icon, Spinner } from "../common/icon";
import { Paginator } from "../common/paginator";

interface EmojiFormProps {
onEdit(form: EditCustomEmoji): void;
onCreate(form: CreateCustomEmoji): void;
onDelete(form: DeleteCustomEmoji): void;
loading: boolean;
}

interface EmojiFormState {
Expand All @@ -36,6 +36,7 @@ interface CustomEmojiViewForm {
keywords: string;
changed: boolean;
page: number;
loading: boolean;
}

export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
Expand All @@ -52,6 +53,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
keywords: x.keywords.map(x => x.keyword).join(" "),
changed: false,
page: 1 + Math.floor(index / this.itemsPerPage),
loading: false,
})),
page: 1,
};
Expand Down Expand Up @@ -119,33 +121,39 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
.map((cv, index) => (
<tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
<td style="text-align:center;">
<label
htmlFor={index.toString()}
className="pointer text-muted small font-weight-bold"
>
{cv.image_url.length > 0 && (
<img
className="icon-emoji-admin"
src={cv.image_url}
/>
)}
{cv.image_url.length == 0 && (
<span className="btn btn-sm btn-secondary">
Upload
</span>
)}
</label>
<input
name={index.toString()}
id={index.toString()}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
/>
{cv.image_url.length > 0 && (
<img
className="icon-emoji-admin"
src={cv.image_url}
alt={cv.alt_text}
/>
)}
{cv.image_url.length === 0 && (
<form>
<label
className="btn btn-sm btn-secondary pointer"
htmlFor={`file-uploader-${index}`}
data-tippy-content={I18NextService.i18n.t(
"upload_image"
)}
>
{capitalizeFirstLetter(
I18NextService.i18n.t("upload")
)}
<input
name={`file-uploader-${index}`}
id={`file-uploader-${index}`}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
/>
</label>
</form>
)}
</td>
<td className="text-right">
<input
Expand Down Expand Up @@ -213,26 +221,25 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
<span title={this.getEditTooltip(cv)}>
<button
className={
(cv.changed ? "text-success " : "text-muted ") +
"btn btn-link btn-animate"
(this.canEdit(cv)
? "text-success "
: "text-muted ") + "btn btn-link btn-animate"
}
onClick={linkEvent(
{ i: this, cv: cv },
this.handleEditEmojiClick
)}
data-tippy-content={I18NextService.i18n.t("save")}
aria-label={I18NextService.i18n.t("save")}
disabled={
this.props.loading ||
!this.canEdit(cv) ||
!cv.changed
}
disabled={!this.canEdit(cv)}
>
{/* <Icon
icon="edit"
classes={`icon-inline`}
/> */}
Save
{cv.loading ? (
<Spinner />
) : (
capitalizeFirstLetter(
I18NextService.i18n.t("save")
)
)}
</button>
</span>
<button
Expand All @@ -243,7 +250,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)}
data-tippy-content={I18NextService.i18n.t("delete")}
aria-label={I18NextService.i18n.t("delete")}
disabled={this.props.loading}
disabled={cv.loading}
title={I18NextService.i18n.t("delete")}
>
<Icon
Expand Down Expand Up @@ -281,7 +288,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
this.state.customEmojis.filter(
x => x.shortcode == cv.shortcode && x.id != cv.id
).length == 0;
return noEmptyFields && noDuplicateShortCodes;
return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
}

getEditTooltip(cv: CustomEmojiViewForm) {
Expand Down Expand Up @@ -339,19 +346,36 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
}

handleEmojiImageUrlChange(
props: { form: EmojiForm; index: number; overrideValue: string | null },
{
form,
index,
overrideValue,
}: { form: EmojiForm; index: number; overrideValue: string | null },
event: any
) {
const custom_emojis = [...props.form.state.customEmojis];
const pagedIndex =
(props.form.state.page - 1) * props.form.itemsPerPage + props.index;
const item = {
...props.form.state.customEmojis[pagedIndex],
image_url: props.overrideValue ?? event.target.value,
changed: true,
};
custom_emojis[Number(pagedIndex)] = item;
props.form.setState({ customEmojis: custom_emojis });
form.setState(prevState => {
const custom_emojis = [...form.state.customEmojis];
const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
const item = {
...form.state.customEmojis[pagedIndex],
image_url: overrideValue ?? event.target.value,
changed: true,
};
custom_emojis[Number(pagedIndex)] = item;
return {
...prevState,
customEmojis: prevState.customEmojis.map((ce, i) =>
i === pagedIndex
? {
...ce,
image_url: overrideValue ?? event.target.value,
changed: true,
loading: false,
}
: ce
),
};
});
}

handleEmojiAltTextChange(
Expand Down Expand Up @@ -409,7 +433,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
.split(" ")
.filter(x => x.length > 0) as string[];
const uniqueKeywords = Array.from(new Set(keywords));
if (d.cv.id != 0) {
if (d.cv.id !== 0) {
d.i.props.onEdit({
id: d.cv.id,
category: d.cv.category,
Expand All @@ -432,24 +456,33 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {

handleAddEmojiClick(form: EmojiForm, event: any) {
event.preventDefault();
const custom_emojis = [...form.state.customEmojis];
const page =
1 + Math.floor(form.state.customEmojis.length / form.itemsPerPage);
const item: CustomEmojiViewForm = {
id: 0,
shortcode: "",
alt_text: "",
category: "",
image_url: "",
keywords: "",
changed: true,
page: page,
};
custom_emojis.push(item);
form.setState({ customEmojis: custom_emojis, page: page });
form.setState(prevState => {
const page =
1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
const item: CustomEmojiViewForm = {
id: 0,
shortcode: "",
alt_text: "",
category: "",
image_url: "",
keywords: "",
changed: false,
page: page,
loading: false,
};

return {
...prevState,
customEmojis: [...prevState.customEmojis, item],
page,
};
});
}

handleImageUpload(props: { form: EmojiForm; index: number }, event: any) {
handleImageUpload(
{ form, index }: { form: EmojiForm; index: number },
event: any
) {
let file: any;
if (event.target) {
event.preventDefault();
Expand All @@ -458,20 +491,25 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
file = event;
}

form.setState(prevState => ({
...prevState,
customEmojis: prevState.customEmojis.map((cv, i) =>
i === index ? { ...cv, loading: true } : cv
),
}));

HttpService.client.uploadImage({ image: file }).then(res => {
console.log("pictrs upload:");
console.log(res);
if (res.state === "success") {
if (res.data.msg === "ok") {
pictrsDeleteToast(file.name, res.data.delete_url as string);
} else {
toast(JSON.stringify(res), "danger");
const hash = res.data.files?.at(0)?.file;
const url = `${res.data.url}/${hash}`;
props.form.handleEmojiImageUrlChange(
{ form: props.form, index: props.index, overrideValue: url },
form.handleEmojiImageUrlChange(
{ form: form, index: index, overrideValue: res.data.url as string },
event
);
} else {
toast(JSON.stringify(res), "danger");
}
} else if (res.state === "failed") {
console.error(res.msg);
Expand Down