import { FaderOpacity } from '@roleypoly/design-system/atoms/fader'; import { Space } from '@roleypoly/design-system/atoms/space'; import { Link } from '@roleypoly/design-system/atoms/typography'; import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category'; import { ResetSubmit } from '@roleypoly/design-system/molecules/reset-submit'; import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead'; import { ReactifyNewlines } from '@roleypoly/misc-utils/ReactifyNewlines'; import { sortBy } from '@roleypoly/misc-utils/sortBy'; import { Category, CategoryType, GuildData, GuildSlug, Member, Role, } from '@roleypoly/types'; import { isEqual, xor } from 'lodash'; import * as React from 'react'; import { GoInfo } from 'react-icons/go'; import { CategoryContainer, Container, InfoBox, InfoIcon, MessageBox, } from './RolePicker.styled'; export type RolePickerProps = { guild: GuildSlug; guildData: GuildData; member: Member; roles: Role[]; onSubmit: (selectedRoles: string[]) => void; editable: boolean; }; export const RolePicker = (props: RolePickerProps) => { const [selectedRoles, updateSelectedRoles] = React.useState( props.member.roles ); React.useEffect(() => { if (!isEqual(props.member.roles, selectedRoles)) { updateSelectedRoles(props.member.roles); } }, [props.member.roles]); const handleChange = (category: Category) => (role: Role) => (newState: boolean) => { if (category.type === CategoryType.Single) { updateSelectedRoles( newState === true ? [...selectedRoles.filter((x) => !category.roles.includes(x)), role.id] : selectedRoles.filter((x) => x !== role.id) ); } else { updateSelectedRoles( newState === true ? [...selectedRoles, role.id] : selectedRoles.filter((x) => x !== role.id) ); } }; return ( {props.guildData.message && ( <> {props.guildData.message} )} {props.guildData.categories.length !== 0 ? ( <>
{sortBy( props.guildData.categories.filter((category) => !category.hidden), 'position' ).map((category, idx) => ( 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'} /> ))}
props.onSubmit(selectedRoles)} onReset={() => { updateSelectedRoles(props.member.roles); }} />
) : (
There are currently no roles available for you to choose from. {props.editable && ( <> {' '} Add some roles! )}
)}
); };