roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-05-07 01:02:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

237
packages/design-system/organisms/role-picker/RolePicker.tsx
View file

@ -7,145 +7,130 @@ import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthe
import { ReactifyNewlines } from '@roleypoly/misc-utils/ReactifyNewlines';
import { sortBy } from '@roleypoly/misc-utils/sortBy';
import {
Category,
CategoryType,
GuildData,
GuildSlug,
Member,
Role,
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,
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;
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
);
const [selectedRoles, updateSelectedRoles] = React.useState<string[]>(
props.member.roles
);
React.useEffect(() => {
if (!isEqual(props.member.roles, selectedRoles)) {
updateSelectedRoles(props.member.roles);
}
}, [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)
);
}
};
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 />
</>
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>
</>
)}
{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>
);
</div>
</InfoBox>
)}
</Container>
);
};