From 1cd541fd67771a764913d2c5d591502260c1d4d1 Mon Sep 17 00:00:00 2001
From: Ryfter <ryfterwastaken@gmail.com>
Date: Sat, 25 Jan 2025 11:54:52 -0500
Subject: [PATCH] Added error boundary

---
 RoleMembersModal.tsx | 97 +++++++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 47 deletions(-)

diff --git a/RoleMembersModal.tsx b/RoleMembersModal.tsx
index de0a4af..e14f04e 100644
--- a/RoleMembersModal.tsx
+++ b/RoleMembersModal.tsx
@@ -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>
     );
 }