From 3e913e64007e7f11188f69351bf25e005d6fa260 Mon Sep 17 00:00:00 2001
From: Adham Elias Botrous
 <50738429+Adham-Elias-Botours@users.noreply.github.com>
Date: Tue, 19 Nov 2019 21:11:19 +0100
Subject: [PATCH 1/8] fix typo mistake

---
 .../components/profile-forms/CreateProfile.js | 204 +++++++++---------
 1 file changed, 101 insertions(+), 103 deletions(-)

diff --git a/client/src/components/profile-forms/CreateProfile.js b/client/src/components/profile-forms/CreateProfile.js
index 22f1d37..8e4e95c 100755
--- a/client/src/components/profile-forms/CreateProfile.js
+++ b/client/src/components/profile-forms/CreateProfile.js
@@ -1,28 +1,28 @@
-import React, { useEffect, useState, Fragment } from "react";
-import { Link, withRouter, Redirect } from "react-router-dom";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { createProfile, getCurrentProfile } from "../../actions/profile";
+import React, { useEffect, useState, Fragment } from 'react';
+import { Link, withRouter, Redirect } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createProfile, getCurrentProfile } from '../../actions/profile';
 
-const Createprofile = ({
+const CreateProfile = ({
   createProfile,
   getCurrentProfile,
   profile: { profile, loading },
-  history,
+  history
 }) => {
   const [formData, setFormData] = useState({
-    company: "",
-    website: "",
-    location: "",
-    status: "",
-    skills: "",
-    githubusername: "",
-    bio: "",
-    twitter: "",
-    facebook: "",
-    linkedin: "",
-    youtube: "",
-    instagram: "",
+    company: '',
+    website: '',
+    location: '',
+    status: '',
+    skills: '',
+    githubusername: '',
+    bio: '',
+    twitter: '',
+    facebook: '',
+    linkedin: '',
+    youtube: '',
+    instagram: ''
   });
   const [displaySocialInputs, toggleSocialInputs] = useState(false);
   const {
@@ -37,7 +37,7 @@ const Createprofile = ({
     facebook,
     linkedin,
     youtube,
-    instagram,
+    instagram
   } = formData;
   const onChange = e =>
     setFormData({ ...formData, [e.target.name]: e.target.value });
@@ -50,165 +50,164 @@ const Createprofile = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [getCurrentProfile]);
   return loading && profile === null ? (
-    <Redirect to='/dashboard' />
+    <Redirect to="/dashboard" />
   ) : (
     <Fragment>
-      <h1 className='large text-primary'>Create Your Profile</h1>
-      <p className='lead'>
-        <i className='fas fa-user' /> Let's get some information to make your
+      <h1 className="large text-primary">Create Your Profile</h1>
+      <p className="lead">
+        <i className="fas fa-user" /> Let's get some information to make your
         profile stand out
       </p>
       <small>* = required field</small>
-      <form className='form' onSubmit={e => onSubmit(e)}>
-        <div className='form-group'>
-          <select name='status' value={status} onChange={e => onChange(e)}>
-            <option value='0'>* Select Professional Status</option>
-            <option value='Developer'>Developer</option>
-            <option value='Junior Developer'>Junior Developer</option>
-            <option value='Senior Developer'>Senior Developer</option>
-            <option value='Manager'>Manager</option>
-            <option value='Student or Learning'>Student or Learning</option>
-            <option value='Instructor'>Instructor or Teacher</option>
-            <option value='Intern'>Intern</option>
-            <option value='Other'>Other</option>
+      <form className="form" onSubmit={e => onSubmit(e)}>
+        <div className="form-group">
+          <select name="status" value={status} onChange={e => onChange(e)}>
+            <option value="0">* Select Professional Status</option>
+            <option value="Developer">Developer</option>
+            <option value="Junior Developer">Junior Developer</option>
+            <option value="Senior Developer">Senior Developer</option>
+            <option value="Manager">Manager</option>
+            <option value="Student or Learning">Student or Learning</option>
+            <option value="Instructor">Instructor or Teacher</option>
+            <option value="Intern">Intern</option>
+            <option value="Other">Other</option>
           </select>
-          <small className='form-text'>
+          <small className="form-text">
             Give us an idea of where you are at in your career
           </small>
         </div>
-        <div className='form-group'>
+        <div className="form-group">
           <input
-            type='text'
-            placeholder='Company'
-            name='company'
+            type="text"
+            placeholder="Company"
+            name="company"
             value={company}
             onChange={e => onChange(e)}
           />
-          <small className='form-text'>
+          <small className="form-text">
             Could be your own company or one you work for
           </small>
         </div>
-        <div className='form-group'>
+        <div className="form-group">
           <input
-            type='text'
-            placeholder='Website'
-            name='website'
+            type="text"
+            placeholder="Website"
+            name="website"
             value={website}
             onChange={e => onChange(e)}
           />
-          <small className='form-text'>
+          <small className="form-text">
             Could be your own or a company website
           </small>
         </div>
-        <div className='form-group'>
+        <div className="form-group">
           <input
-            type='text'
-            placeholder='Location'
-            name='location'
+            type="text"
+            placeholder="Location"
+            name="location"
             value={location}
             onChange={e => onChange(e)}
           />
-          <small className='form-text'>
+          <small className="form-text">
             City & state suggested (eg. Boston, MA)
           </small>
         </div>
-        <div className='form-group'>
+        <div className="form-group">
           <input
-            type='text'
-            placeholder='* Skills'
-            name='skills'
+            type="text"
+            placeholder="* Skills"
+            name="skills"
             value={skills}
             onChange={e => onChange(e)}
           />
-          <small className='form-text'>
+          <small className="form-text">
             Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
           </small>
         </div>
-        <div className='form-group'>
+        <div className="form-group">
           <input
-            type='text'
-            placeholder='Github Username'
-            name='githubusername'
+            type="text"
+            placeholder="Github Username"
+            name="githubusername"
             value={githubusername}
             onChange={e => onChange(e)}
           />
-          <small className='form-text'>
+          <small className="form-text">
             If you want your latest repos and a Github link, include your
             username
           </small>
         </div>
-        <div className='form-group'>
+        <div className="form-group">
           <textarea
-            placeholder='A short bio of yourself'
-            name='bio'
+            placeholder="A short bio of yourself"
+            name="bio"
             value={bio}
             onChange={e => onChange(e)}
           />
-          <small className='form-text'>Tell us a little about yourself</small>
+          <small className="form-text">Tell us a little about yourself</small>
         </div>
 
-        <div className='my-2'>
+        <div className="my-2">
           <button
             onClick={() => toggleSocialInputs(!displaySocialInputs)}
-            type='button'
-            className='btn btn-light'
-          >
+            type="button"
+            className="btn btn-light">
             Add Social Network Links
           </button>
           <span>Optional</span>
         </div>
         {displaySocialInputs && (
           <Fragment>
-            <div className='form-group social-input'>
-              <i className='fab fa-twitter fa-2x' />
+            <div className="form-group social-input">
+              <i className="fab fa-twitter fa-2x" />
               <input
-                type='text'
-                placeholder='Twitter URL'
-                name='twitter'
+                type="text"
+                placeholder="Twitter URL"
+                name="twitter"
                 value={twitter}
                 onChange={e => onChange(e)}
               />
             </div>
 
-            <div className='form-group social-input'>
-              <i className='fab fa-facebook fa-2x' />
+            <div className="form-group social-input">
+              <i className="fab fa-facebook fa-2x" />
               <input
-                type='text'
-                placeholder='Facebook URL'
-                name='facebook'
+                type="text"
+                placeholder="Facebook URL"
+                name="facebook"
                 value={facebook}
                 onChange={e => onChange(e)}
               />
             </div>
 
-            <div className='form-group social-input'>
-              <i className='fab fa-youtube fa-2x' />
+            <div className="form-group social-input">
+              <i className="fab fa-youtube fa-2x" />
               <input
-                type='text'
-                placeholder='YouTube URL'
-                name='youtube'
+                type="text"
+                placeholder="YouTube URL"
+                name="youtube"
                 value={youtube}
                 onChange={e => onChange(e)}
               />
             </div>
 
-            <div className='form-group social-input'>
-              <i className='fab fa-linkedin fa-2x' />
+            <div className="form-group social-input">
+              <i className="fab fa-linkedin fa-2x" />
               <input
-                type='text'
-                placeholder='Linkedin URL'
-                name='linkedin'
+                type="text"
+                placeholder="Linkedin URL"
+                name="linkedin"
                 value={linkedin}
                 onChange={e => onChange(e)}
               />
             </div>
 
-            <div className='form-group social-input'>
-              <i className='fab fa-instagram fa-2x' />
+            <div className="form-group social-input">
+              <i className="fab fa-instagram fa-2x" />
               <input
-                type='text'
-                placeholder='Instagram URL'
-                name='instagram'
+                type="text"
+                placeholder="Instagram URL"
+                name="instagram"
                 value={instagram}
                 onChange={e => onChange(e)}
               />
@@ -216,8 +215,8 @@ const Createprofile = ({
           </Fragment>
         )}
 
-        <input type='submit' className='btn btn-primary my-1' />
-        <Link className='btn btn-light my-1' to='/dashboard'>
+        <input type="submit" className="btn btn-primary my-1" />
+        <Link className="btn btn-light my-1" to="/dashboard">
           Go Back
         </Link>
       </form>
@@ -228,12 +227,11 @@ const Createprofile = ({
 CreateProfile.propTypes = {
   createProfile: PropTypes.func.isRequired,
   getCurrentProfile: PropTypes.func.isRequired,
-  profile: PropTypes.object.isRequired,
+  profile: PropTypes.object.isRequired
 };
 const mapStateToProps = state => ({
-  profile: state.profile,
+  profile: state.profile
 });
-export default connect(
-  mapStateToProps,
-  { createProfile, getCurrentProfile },
-)(withRouter(CreateProfile));
+export default connect(mapStateToProps, { createProfile, getCurrentProfile })(
+  withRouter(CreateProfile)
+);

From 69f33c8874c8d720debf7d93b2199ca5c247b4d8 Mon Sep 17 00:00:00 2001
From: Adham Elias Botrous
 <50738429+Adham-Elias-Botours@users.noreply.github.com>
Date: Tue, 19 Nov 2019 21:13:04 +0100
Subject: [PATCH 2/8] adjust mongoose.connect

---
 config/db.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config/db.js b/config/db.js
index f95f82d..7b14c0b 100755
--- a/config/db.js
+++ b/config/db.js
@@ -6,6 +6,7 @@ const connectDB = async () => {
   try {
     await mongoose.connect(db, {
       useNewUrlParser: true,
+      useUnifiedTopology: true,
       useCreateIndex: true,
       useFindAndModify: false
     });

From bd7a1670c4ae8cf5a50cbbf50b895fc946445ab6 Mon Sep 17 00:00:00 2001
From: Adham Elias Botrous
 <50738429+Adham-Elias-Botours@users.noreply.github.com>
Date: Tue, 19 Nov 2019 21:14:08 +0100
Subject: [PATCH 3/8] added to gitignore

---
 .gitignore | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 34aeecc..581ed82 100755
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,7 @@
 node_modules/
-config/production.json
\ No newline at end of file
+client/node_modules/
+config/production.json
+client/debug.log
+config/default.json
+package-lock.json
+config/default.json

From 4868548f4dca0d7a5dc76e46fa58a7e332a82c64 Mon Sep 17 00:00:00 2001
From: Adham Elias Botrous
 <50738429+Adham-Elias-Botours@users.noreply.github.com>
Date: Tue, 19 Nov 2019 21:14:33 +0100
Subject: [PATCH 4/8] added to git ignore

---
 .gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 581ed82..c03feab 100755
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,4 @@ config/production.json
 client/debug.log
 config/default.json
 package-lock.json
-config/default.json
+

From 4402f731c1ca736f2389d2ecaace9c7afba8cc75 Mon Sep 17 00:00:00 2001
From: Salih <salihsert18@gmail.com>
Date: Mon, 2 Dec 2019 14:18:19 +0100
Subject: [PATCH 5/8] create endpoints for sending, accepting, cancelling
 friend request. Modfy User Model added 3 parts that includes User friends and
 request information

---
 models/User.js        |  64 ++++++++-
 routes/api/profile.js | 306 ++++++++++++++++++++++++++++++++++--------
 2 files changed, 307 insertions(+), 63 deletions(-)

diff --git a/models/User.js b/models/User.js
index d7386df..3963d1c 100755
--- a/models/User.js
+++ b/models/User.js
@@ -3,24 +3,76 @@ const mongoose = require('mongoose');
 const UserSchema = new mongoose.Schema({
   name: {
     type: String,
-    required: true
+    required: true,
   },
   email: {
     type: String,
     required: true,
-    unique: true
+    unique: true,
   },
   password: {
     type: String,
-    required: true
+    required: true,
   },
   avatar: {
-    type: String
+    type: String,
   },
   date: {
     type: Date,
-    default: Date.now
-  }
+    default: Date.now,
+  },
+  sentRequest: [
+    {
+      username: {
+        type: String,
+        default: '',
+      },
+      userId: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'users',
+      },
+      date: {
+        type: Date,
+        default: Date.now,
+      },
+    },
+  ],
+  request: [
+    {
+      userId: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'users',
+      },
+      username: {
+        type: String,
+        default: '',
+      },
+      date: {
+        type: Date,
+        default: Date.now,
+      },
+    },
+  ],
+  friendsList: [
+    {
+      friendId: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'users',
+      },
+      friendName: {
+        type: String,
+        default: '',
+      },
+      date: {
+        type: Date,
+        default: Date.now,
+      },
+    },
+  ],
+  totalRequest: {
+    type: Number,
+    default: 0,
+  },
 });
 
 module.exports = User = mongoose.model('user', UserSchema);
diff --git a/routes/api/profile.js b/routes/api/profile.js
index d358454..a9bf229 100755
--- a/routes/api/profile.js
+++ b/routes/api/profile.js
@@ -14,10 +14,10 @@ const Post = require('../../models/Post');
 // @access   Private
 router.get('/me', auth, async (req, res) => {
   try {
-    const profile = await Profile.findOne({ user: req.user.id }).populate(
-      'user',
-      ['name', 'avatar']
-    );
+    const profile = await Profile.findOne({ user: req.user.id }).populate('user', [
+      'name',
+      'avatar',
+    ]);
 
     if (!profile) {
       return res.status(400).json({ msg: 'There is no profile for this user' });
@@ -43,8 +43,8 @@ router.post(
         .isEmpty(),
       check('skills', 'Skills is required')
         .not()
-        .isEmpty()
-    ]
+        .isEmpty(),
+    ],
   ],
   async (req, res) => {
     const errors = validationResult(req);
@@ -64,7 +64,7 @@ router.post(
       facebook,
       twitter,
       instagram,
-      linkedin
+      linkedin,
     } = req.body;
 
     // Build profile object
@@ -93,14 +93,14 @@ router.post(
       let profile = await Profile.findOneAndUpdate(
         { user: req.user.id },
         { $set: profileFields },
-        { new: true, upsert: true }
+        { new: true, upsert: true },
       );
       res.json(profile);
     } catch (err) {
       console.error(err.message);
       res.status(500).send('Server Error');
     }
-  }
+  },
 );
 
 // @route    GET api/profile
@@ -122,7 +122,7 @@ router.get('/', async (req, res) => {
 router.get('/user/:user_id', async (req, res) => {
   try {
     const profile = await Profile.findOne({
-      user: req.params.user_id
+      user: req.params.user_id,
     }).populate('user', ['name', 'avatar']);
 
     if (!profile) return res.status(400).json({ msg: 'Profile not found' });
@@ -172,8 +172,8 @@ router.put(
         .isEmpty(),
       check('from', 'From date is required')
         .not()
-        .isEmpty()
-    ]
+        .isEmpty(),
+    ],
   ],
   async (req, res) => {
     const errors = validationResult(req);
@@ -181,15 +181,7 @@ router.put(
       return res.status(400).json({ errors: errors.array() });
     }
 
-    const {
-      title,
-      company,
-      location,
-      from,
-      to,
-      current,
-      description
-    } = req.body;
+    const { title, company, location, from, to, current, description } = req.body;
 
     const newExp = {
       title,
@@ -198,7 +190,7 @@ router.put(
       from,
       to,
       current,
-      description
+      description,
     };
 
     try {
@@ -213,7 +205,7 @@ router.put(
       console.error(err.message);
       res.status(500).send('Server Error');
     }
-  }
+  },
 );
 
 // @route    DELETE api/profile/experience/:exp_id
@@ -246,20 +238,20 @@ router.delete('/experience/:exp_id', auth, async (req, res) => {
     // if i dont add .toString() it returns this weird mongoose coreArray and the ids are somehow objects and it still deletes anyway even if you put /experience/5
     const removeIndex = expIds.indexOf(req.params.exp_id);
     if (removeIndex === -1) {
-      return res.status(500).json({ msg: "Server error" });
+      return res.status(500).json({ msg: 'Server error' });
     } else {
       // theses console logs helped me figure it out
-      console.log("expIds", expIds);
-      console.log("typeof expIds", typeof expIds);
-      console.log("req.params", req.params);
-      console.log("removed", expIds.indexOf(req.params.exp_id));
+      console.log('expIds', expIds);
+      console.log('typeof expIds', typeof expIds);
+      console.log('req.params', req.params);
+      console.log('removed', expIds.indexOf(req.params.exp_id));
       foundProfile.experience.splice(removeIndex, 1);
       await foundProfile.save();
       return res.status(200).json(foundProfile);
     }
   } catch (error) {
     console.error(error);
-    return res.status(500).json({ msg: "Server error" });
+    return res.status(500).json({ msg: 'Server error' });
   }
 });
 
@@ -282,8 +274,8 @@ router.put(
         .isEmpty(),
       check('from', 'From date is required')
         .not()
-        .isEmpty()
-    ]
+        .isEmpty(),
+    ],
   ],
   async (req, res) => {
     const errors = validationResult(req);
@@ -291,15 +283,7 @@ router.put(
       return res.status(400).json({ errors: errors.array() });
     }
 
-    const {
-      school,
-      degree,
-      fieldofstudy,
-      from,
-      to,
-      current,
-      description
-    } = req.body;
+    const { school, degree, fieldofstudy, from, to, current, description } = req.body;
 
     const newEdu = {
       school,
@@ -308,7 +292,7 @@ router.put(
       from,
       to,
       current,
-      description
+      description,
     };
 
     try {
@@ -323,20 +307,20 @@ router.put(
       console.error(err.message);
       res.status(500).send('Server Error');
     }
-  }
+  },
 );
 
 // @route    DELETE api/profile/education/:edu_id
 // @desc     Delete education from profile
 // @access   Private
 //router.delete('/education/:edu_id', auth, async (req, res) => {
-  //try {
-    //const profile = await Profile.findOne({ user: req.user.id });
+//try {
+//const profile = await Profile.findOne({ user: req.user.id });
 
-    // Get remove index
-    //const removeIndex = profile.education
-      //.map(item => item.id)
-      //.indexOf(req.params.edu_id);
+// Get remove index
+//const removeIndex = profile.education
+//.map(item => item.id)
+//.indexOf(req.params.edu_id);
 /*
     profile.education.splice(removeIndex, 1);
 
@@ -350,14 +334,14 @@ router.put(
 });
 */
 
-router.delete("/education/:edu_id", auth, async (req, res) => {
+router.delete('/education/:edu_id', auth, async (req, res) => {
   try {
     const foundProfile = await Profile.findOne({ user: req.user.id });
     const eduIds = foundProfile.education.map(edu => edu._id.toString());
     // if i dont add .toString() it returns this weird mongoose coreArray and the ids are somehow objects and it still deletes anyway even if you put /education/5
     const removeIndex = eduIds.indexOf(req.params.edu_id);
     if (removeIndex === -1) {
-      return res.status(500).json({ msg: "Server error" });
+      return res.status(500).json({ msg: 'Server error' });
     } else {
       // theses console logs helped me figure it out
       /*   console.log("eduIds", eduIds);
@@ -373,7 +357,7 @@ router.delete("/education/:edu_id", auth, async (req, res) => {
     }
   } catch (error) {
     console.error(error);
-    return res.status(500).json({ msg: "Server error" });
+    return res.status(500).json({ msg: 'Server error' });
   }
 });
 // @route    GET api/profile/github/:username
@@ -382,13 +366,15 @@ router.delete("/education/:edu_id", auth, async (req, res) => {
 router.get('/github/:username', (req, res) => {
   try {
     const options = {
-      uri: encodeURI(`https://api.github.com/users/${
-        req.params.username
-      }/repos?per_page=5&sort=created:asc&client_id=${config.get(
-        'githubClientId'
-      )}&client_secret=${config.get('githubSecret')}`),
+      uri: encodeURI(
+        `https://api.github.com/users/${
+          req.params.username
+        }/repos?per_page=5&sort=created:asc&client_id=${config.get(
+          'githubClientId',
+        )}&client_secret=${config.get('githubSecret')}`,
+      ),
       method: 'GET',
-      headers: { 'user-agent': 'node.js' }
+      headers: { 'user-agent': 'node.js' },
     };
 
     request(options, (error, response, body) => {
@@ -406,4 +392,210 @@ router.get('/github/:username', (req, res) => {
   }
 });
 
+/// Friend Requests
+
+// Sender >>> Receiver
+
+// @route    POST api/profile/friend/:id(receiver user id)
+// @desc     Send a friend request to a user
+// @access   Private
+
+router.post('/friend/:id', auth, async (req, res) => {
+  try {
+    const receiver = await User.findById(req.params.id).select('-password');
+    const sender = await User.findById(req.user.id).select('-password');
+
+    // Check receiver database whether the sender has sent friend request to receiver or not
+    const isRequested = receiver.request.find(reques => reques.userId.toString() === req.user.id);
+    // Check receiver database whether the sender is already friend or not
+    const isFriend = receiver.friendsList.find(
+      friend => friend.friendId.toString() === req.user.id,
+    );
+    // Check sender database whether the sender has sent friend request to receiver or not
+    const isSentRequest = sender.sentRequest.find(
+      reques => reques.userId.toString() === req.params.id,
+    );
+
+    if (!isRequested && !isSentRequest && !isFriend) {
+      // Add to sentRequest array in the sender database
+      sender.sentRequest.push({
+        userId: req.params.id,
+        username: receiver.name,
+      });
+
+      await sender.save();
+      // Add to request array in the receiver database
+      receiver.request.push({
+        userId: req.user.id,
+        username: sender.name,
+      });
+      // Increment total request in the receiver database
+      receiver.totalRequest += 1;
+
+      await receiver.save();
+      return res.json({ msg: `Your friend request is successfully sent to ${receiver.name}` }); // @Todo
+    }
+
+    return res.status(500).json({ msg: 'Server error' });
+  } catch (err) {
+    console.error(err.message);
+    res.status(500).send('Server Error');
+  }
+});
+
+// Receiver >>> Sender
+// @route    PUT api/profile/friend/:senderId
+// @desc     Accept a friend request
+// @access   Private
+
+router.put('/friend/:senderId', auth, async (req, res) => {
+  try {
+    const receiver = await User.findById(req.user.id).select('-password');
+
+    const sender = await User.findById(req.params.senderId).select('-password');
+
+    const isFriend = receiver.friendsList.find(
+      friend => friend.friendId.toString() === req.params.senderId,
+    );
+    const isFriendListOnSender = sender.friendsList.find(
+      friend => friend.friendId.toString() === req.user.id,
+    );
+
+    // Receiver must own request from sender in his database
+    const isRequested = receiver.request.find(
+      reques => reques.userId.toString() === req.params.senderId,
+    );
+    //receiver in friendListinde senderin userIdsi yoksa, bi zahmet ekle
+    // senderin friendListinde receiverin yoksa senderin friendListine ekle
+    if (!isFriend && !isFriendListOnSender && isRequested) {
+      // Add to Sender info to friendList array in the receiver database
+      receiver.friendsList.push({
+        friendId: req.params.senderId,
+        friendName: sender.name,
+      });
+      // Remove sender info from Receiver request database because they are going to be friend
+      const getSenderId = receiver.request
+        .map(reques => reques.userId.toString())
+        .indexOf(req.params.senderId);
+      receiver.request.splice(getSenderId, 1);
+
+      receiver.totalRequest -= 1;
+      await receiver.save();
+      // Add to Receiver info to friendList array in the sender database
+      sender.friendsList.push({
+        friendId: req.user.id,
+        friendName: receiver.name,
+      });
+      // Remove Receiver info from Sender senrRequest database because they are going to be friend
+      const getReceiverId = sender.sentRequest
+        .map(reques => reques.userId.toString())
+        .indexOf(req.user.id);
+
+      sender.sentRequest.splice(getReceiverId, 1);
+
+      await sender.save();
+      return res.json({ msg: `You have accepted ${sender.name} as a friend` }); // @Todo
+    }
+
+    return res.status(500).json({ msg: 'Server error' });
+  } catch (err) {
+    console.error(err.message);
+    res.status(500).send('Server Error');
+  }
+});
+
+// Receiver >>> Sender
+// @route    PATCH api/profile/friend/:senderId
+// @desc     Cancel friend request
+// @access   Private
+
+router.patch('/friend/:senderId', auth, async (req, res) => {
+  try {
+    const receiver = await User.findById(req.user.id).select('-password');
+    const sender = await User.findById(req.params.senderId).select('-password');
+
+    // Receiver must own request from sender in his database
+    const isRequested = receiver.request.find(
+      reques => reques.userId.toString() === req.params.senderId,
+    );
+
+    // Sender must own receiver in his sentRequest database
+    const isSentRequest = sender.sentRequest.find(
+      reques => reques.userId.toString() === req.user.id,
+    );
+
+    if (isRequested && isSentRequest) {
+      // Remove sender request from receiver request database
+      const getSenderId = receiver.request
+        .map(reques => reques.userId.toString())
+        .indexOf(req.params.senderId);
+      receiver.request.splice(getSenderId, 1);
+      // Decrement total request of receiver
+      receiver.totalRequest -= 1;
+      await receiver.save();
+
+      // Remove sender request from sender sentRequest database
+
+      const getReceiverId = sender.sentRequest
+        .map(reques => reques.userId.toString())
+        .indexOf(req.user.id);
+
+      sender.sentRequest.splice(getReceiverId, 1);
+      await sender.save();
+      return res.json({ msg: `You have rejected ${sender.name} friend request` }); // @Todo
+    }
+    return res.status(500).json({ msg: 'Server error' });
+  } catch (err) {
+    console.error(err.message);
+    res.status(500).send('Server Error');
+  }
+});
+
+// Receiver >>> Sender
+// @route    DELETE api/profile/friend/:senderId
+// @desc     Break up the friendship
+// @access   Private
+
+router.delete('/friend/:senderId', auth, async (req, res) => {
+  try {
+    const receiver = await User.findById(req.user.id).select('-password');
+
+    const sender = await User.findById(req.params.senderId).select('-password');
+
+    // Check they are friends of each other
+
+    const isFriend = receiver.friendsList.find(
+      friend => friend.friendId.toString() === req.params.senderId,
+    );
+    const isFriendListOnSender = sender.friendsList.find(
+      friend => friend.friendId.toString() === req.user.id,
+    );
+
+    if (isFriend && isFriendListOnSender) {
+      // remove Sender Info from receiver friendList database. They are not friend right now
+      const getSenderId = receiver.friendsList
+        .map(friend => friend.friendId.toString())
+        .indexOf(req.params.senderId);
+
+      receiver.friendsList.splice(getSenderId, 1);
+      await receiver.save();
+
+      // remove receiver Info from sender friendList database. They are not friend right now
+      const getReceiverId = sender.friendsList
+        .map(friend => friend.friendId.toString())
+        .indexOf(req.user.id);
+
+      sender.friendsList.splice(getReceiverId, 1);
+
+      await sender.save();
+      return res.json({ msg: `You are not a friend with ${sender.name} ` }); // @Todo
+    }
+
+    return res.status(500).json({ msg: 'Server error' });
+  } catch (err) {
+    console.error(err.message);
+    res.status(500).send('Server Error');
+  }
+});
+
 module.exports = router;

From dafca0dec0c0df4a1c776bdfd544cbe35adce3ae Mon Sep 17 00:00:00 2001
From: Salih <salihsert18@gmail.com>
Date: Wed, 4 Dec 2019 13:03:40 +0100
Subject: [PATCH 6/8] added scoket io etc to friend request

---
 client/package-lock.json                      | 233 ++++++++++++++++++
 client/package.json                           |   1 +
 client/src/App.js                             |   2 +-
 client/src/actions/auth.js                    |  68 ++++-
 client/src/components/dashboard/Dashboard.js  |  29 +--
 client/src/components/profiles/ProfileItem.js |  48 +++-
 client/src/utils/socketClient.js              |   2 +
 config/default.json                           |   4 +-
 package.json                                  |   3 +-
 routes/api/profile.js                         |   2 +-
 server.js                                     |  14 +-
 socketIO.js                                   |  47 ++++
 utils/deneme.js                               |  28 +++
 utils/friend.js                               |  44 ++++
 14 files changed, 480 insertions(+), 45 deletions(-)
 create mode 100644 client/src/utils/socketClient.js
 create mode 100644 socketIO.js
 create mode 100644 utils/deneme.js
 create mode 100644 utils/friend.js

diff --git a/client/package-lock.json b/client/package-lock.json
index 6572e44..6f46875 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1565,6 +1565,11 @@
       "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
       "integrity": "sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg=="
     },
+    "after": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
+      "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8="
+    },
     "ajv": {
       "version": "6.10.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
@@ -1735,6 +1740,11 @@
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
+    "arraybuffer.slice": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
+      "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog=="
+    },
     "arrify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
@@ -2126,6 +2136,11 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "bail": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz",
@@ -2191,6 +2206,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -2209,6 +2229,14 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "better-assert": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz",
+      "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=",
+      "requires": {
+        "callsite": "1.0.0"
+      }
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -2219,6 +2247,11 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
       "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw=="
     },
+    "blob": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
+      "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig=="
+    },
     "bluebird": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
@@ -2518,6 +2551,11 @@
         "caller-callsite": "^2.0.0"
       }
     },
+    "callsite": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
+      "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA="
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2804,11 +2842,21 @@
       "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.4.0.tgz",
       "integrity": "sha512-tK69D7oNXXqUW3ZNo/z7NXTEz22TCF0pTE+YF9cxvaAM9XnkLo1fV621xCLrRR6aevJlKxExkss0vWqUCUpqdg=="
     },
+    "component-bind": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
+      "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E="
+    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
+    "component-inherit": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
+      "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
+    },
     "compressible": {
       "version": "2.0.16",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.16.tgz",
@@ -3698,6 +3746,64 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.0.tgz",
+      "integrity": "sha512-a4J5QO2k99CM2a0b12IznnyQndoEvtA4UAldhGzKqnHf42I3Qs2W5SPnDvatZRcMaNZs4IevVicBPayxYt6FwA==",
+      "requires": {
+        "component-emitter": "1.2.1",
+        "component-inherit": "0.0.3",
+        "debug": "~4.1.0",
+        "engine.io-parser": "~2.2.0",
+        "has-cors": "1.1.0",
+        "indexof": "0.0.1",
+        "parseqs": "0.0.5",
+        "parseuri": "0.0.5",
+        "ws": "~6.1.0",
+        "xmlhttprequest-ssl": "~1.5.4",
+        "yeast": "0.1.2"
+      },
+      "dependencies": {
+        "component-emitter": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+        },
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "ws": {
+          "version": "6.1.4",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.4.tgz",
+          "integrity": "sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==",
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.0.tgz",
+      "integrity": "sha512-6I3qD9iUxotsC5HEMuuGsKA0cXerGz+4uGcXQEkfBidgKf0amsjrrtwcbwK/nzpZBxclXlV7gGl9dgWvu4LF6w==",
+      "requires": {
+        "after": "0.8.2",
+        "arraybuffer.slice": "~0.0.7",
+        "base64-arraybuffer": "0.1.5",
+        "blob": "0.0.5",
+        "has-binary2": "~1.0.2"
+      }
+    },
     "enhanced-resolve": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
@@ -5351,6 +5457,26 @@
         }
       }
     },
+    "has-binary2": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz",
+      "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==",
+      "requires": {
+        "isarray": "2.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+        }
+      }
+    },
+    "has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -7608,6 +7734,11 @@
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
+    "object-component": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz",
+      "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE="
+    },
     "object-copy": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -7921,6 +8052,22 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
       "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ=="
     },
+    "parseqs": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
+      "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=",
+      "requires": {
+        "better-assert": "~1.0.0"
+      }
+    },
+    "parseuri": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz",
+      "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=",
+      "requires": {
+        "better-assert": "~1.0.0"
+      }
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -10354,6 +10501,77 @@
         "kind-of": "^3.2.0"
       }
     },
+    "socket.io-client": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.3.0.tgz",
+      "integrity": "sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==",
+      "requires": {
+        "backo2": "1.0.2",
+        "base64-arraybuffer": "0.1.5",
+        "component-bind": "1.0.0",
+        "component-emitter": "1.2.1",
+        "debug": "~4.1.0",
+        "engine.io-client": "~3.4.0",
+        "has-binary2": "~1.0.2",
+        "has-cors": "1.1.0",
+        "indexof": "0.0.1",
+        "object-component": "0.0.3",
+        "parseqs": "0.0.5",
+        "parseuri": "0.0.5",
+        "socket.io-parser": "~3.3.0",
+        "to-array": "0.1.4"
+      },
+      "dependencies": {
+        "component-emitter": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+        },
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "socket.io-parser": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.0.tgz",
+      "integrity": "sha512-hczmV6bDgdaEbVqhAeVMM/jfUfzuEZHsQg6eOmLgJht6G3mPKMxYm75w2+qhAQZ+4X+1+ATZ+QFKeOZD5riHng==",
+      "requires": {
+        "component-emitter": "1.2.1",
+        "debug": "~3.1.0",
+        "isarray": "2.0.1"
+      },
+      "dependencies": {
+        "component-emitter": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+        },
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "isarray": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+        }
+      }
+    },
     "sockjs": {
       "version": "0.3.19",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
@@ -10958,6 +11176,11 @@
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
       "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE="
     },
+    "to-array": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
+      "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -12025,6 +12248,11 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-1.3.1.tgz",
       "integrity": "sha512-tGkGJkN8XqCod7OT+EvGYK5Z4SfDQGD30zAa58OcnAa0RRWgzUEK72tkXhsX1FZd+rgnhRxFtmO+ihkp8LHSkw=="
     },
+    "xmlhttprequest-ssl": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
+      "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4="
+    },
     "xregexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
@@ -12079,6 +12307,11 @@
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
       }
+    },
+    "yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
     }
   }
 }
diff --git a/client/package.json b/client/package.json
index 5209eb0..7b67b02 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,7 @@
     "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
+    "socket.io-client": "^2.3.0",
     "uuid": "^3.3.2"
   },
   "scripts": {
diff --git a/client/src/App.js b/client/src/App.js
index 4c20465..a93ffac 100755
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -27,7 +27,7 @@ const App = () => {
         <Fragment>
           <Navbar />
           <Switch>
-            <Route exact path='/' component={Landing} />
+            <Route exact path="/" component={Landing} />
             <Route component={Routes} />
           </Switch>
         </Fragment>
diff --git a/client/src/actions/auth.js b/client/src/actions/auth.js
index 60adae0..93d25dd 100755
--- a/client/src/actions/auth.js
+++ b/client/src/actions/auth.js
@@ -8,9 +8,10 @@ import {
   LOGIN_SUCCESS,
   LOGIN_FAIL,
   LOGOUT,
-  CLEAR_PROFILE
+  CLEAR_PROFILE,
 } from './types';
 import setAuthToken from '../utils/setAuthToken';
+import { socket } from '../utils/socketClient';
 
 // Load User
 export const loadUser = () => async dispatch => {
@@ -23,11 +24,12 @@ export const loadUser = () => async dispatch => {
 
     dispatch({
       type: USER_LOADED,
-      payload: res.data
+      payload: res.data,
     });
+    socket.emit('sendAuth', res.data._id);
   } catch (err) {
     dispatch({
-      type: AUTH_ERROR
+      type: AUTH_ERROR,
     });
   }
 };
@@ -36,8 +38,8 @@ export const loadUser = () => async dispatch => {
 export const register = ({ name, email, password }) => async dispatch => {
   const config = {
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   };
 
   const body = JSON.stringify({ name, email, password });
@@ -47,7 +49,7 @@ export const register = ({ name, email, password }) => async dispatch => {
 
     dispatch({
       type: REGISTER_SUCCESS,
-      payload: res.data
+      payload: res.data,
     });
 
     dispatch(loadUser());
@@ -59,7 +61,7 @@ export const register = ({ name, email, password }) => async dispatch => {
     }
 
     dispatch({
-      type: REGISTER_FAIL
+      type: REGISTER_FAIL,
     });
   }
 };
@@ -68,8 +70,8 @@ export const register = ({ name, email, password }) => async dispatch => {
 export const login = (email, password) => async dispatch => {
   const config = {
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   };
 
   const body = JSON.stringify({ email, password });
@@ -79,7 +81,7 @@ export const login = (email, password) => async dispatch => {
 
     dispatch({
       type: LOGIN_SUCCESS,
-      payload: res.data
+      payload: res.data,
     });
 
     dispatch(loadUser());
@@ -91,7 +93,7 @@ export const login = (email, password) => async dispatch => {
     }
 
     dispatch({
-      type: LOGIN_FAIL
+      type: LOGIN_FAIL,
     });
   }
 };
@@ -101,3 +103,47 @@ export const logout = () => dispatch => {
   dispatch({ type: CLEAR_PROFILE });
   dispatch({ type: LOGOUT });
 };
+
+// Friend Request
+// Send Friend Request api/profile/friend/:id(receiver user id)
+export const sendFriendRequest = id => async dispatch => {
+  try {
+    const res = await axios.post(`/api/profile/friend/${id}`);
+    dispatch(loadUser());
+    dispatch(setAlert(res.data.msg, 'success'));
+  } catch (err) {
+    dispatch(setAlert(err.response.data.msg, 'danger'));
+  }
+};
+// Accept Friend Request api/profile/friend/:senderId
+export const acceptFriendRequest = id => async dispatch => {
+  try {
+    const res = await axios.put(`/api/profile/friend/${id}`);
+    dispatch(loadUser());
+    dispatch(setAlert(res.data.msg, 'success'));
+  } catch (err) {
+    dispatch(setAlert(err.response.data.msg, 'danger'));
+  }
+};
+
+// Cancel Friend Request api/profile/friend/:senderId
+export const cancelFriendRequest = id => async dispatch => {
+  try {
+    const res = await axios.patch(`/api/profile/friend/${id}`);
+    dispatch(loadUser());
+    dispatch(setAlert(res.data.msg, 'success'));
+  } catch (err) {
+    dispatch(setAlert(err.response.data.msg, 'danger'));
+  }
+};
+
+// Remove Friend api/profile/friend/:senderId
+export const removeFriend = id => async dispatch => {
+  try {
+    const res = await axios.delete(`/api/profile/friend/${id}`);
+    dispatch(loadUser());
+    dispatch(setAlert(res.data.msg, 'success'));
+  } catch (err) {
+    dispatch(setAlert(err.response.data.msg, 'danger'));
+  }
+};
diff --git a/client/src/components/dashboard/Dashboard.js b/client/src/components/dashboard/Dashboard.js
index 7a4037a..6886a35 100755
--- a/client/src/components/dashboard/Dashboard.js
+++ b/client/src/components/dashboard/Dashboard.js
@@ -7,24 +7,28 @@ import DashboardActions from './DashboardActions';
 import Experience from './Experience';
 import Education from './Education';
 import { getCurrentProfile, deleteAccount } from '../../actions/profile';
+import { socket } from './../../utils/socketClient';
 
 const Dashboard = ({
   getCurrentProfile,
   deleteAccount,
   auth: { user },
-  profile: { profile, loading }
+  profile: { profile, loading },
 }) => {
   useEffect(() => {
     getCurrentProfile();
+    socket.on('newFriendRequest', data => {
+      console.log(data);
+    });
   }, [getCurrentProfile]);
 
   return loading && profile === null ? (
     <Spinner />
   ) : (
     <Fragment>
-      <h1 className='large text-primary'>Dashboard</h1>
-      <p className='lead'>
-        <i className='fas fa-user' /> Welcome {user && user.name}
+      <h1 className="large text-primary">Dashboard</h1>
+      <p className="lead">
+        <i className="fas fa-user" /> Welcome {user && user.name}
       </p>
       {profile !== null ? (
         <Fragment>
@@ -32,16 +36,16 @@ const Dashboard = ({
           <Experience experience={profile.experience} />
           <Education education={profile.education} />
 
-          <div className='my-2'>
-            <button className='btn btn-danger' onClick={() => deleteAccount()}>
-              <i className='fas fa-user-minus' /> Delete My Account
+          <div className="my-2">
+            <button className="btn btn-danger" onClick={() => deleteAccount()}>
+              <i className="fas fa-user-minus" /> Delete My Account
             </button>
           </div>
         </Fragment>
       ) : (
         <Fragment>
           <p>You have not yet setup a profile, please add some info</p>
-          <Link to='/create-profile' className='btn btn-primary my-1'>
+          <Link to="/create-profile" className="btn btn-primary my-1">
             Create Profile
           </Link>
         </Fragment>
@@ -54,15 +58,12 @@ Dashboard.propTypes = {
   getCurrentProfile: PropTypes.func.isRequired,
   deleteAccount: PropTypes.func.isRequired,
   auth: PropTypes.object.isRequired,
-  profile: PropTypes.object.isRequired
+  profile: PropTypes.object.isRequired,
 };
 
 const mapStateToProps = state => ({
   auth: state.auth,
-  profile: state.profile
+  profile: state.profile,
 });
 
-export default connect(
-  mapStateToProps,
-  { getCurrentProfile, deleteAccount }
-)(Dashboard);
+export default connect(mapStateToProps, { getCurrentProfile, deleteAccount })(Dashboard);
diff --git a/client/src/components/profiles/ProfileItem.js b/client/src/components/profiles/ProfileItem.js
index d1bb1d6..e2dc5e2 100755
--- a/client/src/components/profiles/ProfileItem.js
+++ b/client/src/components/profiles/ProfileItem.js
@@ -1,33 +1,53 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { sendFriendRequest } from '../../actions/auth';
+import { socket } from '../../utils/socketClient';
 
 const ProfileItem = ({
+  sendFriendRequest,
+  auth,
   profile: {
     user: { _id, name, avatar },
     status,
     company,
     location,
-    skills
-  }
+    skills,
+  },
 }) => {
+  const handleClick = e => {
+    // e.preventDefault();
+    // sendFriendRequest(_id);
+    // send message
+    socket.emit('friendRequest', {
+      senderId: auth.user._id,
+      senderName: auth.user.name,
+      receiverId: _id,
+      receiverName: name,
+    });
+  };
+
   return (
-    <div className='profile bg-light'>
-      <img src={avatar} alt='' className='round-img' />
+    <div className="profile bg-light">
+      <img src={avatar} alt="" className="round-img" />
       <div>
         <h2>{name}</h2>
         <p>
           {status} {company && <span> at {company}</span>}
         </p>
-        <p className='my-1'>{location && <span>{location}</span>}</p>
-        <Link to={`/profile/${_id}`} className='btn btn-primary'>
+        <p className="my-1">{location && <span>{location}</span>}</p>
+        <Link to={`/profile/${_id}`} className="btn btn-primary">
           View Profile
         </Link>
+        <button className="btn btn-success" onClick={handleClick}>
+          Send Friend Request
+        </button>
       </div>
       <ul>
         {skills.slice(0, 4).map((skill, index) => (
-          <li key={index} className='text-primary'>
-            <i className='fas fa-check' /> {skill}
+          <li key={index} className="text-primary">
+            <i className="fas fa-check" /> {skill}
           </li>
         ))}
       </ul>
@@ -36,7 +56,15 @@ const ProfileItem = ({
 };
 
 ProfileItem.propTypes = {
-  profile: PropTypes.object.isRequired
+  sendFriendRequest: PropTypes.func.isRequired,
+  profile: PropTypes.object.isRequired,
+  auth: PropTypes.object.isRequired,
 };
 
-export default ProfileItem;
+const mapStateToProps = state => ({
+  auth: state.auth,
+});
+
+export default connect(mapStateToProps, {
+  sendFriendRequest,
+})(ProfileItem);
diff --git a/client/src/utils/socketClient.js b/client/src/utils/socketClient.js
new file mode 100644
index 0000000..4b77533
--- /dev/null
+++ b/client/src/utils/socketClient.js
@@ -0,0 +1,2 @@
+import io from 'socket.io-client';
+export const socket = io('http://localhost:5000');
diff --git a/config/default.json b/config/default.json
index 1c210b2..d689216 100755
--- a/config/default.json
+++ b/config/default.json
@@ -1,6 +1,6 @@
 {
-  "mongoURI": "",
+  "mongoURI": "mongodb+srv://salih123:salih123@devconnector-tc7ou.mongodb.net/test?retryWrites=true&w=majority",
   "jwtSecret": "secret",
   "githubClientId": "",
   "githubSecret": ""
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 964b915..ed16aa0 100755
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "gravatar": "^1.8.0",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^5.7.5",
-    "request": "^2.88.0"
+    "request": "^2.88.0",
+    "socket.io": "^2.3.0"
   },
   "devDependencies": {
     "concurrently": "^4.1.0",
diff --git a/routes/api/profile.js b/routes/api/profile.js
index a9bf229..10f8fce 100755
--- a/routes/api/profile.js
+++ b/routes/api/profile.js
@@ -436,7 +436,7 @@ router.post('/friend/:id', auth, async (req, res) => {
       return res.json({ msg: `Your friend request is successfully sent to ${receiver.name}` }); // @Todo
     }
 
-    return res.status(500).json({ msg: 'Server error' });
+    return res.status(404).json({ msg: 'Not found' });
   } catch (err) {
     console.error(err.message);
     res.status(500).send('Server Error');
diff --git a/server.js b/server.js
index ed72f71..01ad66d 100755
--- a/server.js
+++ b/server.js
@@ -1,24 +1,26 @@
+const path = require('path');
 const express = require('express');
 const connectDB = require('./config/db');
-const path = require('path');
 
 const app = express();
 
 // Connect Database
+
 connectDB();
 
 // Init Middleware
 app.use(express.json({ extended: false }));
 
 // Define Routes
+
 app.use('/api/users', require('./routes/api/users'));
 app.use('/api/auth', require('./routes/api/auth'));
 app.use('/api/profile', require('./routes/api/profile'));
 app.use('/api/posts', require('./routes/api/posts'));
 
-// Serve static assets in production
+//Serve static assets in production
 if (process.env.NODE_ENV === 'production') {
-  // Set static folder
+  //Set static folder
   app.use(express.static('client/build'));
 
   app.get('*', (req, res) => {
@@ -26,6 +28,8 @@ if (process.env.NODE_ENV === 'production') {
   });
 }
 
-const PORT = process.env.PORT || 5000;
+module.exports = app;
+const server = require('./socketIO');
 
-app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
+const PORT = process.env.PORT || 5000;
+server.listen(PORT, () => console.log(`Server started on port ${PORT}`));
diff --git a/socketIO.js b/socketIO.js
new file mode 100644
index 0000000..a9167d4
--- /dev/null
+++ b/socketIO.js
@@ -0,0 +1,47 @@
+const http = require('http');
+const socketio = require('socket.io');
+const app = require('./server');
+const server = http.createServer(app);
+const io = socketio(server);
+const {
+  addSocketClient,
+  removeSocketClient,
+  getSocketClient,
+  getReceiverSocketId,
+} = require('./utils/friend');
+
+io.on('connection', socket => {
+  console.log('New WebSocket connection', socket.id);
+
+  socket.on('sendAuth', senderId => {
+    addSocketClient({ id: socket.id, senderId });
+  });
+
+  socket.on('friendRequest', ({ senderName, senderId, receiverName, receiverId }) => {
+    const socketClient = getSocketClient(socket.id);
+    socketClient.senderName = senderName;
+    socketClient.senderId = senderId;
+    socketClient.receiverName = receiverName;
+    socketClient.receiverId = receiverId;
+
+    const { socketClientId, error } = getReceiverSocketId(socketClient.receiverId);
+    console.log('status', socketClient, error);
+
+    if (!error) {
+      io.to(socketClientId).emit('newFriendRequest', {
+        socketClientId,
+        senderId,
+        senderName,
+        receiverId,
+        receiverName,
+      });
+    }
+  });
+
+  socket.on('disconnect', function() {
+    removeSocketClient(socket.id);
+    console.log('user disconnected');
+  });
+});
+
+module.exports = server;
diff --git a/utils/deneme.js b/utils/deneme.js
new file mode 100644
index 0000000..085eace
--- /dev/null
+++ b/utils/deneme.js
@@ -0,0 +1,28 @@
+const obj = [
+  {
+    id: '8Che_3fRd0ZzAZvkAAAE',
+    senderName: 'Salih',
+    senderId: '5dc464f7e3f7002e22da54ac',
+    receiverName: 'Salih',
+    receiverId: '5dc464f7e3f7002e22da54ac',
+  },
+  {
+    id: '8Che_3fRd0ZzAZvkAAAE',
+    senderName: 'Salih',
+    senderId: '5dc464f7e3f7002e22da54ac',
+    receiverName: 'test',
+    receiverId: '5dc5edf78aeb2f1bc224db2b',
+  },
+];
+
+const recId = '5dc5edf78aeb2f1bc224db2b';
+
+const getReceiverSocket = () => {
+  const get = obj.find(el => {
+    return el.receiverId === recId;
+  });
+  return get.id;
+};
+const a = getReceiverSocket();
+
+console.log(a);
diff --git a/utils/friend.js b/utils/friend.js
new file mode 100644
index 0000000..c1d3eb5
--- /dev/null
+++ b/utils/friend.js
@@ -0,0 +1,44 @@
+const socketClients = [];
+
+const addSocketClient = ({ id, senderName, senderId, receiverName, receiverId }) => {
+  // Store user
+  const socketClient = { id, senderName, senderId, receiverName, receiverId };
+
+  socketClients.push(socketClient);
+  return { socketClient };
+};
+
+const removeSocketClient = id => {
+  const index = socketClients.findIndex(socket => socket.id === id);
+
+  if (index !== -1) {
+    return socketClients.splice(index, 1)[0];
+  }
+};
+
+const getSocketClient = id => socketClients.find(socket => socket.id === id);
+
+const getSocketClients = () => {
+  return socketClients.map(socket => {
+    return socket;
+  });
+};
+
+const getReceiverSocketId = receiverId => {
+  try {
+    const obj = socketClients.find(socket => {
+      return socket.senderId === receiverId;
+    });
+    return { socketClientId: obj.id };
+  } catch (err) {
+    return { error: 'Not Online' };
+  }
+};
+
+module.exports = {
+  addSocketClient,
+  removeSocketClient,
+  getSocketClient,
+  getReceiverSocketId,
+  getSocketClients,
+};

From 7972d0de9c2436d115adfd8a13a9615b232eec35 Mon Sep 17 00:00:00 2001
From: Salih <salihsert18@gmail.com>
Date: Sat, 7 Dec 2019 12:22:36 +0100
Subject: [PATCH 7/8] chat app and friend request combined

---
 client/public/index.html                      |   9 +
 client/src/App.css                            | 165 ++++++++++++++++++
 client/src/App.js                             |   6 +-
 client/src/actions/auth.js                    |  11 +-
 client/src/actions/chat.js                    |  22 +++
 client/src/actions/types.js                   |   3 +
 client/src/components/chat/App.js             |  32 ++++
 client/src/components/chat/Chat.js            | 147 ++++++++++++++++
 client/src/components/chat/Messages.js        |  47 +++++
 client/src/components/chat/UserList.js        |  37 ++++
 client/src/components/dashboard/Dashboard.js  |   4 -
 .../components/dashboard/DashboardActions.js  |  17 +-
 client/src/components/friends/FriendItem.js   |  53 ++++++
 client/src/components/friends/Friends.js      |  57 ++++++
 client/src/components/friends/RequestItem.js  |  60 +++++++
 client/src/components/friends/WaitingItem.js  |  49 ++++++
 client/src/components/layout/Navbar.js        |  50 +++---
 client/src/components/posts/FriendPosts.js    |  51 ++++++
 client/src/components/profiles/ProfileItem.js | 110 ++++++++----
 client/src/components/profiles/Profiles.js    |  22 +--
 client/src/components/routing/Routes.js       |  28 +--
 client/src/reducers/chat.js                   |  33 ++++
 client/src/reducers/index.js                  |   4 +-
 client/src/utils/socketClient.js              |  55 ++++++
 models/User.js                                |   9 +
 routes/api/profile.js                         |  58 ++++--
 socketIO.js                                   |  94 ++++++++--
 utils/deneme.js                               |  28 ---
 utils/friend.js                               |  14 +-
 utils/users.js                                |  45 +++++
 30 files changed, 1157 insertions(+), 163 deletions(-)
 create mode 100644 client/src/actions/chat.js
 create mode 100644 client/src/components/chat/App.js
 create mode 100644 client/src/components/chat/Chat.js
 create mode 100644 client/src/components/chat/Messages.js
 create mode 100644 client/src/components/chat/UserList.js
 create mode 100644 client/src/components/friends/FriendItem.js
 create mode 100644 client/src/components/friends/Friends.js
 create mode 100644 client/src/components/friends/RequestItem.js
 create mode 100644 client/src/components/friends/WaitingItem.js
 create mode 100644 client/src/components/posts/FriendPosts.js
 create mode 100644 client/src/reducers/chat.js
 delete mode 100644 utils/deneme.js
 create mode 100644 utils/users.js

diff --git a/client/public/index.html b/client/public/index.html
index d9069be..675099b 100755
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -11,6 +11,15 @@
       integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
       crossorigin="anonymous"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css"
+    />
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap"
+      rel="stylesheet"
+    />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Welcome To DevConnector</title>
   </head>
diff --git a/client/src/App.css b/client/src/App.css
index 0957f54..20bebb2 100755
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -488,6 +488,25 @@ button {
   margin-bottom: 0.5rem;
 }
 
+/* Friends Page */
+.friend-card {
+  border: #ccc solid 1px;
+  background: var(--light-color);
+  display: grid;
+  grid-template-columns: 1fr 5fr 2fr;
+  align-items: center;
+  grid-gap: 0rem;
+  padding: 0.5rem 1rem;
+  line-height: 1.3;
+}
+
+.friend-name-card {
+  border-right: #ccc solid 1px;
+  border-left: #ccc solid 1px;
+  font-size: 1.2rem;
+  padding-left: 2rem;
+}
+
 /* Mobile Styles */
 @media (max-width: 700px) {
   .container {
@@ -574,4 +593,150 @@ button {
   .post button {
     padding: 0.3rem 0.4rem;
   }
+
+  /* Friends page */
+  .friend-card {
+    grid-template-columns: 1fr;
+    text-align: center;
+    align-items: left;
+    padding: 0.5rem;
+  }
+
+  .friend-card img {
+    width: 25%;
+    margin: 0.5rem auto;
+  }
+
+  .friend-name-card {
+    border: #ccc solid 1px;
+  }
+}
+
+/* Live Chat Component Styles */
+
+.chat-user-container {
+  background-color: #343a40;
+  width: 20%;
+  position: fixed;
+  top: 60px;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+}
+.chat-user-container h6 {
+  color: #0c9463;
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.5rem;
+  background-color: #2d334a65;
+}
+.active.grey {
+  background-color: #454b52;
+}
+.chat-user {
+  color: white;
+  text-transform: capitalize;
+}
+
+.chat.room {
+  background-color: #851515 !important;
+}
+.chat-room .friend-list li {
+  border-bottom: 1px solid #e0e0e0;
+}
+.chat-room .friend-list li:last-of-type {
+  border-bottom: none;
+}
+
+.chat-room img.avatar {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 50% !important;
+}
+
+.chat-room .text-small {
+  font-size: 0.95rem;
+}
+
+.chat-room .text-smaller {
+  font-size: 0.75rem;
+}
+
+.z-depth-1 {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
+}
+
+.chat-body {
+  padding: 1.5rem !important;
+  width: 20rem;
+  line-height: 1.5;
+  font-family: 'Roboto', sans-serif;
+  color: #212529;
+  word-break: break-all;
+}
+
+.chat-body p {
+  padding: 0.75rem 0rem !important;
+}
+
+div.header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.primary-font {
+  color: #212529;
+  font-weight: 700;
+  margin-right: 1rem;
+}
+
+.pull-right {
+  color: #6c757d !important;
+
+  font-weight: 300;
+}
+
+.chat-footer p {
+  color: greenyellow;
+}
+
+.user-chat-box {
+  flex-flow: row;
+}
+
+.guest-chat-box {
+  flex-flow: row-reverse;
+}
+
+.chat-input {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: whitesmoke;
+  padding: 16px 32px;
+  text-decoration: none;
+  margin: 4px;
+  border-radius: 5px;
+  width: 60%;
+  height: 60px;
+  border: 1px solid #0c7c80;
+}
+.chat-send-button {
+  position: fixed;
+  background-color: rgb(15, 112, 192);
+  width: 10%;
+  height: 60px;
+  bottom: 0;
+  right: 25%;
+  border-radius: 5px;
+  margin: 4px;
+  border: 1px solid #0c7c80;
+  color: white;
+  transition: 0.15s all ease-in;
+}
+
+.chat-send-button:hover {
+  color: white;
+  background-color: #343a40;
 }
diff --git a/client/src/App.js b/client/src/App.js
index a93ffac..6fdc11c 100755
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -10,6 +10,8 @@ import store from './store';
 import { loadUser } from './actions/auth';
 import setAuthToken from './utils/setAuthToken';
 
+import { socketClient } from './utils/socketClient';
+
 import './App.css';
 
 if (localStorage.token) {
@@ -18,8 +20,10 @@ if (localStorage.token) {
 
 const App = () => {
   useEffect(() => {
+    socketClient();
     store.dispatch(loadUser());
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loadUser]);
 
   return (
     <Provider store={store}>
diff --git a/client/src/actions/auth.js b/client/src/actions/auth.js
index 93d25dd..fcf55a4 100755
--- a/client/src/actions/auth.js
+++ b/client/src/actions/auth.js
@@ -11,7 +11,7 @@ import {
   CLEAR_PROFILE,
 } from './types';
 import setAuthToken from '../utils/setAuthToken';
-import { socket } from '../utils/socketClient';
+import { socketEmit, socketActions } from '../utils/socketClient';
 
 // Load User
 export const loadUser = () => async dispatch => {
@@ -26,7 +26,7 @@ export const loadUser = () => async dispatch => {
       type: USER_LOADED,
       payload: res.data,
     });
-    socket.emit('sendAuth', res.data._id);
+    socketEmit(res);
   } catch (err) {
     dispatch({
       type: AUTH_ERROR,
@@ -109,6 +109,8 @@ export const logout = () => dispatch => {
 export const sendFriendRequest = id => async dispatch => {
   try {
     const res = await axios.post(`/api/profile/friend/${id}`);
+
+    socketActions(res, 'sendFriendRequest');
     dispatch(loadUser());
     dispatch(setAlert(res.data.msg, 'success'));
   } catch (err) {
@@ -119,28 +121,29 @@ export const sendFriendRequest = id => async dispatch => {
 export const acceptFriendRequest = id => async dispatch => {
   try {
     const res = await axios.put(`/api/profile/friend/${id}`);
+    socketActions(res, 'acceptFriendRequest');
     dispatch(loadUser());
     dispatch(setAlert(res.data.msg, 'success'));
   } catch (err) {
     dispatch(setAlert(err.response.data.msg, 'danger'));
   }
 };
-
 // Cancel Friend Request api/profile/friend/:senderId
 export const cancelFriendRequest = id => async dispatch => {
   try {
     const res = await axios.patch(`/api/profile/friend/${id}`);
+    socketActions(res, 'cancelFriendRequest');
     dispatch(loadUser());
     dispatch(setAlert(res.data.msg, 'success'));
   } catch (err) {
     dispatch(setAlert(err.response.data.msg, 'danger'));
   }
 };
-
 // Remove Friend api/profile/friend/:senderId
 export const removeFriend = id => async dispatch => {
   try {
     const res = await axios.delete(`/api/profile/friend/${id}`);
+    socketActions(res, 'removeFriend');
     dispatch(loadUser());
     dispatch(setAlert(res.data.msg, 'success'));
   } catch (err) {
diff --git a/client/src/actions/chat.js b/client/src/actions/chat.js
new file mode 100644
index 0000000..359eb6d
--- /dev/null
+++ b/client/src/actions/chat.js
@@ -0,0 +1,22 @@
+import { USERLIST_ADD, USERNAME_ADD, MESSAGE_ADD } from './types';
+
+export const receiveUsername = data => {
+  return {
+    type: USERNAME_ADD,
+    payload: data,
+  };
+};
+
+export const receiveUsers = data => {
+  return {
+    type: USERLIST_ADD,
+    payload: data,
+  };
+};
+
+export const receiveMessage = data => {
+  return {
+    type: MESSAGE_ADD,
+    payload: data,
+  };
+};
diff --git a/client/src/actions/types.js b/client/src/actions/types.js
index 883c20e..a35335e 100755
--- a/client/src/actions/types.js
+++ b/client/src/actions/types.js
@@ -22,3 +22,6 @@ export const DELETE_POST = 'DELETE_POST';
 export const ADD_POST = 'ADD_POST';
 export const ADD_COMMENT = 'ADD_COMMENT';
 export const REMOVE_COMMENT = 'REMOVE_COMMENT';
+export const USERNAME_ADD = 'USERNAME_ADD';
+export const USERLIST_ADD = 'USERLIST_ADD';
+export const MESSAGE_ADD = 'MESSAGE_ADD';
diff --git a/client/src/components/chat/App.js b/client/src/components/chat/App.js
new file mode 100644
index 0000000..5a9bb14
--- /dev/null
+++ b/client/src/components/chat/App.js
@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Spinner from './../layout/Spinner';
+
+import Chat from './Chat';
+
+const App = ({ auth: { user }, chat }) => {
+  if (!user) {
+    return <Spinner />;
+  }
+
+  if (!chat.userlist.length) {
+  }
+
+  const username = user.name;
+  const chatt = username ? <Chat user={user} /> : null;
+  return <Fragment>{chatt}</Fragment>;
+};
+
+App.propTypes = {
+  auth: PropTypes.object
+};
+
+const mapStateToProps = state => ({
+  user: state.user,
+  auth: state.auth,
+  chat: state.chat
+
+});
+
+export default connect(mapStateToProps)(App);
diff --git a/client/src/components/chat/Chat.js b/client/src/components/chat/Chat.js
new file mode 100644
index 0000000..6cf839d
--- /dev/null
+++ b/client/src/components/chat/Chat.js
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { receiveUsers, receiveMessage, receiveUsername } from '../../actions/chat';
+
+import UserList from './UserList';
+import Messages from './Messages';
+import Spinner from '../layout/Spinner';
+import { socket } from './../../utils/socketClient';
+const Chat = ({ user, chat, receiveMessage, receiveUsers, receiveUsername }) => {
+  const username = user.name;
+  useEffect(() => {
+    receiveUsername([username, user._id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [username]);
+
+  const [formData, setFormData] = useState({
+    text: '',
+  });
+  const { text } = formData;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const chatSocket = () => {
+    // receive userlist
+    socket.on('chat users', ({ room, users }) => {
+      receiveUsers({ room, users });
+    });
+
+    // send join message
+    socket.emit(
+      'chat join',
+      {
+        timestamp: new Date(),
+        username,
+        userID: user._id,
+        userAvatar: user.avatar,
+        room: 'general',
+      },
+      error => {
+        if (error) {
+          return;
+        }
+      },
+    );
+
+    // receive join message
+    socket.on('chat join', msg => {
+      receiveMessage(msg);
+    });
+
+    // receive leave message
+    socket.on('chat leave', msg => {
+      receiveMessage(msg);
+    });
+
+    // receive message
+    socket.on('chat message', msg => {
+      receiveMessage(msg);
+    });
+
+    // send leave message when user leaves the page
+    window.addEventListener('beforeunload', e => {
+      e.preventDefault();
+
+      socket.emit('chat leave', {
+        timestamp: new Date(),
+        username,
+        userID: user._id,
+        room: 'general',
+      });
+    });
+  };
+  useEffect(() => {
+    chatSocket();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // update state from input
+  const onChange = e => {
+    setFormData({ [e.target.name]: e.target.value });
+  };
+
+  const onSubmit = e => {
+    e.preventDefault();
+    // send message
+    socket.emit('chat message', {
+      timestamp: new Date(),
+      username,
+      message: text,
+      userAvatar: user.avatar,
+    });
+
+    setFormData({ text: '' });
+  };
+
+  return (
+    <div className="card grey lighten-3 chat-room">
+      <div className="card-body">
+        <div className="row px-lg-2 px-2">
+          <div className="col-sm-9 col-md-9 col-xl-8 pl-md-3 px-lg-auto px-0 chat-message-container">
+            <div className="chat-message">
+              <Messages messages={chat.messages} username={username} />
+            </div>
+
+            <form onSubmit={onSubmit}>
+              <input
+                className="chat-input"
+                name="text"
+                type="text"
+                cols="30"
+                rows="5"
+                maxLength="400"
+                placeholder="Write something"
+                value={text}
+                onChange={onChange}
+                autoComplete="false"
+                autoFocus
+                required
+              />
+              <button className="chat-send-button" type="submit" value="submit">
+                Send
+              </button>
+            </form>
+          </div>
+          <div className="col-sm-3 col-md-3 col-xl-4 px-0 chat-user-container">
+            <h6 className="font-weight-bold mb-3 text-center text-lg-left">Members</h6>
+            {chat.userlist.users ? <UserList chatData={chat} /> : <Spinner />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Chat.propTypes = {
+  receiveUsers: PropTypes.func.isRequired,
+  receiveMessage: PropTypes.func.isRequired,
+  receiveUsername: PropTypes.func.isRequired,
+  auth: PropTypes.object,
+  chat: PropTypes.object,
+};
+
+const mapStateToProps = state => ({
+  chat: state.chat,
+  auth: state.auth,
+});
+
+export default connect(mapStateToProps, { receiveUsers, receiveMessage, receiveUsername })(Chat);
diff --git a/client/src/components/chat/Messages.js b/client/src/components/chat/Messages.js
new file mode 100644
index 0000000..ebca2f3
--- /dev/null
+++ b/client/src/components/chat/Messages.js
@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import moment from 'moment';
+
+const Messages = ({ username, messages }) => {
+  const chat = useRef(null);
+
+  const chatMessages = messages.map((chat, key) => (
+    <li
+      className={
+        chat.username === username
+          ? 'd-flex justify-content-start mb-4 user-chat-box'
+          : 'd-flex justify-content-start mb-4 guest-chat-box'
+      }
+      key={key}
+    >
+      <img
+        src={chat.userAvatar}
+        alt="avatar"
+        className="avatar rounded-circle mr-2 ml-lg-3 ml-0 z-depth-1"
+      />
+      <div className="chat-body white p-3 ml-2 z-depth-1">
+        <div className="header">
+          <strong className="primary-font">{chat.username}</strong>
+          <small className="pull-right text-muted">
+            <i className="far fa-clock"></i> {moment(chat.timestamp).fromNow()}
+          </small>
+        </div>
+        <hr className="w-100" />
+        <p className="mb-0">{chat.message}</p>
+      </div>
+    </li>
+  ));
+
+  useEffect(() => {
+    if (chat.current) {
+      window.scrollTo(0, chat.current.scrollHeight);
+    }
+  }, [chatMessages]);
+
+  return (
+    <ul className="list-unstyled chat" ref={chat}>
+      {chatMessages}
+    </ul>
+  );
+};
+
+export default Messages;
diff --git a/client/src/components/chat/UserList.js b/client/src/components/chat/UserList.js
new file mode 100644
index 0000000..e65338a
--- /dev/null
+++ b/client/src/components/chat/UserList.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const UserList = ({ chatData: { messages, userlist, username } }) => {
+  const countUserMessage = messages.filter(msg => {
+    return msg.username === username[0];
+  });
+
+  const users = userlist.users.map((chatUser, key) => (
+    <li className="active grey lighten-3 p-2" key={key}>
+      <Link to={`/profile/${chatUser.userID}`} className="d-flex justify-content-between my-2">
+        <img
+          src={chatUser.userAvatar}
+          alt={chatUser.username + ' avatar'}
+          className="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1"
+        />
+        <div className="text-small">
+          <strong className="chat-user">{chatUser.username}</strong>
+          <p className="last-message text-muted">{}</p>
+        </div>
+        <div className="chat-footer">
+          <p className="text-smaller text-muted mb-0">Online</p>
+          {username[1] === chatUser.userID && (
+            <span className="badge badge-success float-right">{countUserMessage.length}</span>
+          )}
+        </div>
+      </Link>
+    </li>
+  ));
+  return (
+    <div className="white z-depth-1 px-3 pt-3 pb-0">
+      <ul className="list-unstyled friend-list">{users}</ul>
+    </div>
+  );
+};
+
+export default UserList;
diff --git a/client/src/components/dashboard/Dashboard.js b/client/src/components/dashboard/Dashboard.js
index 6886a35..d0d45b5 100755
--- a/client/src/components/dashboard/Dashboard.js
+++ b/client/src/components/dashboard/Dashboard.js
@@ -7,7 +7,6 @@ import DashboardActions from './DashboardActions';
 import Experience from './Experience';
 import Education from './Education';
 import { getCurrentProfile, deleteAccount } from '../../actions/profile';
-import { socket } from './../../utils/socketClient';
 
 const Dashboard = ({
   getCurrentProfile,
@@ -17,9 +16,6 @@ const Dashboard = ({
 }) => {
   useEffect(() => {
     getCurrentProfile();
-    socket.on('newFriendRequest', data => {
-      console.log(data);
-    });
   }, [getCurrentProfile]);
 
   return loading && profile === null ? (
diff --git a/client/src/components/dashboard/DashboardActions.js b/client/src/components/dashboard/DashboardActions.js
index 3a63e5d..17c46bd 100755
--- a/client/src/components/dashboard/DashboardActions.js
+++ b/client/src/components/dashboard/DashboardActions.js
@@ -3,15 +3,18 @@ import { Link } from 'react-router-dom';
 
 const DashboardActions = () => {
   return (
-    <div className='dash-buttons'>
-      <Link to='/edit-profile' className='btn btn-light'>
-        <i className='fas fa-user-circle text-primary' /> Edit Profile
+    <div className="dash-buttons">
+      <Link to="/edit-profile" className="btn btn-light">
+        <i className="fas fa-user-circle text-primary" /> Edit Profile
       </Link>
-      <Link to='/add-experience' className='btn btn-light'>
-        <i className='fab fa-black-tie text-primary' /> Add Experience
+      <Link to="/add-experience" className="btn btn-light">
+        <i className="fab fa-black-tie text-primary" /> Add Experience
       </Link>
-      <Link to='/add-education' className='btn btn-light'>
-        <i className='fas fa-graduation-cap text-primary' /> Add Education
+      <Link to="/add-education" className="btn btn-light">
+        <i className="fas fa-graduation-cap text-primary" /> Add Education
+      </Link>
+      <Link to="/friends" className="btn btn-light">
+        <i className="fas fa-user-friends text-primary" /> Friends
       </Link>
     </div>
   );
diff --git a/client/src/components/friends/FriendItem.js b/client/src/components/friends/FriendItem.js
new file mode 100644
index 0000000..27f5ec9
--- /dev/null
+++ b/client/src/components/friends/FriendItem.js
@@ -0,0 +1,53 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { removeFriend } from "../../actions/auth";
+import Spinner from "../layout/Spinner";
+
+const FriendItem = ({ auth: { user, loading }, removeFriend }) => {
+  return loading && user === null ? (
+    <Spinner />
+  ) : (
+    user.friendsList.map(friend => (
+      <div className='friend-card bg-light my-1' key={friend._id}>
+        <img src={friend.avatar} alt='' className='round-img' />
+        <div className='friend-name-card m-1 p-1'>
+          <p className='my-1'>
+            <i className='fas fa-user' /> {friend.friendName}
+          </p>
+          <Link to={`/profile/${friend.friendId}`} className='btn btn-primary'>
+            View Profile
+          </Link>
+        </div>
+        <div className='m'>
+          <button
+            className='btn btn-danger m'
+            onClick={() => removeFriend(friend.friendId)}
+          >
+            <i className='fas fa-user-slash'></i>
+            {"  "}Unfriend
+          </button>
+          <Link
+            to={`/friend-posts/${friend.friendId}`}
+            className='btn btn-primary m'
+          >
+            View Posts
+          </Link>
+        </div>
+      </div>
+    ))
+  );
+};
+
+FriendItem.propTypes = {
+  removeFriend: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired
+};
+const mapStateToProps = state => ({
+  auth: state.auth
+});
+
+export default connect(mapStateToProps, {
+  removeFriend
+})(FriendItem);
diff --git a/client/src/components/friends/Friends.js b/client/src/components/friends/Friends.js
new file mode 100644
index 0000000..15f3061
--- /dev/null
+++ b/client/src/components/friends/Friends.js
@@ -0,0 +1,57 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Spinner from '../layout/Spinner';
+import { loadUser } from '../../actions/auth';
+import FriendItem from './FriendItem';
+import RequestItem from './RequestItem';
+import WaitingItem from './WaitingItem';
+
+const Friends = ({ auth: { user, loading } }) => {
+  return loading && user === null ? (
+    <Spinner />
+  ) : (
+    <Fragment>
+      <h2 className="text-primary my-2">My Friends</h2>
+      {user.friendsList.length > 0 ? (
+        <FriendItem />
+      ) : (
+        <p className="text-primary bg-light p-1">
+          <i className="fab fa-connectdevelop" /> You have no friends yet.
+        </p>
+      )}
+      <h2 className="text-primary my-2">My Requests</h2>
+
+      {user.request.length > 0 ? (
+        <RequestItem />
+      ) : (
+        <p className="text-primary bg-light p-1">
+          <i className="fab fa-connectdevelop" /> You have no friendship requests.
+        </p>
+      )}
+      <h2 className="text-primary my-2">My Waiting List</h2>
+      {user.sentRequest.length > 0 ? (
+        <WaitingItem />
+      ) : (
+        <p className="text-primary bg-light p-1">
+          <i className="fab fa-connectdevelop" />
+          You have no pending requests.
+        </p>
+      )}
+    </Fragment>
+  );
+};
+
+Friends.propTypes = {
+  loadUser: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired,
+  profile: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = state => ({
+  auth: state.auth,
+  profile: state.profile,
+});
+
+export default connect(mapStateToProps, { loadUser })(Friends);
diff --git a/client/src/components/friends/RequestItem.js b/client/src/components/friends/RequestItem.js
new file mode 100644
index 0000000..85c9e36
--- /dev/null
+++ b/client/src/components/friends/RequestItem.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { acceptFriendRequest, cancelFriendRequest } from "../../actions/auth";
+import Spinner from "../layout/Spinner";
+
+const RequestItem = ({
+  auth: { user, loading },
+  acceptFriendRequest,
+  cancelFriendRequest
+}) => {
+  return loading && user === null ? (
+    <Spinner />
+  ) : (
+    user.request.map(req => (
+      <div className='friend-card bg-light my-1' key={req._id}>
+        <img src={req.avatar} alt='' className='round-img' />
+        <div className='friend-name-card m-1 p-1'>
+          <p className='my-1'>
+            <i className='fas fa-user-plus' /> {"  "}
+            {req.username}
+          </p>
+          <Link to={`/profile/${req.userId}`} className='btn btn-primary'>
+            View Profile
+          </Link>
+        </div>
+        <div className='m'>
+          <button
+            className='btn btn-success m'
+            onClick={() => acceptFriendRequest(req.userId)}
+          >
+            <i className='fa fa-thumbs-up'></i>
+            {"  "}Confirm
+          </button>
+          <button
+            className='btn btn-danger m'
+            onClick={() => cancelFriendRequest(req.userId)}
+          >
+            <i className='fa fa-thumbs-down'></i> Reject
+          </button>
+        </div>
+      </div>
+    ))
+  );
+};
+
+RequestItem.propTypes = {
+  acceptFriendRequest: PropTypes.func.isRequired,
+  cancelFriendRequest: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired
+};
+const mapStateToProps = state => ({
+  auth: state.auth
+});
+
+export default connect(mapStateToProps, {
+  acceptFriendRequest,
+  cancelFriendRequest
+})(RequestItem);
diff --git a/client/src/components/friends/WaitingItem.js b/client/src/components/friends/WaitingItem.js
new file mode 100644
index 0000000..4eff81f
--- /dev/null
+++ b/client/src/components/friends/WaitingItem.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import moment from "moment";
+import Moment from "react-moment";
+import Spinner from "../layout/Spinner";
+
+const WaitingItem = ({ auth: { user, loading } }) => {
+  return loading && user === null ? (
+    <Spinner />
+  ) : (
+    user.sentRequest.map(req => (
+      <div className='friend-card bg-light my-1' key={req._id}>
+        <img src={req.avatar} alt='' className='round-img' />
+        <div className='friend-name-card m-1 p-1'>
+          <p className='my-1'>
+            {" "}
+            <i className='fas fa-user-clock'></i> {req.username}
+          </p>
+          <Link to={`/profile/${req.userId}`} className='btn btn-primary'>
+            View Profile
+          </Link>
+        </div>
+        <ul className='text-primary'>
+          <li>
+            <button className='btn btn-dark'>
+              <i className='fas fa-hourglass-half'></i>
+              {"   "} Pending Request
+            </button>
+          </li>
+          <li className='my-1'>
+            <i className='fas fa-clock'></i> Request sent at: {"   "}
+            <Moment format='DD/MM/YYYY HH:mm:ss'>{moment.utc(req.date)}</Moment>
+          </li>
+        </ul>
+      </div>
+    ))
+  );
+};
+
+WaitingItem.propTypes = {
+  auth: PropTypes.object.isRequired
+};
+const mapStateToProps = state => ({
+  auth: state.auth
+});
+
+export default connect(mapStateToProps, {})(WaitingItem);
diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js
index fa83c72..61a6c7a 100755
--- a/client/src/components/layout/Navbar.js
+++ b/client/src/components/layout/Navbar.js
@@ -3,26 +3,33 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { logout } from '../../actions/auth';
+import { receiveUsername } from '../../actions/chat';
 
-const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
+const Navbar = ({ auth: { isAuthenticated, loading, user }, logout }) => {
+  const handleUser = () => {
+    receiveUsername(user.name);
+  };
   const authLinks = (
     <ul>
       <li>
-        <Link to='/profiles'>Developers</Link>
+        <Link to="/profiles">Developers</Link>
       </li>
       <li>
-        <Link to='/posts'>Posts</Link>
+        <Link to="/posts">Posts</Link>
       </li>
       <li>
-        <Link to='/dashboard'>
-          <i className='fas fa-user' />{' '}
-          <span className='hide-sm'>Dashboard</span>
+        <Link to="/chats" onClick={handleUser}>
+          Chats
         </Link>
       </li>
       <li>
-        <a onClick={logout} href='#!'>
-          <i className='fas fa-sign-out-alt' />{' '}
-          <span className='hide-sm'>Logout</span>
+        <Link to="/dashboard">
+          <i className="fas fa-user" /> <span className="hide-sm">Dashboard</span>
+        </Link>
+      </li>
+      <li>
+        <a onClick={logout} href="#!">
+          <i className="fas fa-sign-out-alt" /> <span className="hide-sm">Logout</span>
         </a>
       </li>
     </ul>
@@ -31,41 +38,36 @@ const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
   const guestLinks = (
     <ul>
       <li>
-        <Link to='/profiles'>Developers</Link>
+        <Link to="/profiles">Developers</Link>
       </li>
       <li>
-        <Link to='/register'>Register</Link>
+        <Link to="/register">Register</Link>
       </li>
       <li>
-        <Link to='/login'>Login</Link>
+        <Link to="/login">Login</Link>
       </li>
     </ul>
   );
 
   return (
-    <nav className='navbar bg-dark'>
+    <nav className="navbar bg-dark">
       <h1>
-        <Link to='/'>
-          <i className='fas fa-code' /> DevConnector
+        <Link to="/">
+          <i className="fas fa-code" /> DevConnector
         </Link>
       </h1>
-      {!loading && (
-        <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
-      )}
+      {!loading && <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>}
     </nav>
   );
 };
 
 Navbar.propTypes = {
   logout: PropTypes.func.isRequired,
-  auth: PropTypes.object.isRequired
+  auth: PropTypes.object.isRequired,
 };
 
 const mapStateToProps = state => ({
-  auth: state.auth
+  auth: state.auth,
 });
 
-export default connect(
-  mapStateToProps,
-  { logout }
-)(Navbar);
+export default connect(mapStateToProps, { logout })(Navbar);
diff --git a/client/src/components/posts/FriendPosts.js b/client/src/components/posts/FriendPosts.js
new file mode 100644
index 0000000..9456f43
--- /dev/null
+++ b/client/src/components/posts/FriendPosts.js
@@ -0,0 +1,51 @@
+import React, { Fragment, useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import Spinner from "../layout/Spinner";
+import PostItem from "./PostItem";
+import { getPosts } from "../../actions/post";
+
+const FriendPosts = ({
+  getPosts,
+  post: { posts, loading },
+  match,
+  auth: { user }
+}) => {
+  useEffect(() => {
+    getPosts();
+  }, [getPosts]);
+
+  const friendPosts = posts.filter(post => post.user === match.params.userId);
+
+  return loading ? (
+    <Spinner />
+  ) : friendPosts.length === 0 ? (
+    <h2>Your friend has no posts yet.</h2>
+  ) : (
+    <Fragment>
+      <h1 className='large text-primary'>{friendPosts[0].name}'s Posts</h1>
+      <p className='lead'>
+        <i className='fas fa-user' /> Welcome {user.name}
+      </p>
+
+      <div className='posts'>
+        {friendPosts.map(post => (
+          <PostItem key={post._id} post={post} />
+        ))}
+      </div>
+    </Fragment>
+  );
+};
+
+FriendPosts.propTypes = {
+  getPosts: PropTypes.func.isRequired,
+  post: PropTypes.object.isRequired,
+  auth: PropTypes.object.isRequired
+};
+
+const mapStateToProps = state => ({
+  post: state.post,
+  auth: state.auth
+});
+
+export default connect(mapStateToProps, { getPosts })(FriendPosts);
diff --git a/client/src/components/profiles/ProfileItem.js b/client/src/components/profiles/ProfileItem.js
index e2dc5e2..5f506a8 100755
--- a/client/src/components/profiles/ProfileItem.js
+++ b/client/src/components/profiles/ProfileItem.js
@@ -1,53 +1,97 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { sendFriendRequest } from '../../actions/auth';
-import { socket } from '../../utils/socketClient';
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { sendFriendRequest } from "../../actions/auth";
+import moment from "moment";
+import Moment from "react-moment";
 
 const ProfileItem = ({
   sendFriendRequest,
-  auth,
   profile: {
     user: { _id, name, avatar },
     status,
     company,
     location,
-    skills,
+    skills
   },
+  auth: { user, isAuthenticated }
 }) => {
-  const handleClick = e => {
-    // e.preventDefault();
-    // sendFriendRequest(_id);
-    // send message
-    socket.emit('friendRequest', {
-      senderId: auth.user._id,
-      senderName: auth.user.name,
-      receiverId: _id,
-      receiverName: name,
-    });
+  const Button = () => {
+    const isFriend = user.friendsList.filter(friend => friend.friendId === _id);
+    const isRequested = user.request.filter(req => req.userId === _id);
+    const isSent = user.sentRequest.filter(sendReq => sendReq.userId === _id);
+    const isLoggedUser = user._id === _id;
+
+    if (isAuthenticated && !isLoggedUser) {
+      if (isFriend.length > 0) {
+        return (
+          <p className='text-primary my-1'>
+            <i className='fas fa-clock'></i> Friends since:{" "}
+            <Moment format='DD/MM/YYYY HH:mm:ss'>
+              {moment.utc(isFriend.date)}
+            </Moment>
+          </p>
+        );
+      }
+
+      if (isRequested.length > 0) {
+        return (
+          <p className='text-primary my-1'>
+            <i className='fas fa-clock'></i> Requested at:{" "}
+            <Moment format='DD/MM/YYYY HH:mm:ss'>
+              {moment.utc(isRequested.date)}
+            </Moment>
+          </p>
+        );
+      }
+
+      if (isSent.length > 0) {
+        return (
+          <p className='text-primary my-1'>
+            {" "}
+            <i className='fas fa-clock'></i> Request sent at: {"   "}
+            <Moment format='DD/MM/YYYY HH:mm:ss'>
+              {moment.utc(isSent.date)}
+            </Moment>
+          </p>
+        );
+      }
+
+      if (_id === user._id) {
+        return <></>;
+      }
+
+      return (
+        <button
+          className='btn btn-success'
+          onClick={() => sendFriendRequest(_id)}
+        >
+          <i className='fas fa-user-plus'></i> Send Friend Request
+        </button>
+      );
+    }
+    return <></>;
   };
 
   return (
-    <div className="profile bg-light">
-      <img src={avatar} alt="" className="round-img" />
+    <div className='profile bg-light'>
+      <img src={avatar} alt='' className='round-img' />
       <div>
         <h2>{name}</h2>
         <p>
           {status} {company && <span> at {company}</span>}
         </p>
-        <p className="my-1">{location && <span>{location}</span>}</p>
-        <Link to={`/profile/${_id}`} className="btn btn-primary">
+        <p className='my-1'>{location && <span>{location}</span>}</p>
+        <Link to={`/profile/${_id}`} className='btn btn-primary'>
           View Profile
         </Link>
-        <button className="btn btn-success" onClick={handleClick}>
-          Send Friend Request
-        </button>
+        <Button />
       </div>
       <ul>
         {skills.slice(0, 4).map((skill, index) => (
-          <li key={index} className="text-primary">
-            <i className="fas fa-check" /> {skill}
+          <li key={index} className='text-primary'>
+            <i className='fas fa-check' /> {skill}
           </li>
         ))}
       </ul>
@@ -56,15 +100,13 @@ const ProfileItem = ({
 };
 
 ProfileItem.propTypes = {
-  sendFriendRequest: PropTypes.func.isRequired,
   profile: PropTypes.object.isRequired,
-  auth: PropTypes.object.isRequired,
+  isAuthenticated: PropTypes.bool,
+  sendFriendRequest: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired
 };
-
 const mapStateToProps = state => ({
-  auth: state.auth,
+  auth: state.auth
 });
 
-export default connect(mapStateToProps, {
-  sendFriendRequest,
-})(ProfileItem);
+export default connect(mapStateToProps, { sendFriendRequest })(ProfileItem);
diff --git a/client/src/components/profiles/Profiles.js b/client/src/components/profiles/Profiles.js
index 9bcac9b..9f2b7ac 100755
--- a/client/src/components/profiles/Profiles.js
+++ b/client/src/components/profiles/Profiles.js
@@ -16,16 +16,13 @@ const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
         <Spinner />
       ) : (
         <Fragment>
-          <h1 className='large text-primary'>Developers</h1>
-          <p className='lead'>
-            <i className='fab fa-connectdevelop' /> Browse and connect with
-            developers
+          <h1 className="large text-primary">Developers</h1>
+          <p className="lead">
+            <i className="fab fa-connectdevelop" /> Browse and connect with developers
           </p>
-          <div className='profiles'>
+          <div className="profiles">
             {profiles.length > 0 ? (
-              profiles.map(profile => (
-                <ProfileItem key={profile._id} profile={profile} />
-              ))
+              profiles.map(profile => <ProfileItem key={profile._id} profile={profile} />)
             ) : (
               <h4>No profiles found...</h4>
             )}
@@ -38,14 +35,11 @@ const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
 
 Profiles.propTypes = {
   getProfiles: PropTypes.func.isRequired,
-  profile: PropTypes.object.isRequired
+  profile: PropTypes.object.isRequired,
 };
 
 const mapStateToProps = state => ({
-  profile: state.profile
+  profile: state.profile,
 });
 
-export default connect(
-  mapStateToProps,
-  { getProfiles }
-)(Profiles);
+export default connect(mapStateToProps, { getProfiles })(Profiles);
diff --git a/client/src/components/routing/Routes.js b/client/src/components/routing/Routes.js
index 3b4479c..3fac32b 100755
--- a/client/src/components/routing/Routes.js
+++ b/client/src/components/routing/Routes.js
@@ -14,23 +14,27 @@ import Posts from '../posts/Posts';
 import Post from '../post/Post';
 import NotFound from '../layout/NotFound';
 import PrivateRoute from '../routing/PrivateRoute';
+import ChatApp from './../chat/App';
+import Friends from '../friends/Friends';
 
 const Routes = () => {
   return (
-    <section className='container'>
+    <section className="container">
       <Alert />
       <Switch>
-        <Route exact path='/register' component={Register} />
-        <Route exact path='/login' component={Login} />
-        <Route exact path='/profiles' component={Profiles} />
-        <Route exact path='/profile/:id' component={Profile} />
-        <PrivateRoute exact path='/dashboard' component={Dashboard} />
-        <PrivateRoute exact path='/create-profile' component={CreateProfile} />
-        <PrivateRoute exact path='/edit-profile' component={EditProfile} />
-        <PrivateRoute exact path='/add-experience' component={AddExperience} />
-        <PrivateRoute exact path='/add-education' component={AddEducation} />
-        <PrivateRoute exact path='/posts' component={Posts} />
-        <PrivateRoute exact path='/posts/:id' component={Post} />
+        <Route exact path="/register" component={Register} />
+        <Route exact path="/login" component={Login} />
+        <Route exact path="/profiles" component={Profiles} />
+        <Route exact path="/profile/:id" component={Profile} />
+        <PrivateRoute exact path="/dashboard" component={Dashboard} />
+        <PrivateRoute exact path="/create-profile" component={CreateProfile} />
+        <PrivateRoute exact path="/edit-profile" component={EditProfile} />
+        <PrivateRoute exact path="/add-experience" component={AddExperience} />
+        <PrivateRoute exact path="/add-education" component={AddEducation} />
+        <PrivateRoute exact path="/posts" component={Posts} />
+        <PrivateRoute exact path="/posts/:id" component={Post} />
+        <PrivateRoute exact path="/chats" component={ChatApp} />
+        <PrivateRoute exact path="/friends" component={Friends} />
         <Route component={NotFound} />
       </Switch>
     </section>
diff --git a/client/src/reducers/chat.js b/client/src/reducers/chat.js
new file mode 100644
index 0000000..4294092
--- /dev/null
+++ b/client/src/reducers/chat.js
@@ -0,0 +1,33 @@
+import { USERLIST_ADD, USERNAME_ADD, MESSAGE_ADD } from './../actions/types';
+
+const initialState = {
+  messages: [],
+  userlist: [],
+  username: null,
+};
+
+export default function(state = initialState, action) {
+  const { type, payload } = action;
+  switch (type) {
+    case MESSAGE_ADD: {
+      return {
+        ...state,
+        messages: Array.from(new Set([...state.messages, payload])),
+      };
+    }
+    case USERLIST_ADD: {
+      return {
+        ...state,
+        userlist: payload,
+      };
+    }
+    case USERNAME_ADD: {
+      return {
+        ...state,
+        username: payload,
+      };
+    }
+    default:
+      return state;
+  }
+}
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
index 038fcdf..90e2ed9 100755
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@@ -3,10 +3,12 @@ import alert from './alert';
 import auth from './auth';
 import profile from './profile';
 import post from './post';
+import chat from './chat';
 
 export default combineReducers({
   alert,
   auth,
   profile,
-  post
+  post,
+  chat,
 });
diff --git a/client/src/utils/socketClient.js b/client/src/utils/socketClient.js
index 4b77533..ccdf20b 100644
--- a/client/src/utils/socketClient.js
+++ b/client/src/utils/socketClient.js
@@ -1,2 +1,57 @@
 import io from 'socket.io-client';
+import store from './../store';
+import { setAlert } from './../actions/alert';
+import { loadUser } from './../actions/auth';
+
+// if (process.env.NODE_ENV === "production") {
+//   process.env.HOSTNAME = "https://whispering-inlet-00905.herokuapp.com/";
+// } else if (process.env.NODE_ENV === "development") {
+//   process.env.HOSTNAME = "localhost:5000";
+// }
+
 export const socket = io('http://localhost:5000');
+
+export const socketClient = () => {
+  socket.on('sendFriendRequest', data => {
+    store.dispatch(loadUser());
+    store.dispatch(setAlert(data.notification, 'info'));
+  });
+  socket.on('cancelFriendRequest', data => {
+    store.dispatch(loadUser());
+    store.dispatch(setAlert(data.notification, 'info'));
+  });
+  socket.on('acceptFriendRequest', data => {
+    store.dispatch(loadUser());
+    store.dispatch(setAlert(data.notification, 'success'));
+  });
+  socket.on('removeFriend', data => {
+    store.dispatch(loadUser());
+    store.dispatch(setAlert(data.notification, 'danger'));
+  });
+};
+
+export const socketActions = (res, eventType) => {
+  socket.emit('sendFriendAction', {
+    senderId: res.data.senderId,
+    senderName: res.data.senderName,
+    receiverId: res.data.receiverId,
+    receiverName: res.data.receiverName,
+    eventType: eventType,
+    notification: res.data.notification,
+  });
+};
+
+export const socketEmit = res => {
+  socket.emit('sendAuth', res.data._id);
+};
+
+// export const socketActions = (res) => {
+//   socket.emit('sendFriendAction', {
+//     senderId: res.data.senderId,
+//     senderName: res.data.senderName,
+//     receiverId: res.data.receiverId,
+//     receiverName: res.data.receiverName,
+//     eventType: 'sendFriendRequest',
+//     notification: res.data.notification,
+//   });
+// }
diff --git a/models/User.js b/models/User.js
index 3963d1c..3d92e19 100755
--- a/models/User.js
+++ b/models/User.js
@@ -35,6 +35,9 @@ const UserSchema = new mongoose.Schema({
         type: Date,
         default: Date.now,
       },
+      avatar: {
+        type: String,
+      },
     },
   ],
   request: [
@@ -51,6 +54,9 @@ const UserSchema = new mongoose.Schema({
         type: Date,
         default: Date.now,
       },
+      avatar: {
+        type: String,
+      },
     },
   ],
   friendsList: [
@@ -67,6 +73,9 @@ const UserSchema = new mongoose.Schema({
         type: Date,
         default: Date.now,
       },
+      avatar: {
+        type: String,
+      },
     },
   ],
   totalRequest: {
diff --git a/routes/api/profile.js b/routes/api/profile.js
index 10f8fce..68cfba2 100755
--- a/routes/api/profile.js
+++ b/routes/api/profile.js
@@ -14,10 +14,9 @@ const Post = require('../../models/Post');
 // @access   Private
 router.get('/me', auth, async (req, res) => {
   try {
-    const profile = await Profile.findOne({ user: req.user.id }).populate('user', [
-      'name',
-      'avatar',
-    ]);
+    const profile = await Profile.findOne({
+      user: req.user.id,
+    }).populate('user', ['name', 'avatar']);
 
     if (!profile) {
       return res.status(400).json({ msg: 'There is no profile for this user' });
@@ -393,9 +392,7 @@ router.get('/github/:username', (req, res) => {
 });
 
 /// Friend Requests
-
 // Sender >>> Receiver
-
 // @route    POST api/profile/friend/:id(receiver user id)
 // @desc     Send a friend request to a user
 // @access   Private
@@ -421,6 +418,7 @@ router.post('/friend/:id', auth, async (req, res) => {
       sender.sentRequest.push({
         userId: req.params.id,
         username: receiver.name,
+        avatar: receiver.avatar,
       });
 
       await sender.save();
@@ -428,12 +426,22 @@ router.post('/friend/:id', auth, async (req, res) => {
       receiver.request.push({
         userId: req.user.id,
         username: sender.name,
+        avatar: sender.avatar,
       });
       // Increment total request in the receiver database
       receiver.totalRequest += 1;
 
       await receiver.save();
-      return res.json({ msg: `Your friend request is successfully sent to ${receiver.name}` }); // @Todo
+      return res.json({
+        senderId: req.user.id,
+        senderName: sender.name,
+        senderAvatar: sender.avatar,
+        receiverId: req.params.id,
+        receiverName: receiver.name,
+        receiverAvatar: receiver.avatar,
+        msg: `Your friend request is successfully sent to ${receiver.name}`,
+        notification: `${sender.name} has sent a friend request`,
+      }); // @Todo
     }
 
     return res.status(404).json({ msg: 'Not found' });
@@ -451,7 +459,6 @@ router.post('/friend/:id', auth, async (req, res) => {
 router.put('/friend/:senderId', auth, async (req, res) => {
   try {
     const receiver = await User.findById(req.user.id).select('-password');
-
     const sender = await User.findById(req.params.senderId).select('-password');
 
     const isFriend = receiver.friendsList.find(
@@ -472,6 +479,7 @@ router.put('/friend/:senderId', auth, async (req, res) => {
       receiver.friendsList.push({
         friendId: req.params.senderId,
         friendName: sender.name,
+        avatar: sender.avatar,
       });
       // Remove sender info from Receiver request database because they are going to be friend
       const getSenderId = receiver.request
@@ -485,6 +493,7 @@ router.put('/friend/:senderId', auth, async (req, res) => {
       sender.friendsList.push({
         friendId: req.user.id,
         friendName: receiver.name,
+        avatar: receiver.avatar,
       });
       // Remove Receiver info from Sender senrRequest database because they are going to be friend
       const getReceiverId = sender.sentRequest
@@ -494,7 +503,16 @@ router.put('/friend/:senderId', auth, async (req, res) => {
       sender.sentRequest.splice(getReceiverId, 1);
 
       await sender.save();
-      return res.json({ msg: `You have accepted ${sender.name} as a friend` }); // @Todo
+      return res.json({
+        receiverId: req.params.senderId,
+        receiverName: sender.name,
+        receiverAvatar: sender.avatar,
+        senderId: req.user.id,
+        senderName: receiver.name,
+        senderAvatar: receiver.avatar,
+        msg: `You have accepted ${sender.name} as a friend`,
+        notification: `${receiver.name} has accepted your friend request`,
+      }); // @Todo
     }
 
     return res.status(500).json({ msg: 'Server error' });
@@ -542,7 +560,16 @@ router.patch('/friend/:senderId', auth, async (req, res) => {
 
       sender.sentRequest.splice(getReceiverId, 1);
       await sender.save();
-      return res.json({ msg: `You have rejected ${sender.name} friend request` }); // @Todo
+      return res.json({
+        receiverId: req.params.senderId,
+        receiverName: sender.name,
+        receiverAvatar: sender.avatar,
+        senderId: req.user.id,
+        senderName: receiver.name,
+        senderAvatar: receiver.avatar,
+        msg: `You have rejected ${sender.name} friend request`,
+        notification: `${receiver.name} has rejected your friend request`,
+      }); // @Todo
     }
     return res.status(500).json({ msg: 'Server error' });
   } catch (err) {
@@ -588,7 +615,16 @@ router.delete('/friend/:senderId', auth, async (req, res) => {
       sender.friendsList.splice(getReceiverId, 1);
 
       await sender.save();
-      return res.json({ msg: `You are not a friend with ${sender.name} ` }); // @Todo
+      return res.json({
+        receiverId: req.params.senderId,
+        receiverName: sender.name,
+        receiverAvatar: sender.avatar,
+        senderId: req.user.id,
+        senderName: receiver.name,
+        senderAvatar: receiver.avatar,
+        msg: `You are not a friend with ${sender.name}`,
+        notification: `${receiver.name} is not a friend of you`,
+      }); // @Todo
     }
 
     return res.status(500).json({ msg: 'Server error' });
diff --git a/socketIO.js b/socketIO.js
index a9167d4..c5e7d6c 100644
--- a/socketIO.js
+++ b/socketIO.js
@@ -9,37 +9,93 @@ const {
   getSocketClient,
   getReceiverSocketId,
 } = require('./utils/friend');
+const { addUser, removeUser, getUser, getUsersInRoom } = require('./utils/users');
 
 io.on('connection', socket => {
   console.log('New WebSocket connection', socket.id);
-
+  // Friend Request
   socket.on('sendAuth', senderId => {
     addSocketClient({ id: socket.id, senderId });
   });
 
-  socket.on('friendRequest', ({ senderName, senderId, receiverName, receiverId }) => {
-    const socketClient = getSocketClient(socket.id);
-    socketClient.senderName = senderName;
-    socketClient.senderId = senderId;
-    socketClient.receiverName = receiverName;
-    socketClient.receiverId = receiverId;
-
-    const { socketClientId, error } = getReceiverSocketId(socketClient.receiverId);
-    console.log('status', socketClient, error);
-
-    if (!error) {
-      io.to(socketClientId).emit('newFriendRequest', {
-        socketClientId,
-        senderId,
-        senderName,
-        receiverId,
-        receiverName,
+  socket.on(
+    'sendFriendAction',
+    ({ senderName, senderId, receiverName, receiverId, eventType, notification }) => {
+      const socketClient = getSocketClient(socket.id);
+      socketClient.senderName = senderName;
+      socketClient.senderId = senderId;
+      socketClient.receiverName = receiverName;
+      socketClient.receiverId = receiverId;
+      socketClient.eventType = eventType;
+      const { socketClientId, error } = getReceiverSocketId(socketClient.receiverId);
+      const event = socketClient.eventType;
+      if (!error) {
+        io.to(socketClientId).emit(event, {
+          socketClientId,
+          senderId,
+          senderName,
+          receiverId,
+          receiverName,
+          eventType,
+          notification,
+        });
+      }
+    },
+  );
+
+  // Live Chat
+  socket.on('chat join', (msg, callback) => {
+    const { error, user } = addUser({ id: socket.id, ...msg });
+
+    if (error) {
+      return callback(error);
+    }
+
+    socket.join(user.room);
+
+    socket.emit('chat join', {
+      username: 'Admin',
+      message: `${user.username}, welcome to group chat!`,
+      userAvatar: '//www.gravatar.com/avatar/503865d0bf3e8c4613589ea9a60910a7?s=200&r=pg&d=mm',
+    });
+    socket.broadcast.to(user.room).emit('chat join', {
+      username: 'Hey',
+      message: user.username + ' has joined!',
+      userAvatar: '//www.gravatar.com/avatar/503865d0bf3e8c4613589ea9a60910a7?s=200&r=pg&d=mm',
+    });
+    io.to(user.room).emit('chat users', {
+      room: user.room,
+      users: getUsersInRoom(user.room),
+    });
+    callback();
+  });
+
+  socket.on('chat message', msg => {
+    const user = getUser(socket.id);
+    io.to(user.room).emit('chat message', msg);
+  });
+
+  socket.on('chat leave', () => {
+    const user = removeUser(socket.id);
+
+    if (user) {
+      io.to(user.room).emit('chat leave', {
+        username: 'Hey',
+        message: user.username + ', has left!',
+        userAvatar: '//www.gravatar.com/avatar/503865d0bf3e8c4613589ea9a60910a7?s=200&r=pg&d=mm',
+      });
+      io.to(user.room).emit('chat users', {
+        room: user.room,
+        users: getUsersInRoom(user.room),
       });
     }
   });
 
+  // for friend request
   socket.on('disconnect', function() {
-    removeSocketClient(socket.id);
+    const onlineUsers = removeSocketClient(socket.id);
+    // If you want to send onlineUsers to front-end
+    // io.emit('onlineUsers', { onlineUsers });
     console.log('user disconnected');
   });
 });
diff --git a/utils/deneme.js b/utils/deneme.js
deleted file mode 100644
index 085eace..0000000
--- a/utils/deneme.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const obj = [
-  {
-    id: '8Che_3fRd0ZzAZvkAAAE',
-    senderName: 'Salih',
-    senderId: '5dc464f7e3f7002e22da54ac',
-    receiverName: 'Salih',
-    receiverId: '5dc464f7e3f7002e22da54ac',
-  },
-  {
-    id: '8Che_3fRd0ZzAZvkAAAE',
-    senderName: 'Salih',
-    senderId: '5dc464f7e3f7002e22da54ac',
-    receiverName: 'test',
-    receiverId: '5dc5edf78aeb2f1bc224db2b',
-  },
-];
-
-const recId = '5dc5edf78aeb2f1bc224db2b';
-
-const getReceiverSocket = () => {
-  const get = obj.find(el => {
-    return el.receiverId === recId;
-  });
-  return get.id;
-};
-const a = getReceiverSocket();
-
-console.log(a);
diff --git a/utils/friend.js b/utils/friend.js
index c1d3eb5..eaca805 100644
--- a/utils/friend.js
+++ b/utils/friend.js
@@ -9,11 +9,17 @@ const addSocketClient = ({ id, senderName, senderId, receiverName, receiverId })
 };
 
 const removeSocketClient = id => {
-  const index = socketClients.findIndex(socket => socket.id === id);
-
-  if (index !== -1) {
-    return socketClients.splice(index, 1)[0];
+  for (let i = 0; i < socketClients.length; i++) {
+    if (socketClients[i].id === id) {
+      socketClients.splice(i, 1);
+      i--;
+    }
   }
+  const onlineUsers = new Set();
+  socketClients.forEach(client => {
+    onlineUsers.add(client.senderId);
+  });
+  return Array.from(onlineUsers);
 };
 
 const getSocketClient = id => socketClients.find(socket => socket.id === id);
diff --git a/utils/users.js b/utils/users.js
new file mode 100644
index 0000000..4b6f728
--- /dev/null
+++ b/utils/users.js
@@ -0,0 +1,45 @@
+const users = [];
+
+const addUser = ({ id, username, room, userID, userAvatar }) => {
+  //validate the data
+  if (!username || !room) {
+    return {
+      error: 'Username and room are required',
+    };
+  }
+
+  //Check existing user
+  const existingUser = users.find(user => {
+    return user.room === room && user.userID === userID;
+  });
+
+  if (existingUser) {
+    return {
+      error: 'User already exists',
+    };
+  }
+
+  // Store user
+  const user = { id, username, room, userID, userAvatar };
+  users.push(user);
+  return { user };
+};
+
+const removeUser = id => {
+  const index = users.findIndex(user => user.id === id);
+
+  if (index !== -1) {
+    return users.splice(index, 1)[0];
+  }
+};
+
+const getUser = id => users.find(user => user.id === id);
+
+const getUsersInRoom = room => users.filter(user => user.room === room);
+
+module.exports = {
+  addUser,
+  removeUser,
+  getUser,
+  getUsersInRoom,
+};

From 5823b044cb2ab96274522fa6e16d8b344c89db49 Mon Sep 17 00:00:00 2001
From: Noer Paanakker <noer@hackyourfuture.net>
Date: Sat, 7 Dec 2019 13:38:02 +0100
Subject: [PATCH 8/8] add private route for FriendPosts

---
 client/src/components/routing/Routes.js | 43 ++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/client/src/components/routing/Routes.js b/client/src/components/routing/Routes.js
index 3fac32b..3f54bb4 100755
--- a/client/src/components/routing/Routes.js
+++ b/client/src/components/routing/Routes.js
@@ -1,21 +1,22 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import Register from '../auth/Register';
-import Login from '../auth/Login';
-import Alert from '../layout/Alert';
-import Dashboard from '../dashboard/Dashboard';
-import CreateProfile from '../profile-forms/CreateProfile';
-import EditProfile from '../profile-forms/EditProfile';
-import AddExperience from '../profile-forms/AddExperience';
-import AddEducation from '../profile-forms/AddEducation';
-import Profiles from '../profiles/Profiles';
-import Profile from '../profile/Profile';
-import Posts from '../posts/Posts';
-import Post from '../post/Post';
-import NotFound from '../layout/NotFound';
-import PrivateRoute from '../routing/PrivateRoute';
-import ChatApp from './../chat/App';
-import Friends from '../friends/Friends';
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import Register from "../auth/Register";
+import Login from "../auth/Login";
+import Alert from "../layout/Alert";
+import Dashboard from "../dashboard/Dashboard";
+import CreateProfile from "../profile-forms/CreateProfile";
+import EditProfile from "../profile-forms/EditProfile";
+import AddExperience from "../profile-forms/AddExperience";
+import AddEducation from "../profile-forms/AddEducation";
+import Profiles from "../profiles/Profiles";
+import Profile from "../profile/Profile";
+import Posts from "../posts/Posts";
+import Post from "../post/Post";
+import NotFound from "../layout/NotFound";
+import PrivateRoute from "../routing/PrivateRoute";
+import ChatApp from "./../chat/App";
+import Friends from "../friends/Friends";
+import FriendPosts from "../posts/FriendPosts";
 
 const Routes = () => {
   return (
@@ -35,6 +36,12 @@ const Routes = () => {
         <PrivateRoute exact path="/posts/:id" component={Post} />
         <PrivateRoute exact path="/chats" component={ChatApp} />
         <PrivateRoute exact path="/friends" component={Friends} />
+        <PrivateRoute
+          exact
+          path="/friend-posts/:userId"
+          component={FriendPosts}
+        />
+
         <Route component={NotFound} />
       </Switch>
     </section>