capture user settings changes in local state (#2192)

src/components/SuperAdmin/MetricsData.js

@@ -221,7 +221,7 @@ const setProjectTab = () => {
   ]
 }
 
-const setUserTab = () => {
+const setUserTab = (userChanges, setUserChanges) => {
   return [
     {
       id: 'id',
@@ -291,7 +291,12 @@ const setUserTab = () => {
       sortable: true,
       Cell: (props) => {
         return (
-          <SuperUserToggle initialValue={props.value} userId={props?.original?.id} />
+          <SuperUserToggle
+            initialValue={props.value}
+            userId={props?.original?.id}
+            userChanges={userChanges}
+            setUserChanges={setUserChanges}
+          />
         )
       }
     },

src/components/SuperAdmin/MetricsTable.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import WithSortedChallenges from '../HOCs/WithSortedChallenges/WithSortedChallenges'
 import WithMetricsSearchResults from './WithMetricsSearchResults'
 import WithSortedProjects from './WithSortedProjects'
@@ -9,6 +9,7 @@ import { injectIntl } from 'react-intl'
 import BusySpinner from '../BusySpinner/BusySpinner'
 
 const MetricsTable = (props) => {
+  const [userChanges, setUserChanges] = useState({})
   let data
   const constructHeader = () => {
     if (props.currentTab === 'challenges') {
@@ -50,7 +51,7 @@ const MetricsTable = (props) => {
         superUser: Boolean(u.grants?.find(grant => grant.role === -1))
       }))
 
-      return setUserTab()
+      return setUserTab(userChanges, setUserChanges)
     }
   }
 

src/components/SuperAdmin/SuperUserToggle.js

@@ -1,11 +1,16 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Endpoint from '../../services/Server/Endpoint'
 import { defaultRoutes as api } from "../../services/Server/Server";
 import WithCurrentUser from '../HOCs/WithCurrentUser/WithCurrentUser';
 
 const SuperUserToggle = (props) => {
   const [selection, setSelection] = useState(props.initialValue ? "super" : "basic")
 
+  useEffect(() => {
+    const localState = props.userChanges[props.userId]
+    setSelection(localState || props.initialValue ? "super" : "basic")
+  }, [props.userId])
+
   const updateValue = async (e) => {
     const value = e.target.value
 
@@ -16,6 +21,10 @@ const SuperUserToggle = (props) => {
         await new Endpoint(api.superUser.deleteSuperUserGrant, { variables: { userId: props.userId } }).execute()
       }
 
+      props.setUserChanges({
+        ...props.userChanges,
+        [props.userId]: value
+      })
       setSelection(value)
     } catch (e) {
       console.log(e)