fix(Editor): add an empty categories message

This commit is contained in:
41666 2021-07-09 03:46:06 -05:00
parent 47fa58fd36
commit 30b9ea3a59

View file

@ -1,7 +1,7 @@
import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints'; import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
import { Button } from '@roleypoly/design-system/atoms/button'; import { Button } from '@roleypoly/design-system/atoms/button';
import { FaderOpacity } from '@roleypoly/design-system/atoms/fader'; 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 { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled'; import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
import { import {
@ -96,7 +96,8 @@ export const ServerCategoryEditor = (props: Props) => {
Change Order <CgReorder /> Change Order <CgReorder />
</Button> </Button>
</CategoryActions> </CategoryActions>
{sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => ( {props.guild.data.categories.length > 0 ? (
sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => (
<CategoryContainer key={idx}> <CategoryContainer key={idx}>
<EditorCategory <EditorCategory
category={category} category={category}
@ -110,7 +111,17 @@ export const ServerCategoryEditor = (props: Props) => {
onChange={updateSingleCategory} onChange={updateSingleCategory}
/> />
</CategoryContainer> </CategoryContainer>
))} ))
) : (
<CategoryContainer>
<Text>
No categories are created yet.{' '}
<Link href="#" onClick={() => createCategory()}>
Create your first category!
</Link>
</Text>
</CategoryContainer>
)}
</div> </div>
); );
}; };