Hide unauthorized ui

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

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;
     }

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 }),

src/sidebar/sidebar.jsx

@@ -1,91 +1,92 @@
-// This component is the sidebar, which is displayed across the entire app. Its content merely changes when pages are
-// changed.
+// This component is the sidebar, which is displayed across the entire app. Its
+// content merely changes when pages are changed.
 
-import React, { Component } from 'react';
-import Footer from './footer';
+import React from 'react';
+import LabelPane from '../components/label-pane';
 import { SidebarHeader } from '../components/sidebar-header';
-import SidebarItemContainer from './sidebar-item-wrapper';
+import EventActionsPane from './event-actions-pane';
 import FilterPane from './filter-pane';
-import LinkPane from './link-pane';
+import Footer from './footer';
 import GenerateICSPane from './generate-ics-pane';
+import LinkPane from './link-pane';
 import MarkdownGuide from './markdown-guide';
-import EventActionsPane from './event-actions-pane';
-import LabelPane from '../components/label-pane';
+import SidebarItemContainer from './sidebar-item-wrapper';
 
-export default class Sidebar extends Component {
-  render() {
-    const mode = this.props.sidebarMode;
-    const content = [];
+const Sidebar = (props) => {
+  const {
+    account: { permissions },
+    sidebarMode: mode,
+  } = props;
 
-    if (mode.LINK_PANE) {
-      content.push(<LinkPane
-        addEventClicked={this.props.addEvent}
-        importICSClicked={this.props.importICSClicked}
-        key="link"
-        className="sidebar-item"
-      />);
-    }
+  const content = (
+    <div>
+      {!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>
+      )}
 
-    if (mode.EVENT_ACTIONS) {
-      content.push(<EventActionsPane key="event-actions" className="sidebar-item" {...this.props} />);
-    }
+      {mode.LINK_PANE &&
+        permissions.add_events && (
+          <LinkPane
+            addEventClicked={props.addEvent}
+            importICSClicked={props.importICSClicked}
+            key="link"
+            className="sidebar-item"
+          />
+        )}
 
-    if (mode.EVENT_LABELS_PANE) { // For viewing a single event
-      const currentEventLabels = this.props.currentEvent ? this.props.currentEvent.labels : null;
-      content.push(<SidebarItemContainer
-        key="event-labels"
-        header="Labels"
-      >
-        <LabelPane
-          editable={false}
-          showUnselected={false}
-          selectedLabels={currentEventLabels}
-          {...this.props}
-        />
-                   </SidebarItemContainer>);
-    }
+      {mode.EVENT_ACTIONS &&
+        permissions.edit_events && (
+          <EventActionsPane key="event-actions" className="sidebar-item" {...props} />
+        )}
 
-    if (mode.FILTER_PANE) { // For viewing the calendar
-      content.push(<SidebarItemContainer
-        key="filter-pane"
-        header="Filter"
-      >
-        <FilterPane {...this.props} />
-                   </SidebarItemContainer>);
-    }
-    if (mode.GENERATE_ICS_PANE) {
-      const header = 'Subscribe';
-      content.push(<SidebarItemContainer
-        key="gen-ics"
-        header={header}
-      >
-        <GenerateICSPane {...this.props} />
-                   </SidebarItemContainer>);
-    }
+      {mode.EVENT_LABELS_PANE && (
+        <SidebarItemContainer key="event-labels" header="Labels">
+          <LabelPane
+            editable={false}
+            showUnselected={false}
+            selectedLabels={props.currentEvent ? props.currentEvent.labels : null}
+            {...props}
+          />
+        </SidebarItemContainer>
+      )}
 
-    if (mode.MARKDOWN_GUIDE) {
-      content.push(<SidebarItemContainer
-        key="markdown-guide"
-        header="Markdown Guide"
-      >
-        <MarkdownGuide />
-                   </SidebarItemContainer>);
-    }
+      {mode.FILTER_PANE && (
+        // For viewing the calendar
+        <SidebarItemContainer key="filter-pane" header="Filter">
+          <FilterPane {...props} />
+        </SidebarItemContainer>
+      )}
 
-    const sidebarClasses = `app-sidebar${(this.props.isCollapsed) ? ' collapsed' : ' expanded'}`;
-    return (
-      <div className={sidebarClasses}>
-        <div className="sidebar-container">
-          <SidebarHeader
-            homeClicked={this.props.homeClicked}
-            toggleSidebarCollapsed={this.props.toggleSidebarCollapsed}
-          />
-          <div className="sidebar-content">
-            {content}
-          </div>
-          <Footer class="sidebar-footer" />
-        </div>
+      {mode.GENERATE_ICS_PANE && (
+        <SidebarItemContainer key="gen-ics" header="Subscribe">
+          <GenerateICSPane {...props} />
+        </SidebarItemContainer>
+      )}
+
+      {mode.MARKDOWN_GUIDE && (
+        <SidebarItemContainer key="markdown-guide" header="Markdown Guide">
+          <MarkdownGuide />
+        </SidebarItemContainer>
+      )}
+    </div>
+  );
+
+  const sidebarClasses = `app-sidebar${props.isCollapsed ? ' collapsed' : ' expanded'}`;
+  return (
+    <div className={sidebarClasses}>
+      <div className="sidebar-container">
+        <SidebarHeader
+          homeClicked={props.homeClicked}
+          toggleSidebarCollapsed={props.toggleSidebarCollapsed}
+        />
+        <div className="sidebar-content">{content}</div>
+        <Footer class="sidebar-footer" />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+export default Sidebar;