Merge pull request #22 from olatundeee/development

users can view their profile information from the dashboard

app.js

@@ -50,6 +50,7 @@ app.post('/create-admin', usersRouter);
 
 // routes for user profile api
 app.post('/create-profile', profileRouter);
+app.post('/get-profile-details', profileRouter);
 
 // routes for tasks api
 app.get('/all-tasks', tasksRouter);

client/src/app/add-profile/add-profile.component.html

@@ -75,9 +75,7 @@
       <p class="center">
           <button type="submit" class="waves-effect waves-light btn red add-btn" (click)="addProfile()">add task</button>
 
-          <a routerLink="/dashboard/projects" class="waves-effect waves-light btn black add-btn">back to projects</a>
-
-          <a routerLink="/dashboard/tasks" class="waves-effect waves-light btn green add-btn">back to tasks</a>
+          <a routerLink="/dashboard/users/profile" class="waves-effect waves-light btn black add-btn">back to profile</a>
       </p>
     </div>
   </div>

client/src/app/profile/profile.component.css

@@ -4,4 +4,20 @@
 
 .view-btn {
     border-radius: 25px;
+}
+
+.add-btn-area {
+    margin: 5%;
+}
+
+.add-btn {
+    border-radius: 25px;
+}
+
+.team-info {
+    margin: 5%;
+}
+
+.collection-item-head {
+    margin: 2% !important;
 }

client/src/app/profile/profile.component.html

@@ -9,3 +9,48 @@
   </div>
 </div>
 
+
+<div class="team-info">
+  <div class="card team-info-card">
+    <div class="card-action red">
+      <h6 class="white-text center">Profile Information</h6>
+    </div>
+    <div class="card-content center center-align">
+      <ul class="collection">
+        <li class="collection-item center-align">
+            <p class="collection-item-head"><b>Username:</b></p>
+            <p>{{profile.username}}</p>
+        </li>
+
+        <li class="collection-item center-align">
+            <p class="collection-item-head"><b>Full Name:</b></p>
+            <p>{{profile.fullname}}</p>
+        </li>
+
+        <li class="collection-item center-align">
+            <p class="collection-item-head"><b>Address:</b></p>
+            <p>{{profile.address}}</p>
+        </li>
+
+        <li class="collection-item center-align">
+            <p class="collection-item-head"><b>Phone Number:</b></p>
+            <p>{{profile.phonenumber}}</p>
+        </li>
+        <li class="collection-item center-align">
+          <p class="collection-item-head"><b>Skills:</b></p>
+          <p>{{profile.skills}}</p>
+        </li>
+        <li class="collection-item center-align">
+          <p class="collection-item-head"><b>Social:</b></p>
+          <p class="center center-align">
+            <a href="#">Instagram</a> | 
+            <a href="#">LinkedIn</a> | 
+            <a href="#">Facebook</a> | 
+            <a href="#">Twitter</a> | 
+            <a href="#">Skype</a>
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

client/src/app/profile/profile.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { UserService } from '../services/user.service';
 
 @Component({
   selector: 'app-profile',
@@ -7,9 +8,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProfileComponent implements OnInit {
 
-  constructor() { }
+  profile;
+
+  constructor(private userService: UserService) { }
 
   ngOnInit() {
+    // get profile details for the currently logged in user
+
+    this.userService.getProfileDetails().subscribe(res => {
+      this.profile = res;
+    });
   }
 
 }

client/src/app/services/user.service.ts

@@ -106,4 +106,18 @@ export class UserService {
       profile
     });
   }
+
+  // get profile details from backend api/database
+
+  getProfileDetails() {
+    const userId = localStorage.getItem('currentUserId');
+    const username = localStorage.getItem('currentUser');
+
+    // send http request to return profile details for one particular user
+
+    return this.http.post('http://localhost:3001/get-profile-details', {
+      userId,
+      username
+    });
+  }
 }

routes/profile.js

@@ -33,4 +33,27 @@ router.post('/create-profile', function(req, res) {
     })
 })
 
+// get profile details for logged in user
+
+router.post('/get-profile-details', function(req, res) {
+    console.log(req.body);
+
+    // search profile database for document matching the provided userid and username
+
+    profile.findOne({
+        userId: req.body.userId,
+        username: req.body.username
+    }, function(err, profile) {
+        // if there is an error return a 500 status
+        if(err) {
+            console.log(err);
+            return res.sendStatus(500);
+        }
+
+        // if the profile addition is successful return a json object of the profile
+
+        res.json(profile)
+    })
+})
+
 module.exports = router;