CEC-4564: use Set for unique values (#408)

* add TrieSelect

* setup menu button

* CEC-4564: add trie select component

* CEC-4564: fix possible duplicate with set

src/components/Controls/TrieSelect/TrieSelect.jsx

@@ -58,7 +58,7 @@ const TrieSelectList = ({
         {selected.map((signal) => {
           return (
             <li key={signal}>
-              <Chip label={signal} onDelete={() => remove(signal)} />
+              <Chip label={signal} onDelete={() => remove([signal])} />
             </li>
           );
         })}
@@ -89,12 +89,10 @@ const TrieSelectLevel = ({
   };
 
   const handleCheck = (names = [], checked) => {
-    for (let i = 0; i < names.length; i++) {
-      if (checked) {
-        remove(names[i]);
-      } else {
-        add(names[i])
-      }
+    if (checked) {
+      remove(names);
+    } else {
+      add(names)
     }
   }
 

src/components/Controls/TrieSelect/TrieSelectContext.js

@@ -12,17 +12,26 @@ export const useTrieSelect = () => {
 }
 
 export const TrieSelectProvider = ({ children, onChange }) => {
-  const [selected, setSelected] = useState([]);
+  const [selected, setSelected] = useState(new Set());
 
-  const add = (id) => setSelected(prev => [...prev, id]);
-  const remove = (id) => setSelected(prev => prev.filter(select => select !== id));
+  const add = (ids) => setSelected(prev => new Set([...prev, ...ids]));
+  const remove = (ids) => setSelected(prev => {
+    for (const id of ids) {
+      prev.delete(id);
+    }
+    return new Set(prev);
+  });
 
   useEffect(() => {
-    onChange(selected);
+    onChange(Array.from(selected));
   }, [onChange, selected]);
 
   return (
-    <TrieSelectContext.Provider value={{ selected, setSelected, add, remove }}>
+    <TrieSelectContext.Provider value={{
+      selected: Array.from(selected),
+      add,
+      remove
+    }}>
       {children}
     </TrieSelectContext.Provider>
   );