From 4e2bc67c5a38f5565ab66409a37d414ba5fb004f Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 18 Dec 2020 13:26:41 +0200
Subject: [PATCH] new multiweaponselector for edit profile

---
 components/common/MultiWeaponSelector.tsx | 82 -----------------------
 components/common/WeaponSelector.tsx      |  6 +-
 components/sr/RotationSelector.tsx        |  1 +
 components/u/ProfileModal.tsx             |  8 ++-
 4 files changed, 11 insertions(+), 86 deletions(-)
 delete mode 100644 components/common/MultiWeaponSelector.tsx

diff --git a/components/common/MultiWeaponSelector.tsx b/components/common/MultiWeaponSelector.tsx
deleted file mode 100644
index 5c3b404f4..000000000
--- a/components/common/MultiWeaponSelector.tsx
+++ /dev/null
@@ -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;
diff --git a/components/common/WeaponSelector.tsx b/components/common/WeaponSelector.tsx
index f9fcdacde..f698c8441 100644
--- a/components/common/WeaponSelector.tsx
+++ b/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) => ({
diff --git a/components/sr/RotationSelector.tsx b/components/sr/RotationSelector.tsx
index db19072cb..e3cf95a3a 100644
--- a/components/sr/RotationSelector.tsx
+++ b/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 && (
diff --git a/components/u/ProfileModal.tsx b/components/u/ProfileModal.tsx
index 95f3c8949..4164af6cb 100644
--- a/components/u/ProfileModal.tsx
+++ b/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}
                   />
                 )}
               />