abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start migration to revolt.js@5.0.0.

Browse Source 
200 error milestone
This commit is contained in:
Paul
2021-07-30 20:24:53 +01:00
parent 06aaeab256
commit 3f8a698039
32 changed files with 215 additions and 834 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/friends/Friend.tsx
View File

@@ -1,7 +1,8 @@
import { X, Plus } from "@styled-icons/boxicons-regular";
import { PhoneCall, Envelope, UserX } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects";
import { RelationshipStatus } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Friend.module.scss";
import classNames from "classnames";
@@ -11,8 +12,6 @@ import { useContext } from "preact/hooks";
import { stopPropagation } from "../../lib/stopPropagation";
import { User } from "../../mobx";
import { VoiceOperationsContext } from "../../context/Voice";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import {
@@ -39,7 +38,7 @@ export const Friend = observer(({ user }: Props) => {
const actions: Children[] = [];
let subtext: Children = null;
if (user.relationship === Users.Relationship.Friend) {
if (user.relationship === RelationshipStatus.Friend) {
subtext = <UserStatus user={user} />;
actions.push(
<>
@@ -61,14 +60,12 @@ export const Friend = observer(({ user }: Props) => {
);
}
if (user.relationship === Users.Relationship.Incoming) {
if (user.relationship === RelationshipStatus.Incoming) {
actions.push(
<IconButton
type="circle"
className={styles.button}
onClick={(ev) =>
stopPropagation(ev, client.users.addFriend(user.username))
}>
onClick={(ev) => stopPropagation(ev, user.addFriend())}>
<Plus size={24} />
</IconButton>,
);
@@ -76,14 +73,14 @@ export const Friend = observer(({ user }: Props) => {
subtext = <Text id="app.special.friends.incoming" />;
}
if (user.relationship === Users.Relationship.Outgoing) {
if (user.relationship === RelationshipStatus.Outgoing) {
subtext = <Text id="app.special.friends.outgoing" />;
}
if (
user.relationship === Users.Relationship.Friend ||
user.relationship === Users.Relationship.Outgoing ||
user.relationship === Users.Relationship.Incoming
user.relationship === RelationshipStatus.Friend ||
user.relationship === RelationshipStatus.Outgoing ||
user.relationship === RelationshipStatus.Incoming
) {
actions.push(
<IconButton
@@ -96,13 +93,13 @@ export const Friend = observer(({ user }: Props) => {
onClick={(ev) =>
stopPropagation(
ev,
user.relationship === Users.Relationship.Friend
user.relationship === RelationshipStatus.Friend
? openScreen({
id: "special_prompt",
type: "unfriend_user",
target: user,
})
: client.users.removeFriend(user._id),
: user.removeFriend(),
)
}>
<X size={24} />
@@ -110,14 +107,12 @@ export const Friend = observer(({ user }: Props) => {
);
}
if (user.relationship === Users.Relationship.Blocked) {
if (user.relationship === RelationshipStatus.Blocked) {
actions.push(
<IconButton
type="circle"
className={classNames(styles.button, styles.error)}
onClick={(ev) =>
stopPropagation(ev, client.users.unblockUser(user._id))
}>
onClick={(ev) => stopPropagation(ev, user.unblockUser())}>
<UserX size={24} />
</IconButton>,
);

26
src/pages/friends/Friends.tsx
View File

@@ -5,7 +5,8 @@ import {
} from "@styled-icons/boxicons-regular";
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects";
import { RelationshipStatus, Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Friend.module.scss";
import { Text } from "preact-i18n";
@@ -13,10 +14,8 @@ import { Text } from "preact-i18n";
import { TextReact } from "../../lib/i18n";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { User } from "../../mobx";
import { useData } from "../../mobx/State";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { useClient } from "../../context/revoltjs/RevoltClient";
import CollapsibleSection from "../../components/common/CollapsibleSection";
import Tooltip from "../../components/common/Tooltip";
@@ -30,43 +29,40 @@ import { Friend } from "./Friend";
export default observer(() => {
const { openScreen } = useIntermediate();
const store = useData();
const users = [...store.users.values()];
const client = useClient();
const users = [...client.users.values()];
users.sort((a, b) => a.username.localeCompare(b.username));
const friends = users.filter(
(x) => x.relationship === Users.Relationship.Friend,
(x) => x.relationship === RelationshipStatus.Friend,
);
const lists = [
[
"",
users.filter((x) => x.relationship === Users.Relationship.Incoming),
users.filter((x) => x.relationship === RelationshipStatus.Incoming),
],
[
"app.special.friends.sent",
users.filter((x) => x.relationship === Users.Relationship.Outgoing),
users.filter((x) => x.relationship === RelationshipStatus.Outgoing),
"outgoing",
],
[
"app.status.online",
friends.filter(
(x) =>
x.online && x.status?.presence !== Users.Presence.Invisible,
(x) => x.online && x.status?.presence !== Presence.Invisible,
),
"online",
],
[
"app.status.offline",
friends.filter(
(x) =>
!x.online ||
x.status?.presence === Users.Presence.Invisible,
(x) => !x.online || x.status?.presence === Presence.Invisible,
),
"offline",
],
[
"app.special.friends.blocked",
users.filter((x) => x.relationship === Users.Relationship.Blocked),
users.filter((x) => x.relationship === RelationshipStatus.Blocked),
"blocked",
],
] as [string, User[], string][];

10
src/pages/invite/Invite.tsx
View File

@@ -1,16 +1,13 @@
import { ArrowBack } from "@styled-icons/boxicons-regular";
import { autorun } from "mobx";
import { useStore } from "react-redux";
import { useHistory, useParams } from "react-router-dom";
import { Invites, Servers } from "revolt.js/dist/api/objects";
import { RetrievedInvite } from "revolt-api/types/Invites";
import styles from "./Invite.module.scss";
import { useContext, useEffect, useState } from "preact/hooks";
import { defer } from "../../lib/defer";
import { useData } from "../../mobx/State";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import {
AppContext,
@@ -26,14 +23,13 @@ import Overline from "../../components/ui/Overline";
import Preloader from "../../components/ui/Preloader";
export default function Invite() {
const store = useData();
const history = useHistory();
const client = useContext(AppContext);
const status = useContext(StatusContext);
const { code } = useParams<{ code: string }>();
const [processing, setProcessing] = useState(false);
const [error, setError] = useState<string | undefined>(undefined);
const [invite, setInvite] = useState<Invites.RetrievedInvite | undefined>(
const [invite, setInvite] = useState<RetrievedInvite | undefined>(
undefined,
);
@@ -122,7 +118,7 @@ export default function Invite() {
}
const dispose = autorun(() => {
let server = store.servers.get(
let server = client.servers.get(
invite.server_id,
);

7
src/pages/settings/ChannelSettings.tsx
View File

@@ -3,8 +3,6 @@ import { Route, useHistory, useParams } from "react-router-dom";
import { Text } from "preact-i18n";
import { useData } from "../../mobx/State";
import { useClient } from "../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../context/revoltjs/util";
@@ -17,9 +15,8 @@ import Permissions from "./channel/Permissions";
export default function ChannelSettings() {
const { channel: cid } = useParams<{ channel: string }>();
const store = useData();
const client = useClient();
const channel = store.channels.get(cid);
const channel = client.channels.get(cid);
if (!channel) return null;
if (
channel.channel_type === "SavedMessages" ||
@@ -53,7 +50,7 @@ export default function ChannelSettings() {
category: (
<Category
variant="uniform"
text={getChannelName(client, channel, true)}
text={getChannelName(channel, true)}
/>
),
id: "overview",

13
src/pages/settings/ServerSettings.tsx
View File

@@ -1,10 +1,12 @@
import { ListUl, ListCheck, ListMinus } from "@styled-icons/boxicons-regular";
import { XSquare, Share, Group } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Route, useHistory, useParams } from "react-router-dom";
import { Text } from "preact-i18n";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import { useClient } from "../../context/revoltjs/RevoltClient";
import Category from "../../components/ui/Category";
@@ -15,12 +17,11 @@ import { Invites } from "./server/Invites";
import { Members } from "./server/Members";
import { Overview } from "./server/Overview";
import { Roles } from "./server/Roles";
import { useData } from "../../mobx/State";
export default function ServerSettings() {
export default observer(() => {
const { server: sid } = useParams<{ server: string }>();
const store = useData();
const server = store.servers.get(sid);
const client = useClient();
const server = client.servers.get(sid);
if (!server) return null;
const history = useHistory();
@@ -36,7 +37,7 @@ export default function ServerSettings() {
<GenericSettings
pages={[
{
category: <Category variant="uniform" text={server.name} />, //TOFIX: Just add the server.name as a string, otherwise it makes a duplicate category
category: <Category variant="uniform" text={server.name} />,
id: "overview",
icon: <ListUl size={20} />,
title: (
@@ -110,4 +111,4 @@ export default function ServerSettings() {
showExitButton
/>
);
}
});

17
src/pages/settings/channel/Overview.tsx
View File

@@ -1,5 +1,5 @@
import { observer } from "mobx-react-lite";
import { Channels } from "revolt.js/dist/api/objects";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
@@ -7,8 +7,6 @@ import { useContext, useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { Channel } from "../../../mobx";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
@@ -51,7 +49,7 @@ export default observer(({ channel }: Props) => {
if (description !== channel.description)
changes.description = description;
client.channels.edit(channel._id, changes);
channel.edit(changes);
setChanged(false);
}
@@ -65,17 +63,12 @@ export default observer(({ channel }: Props) => {
fileType="icons"
behaviour="upload"
maxFileSize={2_500_000}
onUpload={(icon) =>
client.channels.edit(channel._id, { icon })
}
previewURL={client.channels.getIconURL(
channel._id,
onUpload={(icon) => channel.edit({ icon })}
previewURL={channel.generateIconURL(
{ max_side: 256 },
true,
)}
remove={() =>
client.channels.edit(channel._id, { remove: "Icon" })
}
remove={() => channel.edit({ remove: "Icon" })}
defaultPreview={
channel.channel_type === "Group"
? "/assets/group.png"

14
src/pages/settings/channel/Permissions.tsx
View File

@@ -1,13 +1,10 @@
import { observer } from "mobx-react-lite";
import { Channels } from "revolt.js/dist/api/objects";
import { ChannelPermission } from "revolt.js/dist/api/permissions";
import { Channel } from "revolt.js/dist/maps/Channels";
import { useContext, useEffect, useState } from "preact/hooks";
import { Channel } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
@@ -30,13 +27,12 @@ interface Props {
// ! FIXME: bad code :)
export default observer(({ channel }: Props) => {
const [selected, setSelected] = useState("default");
const client = useContext(AppContext);
const store = useData();
const client = useClient();
type R = { name: string; permissions: number };
const roles: { [key: string]: R } = {};
if (channel.channel_type !== "Group") {
const server = store.servers.get(channel.server!);
const server = channel.server;
const a = server?.roles ?? {};
for (const b of Object.keys(a)) {
roles[b] = {
@@ -105,7 +101,7 @@ export default observer(({ channel }: Props) => {
<Button
contrast
onClick={() => {
client.channels.setPermissions(channel._id, selected, p);
channel.setPermissions(selected, p);
}}>
click here to save permissions for role
</Button>

26
src/pages/settings/panes/Account.tsx
View File

@@ -2,14 +2,12 @@ import { At } from "@styled-icons/boxicons-regular";
import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, useHistory } from "react-router-dom";
import { Users } from "revolt.js/dist/api/objects";
import { Profile } from "revolt-api/types/Users";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
ClientStatus,
@@ -28,14 +26,10 @@ export const Account = observer(() => {
const status = useContext(StatusContext);
const client = useClient();
const store = useData();
const user = store.users.get(client.user!._id)!;
const [email, setEmail] = useState("...");
const [revealEmail, setRevealEmail] = useState(false);
const [profile, setProfile] = useState<undefined | Users.Profile>(
undefined,
);
const [profile, setProfile] = useState<undefined | Profile>(undefined);
const history = useHistory();
function switchPage(to: string) {
@@ -50,8 +44,8 @@ export const Account = observer(() => {
}
if (profile === undefined && status === ClientStatus.ONLINE) {
client.users
.fetchProfile(user._id)
client
.user!.fetchProfile()
.then((profile) => setProfile(profile ?? {}));
}
}, [status]);
@@ -61,12 +55,14 @@ export const Account = observer(() => {
<div className={styles.banner}>
<UserIcon
className={styles.avatar}
target={user}
target={client.user!}
size={72}
onClick={() => switchPage("profile")}
/>
<div className={styles.userDetail}>
<div className={styles.username}>@{user.username}</div>
<div className={styles.username}>
@{client.user!.username}
</div>
<div className={styles.userid}>
<Tooltip
content={
@@ -75,8 +71,8 @@ export const Account = observer(() => {
<HelpCircle size={16} />
</Tooltip>
<Tooltip content={<Text id="app.special.copy" />}>
<a onClick={() => writeClipboard(user._id)}>
{user._id}
<a onClick={() => writeClipboard(client.user!._id)}>
{client.user!._id}
</a>
</Tooltip>
</div>
@@ -85,7 +81,7 @@ export const Account = observer(() => {
<div className={styles.details}>
{(
[
["username", user.username, <At size={24} />],
["username", client.user!.username, <At size={24} />],
["email", email, <Envelope size={24} />],
["password", "***********", <Key size={24} />],
] as const

30
src/pages/settings/panes/Profile.tsx
View File

@@ -1,5 +1,3 @@
import { Users } from "revolt.js/dist/api/objects";
import styles from "./Panes.module.scss";
import { IntlContext, Text, translate } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
@@ -18,6 +16,7 @@ import AutoComplete, {
useAutoComplete,
} from "../../../components/common/AutoComplete";
import Button from "../../../components/ui/Button";
import { Profile } from "revolt-api/types/Users";
export function Profile() {
const { intl } = useContext(IntlContext);
@@ -25,15 +24,15 @@ export function Profile() {
const client = useClient();
const [profile, setProfile] = useState<undefined | Users.Profile>(
const [profile, setProfile] = useState<undefined | Profile>(
undefined,
);
// ! FIXME: temporary solution
// ! we should just announce profile changes through WS
function refreshProfile() {
client.users
.fetchProfile(client.user!._id)
client
.user!.fetchProfile()
.then((profile) => setProfile(profile ?? {}));
}
@@ -85,20 +84,17 @@ export function Profile() {
fileType="avatars"
behaviour="upload"
maxFileSize={4_000_000}
onUpload={(avatar) => client.users.editUser({ avatar })}
onUpload={(avatar) => client.users.edit({ avatar })}
remove={() =>
client.users.editUser({ remove: "Avatar" })
client.users.edit({ remove: "Avatar" })
}
defaultPreview={client.users.getAvatarURL(
client.user!._id,
defaultPreview={client.user!.generateAvatarURL(
{ max_side: 256 },
true,
)}
previewURL={client.users.getAvatarURL(
client.user!._id,
previewURL={client.user!.generateAvatarURL(
{ max_side: 256 },
true,
true,
)}
/>
</div>
@@ -113,21 +109,21 @@ export function Profile() {
fileType="backgrounds"
maxFileSize={6_000_000}
onUpload={async (background) => {
await client.users.editUser({
await client.users.edit({
profile: { background },
});
refreshProfile();
}}
remove={async () => {
await client.users.editUser({
await client.users.edit({
remove: "ProfileBackground",
});
setProfile({ ...profile, background: undefined });
}}
previewURL={
profile?.background
? client.users.getBackgroundURL(
profile,
? client.generateFileURL(
profile.background,
{ width: 1000 },
true,
)
@@ -169,7 +165,7 @@ export function Profile() {
contrast
onClick={() => {
setChanged(false);
client.users.editUser({
client.users.edit({
profile: { content: profile?.content },
});
}}

11
src/pages/settings/server/Bans.tsx
View File

@@ -1,14 +1,12 @@
import { XCircle } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Servers, Users } from "revolt.js/dist/api/objects";
import { Route } from "revolt.js/dist/api/routes";
import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "../../../components/common/user/UserIcon";
@@ -27,7 +25,7 @@ export const Bans = observer(({ server }: Props) => {
>(undefined);
useEffect(() => {
client.servers.fetchBans(server._id).then(setData as any);
server.fetchBans().then(setData as any);
}, []);
return (
@@ -64,10 +62,7 @@ export const Bans = observer(({ server }: Props) => {
onClick={async () => {
setDelete([...deleting, x._id.user]);
await client.servers.unbanUser(
server._id,
x._id.user,
);
await server.unbanUser(x._id.user);
setData({
...data,

34
src/pages/settings/server/Categories.tsx
View File

@@ -1,16 +1,10 @@
import { XCircle } from "@styled-icons/boxicons-regular";
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
import { Route } from "revolt.js/dist/api/routes";
import { Category } from "revolt-api/types/Servers";
import { Server } from "revolt.js/dist/maps/Servers";
import { ulid } from "ulid";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { useContext, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
@@ -30,15 +24,9 @@ interface Props {
// ! FIXME: really bad code
export const Categories = observer(({ server }: Props) => {
const client = useContext(AppContext);
const store = useData();
const channels = server.channels
.map((id) => store.channels.get(id)!)
.filter((x) => typeof x !== "undefined");
const [cats, setCats] = useState<Servers.Category[]>(
server.categories ?? [],
);
const channels = server.channels.filter((x) => typeof x !== "undefined");
const [cats, setCats] = useState<Category[]>(server.categories ?? []);
const [name, setName] = useState("");
return (
@@ -48,9 +36,7 @@ export const Categories = observer(({ server }: Props) => {
<Button
contrast
disabled={isEqual(server.categories ?? [], cats)}
onClick={() =>
client.servers.edit(server._id, { categories: cats })
}>
onClick={() => server.edit({ categories: cats })}>
save categories
</Button>
</p>
@@ -116,13 +102,13 @@ export const Categories = observer(({ server }: Props) => {
}}>
<div style={{ flexShrink: 0 }}>
<ChannelIcon target={channel} size={24} />{" "}
<span>{channel.name}</span>
<span>{channel!.name}</span>
</div>
<ComboBox
style={{ flexGrow: 1 }}
value={
cats.find((x) =>
x.channels.includes(channel._id),
x.channels.includes(channel!._id),
)?.id ?? "none"
}
onChange={(e) =>
@@ -132,11 +118,11 @@ export const Categories = observer(({ server }: Props) => {
...x,
channels: [
...x.channels.filter(
(y) => y !== channel._id,
(y) => y !== channel!._id,
),
...(e.currentTarget.value ===
x.id
? [channel._id]
? [channel!._id]
: []),
],
};

23
src/pages/settings/server/Invites.tsx
View File

@@ -1,14 +1,12 @@
import { XCircle } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";
import { ServerInvite } from "revolt-api/types/Invites";
import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../../context/revoltjs/util";
@@ -22,21 +20,18 @@ interface Props {
export const Invites = observer(({ server }: Props) => {
const [deleting, setDelete] = useState<string[]>([]);
const [invites, setInvites] = useState<
InvitesNS.ServerInvite[] | undefined
>(undefined);
const [invites, setInvites] = useState<ServerInvite[] | undefined>(
undefined,
);
const store = useData();
const client = useClient();
const users = invites?.map((invite) => store.users.get(invite.creator));
const users = invites?.map((invite) => client.users.get(invite.creator));
const channels = invites?.map((invite) =>
store.channels.get(invite.channel),
client.channels.get(invite.channel),
);
useEffect(() => {
client.servers
.fetchInvites(server._id)
.then((invites) => setInvites(invites));
server.fetchInvites().then(setInvites);
}, []);
return (
@@ -73,7 +68,7 @@ export const Invites = observer(({ server }: Props) => {
</span>
<span>
{channel && creator
? getChannelName(client, channel, true)
? getChannelName(channel, true)
: "#??"}
</span>
<IconButton

57
src/pages/settings/server/Members.tsx
View File

@@ -1,15 +1,14 @@
import { ChevronDown } from "@styled-icons/boxicons-regular";
import { isEqual } from "lodash";
import { observer } from "mobx-react-lite";
import { Servers } from "revolt.js/dist/api/objects";
import { Member } from "revolt.js/dist/maps/Members";
import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "../../../components/common/user/UserIcon";
@@ -24,25 +23,21 @@ interface Props {
export const Members = observer(({ server }: Props) => {
const [selected, setSelected] = useState<undefined | string>();
const [members, setMembers] = useState<Servers.Member[] | undefined>(
undefined,
);
const [data, setData] = useState<
{ members: Member[]; users: User[] } | undefined
>(undefined);
const store = useData();
const client = useClient();
const users = members?.map((member) => store.users.get(member._id.user));
useEffect(() => {
client.members
.fetchMembers(server._id)
.then((members) => setMembers(members));
server.fetchMembers().then(setData);
}, []);
const [roles, setRoles] = useState<string[]>([]);
useEffect(() => {
if (selected) {
setRoles(
members!.find((x) => x._id.user === selected)?.roles ?? [],
data!.members.find((x) => x._id.user === selected)?.roles ?? [],
);
}
}, [selected]);
@@ -50,15 +45,15 @@ export const Members = observer(({ server }: Props) => {
return (
<div className={styles.userList}>
<div className={styles.subtitle}>
{members?.length ?? 0} Members
{data?.members.length ?? 0} Members
</div>
{members &&
members.length > 0 &&
members
{data &&
data.members.length > 0 &&
data.members
.map((member, index) => {
return {
member,
user: users![index],
user: data.users[index],
};
})
.map(({ member, user }) => (
@@ -130,27 +125,11 @@ export const Members = observer(({ server }: Props) => {
member.roles ?? [],
roles,
)}
onClick={async () => {
await client.members.editMember(
server._id,
member._id.user,
{
roles,
},
);
setMembers(
members.map((x) =>
x._id.user ===
member._id.user
? {
...x,
roles,
}
: x,
),
);
}}>
onClick={() =>
member.edit({
roles,
})
}>
<Text id="app.special.modals.actions.save" />
</Button>
</div>

49
src/pages/settings/server/Overview.tsx
View File

@@ -1,6 +1,6 @@
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Servers } from "revolt.js/dist/api/objects";
import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
@@ -8,11 +8,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { Server } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../../context/revoltjs/util";
import Button from "../../../components/ui/Button";
@@ -24,8 +21,7 @@ interface Props {
}
export const Overview = observer(({ server }: Props) => {
const client = useContext(AppContext);
const store = useData();
const client = useClient();
const [name, setName] = useState(server.name);
const [description, setDescription] = useState(server.description ?? "");
@@ -45,16 +41,14 @@ export const Overview = observer(({ server }: Props) => {
const [changed, setChanged] = useState(false);
function save() {
const changes: Partial<
Pick<Servers.Server, "name" | "description" | "system_messages">
> = {};
const changes: Record<string, any> = {};
if (name !== server.name) changes.name = name;
if (description !== server.description)
changes.description = description;
if (!isEqual(systemMessages, server.system_messages))
changes.system_messages = systemMessages ?? undefined;
client.servers.edit(server._id, changes);
server.edit(changes);
setChanged(false);
}
@@ -68,17 +62,9 @@ export const Overview = observer(({ server }: Props) => {
fileType="icons"
behaviour="upload"
maxFileSize={2_500_000}
onUpload={(icon) =>
client.servers.edit(server._id, { icon })
}
previewURL={client.servers.getIconURL(
server._id,
{ max_side: 256 },
true,
)}
remove={() =>
client.servers.edit(server._id, { remove: "Icon" })
}
onUpload={(icon) => server.edit({ icon })}
previewURL={server.generateIconURL({ max_side: 256 }, true)}
remove={() => server.edit({ remove: "Icon" })}
/>
<div className={styles.name}>
<h3>
@@ -120,17 +106,9 @@ export const Overview = observer(({ server }: Props) => {
fileType="banners"
behaviour="upload"
maxFileSize={6_000_000}
onUpload={(banner) =>
client.servers.edit(server._id, { banner })
}
previewURL={client.servers.getBannerURL(
server._id,
{ width: 1000 },
true,
)}
remove={() =>
client.servers.edit(server._id, { remove: "Banner" })
}
onUpload={(banner) => server.edit({ banner })}
previewURL={server.generateBannerURL({ width: 1000 }, true)}
remove={() => server.edit({ remove: "Banner" })}
/>
<h3>
@@ -176,11 +154,10 @@ export const Overview = observer(({ server }: Props) => {
<Text id="general.disabled" />
</option>
{server.channels
.map((id) => store.channels.get(id)!)
.filter((x) => typeof x !== "undefined")
.map((channel) => (
<option value={channel._id}>
{getChannelName(client, channel, true)}
<option value={channel!._id}>
{getChannelName(channel!, true)}
</option>
))}
</ComboBox>

15
src/pages/settings/server/Roles.tsx
View File

@@ -1,18 +1,13 @@
import { Plus } from "@styled-icons/boxicons-regular";
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Servers } from "revolt.js/dist/api/objects";
import {
ChannelPermission,
ServerPermission,
} from "revolt.js/dist/api/permissions";
import { ChannelPermission, ServerPermission } from "revolt.js";
import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
@@ -73,20 +68,20 @@ export const Roles = observer(({ server }: Props) => {
const save = () => {
if (!isEqual(perm, getPermissions(role))) {
client.servers.setPermissions(server._id, role, {
server.setPermissions(role, {
server: perm[0],
channel: perm[1],
});
}
if (!isEqual(name, roleName) || !isEqual(colour, roleColour)) {
client.servers.editRole(server._id, role, { name, colour });
server.editRole(role, { name, colour });
}
};
const deleteRole = () => {
setRole("default");
client.servers.deleteRole(server._id, role);
server.deleteRole(role);
};
return (