import React from 'react'; import PropTypes from 'prop-types'; import { Meteor } from 'meteor/meteor'; import { withTracker } from 'meteor/react-meteor-data'; import { withRouter, NavLink } from 'react-router-dom'; import { Menu, Header, Sidebar, Segment, Icon } from 'semantic-ui-react'; import { Roles } from 'meteor/alanning:roles'; import _ from 'lodash'; import { ROLE } from '../../api/role/Role'; import { ROUTES } from '../../startup/client/route-constants'; import { Participants } from '../../api/user/ParticipantCollection'; import { Teams } from '../../api/team/TeamCollection'; import { Suggestions } from '../../api/suggestions/SuggestionCollection'; import { MinorParticipants } from '../../api/user/MinorParticipantCollection'; import { HACCHui } from '../../api/hacc-hui/HACCHui'; /** * The SideBar appears on the side of every page. Rendered by the App Layout component. * @memberOf ui/components */ class SideBar extends React.Component { constructor(props) { super(props); this.state = { visible: false, }; } render() { let isCompliant = HACCHui.canCreateTeams; const isAdmin = this.props.currentUser && Roles.userIsInRole(Meteor.userId(), ROLE.ADMIN); const isParticipant = this.props.currentUser && Roles.userIsInRole(Meteor.userId(), ROLE.PARTICIPANT); if (isParticipant) { const participant = Participants.findDoc({ userID: Meteor.userId() }); isCompliant = isCompliant && participant.isCompliant; } const numParticipants = Participants.count(); const numTeams = Teams.find({ open: true }).count(); const teamCount = Teams.count(); const suggestionCount = Suggestions.count(); const minors = MinorParticipants.find({}).fetch(); const uncompliantMinors = _.filter(minors, (m) => Participants.findDoc(m.participantID).isCompliant).length; const setVisible = (state) => { this.setState({ visible: state }); }; return ( <div> <Menu borderless inverted fixed={'top'} className={'mobileBar'}> <Menu.Item position={'left'}> <div onClick={() => setVisible(!this.state.visible)} style={{ padding: '5px' }}> <Icon name='bars'/> </div> </Menu.Item> </Menu> <Sidebar.Pushable as={Segment} className={'sideBar'}> <Sidebar style={{ paddingTop: '4rem', backgroundColor: 'rgb(18, 72, 132)' }} as={Menu} animation='overlay' icon='labeled' inverted vertical onHide={() => setVisible(false)} visible={this.state.visible} width='thin' > <Menu.Item as={NavLink} activeClassName="" exact to={ROUTES.LANDING} onClick={() => setVisible(!this.state.visible)}> <Header inverted as='h1'>HACC-Hui</Header> </Menu.Item> {isParticipant ? ( [ <Menu.Item as={NavLink} activeClassName="active" disabled={!isCompliant} exact to={ROUTES.CREATE_TEAM} key='team-creation'>Create a Team</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.YOUR_PROFILE} key='edit-profile'>Your Profile</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.BEST_FIT} key='list-teams'>List the Teams ({numTeams})</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" disabled={!isCompliant} exact to={ROUTES.YOUR_TEAMS} key='your-teams'>Your Teams</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.LIST_PARTICIPANTS} key='list-participants'>List the Participants ({numParticipants})</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.SUGGEST_TOOL_SKILL} key='suggest-tool-skill'>Suggest Tool/Skill</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.TEAM_INVITATIONS} key='team-invitations'>Your Invitations</Menu.Item>, ] ) : ''} {isAdmin ? ( [ <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.CONFIGURE_HACC} key={ROUTES.CONFIGURE_HACC}>Configure HACC</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.UPDATE_MP} key={ROUTES.UPDATE_MP}> Update Minor Participants Status ({uncompliantMinors}) </Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.LIST_SUGGESTIONS} key={ROUTES.LIST_SUGGESTIONS}>Suggestions List ({suggestionCount})</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.VIEW_TEAMS} key={ROUTES.VIEW_TEAMS}>View Team ({teamCount})</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.DUMP_DATABASE} key={ROUTES.DUMP_DATABASE}>Dump Database</Menu.Item>, ] ) : ''} <Menu.Item> {this.props.currentUser === '' ? ( <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.SIGN_IN} key={ROUTES.SIGN_IN} onClick={() => setVisible(!this.state.visible)}>Sign In</Menu.Item> ) : ( [<Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.SIGN_OUT} key={ROUTES.SIGN_OUT} onClick={() => setVisible(!this.state.visible)}>Sign Out</Menu.Item>, <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.DELETE_ACCOUNT} key={ROUTES.DELETE_ACCOUNT} onClick={() => setVisible(!this.state.visible)}>Delete Account</Menu.Item>, ] )} </Menu.Item> </Sidebar> <Sidebar.Pusher style={{ paddingTop: '5rem' }}> {this.props.children} </Sidebar.Pusher> </Sidebar.Pushable> </div> ); } } // Declare the types of all properties. SideBar.propTypes = { currentUser: PropTypes.string, children: PropTypes.array, visible: PropTypes.bool, }; // withTracker connects Meteor data to React components. https://guide.meteor.com/react.html#using-withTracker const SideBarContainer = withTracker(() => ({ currentUser: Meteor.user() ? Meteor.user().username : '', }))(SideBar); // Enable ReactRouter for this component. https://reacttraining.com/react-router/web/api/withRouter export default withRouter(SideBarContainer);