Adds ParticipantsView & Route

src/components/Content/ParticipantList/Participant/Participant.css

@@ -0,0 +1,22 @@
+#participant-list {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.participant-ctn {
+    color: #d6d6d6;
+    padding: 0.5em;
+}
+
+.participant-avatar {
+    height: 75px;
+    width: 75px;
+    border: 1px solid #666666;
+    border-radius: 5px;
+    vertical-align: center;
+    text-align: center;
+}
+
+.participant-name {
+    text-align: center;
+}

src/components/Content/ParticipantList/Participant/Participant.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Participant = ({ username }) => {
+  return <div className="participant-ctn">
+    <div className="participant-avatar"></div>
+    <div className="participant-name">
+      {username}
+    </div>
+  </div>
+};
+
+export default Participant;

src/components/Content/ParticipantList/ParticipantList.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { getUsers } from "../../../actions";
+import Participant from './Participant/Participant';
+import './Participant/Participant.css'
+
+class ParticipantList extends React.Component {
+  componentWillMount() {
+    const { getUsers } = this.props;
+    getUsers();
+  }
+
+  renderList() {
+    const { users } = this.props;
+    const participants = [];
+
+    for(const key in users) {
+      const { username } = users[key];
+      participants.push(<Participant key={username} username={username} />);
+    }
+
+    return participants;
+  }
+
+  render() {
+    return <div className="content-ctn">
+      <div id="participant-list">
+        {this.renderList()}
+      </div>
+    </div>
+  }
+}
+
+export default connect(({ pursuances, currentPursuanceId, users }) =>
+  ({ pursuances, currentPursuanceId, users }), {
+  getUsers
+})(ParticipantList);

src/components/Pursuance/PursuancePage.js

@@ -6,6 +6,7 @@ import PursuanceMenu from './PursuanceMenu';
 import TaskListView from './views/TaskListView';
 import DiscussView from './views/DiscussView';
 import './PursuancePage.css';
+import ParticipantsView from "./views/ParticipantsView";
 
 class PursuancePage extends Component {
 
@@ -27,6 +28,7 @@ class PursuancePage extends Component {
               <Route exact path="/pursuance/:pursuanceId" component={TaskListView} />
               <Route exact path="/pursuance/:pursuanceId/tasks" component={TaskListView} />
               <Route exact path="/pursuance/:pursuanceId/discuss" component={DiscussView} />
+              <Route exact path="/pursuance/:pursuanceId/participants" component={ParticipantsView} />
             </Switch>
           </article>
         </div>

src/components/Pursuance/views/ParticipantsView.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import ParticipantList from '../../Content/ParticipantList/ParticipantList';
+
+const ParticipantsView = ({ match: { params: { pursuanceId } } }) => {
+  return (
+    <ParticipantList pursuanceId={pursuanceId} />
+  )
+};
+
+export default ParticipantsView;