fix console error from @Aniket-Engg comments

libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx

@@ -16,6 +16,7 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
    */
   const [modalVisibility, setModalVisibility] = useState<boolean>(true)
   const [permissions, setPermissions] = useLocalStorage<PluginPermissions>('plugins/permissions', {} as PluginPermissions)
+  const [checkBoxState, setCheckBoxState] = useState<boolean[]>([])
   const closeModal = () => setModalVisibility(true)
   const openModal = () => {
     const currentValue = JSON.parse(window.localStorage.getItem('plugins/permissions'))
@@ -23,6 +24,13 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
     setModalVisibility(!modalVisibility)
   }
 
+  const handleCheckboxClick = (position: number) => {
+    const updatedCheckedState = checkBoxState.map((item, index) =>
+      index === position ? !item : item
+    )
+    setCheckBoxState(updatedCheckedState)
+  }
+
   function ShowPluginHeading ({ headingName }) {
     return (
       <div className="pb-2 remixui_permissionKey">
@@ -39,60 +47,22 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
     )
   }
 
-  function ShowCheckBox ({ allow, pluginName, functionName, topLevelPluginName }: {
-    allow: boolean,
-    pluginName: string,
-    functionName: string,
-    topLevelPluginName: string
-  }) {
-    const [checkBoxState, setCheckBoxState] = useState(allow)
-    const [showPermissions, setShowPermissions] = useLocalStorage<PluginPermissions>('plugins/permissions', {} as PluginPermissions)
-
-    // useEffect(() => {
-    //   console.log({ permissions })
-    // }, [checkBoxState, permissions])
-
-    const handleCheckboxClick = () => {
-      const copyPermissions = showPermissions
-      copyPermissions[pluginName][functionName][topLevelPluginName].allow = !checkBoxState
-      setCheckBoxState(!checkBoxState)
-      setShowPermissions(copyPermissions)
+  useEffect(() => {
+    let newStates = []
+    if (Object.keys(permissions).length > 0) {
+      Object.keys(permissions).map(topName => {
+        Object.keys(permissions[topName]).map(methodName => {
+          Object.keys(permissions[topName][methodName]).map(pluginName => {
+            newStates = checkBoxState.map(current => {
+              current = permissions[topName][methodName][pluginName].allow
+            })
+          })
+        })
+      })
     }
-    return (
-      <div className="form-group remixui_permissionKey">
-        { showPermissions && Object.keys(showPermissions).length > 0
-          ? (
-            <><div className="remixui_checkbox">
-              <span className="mr-2">
-                <input
-                  type="checkbox"
-                  onChange={handleCheckboxClick}
-                  checked={checkBoxState}
-                  id={`permission-checkbox-${topLevelPluginName}-${functionName}-${pluginName}`}
-                  aria-describedby={`module ${pluginName} asks permission for ${functionName}`} />
-                <label
-                  className="ml-4"
-                  htmlFor={`permission-checkbox-${topLevelPluginName}-${functionName}-${topLevelPluginName}`}
-                  data-id={`permission-label-${topLevelPluginName}-${functionName}-${topLevelPluginName}`}
-                >
-                  Allow <u>{pluginName}</u> to call <u>{functionName}</u>
-                </label>
-              </span>
-            </div><i
-              onClick={() => {
-                clearAllPersmissions(pluginName, topLevelPluginName, functionName)
-              } }
-              className="fa fa-trash-alt"
-              data-id={`pluginManagerSettingsRemovePermission-${topLevelPluginName}-${functionName}-${topLevelPluginName}`} /></>
-          ) : null
-        }
-      </div>
-    )
-  }
+    setCheckBoxState(newStates)
+  }, [])
 
-  useEffect(() => {
-    console.log({ permissions })
-  }, [Object.keys(permissions).length])
   function clearAllPersmissions (pluginName: string, topLevelPluginName: string, funcName: string) {
     const permissionsCopy = permissions // don't mutate state
     if (permissionsCopy[topLevelPluginName] && permissionsCopy[topLevelPluginName][funcName]) {
@@ -138,14 +108,35 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
             {
               permissions && Object.keys(permissions).length > 0 ? Object.keys(permissions).map(topName => {
                 return Object.keys(permissions[topName]).map(funcName => {
-                  return Object.keys(permissions[topName][funcName]).map(pluginName => (
-                    <ShowCheckBox
-                      allow={permissions[topName][funcName][pluginName].allow}
-                      functionName={funcName}
-                      pluginName={pluginName}
-                      topLevelPluginName={topName}
-                      key={pluginName}
-                    />
+                  return Object.keys(permissions[topName][funcName]).map((pluginName, index) => (
+                    <div className="form-group remixui_permissionKey" key={pluginName}>
+                      { permissions && Object.keys(permissions).length > 0
+                        ? (
+                          <><div className="remixui_checkbox">
+                            <span className="mr-2">
+                              <input
+                                type="checkbox"
+                                onChange={() => handleCheckboxClick(index)}
+                                checked={permissions[topName][funcName][pluginName].allow}
+                                id={`permission-checkbox-${topName}-${funcName}-${pluginName}`}
+                                aria-describedby={`module ${pluginName} asks permission for ${funcName}`} />
+                              <label
+                                className="ml-4"
+                                htmlFor={`permission-checkbox-${topName}-${funcName}-${topName}`}
+                                data-id={`permission-label-${topName}-${funcName}-${topName}`}
+                              >
+                                Allow <u>{pluginName}</u> to call <u>{funcName}</u>
+                              </label>
+                            </span>
+                          </div><i
+                            onClick={() => {
+                              clearAllPersmissions(pluginName, topName, funcName)
+                            } }
+                            className="fa fa-trash-alt"
+                            data-id={`pluginManagerSettingsRemovePermission-${topName}-${funcName}-${topName}`} /></>
+                        ) : null
+                      }
+                    </div>
                   ))
                 })
               }) : null