new multiweaponselector for edit profile

components/common/MultiWeaponSelector.tsx

@@ -1,82 +0,0 @@
-import { Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
-import { useLingui } from "@lingui/react";
-import WeaponImage from "./WeaponImage";
-import WeaponSelector from "./WeaponSelector";
-
-interface Props {
-  name?: string;
-  value: string[];
-  onChange: (value: string[]) => void;
-  isSalmonRun?: boolean;
-}
-
-const MultiWeaponSelector: React.FC<Props> = ({
-  value,
-  onChange,
-  isSalmonRun,
-}) => {
-  const { i18n } = useLingui();
-
-  return (
-    <>
-      {/* <Select
-        name={name}
-        onChange={(e) => {
-          if (!!e.target.value && !value.includes(e.target.value))
-            onChange(value.concat(e.target.value));
-        }}
-        value=""
-        disabled={value.length === 5}
-      >
-        <option hidden value="">
-          {t`Select weapon`}
-        </option>
-        {isSalmonRun && (
-          <>
-            <option value="RANDOM">{t`Random`}</option>
-            <option value="RANDOM_GRIZZCO">{t`Random (Grizzco)`}</option>
-          </>
-        )}
-        {weaponsArray.map((wpn) => (
-          <option key={wpn} value={wpn}>
-            {i18n._(wpn)}
-          </option>
-        ))}
-      </Select> */}
-      <WeaponSelector
-        value={undefined}
-        setValue={(selectedWeapon) => {
-          if (!!selectedWeapon && !value.includes(selectedWeapon))
-            onChange(value.concat(selectedWeapon));
-        }}
-        pool={isSalmonRun ? "SALMON_RUN" : "WITH_ALTS"}
-        isDisabled={
-          (isSalmonRun && value.length === 4) ||
-          (!isSalmonRun && value.length === 5)
-        }
-      />
-      {value.map((wpn) => (
-        <Tag
-          size="small"
-          key={wpn}
-          borderRadius="full"
-          variant="outline"
-          p={1}
-          m={2}
-        >
-          <TagLabel>
-            <WeaponImage name={wpn} size={32} />
-          </TagLabel>
-          <TagCloseButton
-            borderRadius="full"
-            onClick={() =>
-              onChange(value.filter((wpnSelected) => wpnSelected !== wpn))
-            }
-          />
-        </Tag>
-      ))}
-    </>
-  );
-};
-
-export default MultiWeaponSelector;

components/common/WeaponSelector.tsx

@@ -20,20 +20,23 @@ interface SingleSelectorProps extends SelectorProps {
   value?: string;
   setValue: (value: string) => void;
   isMulti: false | undefined;
+  maxMultiCount: undefined;
 }
 
 interface MultiSelectorProps extends SelectorProps {
   value?: string[];
   setValue: (value: string[]) => void;
   isMulti: true;
+  maxMultiCount: number;
 }
 
 const WeaponSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = ({
   value,
   setValue,
-  isClearable,
+  isClearable = false,
   autoFocus,
   isMulti,
+  maxMultiCount,
   menuIsOpen,
   isDisabled,
   pool,
@@ -90,6 +93,7 @@ const WeaponSelector: React.FC<SingleSelectorProps | MultiSelectorProps> = ({
   }
 
   function getWeaponArray() {
+    if (maxMultiCount && maxMultiCount <= (value ?? []).length) return [];
     if (pool === "WITH_ALTS") return weaponsWithHeroCategorized;
     if (pool === "SALMON_RUN")
       return weaponsWithHeroCategorized.map((category) => ({

components/sr/RotationSelector.tsx

@@ -87,6 +87,7 @@ const RotationSelector: React.FC<Props> = ({ rotationId, setRotationId }) => {
           isMulti
           pool="SALMON_RUN"
           isClearable={false}
+          maxMultiCount={4}
         />
       </Box>
       {filteredRotations && filteredRotations.length > 0 && (

components/u/ProfileModal.tsx

@@ -21,7 +21,7 @@ import { t, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import ChakraSelect from "components/common/ChakraSelect";
 import MarkdownTextarea from "components/common/MarkdownTextarea";
-import WeaponSelector from "components/common/MultiWeaponSelector";
+import WeaponSelector from "components/common/WeaponSelector";
 import { countries } from "countries-list";
 import { getToastOptions } from "lib/getToastOptions";
 import { sendData } from "lib/postData";
@@ -258,9 +258,11 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
                 defaultValue={[]}
                 render={({ onChange, value, name }) => (
                   <WeaponSelector
-                    name={name}
                     value={value}
-                    onChange={onChange}
+                    setValue={onChange}
+                    isMulti
+                    pool="WITH_ALTS"
+                    maxMultiCount={5}
                   />
                 )}
               />