mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 14:40:58 -05:00
Bring back ability to edit roles on members.
Improve ban list design.
This commit is contained in:
Paul
parent
dbaf246c27
commit
71020e6e8c
6 changed files with 149 additions and 38 deletions
|
|
@ -94,7 +94,7 @@
|
|||
"react-router-dom": "^5.2.0",
|
||||
"react-scroll": "^1.8.2",
|
||||
"redux": "^4.1.0",
|
||||
"revolt.js": "4.3.3-alpha.16",
|
||||
"revolt.js": "4.3.3-alpha.17",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.35.1",
|
||||
"shade-blend-color": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3563,10 +3563,10 @@ reusify@^1.0.4:
|
|||
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
|
||||
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
|
||||
|
||||
revolt.js@4.3.3-alpha.16:
|
||||
version "4.3.3-alpha.16"
|
||||
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.16.tgz#ed595d34cdefc1d8756694787abda01e28d373e8"
|
||||
integrity sha512-UejqRKYoO98Uj2eki6dZMbEbX8msYz/JgY3EYxhbe1qMnBvLD8JxjcemHTLBf2Iytom8fFQ1EV0ee4Z89Jkcjw==
|
||||
revolt.js@4.3.3-alpha.17:
|
||||
version "4.3.3-alpha.17"
|
||||
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.17.tgz#0745d251c695840b87e98098bcc4d67c7cc15de5"
|
||||
integrity sha512-MjxVnkkeX5md5NxZNRS9fl06jsjcDciAxKnbZ2rkBYJofQ94tvr1CYBWvFhS/u/tAR80HAPIEjJVC9HKJDK9Fg==
|
||||
dependencies:
|
||||
"@insertish/mutable" "1.1.0"
|
||||
axios "^0.19.2"
|
||||
|
|
|
|||
Loading…
Reference in a new issue