added join and leave Event

src/app/components/feed/feed.component.ts

@@ -36,22 +36,12 @@ export class FeedComponent implements OnInit {
     this.data.currentUserInfo.subscribe(user => {
       this.user = user;
       this.loggedIn = user.loggedIn;
-      if (this.loggedIn) {
-        this.userId = user.userID;
-        this.feedService.getAllPostsRawByUserId(this.userId).subscribe(response => {
-          this.loading = false;
-          this.feedNew = this.feedService.renderAllPosts(response.json());
-          this.parentSelectedPostList = this.feedNew;
-          this.feedMostLiked = this.feedNew;
-        });
-      } else {
         this.feedService.getAllPostsRaw().subscribe(response => {
           this.loading = false;
           this.feedNew = this.feedService.renderAllPosts(response.json());
           this.parentSelectedPostList = this.feedNew;
           this.feedMostLiked = this.feedNew;
         });
-      }
     });
 
   }
@@ -66,7 +56,7 @@ export class FeedComponent implements OnInit {
   }
 
   showNew() {
-    this.feedService.getAllPostsRawByUserId(this.userId).subscribe(response => {
+    this.feedService.getAllPostsRaw().subscribe(response => {
       this.feedNew = this.feedService.renderAllPosts(response.json());
       this.parentSelectedPostList = this.feedNew; });
     this.viewNew = true;
@@ -74,7 +64,7 @@ export class FeedComponent implements OnInit {
   }
 
   showMostLiked() {
-    this.feedService.getAllPostsRawByUserId(this.userId).subscribe(response => {
+    this.feedService.getAllPostsRaw().subscribe(response => {
       this.feedMostLiked = this.feedService.renderAllPosts(response.json());
       this.parentSelectedPostList = this.feedMostLiked; });
     this.viewNew = false;
@@ -83,7 +73,7 @@ export class FeedComponent implements OnInit {
 
 
   refresh($event) {
-    this.feedService.getAllPostsRawByUserId(this.userId).subscribe(response => {
+    this.feedService.getAllPostsRaw().subscribe(response => {
       this.parentSelectedPostList = this.feedService.renderAllPosts(response.json());
     });
   }

src/app/components/feed/postlist/postlist.component.ts

@@ -23,13 +23,17 @@ export class PostlistComponent implements OnInit {
     this.feedService.upvote(pPost.id).subscribe(response => {
       // this.voteEvent.emit(true);
       pPost.userVote = response.json().data.vote;
+      pPost.upvotes = response.json().data.vote.post.upvotes;
+      pPost.downvotes = response.json().data.vote.post.downvotes;
     });
   }
 
   voteDown(pPost: Post) {
     this.feedService.downvote(pPost.id).subscribe(response => {
       // this.voteEvent.emit(true);
-      pPost.userVote = response.json().data.vote;
+      pPost.userVote = response.json().data.vote.post.userVote;
+      pPost.upvotes = response.json().data.vote.post.upvotes;
+      pPost.downvotes = response.json().data.vote.post.downvotes;
     });
   }
 

src/app/components/group/group.component.html

@@ -4,7 +4,7 @@
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
-                <p id="username">{{groupProfile.name}}</p>
+                <span id="username">{{groupProfile.name}}</span>
                 <div class="button-box">
                     <button mat-icon-button 
                         class="request-button" 
@@ -24,7 +24,7 @@
             </mat-toolbar-row>
             <mat-toolbar-row>
                 <div class="info-box">
-                    <span id="handle">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
+                    <span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
                 </div>
             </mat-toolbar-row>
             <mat-toolbar-row>
@@ -77,9 +77,21 @@
                   <mat-card-header>
                     <mat-card-title>{{event.name}}</mat-card-title>
                     <mat-card-subtitle >{{event.date}}</mat-card-subtitle>
-                    <!--<div class="icon-box">
-                      <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
-                    </div>-->
+                    <div class="button-box">
+                      <button mat-icon-button class="request-button" 
+                        matTooltip="join event" matTooltipShowDelay="500"
+                        (click)="joinEvent(event)" 
+                        [disabled]="event.joined">
+                        <mat-icon *ngIf="event.joined" color="primary">event_available</mat-icon>
+                        <mat-icon *ngIf="!event.joined">event_available</mat-icon>
+                      </button>
+                      <button mat-icon-button class="request-button" 
+                        matTooltip="leave event" matTooltipShowDelay="500"
+                        (click)="leaveEvent(event)" 
+                        [disabled]="!event.joined">
+                        <mat-icon>event_busy</mat-icon>
+                      </button>
+                    </div>
                   </mat-card-header>
                 </mat-card>
               </div>
@@ -98,7 +110,7 @@
                     <div mat-card-avatar class="profile-picture" (click)="showUserProfile(user)"></div>
                     <mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
                     <mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
-                    <div class="icon-box">
+                    <div class="button-box">
                       <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
                     </div>
                   </mat-card-header>

src/app/components/group/group.component.sass

@@ -22,12 +22,10 @@ $mat-card-header-size: 100px !default
   margin: 0 auto
   width: 100%
   max-width: 690px
-  .icon-box
-    text-align: right
-    width: 100%
+
 .button-box
-  width: 100%
   text-align: right
+  margin-left: auto
 .request-button
   margin: auto 0
 #toolbar
@@ -41,6 +39,7 @@ $mat-card-header-size: 100px !default
       margin-right: 3em 
   #username
     margin: 0 0.5em
+    overflow: auto
   #handle
     font-size: 14px
   .profile-picture
@@ -61,7 +60,6 @@ $mat-card-header-size: 100px !default
   outline: none
   user-select: none
   /deep/ .mat-card-header-text
-    width: 1000%
     margin: 0
     margin-left: 16px
   .mat-card-subtitle

src/app/components/group/group.component.ts

@@ -6,6 +6,7 @@ import { RequestService } from 'src/app/services/request/request.service';
 import { DatasharingService } from '../../services/datasharing.service';
 import { GroupService } from 'src/app/services/group/group.service';
 import { Group } from 'src/app/models/group';
+import { Event } from 'src/app/models/event';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 
 // DIALOG COMPONENT to create events
@@ -110,6 +111,20 @@ export class GroupComponent implements OnInit {
     this.requestService.joinGroup(group);
   }
 
+  public joinEvent(event: Event) {
+    this.groupService.joinEvent(event.id).subscribe(response => {
+      const pEvent = response.json().data.joinEvent;
+      event.joined = pEvent.joined;
+    });
+  }
+
+  public leaveEvent(event: Event) {
+    this.groupService.leaveEvent(event.id).subscribe(response => {
+      const pEvent = response.json().data.leaveEvent;
+      event.joined = pEvent.joined;
+    });
+  }
+
   public showUserProfile(user: User) {
     this.router.navigate(['profile/' + user.userID]);
   }

src/app/components/profile/profile.component.ts

@@ -56,11 +56,7 @@ export class ProfileComponent implements OnInit {
     this.data.currentUserInfo.subscribe(user => {
       this.self = user;
     });
-    if (this.self.loggedIn) {
-      this.profileService.getUserDataBySelfId(this.id, this.self.userID.toString());
-    } else {
     this.profileService.getUserData(this.id);
-    }
     this.profileService.proflile.subscribe(response => {
         if (response) {
           this.userProfile = response;

src/app/models/event.ts

@@ -1,11 +1,13 @@
 export class Event {
-    id: number;
+    id: string;
     name: string;
     date: string;
+    joined: boolean;
 
-    constructor(pId: number, pName: string, pdate: string) {
+    constructor(pId: string, pName: string, pdate: string, pjoined: boolean) {
         this.id = pId;
         this.name = pName;
         this.date = pdate;
+        this.joined = pjoined;
     }
 }

src/app/services/feed/feed.service.ts

@@ -29,33 +29,33 @@ export class FeedService {
   }
 
   public upvote(pPostID: number): any {
-    const url = environment.graphQLUrl;
-
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
     const body = {query: `mutation($postId: ID!) {
-        vote(postId: $postId, type: UPVOTE)
+        vote(postId: $postId, type: UPVOTE) {
+          post{userVote upvotes downvotes}
+        }
       }`, variables: {
           postId: pPostID
       }};
 
-    return this.http.post(url, body);
+    return this.http.post(environment.graphQLUrl, body);
   }
 
   public downvote(pPostID: number): any {
-    const url = environment.graphQLUrl;
-
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
     const body = {query: `mutation($postId: ID!) {
-        vote(postId: $postId, type: DOWNVOTE)
+        vote(postId: $postId, type: DOWNVOTE) {
+          post{userVote upvotes downvotes}
+        }
       }`, variables: {
           postId: pPostID
       }};
 
-    return this.http.post(url, body);
+    return this.http.post(environment.graphQLUrl, body);
   }
 
   public deletePost(pPostID: number): any {
@@ -83,74 +83,32 @@ export class FeedService {
       });
     return this.posts;
   }
-  public getAllPostsById(userId: number): Array<Post> {
-    const url = environment.graphQLUrl;
-
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-
-    this.http.post(url, this.getBodyForGetAllPostsByUserId(userId))
-    .subscribe(response => {
-        this.posts = this.renderAllPosts(response.json());
-      });
-    return this.posts;
-  }
 
   public getAllPostsRaw(): any {
-    const url = environment.graphQLUrl;
-
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
-
-    return this.http.post(url, this.getBodyForGetAllPosts());
+    return this.http.post(environment.graphQLUrl, this.getBodyForGetAllPosts());
   }
 
-  public getAllPostsRawByUserId(userId: number): any {
-    const url = environment.graphQLUrl;
-
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-
-    return this.http.post(url, this.getBodyForGetAllPostsByUserId(userId));
-  }
-
-  getBodyForGetAllPostsByUserId(pUserId: number) {
-    const body =  {query: `query ($userId: ID!) {
+  getBodyForGetAllPosts() {
+    const body =  {query: `{
         getPosts (first: 1000, offset: 0) {
           id,
           content,
           htmlContent,
           upvotes,
           downvotes,
-          userVote(userId: $userId),
-          deletable(userId: $userId)
+          userVote,
+          deletable
           author{
             name,
             handle,
             id},
           createdAt}
       }`, variables: {
-        userId: pUserId
       }};
       return body;
   }
-  getBodyForGetAllPosts() {
-    const body =  {query: `query {
-        getPosts (first: 1000, offset: 0) {
-          id,
-          content,
-          htmlContent,
-          upvotes,
-          downvotes,
-          author{
-            name,
-            handle,
-            id},
-          createdAt}
-      }`
-      };
-      return body;
-  }
 
   public renderAllPosts(pResponse: any): Array<Post> {
     const posts = new Array<Post>();

src/app/services/group/group.service.ts

@@ -35,7 +35,7 @@ export class GroupService {
           creator{id name handle}
           admins{id name handle}
           members{id name handle}
-          events{id name dueDate}
+          events{id name dueDate joined}
       }
     }`, variables: {
       groupId: id
@@ -69,7 +69,7 @@ export class GroupService {
       for (const event of response.data.getGroup.events) {
         const temp = new Date(Number(event.dueDate));
         const date = temp.toLocaleString('en-GB');
-        group.events.push(new Event(event.id, event.name, date));
+        group.events.push(new Event(event.id, event.name, date, event.joined));
       }
       return group;
     }
@@ -84,6 +84,7 @@ export class GroupService {
           id
           name
           dueDate
+          joined
         }
       }`, variables: {
           name: name,
@@ -95,7 +96,36 @@ export class GroupService {
       const event = response.json().data.createEvent;
       const temp = new Date(Number(event.dueDate));
       const pdate = temp.toLocaleString('en-GB');
-      this.group.next(this.renderGroup(this.group.getValue().events.push(new Event(event.id, event.name, pdate))));
+      this.group.next(
+        this.renderGroup(this.group.getValue().events.push(new Event(event.id, event.name, pdate, event.joined)))
+      );
     });
   }
+
+  public joinEvent(eventId: string) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    const body = {query: `mutation($eventId: ID!) {
+      joinEvent(eventId: $eventId) {
+        joined
+      }
+    }`, variables: {
+          eventId: eventId
+      }};
+    return this.http.post(environment.graphQLUrl, body);
+  }
+
+  public leaveEvent(eventId: string) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    const body = {query: `mutation($eventId: ID!) {
+      leaveEvent(eventId: $eventId) {
+        joined
+      }
+    }`, variables: {
+          eventId: eventId
+      }};
+    return this.http.post(environment.graphQLUrl, body);
+  }
+
 }

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

@@ -26,18 +26,6 @@ export class ProfileService {
     });
   }
 
-  public getUserDataBySelfId(userId: string, selfId: string) {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-    // return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)));
-    this.http.post(environment.graphQLUrl, this.buildGetProfileJsonBySelfId(userId, selfId)).subscribe(result => {
-      // push onto subject
-      this.proflile.next(this.renderProfile(result.json()));
-      return this.proflile;
-    });
-  }
-
-
   public buildGetProfileJson(id: string): any {
     const body =  {query: `query($userId: ID) {
       getUser(userId:$userId){
@@ -59,42 +47,8 @@ export class ProfileService {
           htmlContent,
           upvotes,
           downvotes,
-          author{
-            name,
-            handle,
-            id},
-          createdAt
-        }
-      }
-    }`, variables: {
-        userId: id
-      }};
-    return body;
-  }
-
-  public buildGetProfileJsonBySelfId(id: string, selfId: string): any {
-    const body =  {query: `query($userId: ID, $selfId: ID!) {
-      getUser(userId:$userId){
-        id
-        handle
-        name
-        profilePicture
-        points
-        level
-        friendCount
-        groupCount
-        joinedAt
-        friends{
-          id
-        }
-        posts{
-          id,
-          content,
-          htmlContent,
-          upvotes,
-          downvotes,
-          userVote(userId: $selfId),
-          deletable(userId: $selfId)
+          userVote,
+          deletable,
           author{
             name,
             handle,
@@ -104,7 +58,6 @@ export class ProfileService {
       }
     }`, variables: {
         userId: id,
-        selfId: selfId
       }};
     return body;
   }