From b7f82593dfe162c300b1495e8d08db7ea6c65272 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Fri, 18 Dec 2020 21:03:40 -0500
Subject: [PATCH] fix(RolePicker): prevent render of hidden categories

---
 .../organisms/role-picker/RolePicker.tsx      | 59 ++++++++++---------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/design-system/organisms/role-picker/RolePicker.tsx b/src/design-system/organisms/role-picker/RolePicker.tsx
index c0918b7..82bcec7 100644
--- a/src/design-system/organisms/role-picker/RolePicker.tsx
+++ b/src/design-system/organisms/role-picker/RolePicker.tsx
@@ -82,34 +82,37 @@ export const RolePicker = (props: RolePickerProps) => {
             {props.guildData.categories.length !== 0 ? (
                 <>
                     <div>
-                        {sortBy(props.guildData.categories, 'position').map(
-                            (category, idx) => (
-                                <CategoryContainer key={idx}>
-                                    <PickerCategory
-                                        key={idx}
-                                        category={category}
-                                        title={category.name}
-                                        selectedRoles={selectedRoles.filter((roleId) =>
-                                            category.roles.includes(roleId)
-                                        )}
-                                        roles={
-                                            category.roles
-                                                .map((role) =>
-                                                    props.roles.find((r) => r.id === role)
-                                                )
-                                                .filter((r) => r !== undefined) as Role[]
-                                        }
-                                        onChange={handleChange(category)}
-                                        wikiMode={false}
-                                        type={
-                                            category.type === CategoryType.Single
-                                                ? 'single'
-                                                : 'multi'
-                                        }
-                                    />
-                                </CategoryContainer>
-                            )
-                        )}
+                        {sortBy(
+                            props.guildData.categories.filter(
+                                (category) => !category.hidden
+                            ),
+                            'position'
+                        ).map((category, idx) => (
+                            <CategoryContainer key={idx}>
+                                <PickerCategory
+                                    key={idx}
+                                    category={category}
+                                    title={category.name}
+                                    selectedRoles={selectedRoles.filter((roleId) =>
+                                        category.roles.includes(roleId)
+                                    )}
+                                    roles={
+                                        category.roles
+                                            .map((role) =>
+                                                props.roles.find((r) => r.id === role)
+                                            )
+                                            .filter((r) => r !== undefined) as Role[]
+                                    }
+                                    onChange={handleChange(category)}
+                                    wikiMode={false}
+                                    type={
+                                        category.type === CategoryType.Single
+                                            ? 'single'
+                                            : 'multi'
+                                    }
+                                />
+                            </CategoryContainer>
+                        ))}
                     </div>
                     <FaderOpacity
                         isVisible={xor(selectedRoles, props.member.roles).length !== 0}