About page, project sorting and project dropdown in navbar

src/App.css

@@ -21,6 +21,16 @@
   position: relative;
 }
 
+/* disable user text highlighting */
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+} 
+
 @media (max-width: 639px) {
   .hide-xsmall {
     display: none;

src/App.js

@@ -15,15 +15,9 @@ class App extends Component {
     return (
       <Router>
         <div className="App">
-          <NavBar
-            authenticated={this.props.authenticated}
-            contributionPoints={this.props.contributionPoints}
-            username={this.props.username}
-            onRemoveNotification={this.props.removeNotification}
-            onIncreaseContributionAmount={this.props.increaseContributionAmount}
-            />
+          <Route component={NavBar} />
           <Switch>
-            {/* Temporary redirect from /; will use HomePage component */ }
+            {/* Temporary redirect from /; will use HomePage component */}
             <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
             <Route exact path="/dashboard" render={() => {
               return this.props.authenticated
@@ -41,10 +35,6 @@ class App extends Component {
   }
 }
 
-function mapStateToProps(state) {
-  return state.user;
-}
-
 function mapDispatchToProps(dispatch) {
   return {
     removeNotification(id){
@@ -56,4 +46,4 @@ function mapDispatchToProps(dispatch) {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default connect(({ user, currentPursuanceId }) => ({ user, currentPursuanceId }), mapDispatchToProps)(App);

src/actions/index.js

@@ -46,6 +46,11 @@ export const setTaskFormParentGid = (formId, newParentGid, oldParentGid) => ({
 
 export const getUsers = () => ({ type: 'GET_USERS', payload: getUsersReq() });
 
+export const setPublicOrder = publicOrder => ({
+  type: 'SET_PUBLIC_ORDER',
+  publicOrder
+});
+
 export const getPursuancesByIds = pursuanceIds => ({
   type: 'GET_PURSUANCES_BY_IDS',
   payload: getPursuancesReq(pursuanceIds)

src/components/Content/Pursuance/PursuanceMenu.js

@@ -6,6 +6,7 @@ import PursuanceMenuItem from './PursuanceMenuItem';
 import TiFlowChildren from 'react-icons/lib/ti/flow-children';
 import FaCheckSquareO from 'react-icons/lib/fa/check-square-o';
 import FaCalendar from 'react-icons/lib/fa/calendar';
+import Info from 'react-icons/lib/fa/info-circle';
 // import FaSitemap from 'react-icons/lib/fa/sitemap';
 import CommentsO from 'react-icons/lib/fa/comments-o';
 // import Planet from 'react-icons/lib/io/planet';
@@ -19,6 +20,12 @@ const PursuanceMenu = () => {
   return (
     <ButtonGroup vertical className="pursuance-btn-group hide-xsmall">
       <div>
+        <PursuanceMenuItem
+          className="pursuance-top-btn"
+          label='About'
+          action='about'
+          icon={<Info size={28} />}
+        />
         {/*
         <PursuanceMenuItem
           className="pursuance-top-btn"
@@ -28,7 +35,6 @@ const PursuanceMenu = () => {
         />
         */}
         <PursuanceMenuItem
-          className="pursuance-top-btn"
           label='Discuss'
           action='discuss'
           icon={<CommentsO size={28} />}

src/components/Content/Pursuance/PursuancePage.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { setCurrentPursuance } from '../../../actions';
 import PursuanceMenu from './PursuanceMenu';
+import AboutView from './views/AboutView';
 import MyTasksView from './views/MyTasksView';
 import TaskListView from './views/TaskListView';
 import CalendarView from './views/CalendarView';
@@ -31,6 +32,7 @@ class PursuancePage extends Component {
           </nav>
           <article>
             <Switch>
+              <Route exact path="/pursuance/:pursuanceId/about" component={AboutView} />
               <Route exact path="/pursuance/:pursuanceId" component={TaskListView} />
               <Route exact path="/pursuance/:pursuanceId/my_tasks" component={MyTasksView} />
               <Route exact path="/pursuance/:pursuanceId/tasks" component={TaskListView} />

src/components/Content/Pursuance/views/AboutView.css

@@ -0,0 +1,19 @@
+.about {
+  width: 100%;
+  padding: 0 80px 0 30px;
+  overflow: auto;
+}
+
+.about h1, h2, h4 {
+  color: #fcfcfc;
+}
+
+.about h1 {
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .about {
+    padding: 0 65px 0 15px;
+  }
+} 

src/components/Content/Pursuance/views/AboutView.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import './AboutView.css';
+
+class AboutView extends Component {
+  render() {
+    const {currentPursuanceId, pursuances} = this.props;
+    const p = (pursuances[currentPursuanceId] !== undefined) ?
+          pursuances[currentPursuanceId] : "";
+    return (
+      <div className="content about">
+        <h1>About This Pursuance</h1>
+        <h2>Name: {p.name}</h2>
+        <h4>Mission: {p.mission}</h4>
+      </div>
+    );
+  }
+}
+
+export default connect(({ currentPursuanceId, pursuances }) =>
+  ({ currentPursuanceId, pursuances })
+)(AboutView);

src/components/Content/TaskHierarchy/TaskHierarchy.js

@@ -35,6 +35,12 @@ class TaskHierarchy extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.currentPursuanceId !== this.props.currentPursuanceId) {
+      this.componentDidMount();
+    }
+  }
+
   componentWillUnmount(){
     const { showSuccessToast, removeSuccessToast } = this.props;
     if (showSuccessToast) {
@@ -78,6 +84,13 @@ class TaskHierarchy extends Component {
     }
   }
 
+  getPursuanceName = (pursuances, id) => {
+    const rawPursuance = pursuances[id];
+    if (rawPursuance !== undefined) {
+      return rawPursuance.name;
+    }
+  }
+
   renderHierarchy = () => {
     const { currentPursuanceId } = this.props;
     const { rootTaskGids, taskMap } = this.props.tasks;
@@ -102,18 +115,9 @@ class TaskHierarchy extends Component {
   }
 
   render() {
-    const { pursuances, currentPursuanceId } = this.props;
     return (
       <div className="content">
         <div id="task-hierarchy">
-          <div id="task-hierarchy-title">
-            <h2 id="tasks-title">Tasks:&nbsp;</h2>
-            <h2 id="pursuance-title">
-              {
-                pursuances[currentPursuanceId] && pursuances[currentPursuanceId].name
-              }
-            </h2>
-          </div>
           <div id="task-labels">
             <div>
               <span>
@@ -142,11 +146,11 @@ class TaskHierarchy extends Component {
             </div>
           </div>
           <ToastContainer
-              position="top-center"
-              type="success"
-              autoClose={4000}
-              hideProgressBar={false}
-              newestOnTop={false} />
+            position="top-center"
+            type="success"
+            autoClose={4000}
+            hideProgressBar={false}
+            newestOnTop={false} />
           {this.renderHierarchy()}
         </div>
       </div>

src/components/Content/TaskStatus/TaskStatus.js

@@ -38,6 +38,8 @@ class TaskStatus extends Component {
             {this.displayStatus(statusName)}
           </MenuItem>
         );
+      } else {
+        return false;
       }
     });
   }

src/components/NavBar/JumpToPursuance/JumpToPursuance.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
+import { setCurrentPursuance } from '../../../actions';
+
+const getCurrentPursuanceName = (pursuances, currentPursuanceId) => {
+  const rawPursuance = pursuances[currentPursuanceId];
+  if (rawPursuance !== undefined) {
+    return rawPursuance.name;
+  } else {
+    return "Jump to a pursuance";
+  }
+}
+
+const produceOptions = (pursuances) => {
+  const pursuanceArr = Object.values(pursuances);
+  pursuanceArr.sort((p1, p2) => {
+    return p1.name.toLowerCase().localeCompare(p2.name.toLowerCase());
+  });
+
+  return pursuanceArr.map((pursuance) => (
+    <MenuItem
+      key={pursuance.id}
+      eventKey={pursuance.id}
+      value={pursuance.id}
+      >
+      {pursuance.name}
+    </MenuItem>
+  ));
+}
+
+const onMenuItemSelectAction = (pursuanceId, onMenuItemSelect, history) => {
+  history.push({
+    pathname: `/pursuance/${pursuanceId}`
+  });  
+  onMenuItemSelect(pursuanceId);
+}
+
+const renderDropdown = (props) => {
+  return (
+    <div className="nav-pursuances noselect">
+      <DropdownButton
+        id="header-pursuance-dropdown"
+        title={ getCurrentPursuanceName(props.pursuances, props.currentPursuanceId) }
+        onSelect={ (pursuanceId) => onMenuItemSelectAction(pursuanceId, props.onMenuItemSelect, props.history) } 
+        >
+        { produceOptions(props.pursuances) }
+      </DropdownButton>
+    </div>
+  )
+}
+
+const mapStateToProps = state => {
+  return {
+    currentPursuanceId: state.currentPursuanceId,
+    pursuances: state.pursuances
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onMenuItemSelect: (pursuanceId) => {
+      dispatch(setCurrentPursuance(pursuanceId));
+    }
+  }
+}
+
+const JumpToPursuance = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(renderDropdown)
+
+export default JumpToPursuance