feature: Implement Add user

- Add search page for users - Add Add User option - Create Api route to add User to group - Add footer to app - Add heading to login and register form - Add navbar to PageNotFound - Fix heroku issue [Delivers #152948431]
bumsyalao · Nov 17, 2017 · 8c87991 · 8c87991
1 parent 4aed19b
commit 8c87991
Show file tree

Hide file tree

Showing 21 changed files with 507 additions and 110 deletions.
diff --git a/assetsTransformer.js b/assetsTransformer.js
@@ -2,6 +2,6 @@ const path = require('path');
 
 module.exports = {
   process(src, filename, config, options) {
-    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
   },
 };
diff --git a/client/actions/groups.js b/client/actions/groups.js
@@ -1,7 +1,7 @@
 /* global localStorage */
 import axios from 'axios';
 import {
-  LIST_GROUPS, ADD_USER_TO_GROUP, GET_GROUP_USERS, LIST_ALL_USERS, LIST_GROUP }
+  LIST_GROUPS, ADD_USER_TO_GROUP, GET_GROUP_USERS, LIST_GROUP }
   from './types';
 import attachAuthorizationToken from '../utils/attachAuthorizationToken';
 
@@ -86,14 +86,28 @@ export const listAllUsers = groupId => dispatch =>
     });
 
 /**
- * api call to addMemberToGroup
+ * api call to joinGroup
  * @param {object} groupId
  * @return {object} returns newGroup if the call is successful
  */
-export const addMemberToGroup = groupId =>
+export const joinGroup = groupId =>
   dispatch => axios.post(`/api/v1/group/${groupId}/user`)
   .then((response) => {
     dispatch(addUser(response.data.newGroup));
   }).catch((error) => {
     throw (error);
   });
+
+/**
+ * api call to addMemberToGroup
+ * @param {object} groupId
+ * @return {object} returns newGroup if the call is successful
+ */
+export const addMemberToGroup = (groupId, userId) =>
+  dispatch => axios.post(`/api/v1/group/${groupId}/user/${userId}`)
+  .then((response) => {
+    dispatch(addUser(response.data.newGroup));
+  }).catch((error) => {
+    throw (error);
+  });
+
diff --git a/client/components/Group/GroupCard.jsx b/client/components/Group/GroupCard.jsx
@@ -19,7 +19,7 @@ class GroupCard extends Component {
   }
   /* eslint-enable */
   render() {
-    const { groupName, id, joinGroup, listUsers, users } = this.props;
+    const { groupName, id, joinAGroup, listUsers, users } = this.props;
 
     return (
       <div className="col s6">
@@ -46,7 +46,7 @@ class GroupCard extends Component {
                   >
                     <li>
                       <i className="material-icons tiny">games</i>
-                      <div onClick={joinGroup} id={id} className="card-title">
+                      <div onClick={joinAGroup} id={id} className="card-title">
                         Join group
                       </div>
                     </li>
@@ -74,7 +74,8 @@ class GroupCard extends Component {
                             <div className="users-list">
                               {users &&
                                 users.map(user => (
-                                  <div id={id} key={user.userId} className="card-title">
+                                  <div id={id} key={user.userId}
+                                  className="card-title">
                                     {user.username}
                                   </div>
                                 ))}

diff --git a/client/components/Group/GroupChat.jsx b/client/components/Group/GroupChat.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { withRouter, Link } from 'react-router-dom';
 import MessageCard from './MessageCard';
 import { newMessage, getMessages } from '../../actions/messages';
 import { getUserGroups, allUserGroups } from '../../actions/users';
@@ -12,7 +12,6 @@ import { getGroup } from '../../actions/groups';
  * @extends {React.Component}
  */
 class GroupChat extends React.Component {
-
   /**
    * Creates an instance of GroupChat.
    * Binds class methods
@@ -39,8 +38,6 @@ class GroupChat extends React.Component {
   componentDidMount() {
     $('select').material_select();
     const { groupId } = this.props.match.params;
-    const userid = this.props.access.user.userId;
-    this.props.allUserGroups(userid);
     this.props.getMessages(groupId);
     this.props.getGroup(groupId);
   }
@@ -97,11 +94,17 @@ class GroupChat extends React.Component {
       this.props.history.push('/homepage/groups');
       return null;
     }
+    const id = this.props.group.id;
     return (
       <div>
         <div className="row">
           <div className="col s12 m12 l12 form-margin message-form">
             <h5> {(this.props.group.groupName || '').toUpperCase()} </h5>
+             <Link to={`/homepage/group/${id}/add-user`}
+             className="waves-effect waves-light red lighten-2 btn">
+             <i className="material-icons left">add</i>
+             Add User
+             </Link>
             <div className="message-box">
               <ul className="collection">
                 {this.props.messages.map(message => (
@@ -126,13 +129,16 @@ class GroupChat extends React.Component {
                   onChange={this.onChange}
                   value={this.state.messagePriority}
                 >
-                  <option value="normal" defaultValue>Normal</option>
+                  <option value="normal" defaultValue>
+                    Normal
+                  </option>
                   <option value="urgent">Urgent</option>
                   <option value="critical">Critical</option>
                 </select>
-                <button
-                id="submit-message"
-                onClick={this.onSubmit}> Send </button>
+                <button id="submit-message" onClick={this.onSubmit}>
+                  {' '}
+                  Send{' '}
+                </button>
               </div>
             </div>
           </div>
@@ -149,11 +155,14 @@ const mapStateToProps = (state, ownProps) => {
     messages: state.messages[groupId] || [],
     group: state.group[groupId] || {},
     userGroups: state.users.usergroups || [],
-    access: state.access,
+    access: state.access
   };
 };
 
 export default connect(mapStateToProps, {
-  newMessage, getMessages, getGroup, getUserGroups, allUserGroups })(withRouter(
-  GroupChat
-));
+  newMessage,
+  getMessages,
+  getGroup,
+  getUserGroups,
+  allUserGroups
+})(withRouter(GroupChat));
diff --git a/client/components/Group/ListGroup.jsx b/client/components/Group/ListGroup.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { getMessages } from '../../actions/messages';
 import {
-  getGroups, listAllUsers, addMemberToGroup
+  getGroups, listAllUsers, joinGroup
 } from '../../actions/groups';
 import GroupCard from './GroupCard';
 
@@ -11,7 +11,7 @@ import GroupCard from './GroupCard';
  * @class ListGroup
  * @extends {React.Component}
  */
-export class ListGroup extends React.Component {
+class ListGroup extends React.Component {
 
   /**
    * Creates an instance of ListGroup.
@@ -23,7 +23,7 @@ export class ListGroup extends React.Component {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
-    this.joinGroup = this.joinGroup.bind(this);
+    this.joinAGroup = this.joinAGroup.bind(this);
     this.listUsers = this.listUsers.bind(this);
   }
 
@@ -48,16 +48,16 @@ export class ListGroup extends React.Component {
 
   /**
    *
-   * Makes an action call to addMemberToGroup
+   * Makes an action call to joinGroup
    * @param {object} event The event of the HTML component
    *
    * @memberOf ListGroup
    */
-  joinGroup(event) {
+  joinAGroup(event) {
     event.preventDefault();
     const id = event.target.id;
     this.props
-      .addMemberToGroup(id)
+      .joinGroup(id)
       .then(() => {
         Materialize.toast('Member successfully added', 5000, 'green');
       })
@@ -106,7 +106,7 @@ export class ListGroup extends React.Component {
                 key={group.id}
                 id={group.id}
                 onClick={() => this.onClick(group.id)}
-                joinGroup={this.joinGroup}
+                joinAGroup={this.joinAGroup}
                 {...group}
                 users={group.users}
                 listUsers={this.listUsers}
@@ -132,7 +132,7 @@ const mapStateToProps = state => ({
 const actions = {
   getGroups,
   getMessages,
-  addMemberToGroup,
+  joinGroup,
   listAllUsers,
 };
 

diff --git a/client/components/Group/MessageCard.jsx b/client/components/Group/MessageCard.jsx
@@ -1,5 +1,11 @@
 import React from 'react';
 
+/**
+ *
+ *
+ * @param {any} props 
+ * @returns 
+ */
 const MessageCard = (props) => {
   const date = new Date(props.createdAt);
   return (