add role search prototype

This commit is contained in:
41666 2021-07-08 14:53:40 -05:00
parent 38e2aa1c50
commit ef63260bd5
6 changed files with 113 additions and 23 deletions

View file

@ -17,7 +17,6 @@ export type EditorShellProps = {
export const EditorShell = (props: EditorShellProps) => {
const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
const [reorderMode, setReorderMode] = React.useState<boolean>(false);
React.useEffect(() => {
setGuild(props.guild);
@ -43,10 +42,10 @@ export const EditorShell = (props: EditorShellProps) => {
props.onGuildChange?.(guild);
};
const hasChanges = React.useMemo(
() => !deepEqual(guild.data, props.guild.data),
[guild.data, props.guild.data]
);
const hasChanges = React.useMemo(() => !deepEqual(guild.data, props.guild.data), [
guild.data,
props.guild.data,
]);
return (
<>

View file

@ -6,7 +6,7 @@ import { EditorCategory } from '@roleypoly/design-system/molecules/editor-catego
import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
import KSUID from 'ksuid';
import { sortBy } from 'lodash';
import { flatten, sortBy } from 'lodash';
import React from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
import { CgReorder } from 'react-icons/cg';
@ -31,6 +31,11 @@ const forceOrder = (categories: Category[]) =>
export const ServerCategoryEditor = (props: Props) => {
const [reorderMode, setReorderMode] = React.useState(false);
const unselectedRoles = React.useMemo(() => {
const selectedRoles = flatten(props.guild.data.categories.map((c) => c.roles));
return props.guild.roles.filter((r) => !selectedRoles.includes(r.id));
}, [props.guild.data.categories, props.guild.roles]);
const updateSingleCategory = (category: Category) => {
const newCategories = props.guild.data.categories.map((c) => {
if (c.id === category.id) {
@ -85,6 +90,7 @@ export const ServerCategoryEditor = (props: Props) => {
<EditorCategory
category={category}
title={category.name}
unselectedRoles={unselectedRoles}
roles={
category.roles
.map((role) => props.guild.roles.find((r) => r.id === role))