cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

error handling & styling

Browse source
This commit is contained in:
Snazzah 2021-08-31 03:23:07 +00:00 committed by GitHub
parent a76d992db1
commit d2740f2844
2 changed files with 44 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/pages/settings/panes/MyBots.tsx
View file

@ -9,8 +9,8 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import { stopPropagation } from "../../../lib/stopPropagation";
import { internalEmit } from "../../../lib/eventEmitter"; import { internalEmit } from "../../../lib/eventEmitter";
import { stopPropagation } from "../../../lib/stopPropagation";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { FileUploader } from "../../../context/revoltjs/FileUploads"; import { FileUploader } from "../../../context/revoltjs/FileUploads";
@ -69,6 +69,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
public: bot.public, public: bot.public,
interactions_url: bot.interactions_url, interactions_url: bot.interactions_url,
}); });
const [error, setError] = useState<string | JSX.Element>("");
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const [usernameRef, setUsernameRef] = useState<HTMLInputElement | null>( const [usernameRef, setUsernameRef] = useState<HTMLInputElement | null>(
@ -86,18 +87,29 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
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);
setError("");
try { try {
await client.bots.edit(bot._id, changes); await client.bots.edit(bot._id, changes);
onUpdate(changes); onUpdate(changes);
setEditMode(false); setEditMode(false);
} catch (e) { } catch (e) {
// TODO error handling if (e.isAxiosError && e.response.data?.type) {
switch (e.response.data.type) {
case "UsernameTaken":
setError("That username is taken!");
break;
default:
setError(`Error: ${e.response.data.type}`);
break;
}
} else setError(e.toString());
} }
setSaving(false); setSaving(false);
} }
async function editBotAvatar(avatar?: string) { async function editBotAvatar(avatar?: string) {
setSaving(true); setSaving(true);
setError("");
await client.request("PATCH", "/users/id", { await client.request("PATCH", "/users/id", {
headers: { "x-bot-token": bot.token }, headers: { "x-bot-token": bot.token },
transformRequest: (data, headers) => { transformRequest: (data, headers) => {
@ -116,13 +128,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
} }
return ( return (
<div <div key={bot._id} className={styles.botCard}>
key={bot._id}
style={{
background: "var(--secondary-background)",
margin: "8px 0",
padding: "12px",
}}>
<div className={styles.infoheader}> <div className={styles.infoheader}>
<div className={styles.container}> <div className={styles.container}>
{!editMode ? ( {!editMode ? (
@ -220,6 +226,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
}); });
usernameRef!.value = user!.username; usernameRef!.value = user!.username;
interactionsRef!.value = bot.interactions_url || ""; interactionsRef!.value = bot.interactions_url || "";
setError("");
setEditMode(false); setEditMode(false);
} else setEditMode(true); } else setEditMode(true);
}} }}
@ -255,7 +262,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
</CategoryButton> </CategoryButton>
)} )}
{editMode && ( {editMode && (
<> <div className={styles.botSection}>
<Checkbox <Checkbox
checked={data.public} checked={data.public}
disabled={saving} disabled={saving}
@ -277,7 +284,15 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
}) })
} }
/> />
</> </div>
)}
{error && (
<div className={styles.botSection}>
<Tip error hideSeparator>
{error}
</Tip>
</div>
)} )}
<div className={styles.buttonRow}> <div className={styles.buttonRow}>

20
src/pages/settings/panes/Panes.module.scss
View file

@ -524,8 +524,25 @@
} }
.myBots { .myBots {
.botCard {
background: var(--secondary-background);
margin: 8px 0;
padding: 12px;
h5 { margin-bottom: 1em }
}
.botSection {
margin: 20px 0;
display: flex;
flex-direction: column;
gap: 5px;
label { margin-top: 0 }
}
.infoheader { .infoheader {
margin-bottom: 15px;
gap: 8px; gap: 8px;
width: 100%; width: 100%;
padding: 6px 5px; padding: 6px 5px;
@ -586,7 +603,6 @@
} }
.buttonRow { .buttonRow {
margin-top: 2em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;