multiweaponselector fancy

components/common/MySelect.tsx

@@ -20,7 +20,7 @@ interface SelectProps {
       }>;
   width?: string;
   value: ValueType<OptionTypeBase, boolean>;
-  setValue?: (value: any) => void;
+  setValue: (value: any) => void;
   autoFocus?: boolean;
   components?: Partial<SelectComponents<OptionTypeBase, boolean>>;
   isClearable?: boolean;
@@ -56,9 +56,8 @@ const MySelect: React.FC<SelectProps> = ({
   const [inputValue, setInputValue] = useState("");
 
   const handleChange = (selectedOption: any) => {
-    if (!setValue) return;
     if (!selectedOption) {
-      setValue(null);
+      setValue(isMulti ? [] : null);
       return;
     }
     if (Array.isArray(selectedOption)) {

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<WeaponSelectorProps> = ({
+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<SingleSelectorProps | MultiSelectorProps> = ({
   value,
   setValue,
   isClearable,
@@ -50,7 +59,7 @@ const WeaponSelector: React.FC<WeaponSelectorProps> = ({
           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<WeaponSelectorProps> = ({
     />
   );
 
+  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")

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<Props> = ({ rotationId, setRotationId }) => {
         <FormLabel htmlFor="weapons">
           <Trans>Weapons</Trans>
         </FormLabel>
-        <MultiWeaponSelector
+        <WeaponSelector
           value={weapons}
-          onChange={setWeapons}
-          isSalmonRun
+          setValue={setWeapons}
+          isMulti
+          pool="SALMON_RUN"
+          isClearable={false}
         />
       </Box>
       {filteredRotations && filteredRotations.length > 0 && (
@@ -128,7 +130,7 @@ const RotationSelector: React.FC<Props> = ({ 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 &&

pages/sr/leaderboards/new.tsx

@@ -80,67 +80,74 @@ const AddRecordModal = () => {
           }}
         />
 
-        <FormLabel htmlFor="category" mt={4}>
-          <Trans>Category</Trans>
-        </FormLabel>
-        <Select
-          name="category"
-          value={form.category}
-          onChange={(e) =>
-            setForm({
-              ...form,
-              category: e.target.value as SalmonRunRecordCategory,
-            })
-          }
-        >
-          {Object.entries(salmonRunCategoryToNatural).map(([key, value]) => (
-            <option key={key} value={key}>
-              {i18n._(value)}
-            </option>
-          ))}
-        </Select>
+        {form.rotationId && (
+          <>
+            <FormLabel htmlFor="category" mt={4}>
+              <Trans>Category</Trans>
+            </FormLabel>
+            <Select
+              name="category"
+              value={form.category}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  category: e.target.value as SalmonRunRecordCategory,
+                })
+              }
+            >
+              {Object.entries(salmonRunCategoryToNatural).map(
+                ([key, value]) => (
+                  <option key={key} value={key}>
+                    {i18n._(value)}
+                  </option>
+                )
+              )}
+            </Select>
 
-        <FormLabel htmlFor="goldenEggCount" mt={4}>
-          <Flex alignItems="center">
-            <Flex align="center" mr={1}>
-              <Image
-                src="/images/salmonRunIcons/Golden%20Egg.png"
-                width={32}
-                height={32}
+            <FormLabel htmlFor="goldenEggCount" mt={4}>
+              <Flex alignItems="center">
+                <Flex align="center" mr={1}>
+                  <Image
+                    src="/images/salmonRunIcons/Golden%20Egg.png"
+                    width={32}
+                    height={32}
+                  />
+                </Flex>
+                <Trans>Golden Egg Count</Trans>
+              </Flex>
+            </FormLabel>
+            <NumberInput name="goldenEggCount" maxW={48}>
+              <NumberInputField />
+              <NumberInputStepper>
+                <NumberIncrementStepper />
+                <NumberDecrementStepper />
+              </NumberInputStepper>
+            </NumberInput>
+
+            <FormControl>
+              <FormLabel mt={4}>
+                <Trans>Links</Trans>
+              </FormLabel>
+              <FormHelperText mb={4} mt="-10px">
+                <Trans>
+                  Add one to four links to provide context behind the record
+                  (e.g. VoDs on YouTube, screenshots on Twitter). One link per
+                  line.
+                </Trans>
+              </FormHelperText>
+              <Textarea
+                value={form.links}
+                onChange={(e) => setForm({ ...form, links: e.target.value })}
+                rows={4}
+                resize="none"
               />
-            </Flex>
-            <Trans>Golden Egg Count</Trans>
-          </Flex>
-        </FormLabel>
-        <NumberInput name="goldenEggCount" maxW={48}>
-          <NumberInputField />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
+            </FormControl>
 
-        <FormControl>
-          <FormLabel mt={4}>
-            <Trans>Links</Trans>
-          </FormLabel>
-          <FormHelperText mb={4} mt="-10px">
-            <Trans>
-              Add one to four links to provide context behind the record (e.g.
-              VoDs on YouTube, screenshots on Twitter). One link per line.
-            </Trans>
-          </FormHelperText>
-          <Textarea
-            value={form.links}
-            onChange={(e) => setForm({ ...form, links: e.target.value })}
-            rows={4}
-            resize="none"
-          />
-        </FormControl>
-
-        <Button mt={6} /*type="submit"*/ isLoading={sending}>
-          <Trans>Submit</Trans>
-        </Button>
+            <Button mt={6} /*type="submit"*/ isLoading={sending}>
+              <Trans>Submit</Trans>
+            </Button>
+          </>
+        )}
       </form>
     </Container>
   );