Bot avatar uploading

This commit is contained in:
Snazzah 2021-08-31 01:42:50 +00:00 committed by GitHub
parent 3678a32d95
commit 430714e816

View file

@ -11,6 +11,7 @@ import { useEffect, useState } from "preact/hooks";
import { stopPropagation } from "../../../lib/stopPropagation"; import { stopPropagation } from "../../../lib/stopPropagation";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { useClient } from "../../../context/revoltjs/RevoltClient"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import Tooltip from "../../../components/common/Tooltip"; import Tooltip from "../../../components/common/Tooltip";
@ -54,15 +55,16 @@ const BotBadge = styled.div`
interface Props { interface Props {
bot: Bot; bot: Bot;
user: User; onDelete(): void;
onDelete(): Promise<void>; onUpdate(changes: Changes): void;
onUpdate(changes: Changes): Promise<void>;
} }
function BotCard({ bot, user, onDelete, onUpdate }: Props) { function BotCard({ bot, onDelete, onUpdate }: Props) {
const client = useClient();
const [user, setUser] = useState<User>(client.users.get(bot._id)!);
const [data, setData] = useState<Data>({ const [data, setData] = useState<Data>({
_id: bot._id, _id: bot._id,
username: user!.username, username: user.username,
public: bot.public, public: bot.public,
interactions_url: bot.interactions_url, interactions_url: bot.interactions_url,
}); });
@ -79,13 +81,13 @@ function BotCard({ bot, user, onDelete, onUpdate }: Props) {
const changes: Changes = {}; const changes: Changes = {};
if (data.username !== user!.username) changes.name = data.username; if (data.username !== user!.username) changes.name = data.username;
if (data.public !== bot.public) changes.public = data.public; if (data.public !== bot.public) changes.public = data.public;
if (data.interactions_url === '') if (data.interactions_url === "") changes.remove = "InteractionsURL";
changes.remove = 'InteractionsURL';
else if (data.interactions_url !== bot.interactions_url) else if (data.interactions_url !== bot.interactions_url)
changes.interactions_url = data.interactions_url; changes.interactions_url = data.interactions_url;
setSaving(true); setSaving(true);
try { try {
await onUpdate(changes); await client.bots.edit(bot._id, changes);
onUpdate(changes);
setEditMode(false); setEditMode(false);
} catch (e) { } catch (e) {
// TODO error handling // TODO error handling
@ -93,6 +95,25 @@ function BotCard({ bot, user, onDelete, onUpdate }: Props) {
setSaving(false); setSaving(false);
} }
async function editBotAvatar(avatar?: string) {
setSaving(true);
await client.request("PATCH", "/users/id", {
headers: { "x-bot-token": bot.token },
transformRequest: (data, headers) => {
// Remove user headers for this request
delete headers["x-user-id"];
delete headers["x-session-token"];
return data;
},
data: JSON.stringify(avatar ? { avatar } : { remove: "Avatar" }),
});
const res = await client.bots.fetch(bot._id);
if (!avatar) res.user.update({}, "Avatar");
setUser(res.user);
setSaving(false);
}
return ( return (
<div <div
key={bot._id} key={bot._id}
@ -103,17 +124,39 @@ function BotCard({ bot, user, onDelete, onUpdate }: Props) {
}}> }}>
<div className={styles.infoheader}> <div className={styles.infoheader}>
<div className={styles.container}> <div className={styles.container}>
<UserIcon {!editMode ? (
className={styles.avatar} <UserIcon
target={user!} className={styles.avatar}
size={48} target={user}
onClick={() => size={48}
openScreen({ onClick={() =>
id: "profile", openScreen({
user_id: user!._id, id: "profile",
}) user_id: user._id,
} })
/> }
/>
) : (
<FileUploader
width={64}
height={64}
style="icon"
fileType="avatars"
behaviour="upload"
maxFileSize={4_000_000}
onUpload={(avatar) => editBotAvatar(avatar)}
remove={() => editBotAvatar()}
defaultPreview={user.generateAvatarURL(
{ max_side: 256 },
true,
)}
previewURL={user.generateAvatarURL(
{ max_side: 256 },
true,
)}
/>
)}
{!editMode ? ( {!editMode ? (
<div className={styles.userDetail}> <div className={styles.userDetail}>
<div className={styles.userName}> <div className={styles.userName}>
@ -165,6 +208,7 @@ function BotCard({ bot, user, onDelete, onUpdate }: Props) {
</Tooltip> </Tooltip>
)} )}
<Button <Button
disabled={saving}
onClick={() => { onClick={() => {
if (editMode) { if (editMode) {
setData({ setData({
@ -228,8 +272,7 @@ function BotCard({ bot, user, onDelete, onUpdate }: Props) {
onChange={(e) => onChange={(e) =>
setData({ setData({
...data, ...data,
interactions_url: interactions_url: e.currentTarget.value,
e.currentTarget.value,
}) })
} }
/> />
@ -244,7 +287,11 @@ function BotCard({ bot, user, onDelete, onUpdate }: Props) {
</Button> </Button>
<Button <Button
error error
onClick={onDelete}> onClick={async () => {
setSaving(true);
await client.bots.delete(bot._id);
onDelete();
}}>
Delete Delete
</Button> </Button>
</> </>
@ -300,29 +347,33 @@ export const MyBots = observer(() => {
</p> </p>
<Overline>my bots</Overline> <Overline>my bots</Overline>
{bots?.map((bot) => { {bots?.map((bot) => {
const user = client.users.get(bot._id)!;
return ( return (
<BotCard <BotCard
key={bot._id} key={bot._id}
bot={bot} bot={bot}
user={user}
onDelete={() => onDelete={() =>
client.bots setBots(bots.filter((x) => x._id !== bot._id))
.delete(bot._id)
.then(() => setBots(bots.filter((x) => x._id !== bot._id)))
} }
onUpdate={(changes: Changes) => onUpdate={(changes: Changes) =>
client.bots.edit(bot._id, changes).then(() => setBots( setBots(
bots.map((x) => { bots.map((x) => {
if (x._id === bot._id) { if (x._id === bot._id) {
if ('public' in changes && typeof changes.public === 'boolean') x.public = changes.public; if (
if ('interactions_url' in changes) x.interactions_url = changes.interactions_url; "public" in changes &&
if (changes.remove === 'InteractionsURL') x.interactions_url = undefined; typeof changes.public === "boolean"
)
x.public = changes.public;
if ("interactions_url" in changes)
x.interactions_url =
changes.interactions_url;
if (
changes.remove === "InteractionsURL"
)
x.interactions_url = undefined;
} }
return x; return x;
}), }),
)) )
} }
/> />
); );