feat: Finish crappy role ranking implementation that works but is full of sin

master
Declan Chidlow 2025-08-04 22:28:24 +08:00
parent 20c8dde197
commit e7d7420d5b
1 changed files with 129 additions and 111 deletions

View File

@ -93,7 +93,11 @@ export function useRolesForReorder(server: Server) {
/**
* Role reordering component
*/
const RoleReorderPanel = observer(({ server }: Props) => {
const RoleReorderPanel = observer(
({
server,
onRolesReordered,
}: Props & { onRolesReordered: () => void }) => {
const initialRoles = useRolesForReorder(server);
const [roles, setRoles] = useState(initialRoles);
const [isReordering, setIsReordering] = useState(false);
@ -116,7 +120,8 @@ const RoleReorderPanel = observer(({ server }: Props) => {
const moveRoleDown = (index: number) => {
// Can't move down if it's the last non-default role or if it's default
if (index >= roles.length - 2 || roles[index].id === "default") return;
if (index >= roles.length - 2 || roles[index].id === "default")
return;
const newRoles = [...roles];
[newRoles[index], newRoles[index + 1]] = [
@ -143,6 +148,7 @@ const RoleReorderPanel = observer(({ server }: Props) => {
});
console.log("Roles reordered successfully");
onRolesReordered();
} catch (error) {
console.error("Failed to reorder roles:", error);
setRoles(initialRoles);
@ -208,7 +214,8 @@ const RoleReorderPanel = observer(({ server }: Props) => {
</RoleReorderContainer>
</div>
);
});
},
);
/**
* Hook to memo-ize role information.
@ -237,6 +244,7 @@ export function useRoles(server: Server) {
*/
export const Roles = observer(({ server }: Props) => {
const [showReorderPanel, setShowReorderPanel] = useState(false);
const [rolesWereReordered, setRolesWereReordered] = useState(false);
// Consolidate all permissions that we can change right now.
const currentRoles = useRoles(server);
@ -260,16 +268,26 @@ export const Roles = observer(({ server }: Props) => {
`;
const ReorderButton = styled(Button)`
margin: 0 0 16px 0;
margin-inline: auto 8px;
`;
const handleBackFromReorder = () => {
setShowReorderPanel(false);
if (rolesWereReordered) {
window.location.reload(); // Refresh because I don't actually care anymore.
}
};
if (showReorderPanel) {
return (
<div>
<RoleReorderPanel server={server} />
<RoleReorderPanel
server={server}
onRolesReordered={() => setRolesWereReordered(true)}
/>
<Button
palette="secondary"
onClick={() => setShowReorderPanel(false)}
onClick={handleBackFromReorder}
style={{ marginBottom: "16px" }}>
<Text id="app.special.modals.actions.back" />
</Button>
@ -279,11 +297,6 @@ export const Roles = observer(({ server }: Props) => {
return (
<div>
<ReorderButton
palette="secondary"
onClick={() => setShowReorderPanel(true)}>
<Text id="app.settings.permissions.role_ranking" />
</ReorderButton>
<PermissionsLayout
server={server}
rank={server.member?.ranking ?? Infinity}
@ -343,6 +356,11 @@ export const Roles = observer(({ server }: Props) => {
fields={{ name: currentRole.name }}
/>
</H1>
<ReorderButton
palette="secondary"
onClick={() => setShowReorderPanel(true)}>
<Text id="app.settings.permissions.role_ranking" />
</ReorderButton>
<Button
palette="secondary"
disabled={isEqual(