LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 19:31:26 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1539 from LemmyNet/emoji-upload-button

Browse source 
Fix emojis being unable to save
This commit is contained in:
SleeplessOne1917 2023-06-25 04:53:14 +00:00 committed by GitHub
commit 816aaded11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 115 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/shared/components/home/admin-settings.tsx
View file

@ -44,7 +44,6 @@ interface AdminSettingsState {
instancesRes: RequestState<GetFederatedInstancesResponse>; instancesRes: RequestState<GetFederatedInstancesResponse>;
bannedRes: RequestState<BannedPersonsResponse>; bannedRes: RequestState<BannedPersonsResponse>;
leaveAdminTeamRes: RequestState<GetSiteResponse>; leaveAdminTeamRes: RequestState<GetSiteResponse>;
emojiLoading: boolean;
loading: boolean; loading: boolean;
themeList: string[]; themeList: string[];
isIsomorphic: boolean; isIsomorphic: boolean;
@ -59,7 +58,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes: { state: "empty" }, bannedRes: { state: "empty" },
instancesRes: { state: "empty" }, instancesRes: { state: "empty" },
leaveAdminTeamRes: { state: "empty" }, leaveAdminTeamRes: { state: "empty" },
emojiLoading: false,
loading: false, loading: false,
themeList: [], themeList: [],
isIsomorphic: false, isIsomorphic: false,
@ -215,7 +213,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onCreate={this.handleCreateEmoji} onCreate={this.handleCreateEmoji}
onDelete={this.handleDeleteEmoji} onDelete={this.handleDeleteEmoji}
onEdit={this.handleEditEmoji} onEdit={this.handleEditEmoji}
loading={this.state.emojiLoading}
/> />
</div> </div>
</div> </div>
@ -345,35 +342,23 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
} }
async handleEditEmoji(form: EditCustomEmoji) { async handleEditEmoji(form: EditCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.editCustomEmoji(form); const res = await HttpService.client.editCustomEmoji(form);
if (res.state === "success") { if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji); updateEmojiDataModel(res.data.custom_emoji);
} }
this.setState({ emojiLoading: false });
} }
async handleDeleteEmoji(form: DeleteCustomEmoji) { async handleDeleteEmoji(form: DeleteCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.deleteCustomEmoji(form); const res = await HttpService.client.deleteCustomEmoji(form);
if (res.state === "success") { if (res.state === "success") {
removeFromEmojiDataModel(res.data.id); removeFromEmojiDataModel(res.data.id);
} }
this.setState({ emojiLoading: false });
} }
async handleCreateEmoji(form: CreateCustomEmoji) { async handleCreateEmoji(form: CreateCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.createCustomEmoji(form); const res = await HttpService.client.createCustomEmoji(form);
if (res.state === "success") { if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji); updateEmojiDataModel(res.data.custom_emoji);
} }
this.setState({ emojiLoading: false });
} }
} }

192
src/shared/components/home/emojis-form.tsx
View file

@ -1,4 +1,5 @@
import { myAuthRequired, setIsoData } from "@utils/app"; import { myAuthRequired, setIsoData } from "@utils/app";
import { capitalizeFirstLetter } from "@utils/helpers";
import { Component, linkEvent } from "inferno"; import { Component, linkEvent } from "inferno";
import { import {
CreateCustomEmoji, CreateCustomEmoji,
@ -11,14 +12,13 @@ import { HttpService, I18NextService } from "../../services";
import { pictrsDeleteToast, toast } from "../../toast"; import { pictrsDeleteToast, toast } from "../../toast";
import { EmojiMart } from "../common/emoji-mart"; import { EmojiMart } from "../common/emoji-mart";
import { HtmlTags } from "../common/html-tags"; import { HtmlTags } from "../common/html-tags";
import { Icon } from "../common/icon"; import { Icon, Spinner } from "../common/icon";
import { Paginator } from "../common/paginator"; import { Paginator } from "../common/paginator";
interface EmojiFormProps { interface EmojiFormProps {
onEdit(form: EditCustomEmoji): void; onEdit(form: EditCustomEmoji): void;
onCreate(form: CreateCustomEmoji): void; onCreate(form: CreateCustomEmoji): void;
onDelete(form: DeleteCustomEmoji): void; onDelete(form: DeleteCustomEmoji): void;
loading: boolean;
} }
interface EmojiFormState { interface EmojiFormState {
@ -36,6 +36,7 @@ interface CustomEmojiViewForm {
keywords: string; keywords: string;
changed: boolean; changed: boolean;
page: number; page: number;
loading: boolean;
} }
export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> { export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
@ -52,6 +53,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
keywords: x.keywords.map(x => x.keyword).join(" "), keywords: x.keywords.map(x => x.keyword).join(" "),
changed: false, changed: false,
page: 1 + Math.floor(index / this.itemsPerPage), page: 1 + Math.floor(index / this.itemsPerPage),
loading: false,
})), })),
page: 1, page: 1,
}; };
@ -119,33 +121,39 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
.map((cv, index) => ( .map((cv, index) => (
<tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}> <tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
<td style="text-align:center;"> <td style="text-align:center;">
<label {cv.image_url.length > 0 && (
htmlFor={index.toString()} <img
className="pointer text-muted small font-weight-bold" className="icon-emoji-admin"
> src={cv.image_url}
{cv.image_url.length > 0 && ( alt={cv.alt_text}
<img />
className="icon-emoji-admin" )}
src={cv.image_url} {cv.image_url.length === 0 && (
/> <form>
)} <label
{cv.image_url.length == 0 && ( className="btn btn-sm btn-secondary pointer"
<span className="btn btn-sm btn-secondary"> htmlFor={`file-uploader-${index}`}
Upload data-tippy-content={I18NextService.i18n.t(
</span> "upload_image"
)} )}
</label> >
<input {capitalizeFirstLetter(
name={index.toString()} I18NextService.i18n.t("upload")
id={index.toString()} )}
type="file" <input
accept="image/*" name={`file-uploader-${index}`}
className="d-none" id={`file-uploader-${index}`}
onChange={linkEvent( type="file"
{ form: this, index: index }, accept="image/*"
this.handleImageUpload className="d-none"
)} onChange={linkEvent(
/> { form: this, index: index },
this.handleImageUpload
)}
/>
</label>
</form>
)}
</td> </td>
<td className="text-right"> <td className="text-right">
<input <input
@ -213,8 +221,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
<span title={this.getEditTooltip(cv)}> <span title={this.getEditTooltip(cv)}>
<button <button
className={ className={
(cv.changed ? "text-success " : "text-muted ") + (this.canEdit(cv)
"btn btn-link btn-animate" ? "text-success "
: "text-muted ") + "btn btn-link btn-animate"
} }
onClick={linkEvent( onClick={linkEvent(
{ i: this, cv: cv }, { i: this, cv: cv },
@ -222,17 +231,15 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)} )}
data-tippy-content={I18NextService.i18n.t("save")} data-tippy-content={I18NextService.i18n.t("save")}
aria-label={I18NextService.i18n.t("save")} aria-label={I18NextService.i18n.t("save")}
disabled={ disabled={!this.canEdit(cv)}
this.props.loading ||
!this.canEdit(cv) ||
!cv.changed
}
> >
{/* <Icon {cv.loading ? (
icon="edit" <Spinner />
classes={`icon-inline`} ) : (
/> */} capitalizeFirstLetter(
Save I18NextService.i18n.t("save")
)
)}
</button> </button>
</span> </span>
<button <button
@ -243,7 +250,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)} )}
data-tippy-content={I18NextService.i18n.t("delete")} data-tippy-content={I18NextService.i18n.t("delete")}
aria-label={I18NextService.i18n.t("delete")} aria-label={I18NextService.i18n.t("delete")}
disabled={this.props.loading} disabled={cv.loading}
title={I18NextService.i18n.t("delete")} title={I18NextService.i18n.t("delete")}
> >
<Icon <Icon
@ -281,7 +288,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
this.state.customEmojis.filter( this.state.customEmojis.filter(
x => x.shortcode == cv.shortcode && x.id != cv.id x => x.shortcode == cv.shortcode && x.id != cv.id
).length == 0; ).length == 0;
return noEmptyFields && noDuplicateShortCodes; return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
} }
getEditTooltip(cv: CustomEmojiViewForm) { getEditTooltip(cv: CustomEmojiViewForm) {
@ -339,19 +346,36 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
} }
handleEmojiImageUrlChange( handleEmojiImageUrlChange(
props: { form: EmojiForm; index: number; overrideValue: string | null }, {
form,
index,
overrideValue,
}: { form: EmojiForm; index: number; overrideValue: string | null },
event: any event: any
) { ) {
const custom_emojis = [...props.form.state.customEmojis]; form.setState(prevState => {
const pagedIndex = const custom_emojis = [...form.state.customEmojis];
(props.form.state.page - 1) * props.form.itemsPerPage + props.index; const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
const item = { const item = {
...props.form.state.customEmojis[pagedIndex], ...form.state.customEmojis[pagedIndex],
image_url: props.overrideValue ?? event.target.value, image_url: overrideValue ?? event.target.value,
changed: true, changed: true,
}; };
custom_emojis[Number(pagedIndex)] = item; custom_emojis[Number(pagedIndex)] = item;
props.form.setState({ customEmojis: custom_emojis }); return {
...prevState,
customEmojis: prevState.customEmojis.map((ce, i) =>
i === pagedIndex
? {
...ce,
image_url: overrideValue ?? event.target.value,
changed: true,
loading: false,
}
: ce
),
};
});
} }
handleEmojiAltTextChange( handleEmojiAltTextChange(
@ -409,7 +433,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
.split(" ") .split(" ")
.filter(x => x.length > 0) as string[]; .filter(x => x.length > 0) as string[];
const uniqueKeywords = Array.from(new Set(keywords)); const uniqueKeywords = Array.from(new Set(keywords));
if (d.cv.id != 0) { if (d.cv.id !== 0) {
d.i.props.onEdit({ d.i.props.onEdit({
id: d.cv.id, id: d.cv.id,
category: d.cv.category, category: d.cv.category,
@ -432,24 +456,33 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
handleAddEmojiClick(form: EmojiForm, event: any) { handleAddEmojiClick(form: EmojiForm, event: any) {
event.preventDefault(); event.preventDefault();
const custom_emojis = [...form.state.customEmojis]; form.setState(prevState => {
const page = const page =
1 + Math.floor(form.state.customEmojis.length / form.itemsPerPage); 1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
const item: CustomEmojiViewForm = { const item: CustomEmojiViewForm = {
id: 0, id: 0,
shortcode: "", shortcode: "",
alt_text: "", alt_text: "",
category: "", category: "",
image_url: "", image_url: "",
keywords: "", keywords: "",
changed: true, changed: false,
page: page, page: page,
}; loading: false,
custom_emojis.push(item); };
form.setState({ customEmojis: custom_emojis, page: page });
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; let file: any;
if (event.target) { if (event.target) {
event.preventDefault(); event.preventDefault();
@ -458,20 +491,25 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
file = event; 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 => { HttpService.client.uploadImage({ image: file }).then(res => {
console.log("pictrs upload:"); console.log("pictrs upload:");
console.log(res); console.log(res);
if (res.state === "success") { if (res.state === "success") {
if (res.data.msg === "ok") { if (res.data.msg === "ok") {
pictrsDeleteToast(file.name, res.data.delete_url as string); pictrsDeleteToast(file.name, res.data.delete_url as string);
} else { form.handleEmojiImageUrlChange(
toast(JSON.stringify(res), "danger"); { form: form, index: index, overrideValue: res.data.url as string },
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 },
event event
); );
} else {
toast(JSON.stringify(res), "danger");
} }
} else if (res.state === "failed") { } else if (res.state === "failed") {
console.error(res.msg); console.error(res.msg);