chore: User's group

- Users should only see group they belong to

client/actions/groups.js

@@ -32,16 +32,15 @@ export const loadUsers = (users, groupId) => ({
  * @param {object} groupid
  * @return {object} returns group if the call is successful
  */
-export const getGroups = () => dispatch =>
+export const getGroups = userid => dispatch =>
   axios
-    .get('/api/v1/groups')
+    .get(`/api/v1/user/${userid}/groups`)
     .then((response) => {
-      dispatch(loadGroups(response.data.allGroups));
+      dispatch(loadGroups(response.data.userGroups));
     })
     .catch((error) => {
       throw error;
     });
-
 /**
  * api call to getGroup
  * @param {object} groupid
@@ -54,7 +53,6 @@ export const getGroup = groupid => dispatch =>
         dispatch(loadGroup(response.data.group));
       });
 
-
 /**
  * api call to createGroup
  * @param {object} groupName

client/components/Group/GroupCard.jsx

@@ -7,7 +7,6 @@ import { Link } from 'react-router-dom';
  * @extends {Component}
  */
 export class GroupCard extends Component {
-
   /**
    * Renders GroupCard component
    * @returns GroupCard component
@@ -19,8 +18,7 @@ export class GroupCard extends Component {
   }
   /* eslint-enable */
   render() {
-    const { groupName, id, joinAGroup, listUsers, users } = this.props;
-
+    const { groupName, id, listUsers, users } = this.props;
     return (
       <div className="col s6">
         <div className="message-card group">
@@ -44,13 +42,6 @@ export class GroupCard extends Component {
                     className="collapsible group-options"
                     data-collapsible="accordion"
                   >
-                    <li>
-                      <i className="material-icons tiny">games</i>
-                      <div onClick={joinAGroup} id={id} className="card-title">
-                        Join group
-                      </div>
-                    </li>
-
                     <li className="user-list">
                       <div
                         className="collapsible-header group-header menu-item"
@@ -74,8 +65,11 @@ export 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>
                                 ))}

client/components/Group/ListGroup.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { getMessages } from '../../actions/messages';
 import {
-  getGroups, listAllUsers, joinGroup
+  getGroups, listAllUsers
 } from '../../actions/groups';
+import { allUserGroups } from '../../actions/users';
 import ConnectedGroupCard from './GroupCard';
 
 
@@ -23,18 +25,22 @@ export class ListGroup extends React.Component {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
-    this.joinAGroup = this.joinAGroup.bind(this);
+    // this.joinAGroup = this.joinAGroup.bind(this);
     this.listUsers = this.listUsers.bind(this);
   }
 
   /**
-   * Makes an action call to getGroups
-   * @memberOf ListGroup
+   * Makes action call to get UserId
+   * @returns userId
+   * @memberOf UserProfile
    */
-  componentDidMount() {
-    this.props.getGroups();
+  componentWillMount() {
+    const userid = this.props.access.user.userId;
+    this.props.getGroups(userid).catch();
+    this.props.allUserGroups(userid).catch();
   }
 
+
   /**
    *
    * Makes an action call to push to url
@@ -46,30 +52,6 @@ export class ListGroup extends React.Component {
     this.props.history.push(`/homepage/view-group/${id}`);
   }
 
-  /**
-   *
-   * Makes an action call to joinGroup
-   * @param {object} event The event of the HTML component
-   *
-   * @memberOf ListGroup
-   */
-  joinAGroup(event) {
-    event.preventDefault();
-    const id = event.target.id;
-    this.props
-      .joinGroup(id)
-      .then(() => {
-        Materialize.toast('Member successfully added', 5000, 'green');
-      })
-      .catch(({ response }) => {
-        Materialize.toast(
-          `An error occured: ${response.data.message}`,
-          5000,
-          'red'
-        );
-      });
-  }
-
   /**
    *
    * Makes an action call to listAllUsers
@@ -97,21 +79,27 @@ export class ListGroup extends React.Component {
    * @memberOf ListGroup
    */
   render() {
+    if (this.props.groupList.length === 0) {
+      return (
+        <div className="no-group">
+        <h4> You have no group </h4>
+        <Link to="/homepage/create-group"> Click Here to create your first group
+        </Link>
+        </div>
+      );
+    }
     return (
       <div>
         <div className="row form-margin">
           <div className="col s12 m12 l12 scroll-group">
             {this.props.groupList.map(group => (
               <ConnectedGroupCard
-                key={group.id}
-                id={group.id}
-                onClick={() => this.onClick(group.id)}
-                joinAGroup={this.joinAGroup}
+                key={group.groupId}
+                id={group.groupId}
+                onClick={() => this.onClick(group.groupId)}
                 {...group}
                 users={group.users}
-                listUsers={this.listUsers}
-
-              />
+                listUsers={this.listUsers}/>
             ))}
           </div>
           <div className="col s12 m12 l12">
@@ -123,6 +111,8 @@ export class ListGroup extends React.Component {
 }
 
 const mapStateToProps = state => ({
+  access: state.access,
+  user: state.users.usergroups,
   group: state.group.group,
   groupList: state.group.groupList,
   messages: state.group.groupMessages,
@@ -132,8 +122,8 @@ const mapStateToProps = state => ({
 const actions = {
   getGroups,
   getMessages,
-  joinGroup,
   listAllUsers,
+  allUserGroups
 };
 
 export default connect(mapStateToProps, actions)(ListGroup);

client/components/Users/UserProfile.jsx

@@ -32,7 +32,7 @@ export class UserProfile extends Component {
   }
 
   /**
-   * Update the state if the props are change
+   * Update the state if the props are changed
    * @param {object} nextProps
    * @memberOf UserProfile
    */
@@ -76,7 +76,7 @@ export class UserProfile extends Component {
                   Groups I belong to:{' '}
                   {this.state.groups &&
                     this.state.groups.map(group => (
-                      <div className="chip" key={group.id} > {group.groupName}
+                      <div className="chip" key={group.groupId} > {group.groupName}
                       </div>
                     ))}{' '}
                 </div>

client/index.html

@@ -19,7 +19,7 @@
 <body>
   <main id="app"></main>
   <footer class="page-footer">
-  <div class="footer-copyright">
+  <div>
     <div class="container footer-width">
       © 2017 Copyright Bunmi Alao
       <a class="grey-text text-lighten-4 right"

client/reducers/groupsReducer.js

@@ -32,9 +32,9 @@ export default (state = initialState, action = {}) => {
     case types.GET_GROUP_USERS: {
       const groupList = state.groupList;
       const group = groupList.find(
-        foundGroup => foundGroup.id === action.groupId);
+        foundGroup => foundGroup.groupId === action.groupId);
       const allGroups = groupList.filter(
-        allGroup => allGroup.id !== action.groupId);
+        allGroup => allGroup.groupId !== action.groupId);
 
       return {
         ...state,

client/scss/pages/view_group.scss

@@ -236,4 +236,7 @@ nav ul a {
 .msg-collection {
   height: 60vh !important;
   overflow: scroll;
+}
+.no-group{
+  text-align: center;
 }

server/controllers/usergroups.js

@@ -5,7 +5,6 @@ const Groups = models.Groups;
 const Users = models.Users;
 
 module.exports = {
-
   /**
    * Add user to a group
    * Route: POST: /group/:groupid/user/:userid
@@ -19,35 +18,36 @@ module.exports = {
     const userId = Number(req.params.userid);
 
     Groups.findById(groupId)
-    .then((foundGroup) => {
-      // check if user is already in group
-      Usergroups.findOne({
-        where: {
-          $and: [
-            { userId },
-            { groupId }
-          ]
-        }
+      .then((foundGroup) => {
+        // check if user is already in group
+        Usergroups.findOne({
+          where: {
+            $and: [{ userId }, { groupId }]
+          }
+        })
+          .then((foundUserGroup) => {
+            if (foundUserGroup) {
+              return res.status(409).send({ message: 'User Already in group' });
+            }
+          });
+        // Find username from users model
+        Users.findById(userId)
+          .then((user) => {
+            Usergroups.create({
+              groupId: foundGroup.id,
+              userId: req.params.userid,
+              username: user.username,
+              groupName: foundGroup.groupName
+            });
+          })
+          .then(newGroup =>
+            res.status(200).send({
+              newGroup,
+              message: 'User successfully added to group'
+            })
+          );
       })
-      .then((foundUserGroup) => {
-        if (foundUserGroup) {
-          return res.status(409).send({ message: 'User Already in group' });
-        }
-      });
-      // Find username from users model
-      Users.findById(userId)
-    .then((user) => {
-      Usergroups.create({
-        groupId: foundGroup.id,
-        userId: req.params.userid,
-        username: user.username,
-        groupName: foundGroup.groupName
-      });
-    }).then(newGroup => res.status(200).send({
-      newGroup,
-      message: 'User successfully added to group'
-    }));
-    }).catch(error => res.status(400).send(error));
+      .catch(error => res.status(400).send(error));
   },
 
   /**
@@ -65,13 +65,9 @@ module.exports = {
       .then((foundGroup) => {
         Usergroups.findOne({
           where: {
-            $and: [
-              { userId },
-              { groupId }
-            ]
+            $and: [{ userId }, { groupId }]
           }
-        })
-        .then((foundUserGroup) => {
+        }).then((foundUserGroup) => {
           if (foundUserGroup) {
             return res.status(409).send({ message: 'User already in group' });
           }
@@ -80,13 +76,15 @@ module.exports = {
             userId: req.decoded.userId,
             username: req.decoded.username,
             groupName: foundGroup.groupName
-          })
-          .then(newGroup => res.status(200).send({
-            newGroup,
-            message: 'User succesfully added to group'
-          }));
+          }).then(newGroup =>
+            res.status(200).send({
+              newGroup,
+              message: 'User succesfully added to group'
+            })
+          );
         });
-      }).catch(error => res.status(400).send(error));
+      })
+      .catch(error => res.status(400).send(error));
   },
 
   /**
@@ -105,10 +103,11 @@ module.exports = {
         } else {
           res.status(200).send({ users });
         }
-      }).catch(() => {
+      })
+      .catch(() => {
         res.status(500).send({
           message: 'There was a server error, please try again'
         });
       });
-  },
+  }
 };

server/controllers/users.js

@@ -138,7 +138,7 @@ module.exports = {
     const userId = req.params.userid;
     UserGroups.findAll({
       where: { userId },
-      attributes: ['groupName']
+      attributes: ['groupId', 'groupName']
     })
       .then((userGroups) => {
         res.status(200).send({ userGroups });