v3/packages/design-system/organisms/role-picker/RolePicker.tsx

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<string[]>(
        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 (
        <Container>
            <Space />
            <ServerMasthead guild={props.guild} editable={props.editable} />
            <Space />
            {props.guildData.message && (
                <>
                    <MessageBox>
                        <ReactifyNewlines>{props.guildData.message}</ReactifyNewlines>
                    </MessageBox>
                    <Space />
                </>
            )}

            {props.guildData.categories.length !== 0 ? (
                <>
                    <div>
                        {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>
                    <div>
                        <FaderOpacity
                            isVisible={
                                xor(selectedRoles, props.member.roles).length !== 0
                            }
                        >
                            <ResetSubmit
                                onSubmit={() => props.onSubmit(selectedRoles)}
                                onReset={() => {
                                    updateSelectedRoles(props.member.roles);
                                }}
                            />
                        </FaderOpacity>
                    </div>
                </>
            ) : (
                <InfoBox>
                    <InfoIcon>
                        <GoInfo />
                    </InfoIcon>
                    <div>
                        There are currently no roles available for you to choose from.
                        {props.editable && (
                            <>
                                {' '}
                                <a href={`/s/${props.guild.id}/edit`}>
                                    <Link>Add some roles!</Link>
                                </a>
                            </>
                        )}
                    </div>
                </InfoBox>
            )}
        </Container>
    );
};