Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-07-19 09:02:43 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

weaponselector discriminated type dirty fix

Browse Source
This commit is contained in:
Kalle (Sendou) 2020-12-18 19:40:16 +02:00
parent bd8ff594d0
commit c51188e637
7 changed files with 73 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/GearSelector.tsx
View File

@ -19,7 +19,7 @@ const GearSelector: React.FC<WeaponSelectorProps> = ({
const { i18n } = useLingui();
const singleOption = (props: any) => (
<components.Option {...props}>
<Flex alignItems="center" color={props.isFocused ? "black" : undefined}>
<Flex alignItems="center">
<Box mr="0.5em">
<GearImage mini englishName={props.value} />
</Box>

23
components/common/UserAvatar.tsx
View File

@ -11,18 +11,15 @@ const UserAvatar: React.FC<Props & AvatarProps> = ({
user,
isSmall,
...props
}) => {
console.log({ user });
return (
<Avatar
name={user.username}
src={`https://cdn.discordapp.com/avatars/${user.discordId}/${
user.discordAvatar
}.jpg${isSmall ? "?size=40" : ""}`}
size={isSmall ? "sm" : undefined}
{...props}
/>
);
};
}) => (
<Avatar
name={user.username}
src={`https://cdn.discordapp.com/avatars/${user.discordId}/${
user.discordAvatar
}.jpg${isSmall ? "?size=40" : ""}`}
size={isSmall ? "sm" : undefined}
{...props}
/>
);
export default UserAvatar;

1
components/common/UserSelector.tsx
View File

@ -75,7 +75,6 @@ const UserSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = ({
);
function getUsersArray() {
console.log({ value, maxMultiCount });
if (!data) return [];
if (isTooManyItems()) {
return [];

47
components/common/WeaponSelector.tsx
View File

@ -20,8 +20,7 @@ interface SelectorProps {
interface SingleSelectorProps extends SelectorProps {
value?: string;
setValue: (value: string) => void;
isMulti: false | undefined;
maxMultiCount: undefined;
isMulti: false;
}
interface MultiSelectorProps extends SelectorProps {
@ -31,17 +30,9 @@ interface MultiSelectorProps extends SelectorProps {
maxMultiCount: number;
}
const WeaponSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = ({
value,
setValue,
isClearable = false,
autoFocus,
isMulti,
maxMultiCount,
menuIsOpen,
isDisabled,
pool,
}) => {
const WeaponSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = (
props
) => {
const { i18n } = useLingui();
const singleOption = (props: any) => (
<components.Option {...props}>
@ -54,6 +45,8 @@ const WeaponSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = ({
</components.Option>
);
const maxMultiCount = props.isMulti ? props.maxMultiCount : Infinity;
return (
<MySelect
options={getWeaponArray().map((category) => ({
@ -64,36 +57,36 @@ const WeaponSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = ({
})),
}))}
value={getValue()}
setValue={setValue}
isClearable={isClearable}
setValue={props.setValue}
isClearable={!!props.isClearable}
isSearchable
isMulti={isMulti}
menuIsOpen={menuIsOpen}
isMulti={props.isMulti}
menuIsOpen={!!props.menuIsOpen}
components={{
IndicatorSeparator: () => null,
Option: singleOption,
NoOptionsMessage: () => (
<Center p={4}>
{isTooManyItems() ? (
<Trans>Only {maxMultiCount} weapons allowed</Trans>
<Trans>Only {props} weapons allowed</Trans>
) : (
<Trans>No results with this filter</Trans>
)}
</Center>
),
}}
autoFocus={autoFocus}
isDisabled={isDisabled}
autoFocus={!!props.autoFocus}
isDisabled={!!props.isDisabled}
/>
);
function getValue() {
if (typeof value === "string") {
return { value, label: i18n._(value) };
if (typeof props.value === "string") {
return { value: props.value, label: i18n._(props.value) };
}
if (Array.isArray(value)) {
return value.map((singleValue) => ({
if (Array.isArray(props.value)) {
return props.value.map((singleValue) => ({
value: singleValue,
label: i18n._(singleValue),
}));
@ -104,8 +97,8 @@ const WeaponSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = ({
function getWeaponArray() {
if (isTooManyItems()) return [];
if (pool === "WITH_ALTS") return weaponsWithHeroCategorized;
if (pool === "SALMON_RUN")
if (props.pool === "WITH_ALTS") return weaponsWithHeroCategorized;
if (props.pool === "SALMON_RUN")
return weaponsWithHeroCategorized.map((category) => ({
...category,
weapons: category.weapons.filter((wpn) => salmonRunWeapons.has(wpn)),
@ -120,7 +113,7 @@ const WeaponSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = ({
}
function isTooManyItems() {
return maxMultiCount && maxMultiCount <= (value ?? []).length;
return maxMultiCount && maxMultiCount <= (props.value ?? []).length;
}
};

1
components/u/BuildModal.tsx
View File

@ -178,6 +178,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
value={value}
setValue={onChange}
pool="WITH_ALTS"
isMulti={false}
/>
)}
/>

2
pages/analyzer.tsx
View File

@ -84,7 +84,7 @@ const BuildAnalyzerPage = () => {
</Flex>
<Box my="1em">
<WeaponSelector value={weapon} setValue={setWeapon} />
<WeaponSelector value={weapon} setValue={setWeapon} isMulti={false} />
</Box>
<Wrap justify="space-between">
<Box>

81
pages/builds/[[...slug]].tsx
View File

@ -28,53 +28,52 @@ const BuildsPage = () => {
setValue={(weapon) => dispatch({ type: "SET_WEAPON", weapon })}
menuIsOpen={!state.weapon}
autoFocus
isMulti={false}
/>
</Box>
<>
{state.weapon && (
<>
<Box mt={4} pr={3} mb="-5rem">
<WeaponImage name={state.weapon} size={128} />
</Box>
{state.weapon && (
<>
<Box mt={4} pr={3} mb="-5rem">
<WeaponImage name={state.weapon} size={128} />
</Box>
<Flex
justifyContent="flex-end"
p={2}
mb={8}
w="100%"
bg={secondaryBgColor}
rounded="lg"
fontSize="sm"
boxShadow="md"
>
<Flex
justifyContent="flex-end"
p={2}
mb={8}
w="100%"
bg={secondaryBgColor}
rounded="lg"
fontSize="sm"
boxShadow="md"
justifyContent="space-between"
fontSize="xs"
textColor="black"
textTransform="uppercase"
letterSpacing="wider"
lineHeight="1rem"
fontWeight="medium"
>
<Flex
justifyContent="space-between"
fontSize="xs"
textColor="black"
textTransform="uppercase"
letterSpacing="wider"
lineHeight="1rem"
fontWeight="medium"
<Box
visibility={
data.length === 0 && hiddenBuildCount === 0
? "hidden"
: undefined
}
color={themeColorShade}
>
<Box
visibility={
data.length === 0 && hiddenBuildCount === 0
? "hidden"
: undefined
}
color={themeColorShade}
>
{data.length} <Trans>builds</Trans>{" "}
{hiddenBuildCount > 0 && (
<>
(+ {hiddenBuildCount} <Trans>hidden</Trans>)
</>
)}
</Box>
</Flex>
{data.length} <Trans>builds</Trans>{" "}
{hiddenBuildCount > 0 && (
<>
(+ {hiddenBuildCount} <Trans>hidden</Trans>)
</>
)}
</Box>
</Flex>
</>
)}
</>
</Flex>
</>
)}
{state.weapon && (
<BuildFilters filters={state.filters} dispatch={dispatch} />