From 30b9ea3a599b91f3297dbded205dcd7ec58a4de4 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Fri, 9 Jul 2021 03:46:06 -0500
Subject: [PATCH] fix(Editor): add an empty categories message

---
 .../ServerCategoryEditor.tsx                  | 41 ++++++++++++-------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx
index a137044..891d767 100644
--- a/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx
+++ b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx
@@ -1,7 +1,7 @@
 import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
 import { Button } from '@roleypoly/design-system/atoms/button';
 import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
-import { LargeText } from '@roleypoly/design-system/atoms/typography';
+import { LargeText, Link, Text } from '@roleypoly/design-system/atoms/typography';
 import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
 import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
 import {
@@ -96,21 +96,32 @@ export const ServerCategoryEditor = (props: Props) => {
           Change Order <CgReorder />
         </Button>
       </CategoryActions>
-      {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => (
-        <CategoryContainer key={idx}>
-          <EditorCategory
-            category={category}
-            title={category.name}
-            unselectedRoles={unselectedRoles}
-            roles={
-              category.roles
-                .map((role) => props.guild.roles.find((r) => r.id === role))
-                .filter((r) => r !== undefined) as Role[]
-            }
-            onChange={updateSingleCategory}
-          />
+      {props.guild.data.categories.length > 0 ? (
+        sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => (
+          <CategoryContainer key={idx}>
+            <EditorCategory
+              category={category}
+              title={category.name}
+              unselectedRoles={unselectedRoles}
+              roles={
+                category.roles
+                  .map((role) => props.guild.roles.find((r) => r.id === role))
+                  .filter((r) => r !== undefined) as Role[]
+              }
+              onChange={updateSingleCategory}
+            />
+          </CategoryContainer>
+        ))
+      ) : (
+        <CategoryContainer>
+          <Text>
+            No categories are created yet.{' '}
+            <Link href="#" onClick={() => createCategory()}>
+              Create your first category!
+            </Link>
+          </Text>
         </CategoryContainer>
-      ))}
+      )}
     </div>
   );
 };