Ryfter/in-role
1
0
Fork 0
forked from userplugins/in-role
Code Pull requests Activity

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