userplugins/in-role
1
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Added error boundary

Browse source
This commit is contained in:
Ryfter 2025-01-25 11:54:52 -05:00
parent 7f7cf02d45
commit 1cd541fd67
1 changed files with 50 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
RoleMembersModal.tsx
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import ErrorBoundary from "@components/ErrorBoundary";
import { InfoIcon } from "@components/Icons";
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
import { findByCodeLazy, findExportedComponentLazy } from "@webpack";
@ -144,60 +145,62 @@ function InRoleModal({ guildId, props, roleId }: { guildId: string; props: Modal
const [selectedRole, selectRole] = useState(roles.find(x => x.id === roleId) || roles[0]);
return (
<ModalRoot {...props} size={ModalSize.LARGE}>
<ModalHeader>
<Text className={cl("modal-title")} variant="heading-lg/semibold">View members with role</Text>
<ModalCloseButton onClick={props.onClose} />
</ModalHeader>
<ModalContent className={cl("modal-content")}>
<div className={cl("modal-container")}>
<ScrollerThin className={cl("modal-list")} orientation="auto">
{roles.map((role, index) => {
<ErrorBoundary>
<ModalRoot {...props} size={ModalSize.LARGE}>
<ModalHeader>
<Text className={cl("modal-title")} variant="heading-lg/semibold">View members with role</Text>
<ModalCloseButton onClick={props.onClose} />
</ModalHeader>
<ModalContent className={cl("modal-content")}>
<div className={cl("modal-container")}>
<ScrollerThin className={cl("modal-list")} orientation="auto">
{roles.map((role, index) => {
if (role.id === guildId) return;
if (role.id === guildId) return;
const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
return (
<div
className={cl("modal-list-item-btn")}
onClick={() => selectRole(roles[index])}
role="button"
tabIndex={0}
key={role.id}
>
return (
<div
className={cl("modal-list-item", { "modal-list-item-active": selectedRole.id === role.id })}
className={cl("modal-list-item-btn")}
onClick={() => selectRole(roles[index])}
role="button"
tabIndex={0}
key={role.id}
>
<span
className={cl("modal-role-circle")}
style={{ backgroundColor: role?.colorString || "var(--primary-300)" }}
/>
{
roleIconSrc != null && (
<img
className={cl("modal-role-image")}
src={roleIconSrc}
/>
)
<div
className={cl("modal-list-item", { "modal-list-item-active": selectedRole.id === role.id })}
>
<span
className={cl("modal-role-circle")}
style={{ backgroundColor: role?.colorString || "var(--primary-300)" }}
/>
{
roleIconSrc != null && (
<img
className={cl("modal-role-image")}
src={roleIconSrc}
/>
)
}
<Text variant="text-md/normal">
{role?.name || "Unknown role"}
</Text>
}
<Text variant="text-md/normal">
{role?.name || "Unknown role"}
</Text>
</div>
</div>
</div>
);
})}
</ScrollerThin>
<div className={cl("modal-divider")} />
<MembersContainer
guildId={guildId}
roleId={selectedRole.id}
/>
</div>
</ModalContent>
</ModalRoot >
);
})}
</ScrollerThin>
<div className={cl("modal-divider")} />
<MembersContainer
guildId={guildId}
roleId={selectedRole.id}
/>
</div>
</ModalContent>
</ModalRoot >
</ErrorBoundary>
);
}