mirror of
https://github.com/revoltchat/revite.git
synced 2025-02-22 00:00:56 -05:00
Bot avatar uploading
This commit is contained in:
parent
3678a32d95
commit
430714e816
1 changed files with 84 additions and 33 deletions
|
@ -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;
|
||||||
}),
|
}),
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Reference in a new issue