fix: list user's own roles and restrict user to maximum of one organi…

…zation (#56)
Greenstand · Mar 29, 2021 · 8caf860 · 8caf860
1 parent 5d8b06e
commit 8caf860
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 68 deletions.
diff --git a/src/components/Account.js b/src/components/Account.js
@@ -174,72 +174,11 @@ function Account(props) {
     return result;
   };
 
-  const [permissions, setPermissions] = React.useState([]);
-  const [users, setUsers] = React.useState([]);
-
-  React.useEffect(() => {
-    //loading permission from server
-    async function load() {
-      // Get the user's permissions
-      try {
-        let res = await axios.get(
-          `${process.env.REACT_APP_API_ROOT}/auth/permissions`,
-          {
-            headers: { Authorization: token },
-          },
-        );
-        if (res.status === 200) {
-          setPermissions(res.data);
-        } else {
-          console.error('load fail:', res);
-          return;
-        }
-      } catch (e) {
-        console.error('ERROR fetching permissions:', e);
-      }
-
-      // Get the user based on the token
-      try {
-        let res = await axios.get(
-          `${process.env.REACT_APP_API_ROOT}/auth/admin_users`,
-          {
-            headers: { Authorization: token },
-          },
-        );
-        if (res.status === 200) {
-          setUsers(res.data);
-        } else {
-          console.error('load fail:', res);
-          return;
-        }
-      } catch (e) {
-        console.error('ERROR fetching admin_users:', e);
-      }
-    }
-
-    // Don't try to load if there isn't a token
-    if (token) {
-      load();
-    }
-  }, [token]);
-
-  // Find the user if in the list, or use the given info if not found
-  // Match the user's roles to their assoc. permissions
-  const freshUser = users.find((el) => el.userName === user.userName) || user;
-  const roles = !permissions
-    ? null
-    : freshUser.role.map((r, idx) => {
-        return permissions.reduce((el, p) => {
-          return (
-            el ||
-            (p && p.id === r && (
-              <Grid key={`role_${idx}`}>
-                <Typography className={classes.item}>{p.roleName}</Typography>
-              </Grid>
-            ))
-          );
-        }, undefined);
-      });
+  const roles = (
+    user.roleNames?.map((name, idx) =>
+      <Typography key={`role_${idx}`} className={classes.item}>{name}</Typography>
+    )
+  );
 
   return (
     <>
@@ -278,7 +217,7 @@ function Account(props) {
                   <Typography className={classes.item}>{user.email}</Typography>
                 </Grid>
                 <Grid item>
-                  <Typography className={classes.title}>Role</Typography>
+                  <Typography className={classes.title}>Roles</Typography>
                   {roles}
                 </Grid>
                 <Grid item>

diff --git a/src/components/Users.js b/src/components/Users.js
@@ -232,7 +232,7 @@ function Users(props) {
     setCopyMsg('');
   }
 
-  function handleClose() {}
+  function handleClose() { }
 
   const [checked, setChecked] = React.useState([]);
   const [left, setLeft] = React.useState(permissions);
@@ -241,6 +241,13 @@ function Users(props) {
   const leftChecked = intersection(checked, left);
   const rightChecked = intersection(checked, right);
 
+  const allowedOrganizationIds = [...leftChecked, ...right].reduce((accumulator, role) => {
+    if (role.policy?.organization && !accumulator.some((roleId) => roleId === role.policy.organization.id)) {
+      return [...accumulator, role.policy.organization.id];
+    }
+    return accumulator;
+  }, []);
+
   const handleToggle = (value) => () => {
     const currentIndex = checked.findIndex((e) => e.id === value.id);
     const newChecked = [...checked];
@@ -275,18 +282,22 @@ function Users(props) {
     setLeft(left.concat(right));
     setRight([]);
   };
+
   const customList = (items) => (
     <Paper variant="outlined" className={classes.paper}>
       <List dense component="div" role="list">
         {items.map((value) => {
           const labelId = `transfer-list-item-${value.id}-label`;
+          const disabled = value.policy?.organization && allowedOrganizationIds.length > 0
+            && !allowedOrganizationIds.some((orgId) => orgId === value.policy.organization.id);
 
           return (
             <ListItem
               key={value.id}
               role="listitem"
               button
               onClick={handleToggle(value)}
+              disabled={disabled}
             >
               <ListItemIcon>
                 <Checkbox