forked from abner/for-legacy-web
feat: Finish crappy role ranking implementation that works but is full of sin
parent
20c8dde197
commit
e7d7420d5b
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Reference in New Issue