Merge pull request #116 from HKN-UCSD/oldRBACCleanup

Removed ClaimsSingleton, used UserContext for conditional render/routing

src/HOCs/RenderAuthorization.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { UserContext } from '@Contexts';
+
+const RenderAuthorization = allowedRoles => ComponentToRender => props => {
+  return (
+    <UserContext.Consumer>
+      {userClaims => {
+        if (userClaims != null) {
+          const { userRoles } = userClaims;
+
+          if (userRoles != null) {
+            for (let i = 0; i < userRoles.length; i += 1) {
+              if (allowedRoles.includes(userRoles[i])) {
+                return <ComponentToRender {...props} />;
+              }
+            }
+          }
+        }
+
+        return <></>;
+      }}
+    </UserContext.Consumer>
+  );
+};
+
+export default RenderAuthorization;

src/HOCs/RenderByContextPerm.js → src/HOCs/RenderPermissions.js

@@ -1,4 +1,4 @@
-import RenderByContextAuth from './RenderByContextAuth';
+import RenderAuthorization from './RenderAuthorization';
 
 /**
  * Use these functions like this:
@@ -8,18 +8,18 @@ import RenderByContextAuth from './RenderByContextAuth';
  *     MemberRenderPermission(Component)({...props})
  *     InducteeRenderPermission(Component)({...props})
  */
-export const OfficerRenderPermission = RenderByContextAuth([
+export const OfficerRenderPermission = RenderAuthorization([
   'admin',
   'officer',
 ]);
 
-export const MemberRenderPermission = RenderByContextAuth([
+export const MemberRenderPermission = RenderAuthorization([
   'admin',
   'officer',
   'member',
 ]);
 
-export const InducteeRenderPermission = RenderByContextAuth([
+export const InducteeRenderPermission = RenderAuthorization([
   'admin',
   'officer',
   'member',

src/HOCs/RoutingAuthorization.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { UserContext } from '@Contexts';
+import * as ROUTES from '@Constants/routes';
+import { NavBar } from '@SharedComponents';
+
+const RoutingAuthorization = allowedRoles => WrappedComponent => props => {
+  return (
+    <UserContext.Consumer>
+      {userClaims => {
+        if (userClaims != null) {
+          const { userRoles } = userClaims;
+
+          if (userRoles != null) {
+            for (let i = 0; i < userRoles.length; i += 1) {
+              if (allowedRoles.includes(userRoles[i])) {
+                return (
+                  <NavBar>
+                    <WrappedComponent {...props} />
+                  </NavBar>
+                );
+              }
+            }
+          }
+        }
+
+        return <Redirect to={ROUTES.SIGN_IN} />;
+      }}
+    </UserContext.Consumer>
+  );
+};
+
+export default RoutingAuthorization;

src/HOCs/RoutingByContextPerm.js → src/HOCs/RoutingPermissions.js

@@ -1,4 +1,4 @@
-import RoutingByContextAuth from './RoutingByContextAuth';
+import RoutingAuthorization from './RoutingAuthorization';
 
 /**
  * Use these functions like this:
@@ -10,18 +10,18 @@ import RoutingByContextAuth from './RoutingByContextAuth';
  * Note that the component prop is to be like that, other props are up to the person using these
  * wrappers
  */
-export const OfficerRoutingPermission = RoutingByContextAuth([
+export const OfficerRoutingPermission = RoutingAuthorization([
   'admin',
   'officer',
 ]);
 
-export const MemberRoutingPermission = RoutingByContextAuth([
+export const MemberRoutingPermission = RoutingAuthorization([
   'admin',
   'officer',
   'member',
 ]);
 
-export const InducteeRoutingPermission = RoutingByContextAuth([
+export const InducteeRoutingPermission = RoutingAuthorization([
   'admin',
   'officer',
   'member',

src/components/NavBar/index.js

@@ -29,13 +29,13 @@ import MenuIcon from '@material-ui/icons/Menu';
 import { OfficerTabs, InducteeTabs } from './tabs';
 import styles from './styles';
 
-import { AuthUserContext } from '@Contexts';
-import { isOfficer as checkIsOfficer } from '@Services/claims';
+import { UserContext } from '@Contexts';
 import { doSignOut } from '@Services/auth';
+import { isOfficer } from '@Services/claims';
 
 const INITIAL_STATES = {
   isDrawerOpen: false,
-  isOfficer: false,
+  isAnOfficer: false,
   isConfirmationModalOpen: false,
 };
 
@@ -46,9 +46,9 @@ class NavBar extends React.Component {
   }
 
   componentDidMount() {
-    const userClaims = this.context;
+    const userContext = this.context;
     this.setState({
-      isOfficer: checkIsOfficer(userClaims),
+      isAnOfficer: isOfficer(userContext),
     });
   }
 
@@ -72,9 +72,9 @@ class NavBar extends React.Component {
 
   render() {
     const { classes, children } = this.props;
-    const { isDrawerOpen, isOfficer, isConfirmationModalOpen } = this.state;
+    const { isDrawerOpen, isAnOfficer, isConfirmationModalOpen } = this.state;
 
-    const tabs = isOfficer ? OfficerTabs : InducteeTabs;
+    const tabs = isAnOfficer ? OfficerTabs : InducteeTabs;
     const tabComponents = tabs.map(tab => (
       <ListItem button component={Link} to={tab.route} key={tab.route}>
         <ListItemIcon>{tab.icon}</ListItemIcon>
@@ -180,7 +180,7 @@ class NavBar extends React.Component {
   }
 }
 
-NavBar.contextType = AuthUserContext;
+NavBar.contextType = UserContext;
 
 NavBar.propTypes = {
   children: PropTypes.node.isRequired,

src/contexts.js

@@ -2,4 +2,4 @@ import React from 'react';
 
 // we might make more contexts...
 // eslint-disable-next-line import/prefer-default-export
-export const AuthUserContext = React.createContext(null);
+export const UserContext = React.createContext(null);

src/pages/App/index.js

@@ -15,17 +15,16 @@ import {
   EventDetailsPage,
 } from '@Pages';
 import { Loading } from '@SharedComponents';
-import { AuthUserContext } from '@Contexts';
+import { UserContext } from '@Contexts';
 import * as ROUTES from '@Constants/routes';
-import { ClaimsSingleton } from '@Services/claims';
+import { getRolesFromClaims } from '@Services/claims';
 import {
   InducteeRoutingPermission,
   OfficerRoutingPermission,
-} from '@HOCs/RoutingByContextPerm';
+} from '@HOCs/RoutingPermissions';
 
 const INITIAL_STATES = {
-  authUser: null,
-  authUserClaims: null,
+  userClaims: null,
   isLoading: true,
 };
 
@@ -42,33 +41,47 @@ class App extends React.Component {
         const tokenResult = await user.getIdTokenResult();
         const { claims } = tokenResult;
 
-        ClaimsSingleton.setClaims(claims);
         this.setState({
-          authUserClaims: Object.keys(claims),
+          userClaims: {
+            userId: claims.user_id,
+            userRoles: getRolesFromClaims(claims),
+          },
           isLoading: false,
         });
       } else {
-        ClaimsSingleton.setClaims({});
         this.setState({
-          authUserClaims: null,
+          userClaims: null,
           isLoading: false,
         });
       }
     });
   }
 
+  setClaims = claims => {
+    this.setState({
+      userClaims: {
+        userId: claims.user_id,
+        userRoles: getRolesFromClaims(claims),
+      },
+    });
+  };
+
   render() {
-    const { authUserClaims, isLoading } = this.state;
+    const { userClaims, isLoading } = this.state;
 
     if (isLoading) {
       return <Loading />;
     }
 
     return (
-      <AuthUserContext.Provider value={authUserClaims}>
+      <UserContext.Provider value={userClaims}>
         <BrowserRouter>
           <Switch>
-            <Route exact path={ROUTES.SIGN_IN} render={() => <SignInPage />} />
+            <Route
+              exact
+              path={ROUTES.SIGN_IN}
+              render={() => <SignInPage setClaims={this.setClaims} />}
+            />
             <Route exact path={ROUTES.SIGN_UP} render={() => <SignUpPage />} />
             <Route
               exact
@@ -122,7 +135,7 @@ class App extends React.Component {
             <Route render={() => <Redirect to={ROUTES.HOME} />} />
           </Switch>
         </BrowserRouter>
-      </AuthUserContext.Provider>
+      </UserContext.Provider>
     );
   }
 }

src/pages/EventDetailsPage/components/EventDetails/index.js

@@ -10,8 +10,8 @@ import DeleteEditButtons from '../DeleteEditButtons';
 import Links from './Links';
 import styles from './styles';
 
+import { OfficerRenderPermission } from '@HOCs/RenderPermissions';
 import { Tags } from '@SharedComponents';
-import { OfficerRenderPermission } from '@HOCs/RenderByContextPerm';
 import * as ROUTES from '@Constants/routes';
 
 function EventDetailsComponent(props) {

src/pages/EventDetailsPage/index.js

@@ -38,7 +38,7 @@ class EventDetailsPage extends React.Component {
     const { eventId, eventInfo } = this.state;
 
     const EventDetails =
-      eventInfo === null ? (
+      eventInfo == null ? (
         <Loading />
       ) : (
         <EventDetailsComponent eventId={eventId} eventInfo={eventInfo} />