diff --git a/components/common/MySelect.tsx b/components/common/MySelect.tsx index 3e7cffd9a..d55b22dda 100644 --- a/components/common/MySelect.tsx +++ b/components/common/MySelect.tsx @@ -20,7 +20,7 @@ interface SelectProps { }>; width?: string; value: ValueType; - setValue?: (value: any) => void; + setValue: (value: any) => void; autoFocus?: boolean; components?: Partial>; isClearable?: boolean; @@ -56,9 +56,8 @@ const MySelect: React.FC = ({ const [inputValue, setInputValue] = useState(""); const handleChange = (selectedOption: any) => { - if (!setValue) return; if (!selectedOption) { - setValue(null); + setValue(isMulti ? [] : null); return; } if (Array.isArray(selectedOption)) { diff --git a/components/common/WeaponSelector.tsx b/components/common/WeaponSelector.tsx index 1bb01ff4f..f9fcdacde 100644 --- a/components/common/WeaponSelector.tsx +++ b/components/common/WeaponSelector.tsx @@ -8,18 +8,27 @@ import { components } from "react-select"; import MySelect from "./MySelect"; import WeaponImage from "./WeaponImage"; -interface WeaponSelectorProps { - value?: string; - setValue: (value: string) => void; +interface SelectorProps { autoFocus?: boolean; isClearable?: boolean; - isMulti?: boolean; menuIsOpen?: boolean; isDisabled?: boolean; pool?: "WITH_ALTS" | "SALMON_RUN"; } -const WeaponSelector: React.FC = ({ +interface SingleSelectorProps extends SelectorProps { + value?: string; + setValue: (value: string) => void; + isMulti: false | undefined; +} + +interface MultiSelectorProps extends SelectorProps { + value?: string[]; + setValue: (value: string[]) => void; + isMulti: true; +} + +const WeaponSelector: React.FC = ({ value, setValue, isClearable, @@ -50,7 +59,7 @@ const WeaponSelector: React.FC = ({ label: i18n._(weapon), })), }))} - value={value ? { value, label: i18n._(value) } : undefined} + value={getValue()} setValue={setValue} isClearable={isClearable} isSearchable @@ -65,6 +74,21 @@ const WeaponSelector: React.FC = ({ /> ); + function getValue() { + if (typeof value === "string") { + return { value, label: i18n._(value) }; + } + + if (Array.isArray(value)) { + return value.map((singleValue) => ({ + value: singleValue, + label: i18n._(singleValue), + })); + } + + return undefined; + } + function getWeaponArray() { if (pool === "WITH_ALTS") return weaponsWithHeroCategorized; if (pool === "SALMON_RUN") diff --git a/components/sr/RotationSelector.tsx b/components/sr/RotationSelector.tsx index f8be772f5..db19072cb 100644 --- a/components/sr/RotationSelector.tsx +++ b/components/sr/RotationSelector.tsx @@ -1,9 +1,9 @@ import { Box, Button, FormLabel, Select } from "@chakra-ui/react"; import { t, Trans } from "@lingui/macro"; import { useLingui } from "@lingui/react"; -import MultiWeaponSelector from "components/common/MultiWeaponSelector"; import SubText from "components/common/SubText"; import WeaponImage from "components/common/WeaponImage"; +import WeaponSelector from "components/common/WeaponSelector"; import { salmonRunStages } from "lib/lists/stages"; import { useMyTheme } from "lib/useMyTheme"; import { GetAllSalmonRunRotationsData } from "prisma/queries/getAllSalmonRunRotations"; @@ -81,10 +81,12 @@ const RotationSelector: React.FC = ({ rotationId, setRotationId }) => { Weapons - {filteredRotations && filteredRotations.length > 0 && ( @@ -128,7 +130,7 @@ const RotationSelector: React.FC = ({ rotationId, setRotationId }) => { function getFilteredRotations() { if (!data) return null; - if (!stage || weapons.length < 1) return null; + if (!stage || weapons.length === 0) return null; return data.filter((rotation) => { return ( rotation.stage === stage && diff --git a/pages/sr/leaderboards/new.tsx b/pages/sr/leaderboards/new.tsx index c9bae093d..86415cb0b 100644 --- a/pages/sr/leaderboards/new.tsx +++ b/pages/sr/leaderboards/new.tsx @@ -80,67 +80,74 @@ const AddRecordModal = () => { }} /> - - Category - - + {form.rotationId && ( + <> + + Category + + - - - - + + + + + Golden Egg Count + + + + + + + + + + + + + Links + + + + Add one to four links to provide context behind the record + (e.g. VoDs on YouTube, screenshots on Twitter). One link per + line. + + +