From 71020e6e8c45734d3670ed6db5f1a1da91b6020d Mon Sep 17 00:00:00 2001 From: Paul Date: Sat, 24 Jul 2021 18:46:33 +0100 Subject: [PATCH] Bring back ability to edit roles on members. Improve ban list design. --- package.json | 2 +- src/pages/settings/server/Bans.tsx | 7 +- src/pages/settings/server/Invites.tsx | 6 +- src/pages/settings/server/Members.tsx | 131 ++++++++++++++++++-- src/pages/settings/server/Panes.module.scss | 33 +++-- yarn.lock | 8 +- 6 files changed, 149 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index aa6a3030..c2d8fb9d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/pages/settings/server/Bans.tsx b/src/pages/settings/server/Bans.tsx index 6497bba6..b196a208 100644 --- a/src/pages/settings/server/Bans.tsx +++ b/src/pages/settings/server/Bans.tsx @@ -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([]); const [data, setData] = useState< - | { - users: Pick[]; - bans: Servers.Ban[]; - } - | undefined + Route<"GET", "/servers/id/bans">["response"] | undefined >(undefined); useEffect(() => { diff --git a/src/pages/settings/server/Invites.tsx b/src/pages/settings/server/Invites.tsx index 594c1c58..ce411705 100644 --- a/src/pages/settings/server/Invites.tsx +++ b/src/pages/settings/server/Invites.tsx @@ -64,12 +64,14 @@ export function Invites({ server }: Props) { {invite._id} {" "} - {creator?.username ?? "unknown"} + {creator?.username ?? ( + + )} {channel && creator ? getChannelName(ctx.client, channel, true) - : "#unknown"} + : "#??"} { diff --git a/src/pages/settings/server/Members.tsx b/src/pages/settings/server/Members.tsx index 9bfeb9da..4f83a683 100644 --- a/src/pages/settings/server/Members.tsx +++ b/src/pages/settings/server/Members.tsx @@ -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( undefined, ); const ctx = useForceUpdate(); + const [selected, setSelected] = useState(); 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([]); + useEffect(() => { + if (selected) { + setRoles( + members!.find((x) => x._id.user === selected)?.roles ?? [], + ); + } + }, [selected]); + return ( -
+
{members?.length ?? 0} Members
{members && members.length > 0 && - users?.map( - (x) => - x && ( -
-
@{x.username}
+ members + .map((x) => { + return { + member: x, + user: users.find((y) => y?._id === x._id.user), + }; + }) + .map(({ member, user }) => ( + <> +
+ setSelected( + selected === member._id.user + ? undefined + : member._id.user, + ) + }> + + {" "} + {user?.username ?? ( + + )} + + + +
- ), - )} + {selected === member._id.user && ( +
+ Roles + {Object.keys(server.roles ?? {}).map( + (key) => { + let role = server.roles![key]; + return ( + { + if (v) { + setRoles([ + ...roles, + key, + ]); + } else { + setRoles( + roles.filter( + (x) => + x !== + key, + ), + ); + } + }}> + + {role.name} + + + ); + }, + )} + +
+ )} + + ))}
); } diff --git a/src/pages/settings/server/Panes.module.scss b/src/pages/settings/server/Panes.module.scss index 6837a838..117f8fa2 100644 --- a/src/pages/settings/server/Panes.module.scss +++ b/src/pages/settings/server/Panes.module.scss @@ -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); } } diff --git a/yarn.lock b/yarn.lock index 5e18fae5..db7d5ac6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"