fix super user toggle (#2675)

Author: CollinBeczak

src/components/SuperAdmin/MetricsData.jsx

@@ -1,4 +1,5 @@
 import { FormattedDate } from "react-intl";
+import SuperUserToggle from "./SuperUserToggle";
 
 const OSM_USER_LINK = `${window.env.REACT_APP_OSM_SERVER}/user/`;
 
@@ -159,7 +160,7 @@ export const PROJECT_COLUMNS = [
   },
 ];
 
-export const USER_COLUMNS = [
+export const getUserColumns = (userChanges, setUserChanges) => [
   {
     Header: "Id",
     accessor: "id",
@@ -206,6 +207,13 @@ export const USER_COLUMNS = [
     Header: "Role",
     accessor: "superUser",
     width: 200,
-    Cell: ({ value }) => <div>{value ? "Super User" : "Basic User"}</div>,
+    Cell: ({ row, value }) => (
+      <SuperUserToggle
+        initialValue={value}
+        userId={row.original?.id}
+        userChanges={userChanges}
+        setUserChanges={setUserChanges}
+      />
+    ),
   },
 ];

src/components/SuperAdmin/MetricsTable.jsx

@@ -1,17 +1,19 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { injectIntl } from "react-intl";
 import { usePagination, useResizeColumns, useSortBy, useTable } from "react-table";
 import BusySpinner from "../BusySpinner/BusySpinner";
 import WithSortedChallenges from "../HOCs/WithSortedChallenges/WithSortedChallenges";
 import PaginationControl from "../PaginationControl/PaginationControl";
 import { TableWrapper, renderTableHeader } from "../TableShared/EnhancedTable";
 import { cellStyles, rowStyles, tableStyles } from "../TableShared/TableStyles";
-import { CHALLENGE_COLUMNS, PROJECT_COLUMNS, USER_COLUMNS } from "./MetricsData";
+import { CHALLENGE_COLUMNS, PROJECT_COLUMNS, getUserColumns } from "./MetricsData";
 import WithMetricsSearchResults from "./WithMetricsSearchResults";
 import WithSortedProjects from "./WithSortedProjects";
 import WithSortedUsers from "./WithSortedUsers";
 
 const MetricsTable = (props) => {
+  const [userChanges, setUserChanges] = useState({});
+
   const data = useMemo(() => {
     if (props.currentTab === "challenges") {
       return props.challenges.map((c) => ({
@@ -58,10 +60,10 @@ const MetricsTable = (props) => {
     } else if (props.currentTab === "projects") {
       return PROJECT_COLUMNS;
     } else if (props.currentTab === "users") {
-      return USER_COLUMNS;
+      return getUserColumns(userChanges, setUserChanges);
     }
     return [];
-  }, [props.currentTab]);
+  }, [props.currentTab, userChanges]);
 
   const {
     getTableProps,

src/components/SuperAdmin/SuperUserToggle.jsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } 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 !== undefined ? localState : props.initialValue ? "super" : "basic");
+  }, [props.userId, props.initialValue, props.userChanges]);
+
+  const updateValue = async (e) => {
+    const value = e.target.value;
+    setSelection(value);
+
+    try {
+      if (value === "super") {
+        await new Endpoint(api.superUser.addSuperUserGrant, {
+          variables: { userId: props.userId },
+        }).execute();
+      } else {
+        await new Endpoint(api.superUser.deleteSuperUserGrant, {
+          variables: { userId: props.userId },
+        }).execute();
+      }
+
+      props.setUserChanges?.({
+        ...props.userChanges,
+        [props.userId]: value,
+      });
+    } catch (error) {
+      // Revert on error
+      const localState = props.userChanges[props.userId];
+      setSelection(localState !== undefined ? localState : props.initialValue ? "super" : "basic");
+      console.error(error);
+    }
+  };
+
+  if (props.user?.id !== props.userId) {
+    return (
+      <div>
+        <select
+          className={selection === "super" ? "mr-bg-green" : "mr-bg-blue"}
+          value={selection}
+          onChange={updateValue}
+        >
+          <option value="basic">Basic User</option>
+          <option value="super">Super User</option>
+        </select>
+      </div>
+    );
+  }
+
+  return <div>Super User</div>;
+};
+
+export default WithCurrentUser(SuperUserToggle);