mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-06 17:11:55 +00:00
Bring back ability to edit roles on members.
Improve ban list design.
This commit is contained in:
Paul
@@ -1,5 +1,6 @@
|
||||
import { XCircle } from "@styled-icons/boxicons-regular";
|
||||
import { Servers, Users } from "revolt.js/dist/api/objects";
|
||||
import { Route } from "revolt.js/dist/api/routes";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
@@ -19,11 +20,7 @@ export function Bans({ server }: Props) {
|
||||
const client = useContext(AppContext);
|
||||
const [deleting, setDelete] = useState<string[]>([]);
|
||||
const [data, setData] = useState<
|
||||
| {
|
||||
users: Pick<Users.User, "_id" | "username" | "avatar">[];
|
||||
bans: Servers.Ban[];
|
||||
}
|
||||
| undefined
|
||||
Route<"GET", "/servers/id/bans">["response"] | undefined
|
||||
>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -64,12 +64,14 @@ export function Invites({ server }: Props) {
|
||||
<code>{invite._id}</code>
|
||||
<span>
|
||||
<UserIcon target={creator} size={24} />{" "}
|
||||
{creator?.username ?? "unknown"}
|
||||
{creator?.username ?? (
|
||||
<Text id="app.main.channel.unknown_user" />
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
{channel && creator
|
||||
? getChannelName(ctx.client, channel, true)
|
||||
: "#unknown"}
|
||||
: "#??"}
|
||||
</span>
|
||||
<IconButton
|
||||
onClick={async () => {
|
||||
|
||||
@@ -1,21 +1,30 @@
|
||||
import { ChevronDown } from "@styled-icons/boxicons-regular";
|
||||
import { isEqual } from "lodash";
|
||||
import { Servers } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
|
||||
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Checkbox from "../../../components/ui/Checkbox";
|
||||
import IconButton from "../../../components/ui/IconButton";
|
||||
import Overline from "../../../components/ui/Overline";
|
||||
|
||||
interface Props {
|
||||
server: Servers.Server;
|
||||
}
|
||||
|
||||
// ! FIXME: bad code :)
|
||||
export function Members({ server }: Props) {
|
||||
const [members, setMembers] = useState<Servers.Member[] | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const [selected, setSelected] = useState<undefined | string>();
|
||||
const users = useUsers(members?.map((x) => x._id.user) ?? [], ctx);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -24,21 +33,125 @@ export function Members({ server }: Props) {
|
||||
.then((members) => setMembers(members));
|
||||
}, []);
|
||||
|
||||
const [roles, setRoles] = useState<string[]>([]);
|
||||
useEffect(() => {
|
||||
if (selected) {
|
||||
setRoles(
|
||||
members!.find((x) => x._id.user === selected)?.roles ?? [],
|
||||
);
|
||||
}
|
||||
}, [selected]);
|
||||
|
||||
return (
|
||||
<div className={styles.members}>
|
||||
<div className={styles.userList}>
|
||||
<div className={styles.subtitle}>
|
||||
{members?.length ?? 0} Members
|
||||
</div>
|
||||
{members &&
|
||||
members.length > 0 &&
|
||||
users?.map(
|
||||
(x) =>
|
||||
x && (
|
||||
<div className={styles.member}>
|
||||
<div>@{x.username}</div>
|
||||
members
|
||||
.map((x) => {
|
||||
return {
|
||||
member: x,
|
||||
user: users.find((y) => y?._id === x._id.user),
|
||||
};
|
||||
})
|
||||
.map(({ member, user }) => (
|
||||
<>
|
||||
<div
|
||||
key={member._id.user}
|
||||
className={styles.member}
|
||||
data-open={selected === member._id.user}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected === member._id.user
|
||||
? undefined
|
||||
: member._id.user,
|
||||
)
|
||||
}>
|
||||
<span>
|
||||
<UserIcon target={user} size={24} />{" "}
|
||||
{user?.username ?? (
|
||||
<Text id="app.main.channel.unknown_user" />
|
||||
)}
|
||||
</span>
|
||||
<IconButton className={styles.chevron}>
|
||||
<ChevronDown size={24} />
|
||||
</IconButton>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
{selected === member._id.user && (
|
||||
<div
|
||||
key={"drop_" + member._id.user}
|
||||
className={styles.memberView}>
|
||||
<Overline type="subtle">Roles</Overline>
|
||||
{Object.keys(server.roles ?? {}).map(
|
||||
(key) => {
|
||||
let role = server.roles![key];
|
||||
return (
|
||||
<Checkbox
|
||||
checked={
|
||||
roles.includes(key) ??
|
||||
false
|
||||
}
|
||||
onChange={(v) => {
|
||||
if (v) {
|
||||
setRoles([
|
||||
...roles,
|
||||
key,
|
||||
]);
|
||||
} else {
|
||||
setRoles(
|
||||
roles.filter(
|
||||
(x) =>
|
||||
x !==
|
||||
key,
|
||||
),
|
||||
);
|
||||
}
|
||||
}}>
|
||||
<span
|
||||
style={{
|
||||
color: role.colour,
|
||||
}}>
|
||||
{role.name}
|
||||
</span>
|
||||
</Checkbox>
|
||||
);
|
||||
},
|
||||
)}
|
||||
<Button
|
||||
compact
|
||||
disabled={isEqual(
|
||||
member.roles ?? [],
|
||||
roles,
|
||||
)}
|
||||
onClick={async () => {
|
||||
await ctx.client.servers.members.editMember(
|
||||
server._id,
|
||||
member._id.user,
|
||||
{
|
||||
roles,
|
||||
},
|
||||
);
|
||||
|
||||
setMembers(
|
||||
members.map((x) =>
|
||||
x._id.user ===
|
||||
member._id.user
|
||||
? {
|
||||
...x,
|
||||
roles,
|
||||
}
|
||||
: x,
|
||||
),
|
||||
);
|
||||
}}>
|
||||
<Text id="app.special.modals.actions.save" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -41,7 +41,8 @@
|
||||
}
|
||||
|
||||
.invite,
|
||||
.ban {
|
||||
.ban,
|
||||
.member {
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
@@ -69,25 +70,23 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.members {
|
||||
.subtitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary-foreground);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.member {
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.chevron {
|
||||
transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
&:not([data-open="true"]) .chevron {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.memberView {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
background: var(--secondary-background);
|
||||
margin: 0 10px;
|
||||
background: var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user