added some information on profile page

src/app/app.module.ts

@@ -59,6 +59,7 @@ import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material/icon';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatExpansionModule} from '@angular/material/expansion';
 
 // import logo from 'src/assets/gv-new-logo.svg';
 import logo from '!!raw-loader!./gv-new-logo-white.svg';
@@ -135,7 +136,8 @@ const appRoutes: Routes = [
     MatBadgeModule,
     MatProgressSpinnerModule,
     MatDialogModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatExpansionModule
   ],
   entryComponents: [ DialogCreateGroupComponent ],
   providers: [],

src/app/components/profile/profile.component.html

@@ -13,11 +13,16 @@
                 </button>
             </mat-toolbar-row>
             <mat-toolbar-row>
-                <span id="info">{{rankname}} ({{userProfile.points}} points)</span>
+                <div id="info-box">
+                    <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
+                    <span class="info">{{userProfile.friendCount}} friends</span>
+                    <span class="info">{{userProfile.groupCount}} groups</span>
+                    <span class="info">joined on {{userProfile.joinedAt}}</span>
+                </div>
             </mat-toolbar-row>
         </mat-toolbar>
         <div id="postlist">
-            <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
+            <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>  
         </div>
         <div id="profile">
                 <br>

src/app/components/profile/profile.component.sass

@@ -27,14 +27,16 @@
   margin-top: 32px
   .mat-toolbar-row
     max-height: 40px
-  
+  #info-box
-#username
+    font-size: 14px
-  margin: 0 0.5em
+    margin-left: calc(100px + 0.5em)
-#handle
+    .info
-  font-size: 14px
+      margin-right: 3em 
-#info
+  #username
-  font-size: 14px
+    margin: 0 0.5em
-  margin-left: calc(100px + 0.5em)
+  #handle
+    font-size: 14px
+
 
 .mat-table
   width: 100%

src/app/models/user.ts

@@ -12,6 +12,9 @@ export class User {
   points: number;
   level: number;
   profilePicture: string;
+  joinedAt: string;
+  friendCount: number;
+  groupCount: number;
 
   darkmode = false;
 

src/app/services/profile/profile.service.ts

@@ -48,6 +48,8 @@ export class ProfileService {
         points
         level
         friendCount
+        groupCount
+        joinedAt
         friends{
           id
         }
@@ -80,6 +82,8 @@ export class ProfileService {
         points
         level
         friendCount
+        groupCount
+        joinedAt
         friends{
           id
         }
@@ -116,6 +120,11 @@ export class ProfileService {
       profile.handle = response.data.getUser.handle;
       profile.points = response.data.getUser.points;
       profile.level = response.data.getUser.level;
+      profile.friendCount = response.data.getUser.friendCount;
+      profile.groupCount = response.data.getUser.groupCount;
+      const temp = new Date(Number(response.data.getUser.joinedAt));
+      const date = temp.toLocaleString('en-GB');
+      profile.joinedAt = date;
       for (const post of response.data.getUser.posts) {
         const id: number = post.id;
         const content: string = post.content;