From 889fa7881cb9eb7a8574a969273bb1e3bc500cb8 Mon Sep 17 00:00:00 2001
From: Amit Fainholts <amit@up9.com>
Date: Thu, 27 Jan 2022 15:00:24 +0200
Subject: [PATCH] select list changes

---
 .../AddWorkspaceModal/AddWorkspaceModal.tsx   | 18 ++++-----
 ui/src/components/UI/SelectList.tsx           | 38 ++++++++-----------
 2 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx
index d88d150d4..eaf2d0614 100644
--- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx
+++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx
@@ -35,17 +35,13 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
         try {
             setSearchValue(""); 
             const tapConfig = await api.getTapConfig();
-            console.log(tapConfig);
-            // if(isFirstLogin) {
-                const namespacesObj = {...tapConfig?.tappedNamespaces}
-                Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
-                    namespacesObj[namespace] = true;
-                })
-                setNamespaces(namespacesObj);
-            // } else {
-                setNamespaces(tapConfig?.tappedNamespaces);
-            // }
-        } catch (e) {
+            const namespacesObj = {...tapConfig?.tappedNamespaces}
+            Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
+                namespacesObj[namespace] = true;
+            })
+            setNamespaces(namespacesObj);
+            setNamespaces(tapConfig?.tappedNamespaces);
+    } catch (e) {
             console.error(e);
         } finally {
         }
diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx
index c73bcd04b..4f18fa3f7 100644
--- a/ui/src/components/UI/SelectList.tsx
+++ b/ui/src/components/UI/SelectList.tsx
@@ -27,37 +27,29 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
         }
         else {
             const newValues: ValuesListInput = [...valuesList];
-            newValues[checkedKey].isChecked = !valuesList[checkedKey].isChecked;
+            newValues.map(item => item.key === checkedKey ? item.isChecked = !item.isChecked : item.isChecked);
             setValuesList(newValues);
             setValues(newValues);
         }
     }
 
     const unToggleAll = (checkedKey) => {
-        const newValues = [];
-        valuesList.forEach(valueList => {
-            if (valueList.key !== checkedKey)
-                newValues[checkedKey] = false;
-            else
-                newValues[checkedKey] = true;
+        const list = valuesList.map((obj) => {
+            return {...obj, isChecked:checkedKey === obj.key}
         })
-        setValuesList(newValues);
-        setValues(newValues);
+        setValuesList(list);
+        setValues(list);
     }
 
+
     const toggleAll = () => {
-        const isChecked = valuesList.every(valueTap => valueTap.isChecked === true);
-        setAllCheckedValue(!isChecked);
+        const list = valuesList.map((obj) => {
+            return {...obj, isChecked: true}
+        })
+        setValuesList(list);
+        setValues(list);
     }
 
-    const setAllCheckedValue = (isTap: boolean) => {
-        const newValues = [];
-        valuesList.forEach(valueList => {
-            newValues[valueList.key] = isTap;
-        })
-        setValuesList(newValues);
-        setValues(newValues);
-    }
 
     const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
             <th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === false)}
@@ -69,7 +61,7 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
         </tr>
 
     const filteredValues = useMemo(() => {
-        return valuesList.filter((listValue) => listValue.value.includes(searchValue));
+        return valuesList.filter((listValue) => listValue?.value?.includes(searchValue));
     },[valuesList, searchValue])
 
         return <div className={tabelClassName + " select-list-table"}>
@@ -81,10 +73,10 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
                     {filteredValues?.map(listValue => {
                             return <tr key={listValue.key}>
                                 <td style={{width: 50}}>
-                                    {multiSelect && <Checkbox checked={valuesList[listValue.key].isChecked} onToggle={() => toggleValues(listValue.key)}/>}
-                                    {!multiSelect && <Radio checked={valuesList[listValue.key].isChecked} onToggle={() => toggleValues(listValue.key)}/>}
+                                    {multiSelect && <Checkbox checked={valuesList.find(item => item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>}
+                                    {!multiSelect && <Radio checked={valuesList.find(item => item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>}
                                 </td>
-                                <td>{listValue}</td>
+                                <td>{listValue.value}</td>
                             </tr>   
                         }
                     )}