Hide the Add and Edit buttons from unauthenticated users

Start #217, #179. Remaining work depends on olin-build/ABE#214. This work is to retrieve the account info from GET /account instead of initializing it to a constant that grants all permissions; to extend withServerInfo (currently in PR #219) to verify that the account has been loaded; and to guard the Sidebar by withServerInfo.
olin-build · May 9, 2018 · f1961e6 · f1961e6
1 parent a3c9efc
commit f1961e6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 32 deletions.
diff --git a/src/containers/sidebar-container.js b/src/containers/sidebar-container.js
@@ -9,13 +9,12 @@ import * as Actions from '../data/actions';
 // This function passes values/objects from the Redux state to the React component as props
 const mapStateToProps = state => ({
   general: state.general,
+  account: state.account,
   currentEvent: state.events.current,
   isCollapsed: state.sidebar.isCollapsed,
   sidebarMode: state.sidebar.mode,
   possibleLabels: state.labels.labelList,
-  selectedLabels: state.events.current
-    ? state.events.current.labels
-    : state.labels.visibleLabels,
+  selectedLabels: state.events.current ? state.events.current.labels : state.labels.visibleLabels,
 });
 
 // This function passes functions from /srcs/data/actions.jsx to the React component as props

diff --git a/src/data/reducers.js b/src/data/reducers.js
@@ -1,7 +1,7 @@
 // This file contains a bunch of Redux reducers
 
-import { ActionTypes } from './actions';
 import SidebarModes from '../data/sidebar-modes';
+import { ActionTypes } from './actions';
 
 export function general(state = {}, action) {
   const newState = Object.assign({}, state);
@@ -11,7 +11,7 @@ export function general(state = {}, action) {
       alert(action.message);
       return state;
     case ActionTypes.DISPLAY_ERROR:
-      alert((action.message) ? action.message : action.error);
+      alert(action.message ? action.message : action.error);
       console.error(action.error);
       return state;
     case ActionTypes.SET_PAGE_TITLE_PREFIX:
@@ -23,6 +23,10 @@ export function general(state = {}, action) {
   }
 }
 
+export function account(state = {}, _action) {
+  return state;
+}
+
 export function calendar(state = {}, action) {
   const newState = Object.assign({}, state);
 
@@ -87,9 +91,8 @@ export function labels(state = {}, action) {
       // If the visible labels array hasn't been set yet, set it to be the default
       if (!state.visibleLabels) {
         const labelsArray = Object.values(labelList);
-        newState.visibleLabels = (labelsArray.length > 0)
-          ? labelsArray.filter(l => l.default).map(l => l.name)
-          : [];
+        newState.visibleLabels =
+          labelsArray.length > 0 ? labelsArray.filter(l => l.default).map(l => l.name) : [];
       }
       return newState;
     }

diff --git a/src/data/setup-store.js b/src/data/setup-store.js
@@ -1,11 +1,10 @@
-import { createStore, applyMiddleware, combineReducers } from 'redux';
-import thunkMiddleware from 'redux-thunk';
 import ReactGA from 'react-ga';
-import { routerReducer, routerMiddleware } from 'react-router-redux';
+import { routerMiddleware, routerReducer } from 'react-router-redux';
+import { applyMiddleware, combineReducers, createStore } from 'redux';
+import thunkMiddleware from 'redux-thunk';
 import * as reducers from './reducers';
 import SidebarMode from './sidebar-modes';
 
-
 export default function setupStore(history) {
   const debug = process.env.DEBUG || false;
   const googleAnalyticsId = process.env.GA_ID;
@@ -50,6 +49,15 @@ export default function setupStore(history) {
         },
       },
     },
+    // TODO: replace this by the response to GET /account, on implementaion of olinlibrary/ABE#214
+    account: {
+      authenticated: true,
+      permissions: {
+        add_events: true,
+        edit_events: true,
+        view_all_events: true,
+      },
+    },
     events: {
       current: null,
       events: null,
@@ -80,15 +88,16 @@ export default function setupStore(history) {
   }
 
   // Load the Redux middleware if the Redux devtools extension is available
-  const middleware = (debug && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)
-    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(applyMiddleware(
-      thunkMiddleware, // lets us dispatch() functions
-      routerMiddleware(history),
-    ))
-    : applyMiddleware(
-      thunkMiddleware, // lets us dispatch() functions
-      routerMiddleware(history),
-    );
+  const middleware =
+    debug && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(applyMiddleware(
+        thunkMiddleware, // lets us dispatch() functions
+        routerMiddleware(history),
+      ))
+      : applyMiddleware(
+        thunkMiddleware, // lets us dispatch() functions
+        routerMiddleware(history),
+      );
 
   return createStore(
     combineReducers({ ...reducers, router: routerReducer }),

diff --git a/src/sidebar/sidebar.jsx b/src/sidebar/sidebar.jsx
@@ -13,22 +13,34 @@ import MarkdownGuide from './markdown-guide';
 import SidebarItemContainer from './sidebar-item-wrapper';
 
 const Sidebar = (props) => {
-  const { sidebarMode: mode } = props;
+  const {
+    account: { permissions },
+    sidebarMode: mode,
+  } = props;
 
   const content = (
     <div>
-      {mode.LINK_PANE && (
-        <LinkPane
-          addEventClicked={props.addEvent}
-          importICSClicked={props.importICSClicked}
-          key="link"
-          className="sidebar-item"
-        />
+      {!permissions.view_all_events && (
+        <p>
+          You are viewing the public calendar. Visit the calendar from on campus to see all events
+          and to add and edit events.
+        </p>
       )}
 
-      {mode.EVENT_ACTIONS && (
-        <EventActionsPane key="event-actions" className="sidebar-item" {...props} />
-      )}
+      {mode.LINK_PANE &&
+        permissions.add_events && (
+          <LinkPane
+            addEventClicked={props.addEvent}
+            importICSClicked={props.importICSClicked}
+            key="link"
+            className="sidebar-item"
+          />
+        )}
+
+      {mode.EVENT_ACTIONS &&
+        permissions.edit_events && (
+          <EventActionsPane key="event-actions" className="sidebar-item" {...props} />
+        )}
 
       {mode.EVENT_LABELS_PANE && (
         <SidebarItemContainer key="event-labels" header="Labels">