Add leave group functionality

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

@@ -13,13 +13,19 @@
 
         <span id="username">{{groupProfile.name}}</span>
         <div class="button-box">
-          <button mat-icon-button
+          <button mat-icon-button *ngIf="!groupProfile.joined"
                   class="request-button"
                   matTooltip="join group" matTooltipShowDelay="500"
                   (click)="joinGroup(groupProfile)"
                   [disabled]="!groupProfile.allowedToJoinGroup">
             <mat-icon>group_add</mat-icon>
           </button>
+          <button mat-icon-button *ngIf="groupProfile.joined"
+                  class="request-button"
+                  matTooltip="leave group" matTooltipShowDelay="500"
+                  (click)="leaveGroup(groupProfile)">
+            <mat-icon>directions_run</mat-icon>
+          </button>
           <button mat-icon-button
                   class="request-button"
                   matTooltip="create event" matTooltipShowDelay="500"
@@ -65,13 +71,19 @@
               (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
           @{{groupProfile.creator.handle}}</span>
         <div class="button-box">
-          <button mat-icon-button
+          <button mat-icon-button *ngIf="!groupProfile.joined"
                   class="request-button"
                   matTooltip="join group" matTooltipShowDelay="500"
                   (click)="joinGroup(groupProfile)"
                   [disabled]="!groupProfile.allowedToJoinGroup">
             <mat-icon>group_add</mat-icon>
           </button>
+          <button mat-icon-button *ngIf="groupProfile.joined"
+                  class="request-button"
+                  matTooltip="leave group" matTooltipShowDelay="500"
+                  (click)="leaveGroup(groupProfile)">
+            <mat-icon>directions_run</mat-icon>
+          </button>
           <button mat-icon-button
                   class="request-button"
                   matTooltip="create event" matTooltipShowDelay="500"

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

@@ -186,4 +186,9 @@ export class GroupComponent implements OnInit {
       this.router.navigateByUrl('');
     });
   }
+
+  leaveGroup() {
+    this.groupService.leaveGroup(this.groupProfile.id).subscribe();
+  }
+
 }

src/app/components/social/groups/groups.component.html

@@ -13,12 +13,17 @@
     [class.selected]="group === selectedGroup">
     <mat-card-header>
       <div id="button-box">
-        <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button" *ngIf="group.deletable">
+        <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
           <mat-icon>more_vert</mat-icon>
         </button>
         <mat-menu #menu="matMenu">
-          <button mat-menu-item (click)="deleteGroup(group)">
+          <div *ngIf="group.deletable">
-            <span>delete group</span>
+            <button mat-menu-item (click)="deleteGroup(group)">
+              <span>delete group</span>
+            </button>
+          </div>
+          <button mat-menu-item (click)="leaveGroup(group)">
+            <span>leave group</span>
           </button>
         </mat-menu>
       </div>

src/app/components/social/groups/groups.component.ts

@@ -75,5 +75,9 @@ export class GroupsComponent implements OnInit {
   deleteGroup(group: GroupInfo) {
     this.groupService.deleteGroup(group.id).subscribe();
   }
+
+  leaveGroup(group: GroupInfo) {
+    this.groupService.leaveGroup(group.id).subscribe();
+  }
 }
 

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

@@ -131,4 +131,18 @@ export class GroupService extends BaseService {
       this.data.deleteGroup(groupId);
     }));
   }
+
+  public leaveGroup(groupId: number) {
+    const body = {
+      query: `mutation($groupId: ID!) {
+      leaveGroup(groupId: $groupId){ id }
+    }`, variables: {
+        groupId
+      }
+    };
+    return this.postGraphql(body)
+    .pipe(tap(response => {
+      this.data.deleteGroup(groupId);
+    }));
+  }
 }