cypress/integration/groups/groups.spec.js

@@ -41,14 +41,19 @@ context('Groups', () => {
     cy.get('.m-groups-save > button').contains('Create').click();
     cy.route("POST", "**/api/v1/groups/group/*/banner*").as("postBanner");
 
-    cy.wait('@postGroup').then((xhr) => {
-      expect(xhr.status).to.equal(200);
-      expect(xhr.response.body.status).to.equal('success');
-    }).wait('@postBanner').then((xhr) => {
-      expect(xhr.status).to.equal(200);
-      expect(xhr.response.body.status).to.equal('success');
+    // get current groups count of sidebar
+    cy.get('.m-groupSidebarMarkers__list').children().its('length').then((size) => { 
+      cy.wait('@postGroup').then((xhr) => {
+        expect(xhr.status).to.equal(200);
+        expect(xhr.response.body.status).to.equal('success');
+      }).wait('@postBanner').then((xhr) => {
+        expect(xhr.status).to.equal(200);
+        expect(xhr.response.body.status).to.equal('success');
+      });
+
+      //check count changed.
+      cy.get('.m-groupSidebarMarkers__list').children().should('have.length', size + 1);
     });
-
     cy.get('.m-groupInfo__name').contains('test');
     cy.get('.m-groupInfo__description').contains('This is a test');
 
@@ -73,11 +78,9 @@ context('Groups', () => {
   })
 
   it('should be able to toggle conversation and comment on it', () => {
-
-    cy.get("m-group--sidebar-markers li:contains('test group')")
-      .first()
-      .click();
-
+    cy.get('.m-groupSidebarMarkers__list').children().its('length').then((size) => { 
+      cy.get(`m-group--sidebar-markers li:nth-child(${size - 1})`).click();
+    });
 
     // toggle the conversation
     cy.get('.m-groupGrid__right').should('be.visible');
@@ -98,9 +101,9 @@ context('Groups', () => {
   })
 
   it('should post an activity inside the group and record the view when scrolling', () => {
-    cy.get("m-group--sidebar-markers li:contains('test group')")
-      .first()
-      .click();
+    cy.get('.m-groupSidebarMarkers__list').children().its('length').then((size) => { 
+      cy.get(`m-group--sidebar-markers li:nth-child(${size - 1})`).click();
+    });
 
     cy.server();
     cy.route("POST", "**/api/v2/analytics/views/activity/*").as("view");
@@ -128,14 +131,18 @@ context('Groups', () => {
   });
 
   it('should delete a group', () => {
-    cy.get('m-group--sidebar-markers li:nth-child(3)').contains('test group').click();
+    cy.get('.m-groupSidebarMarkers__list').children().its('length').then((size) => { 
+      cy.get(`m-group--sidebar-markers li:nth-child(${size - 1})`).click();
 
-    // cleanup
-    cy.get('minds-groups-settings-button > button').click();
-    cy.get('minds-groups-settings-button ul.minds-dropdown-menu > li:nth-child(8)').contains('Delete Group').click();
-    cy.get('minds-groups-settings-button m-modal .mdl-button--raised').contains('Confirm').click();
+      // cleanup
+      cy.get('minds-groups-settings-button > button').click();
+      cy.contains('Delete Group').click();
+      cy.contains('Confirm').click();
 
-    cy.location('pathname').should('eq', '/groups/member');
+      cy.location('pathname').should('eq', '/groups/member');
+
+      cy.get('.m-groupSidebarMarkers__list').children().should('have.length', size - 1);
+    });
   })
 
 })

src/app/common/components/avatar/avatar.ts

@@ -130,6 +130,10 @@ export class MindsAvatar {
    * @returns true if the object guid matches the currently logged in user guid
    */
   isOwnerAvatar(): boolean {
-    return this.minds.user && this.object.guid === this.minds.user.guid;
+    return (
+      this.minds.user &&
+      this.object &&
+      this.object.guid === this.minds.user.guid
+    );
   }
 }

src/app/modules/groups/create/create.ts

@@ -37,7 +37,8 @@ export class GroupsCreator {
     public session: Session,
     public service: GroupsService,
     public router: Router,
-    public title: MindsTitle
+    public title: MindsTitle,
+    private groupsService: GroupsService
   ) {
     this.title.setTitle('Create Group');
   }
@@ -101,6 +102,7 @@ export class GroupsCreator {
             }
           )
           .then(() => {
+            this.groupsService.updateMembership(true, guid);
             this.router.navigate(['/groups/profile', guid]);
           });
       })

src/app/modules/groups/groups-service.ts

@@ -3,6 +3,14 @@ import { Client, Upload } from '../../services/api';
 import { UpdateMarkersService } from '../../common/services/update-markers.service';
 import { BehaviorSubject } from 'rxjs';
 
+export interface MembershipUpdate {
+  show: boolean;
+  guid: string;
+}
+
+/**
+ * Service for groups.
+ */
 export class GroupsService {
   private base: string = 'api/v1/groups/';
 
@@ -12,6 +20,14 @@ export class GroupsService {
   group = new BehaviorSubject(null);
   $group = this.group.asObservable();
 
+  // Observable handling membership state.
+  public membershipUpdate$: BehaviorSubject<
+    MembershipUpdate
+  > = new BehaviorSubject({
+    show: null,
+    guid: null,
+  });
+
   static _(
     client: Client,
     upload: Upload,
@@ -89,6 +105,7 @@ export class GroupsService {
     return this.clientService
       .delete(`${this.base}group/${group.guid}`)
       .then((response: any) => {
+        this.updateMembership(false, group.guid);
         return !!response.done;
       })
       .catch(e => {
@@ -96,6 +113,18 @@ export class GroupsService {
       });
   }
 
+  /**
+   * Emits membership changes to subscribed components.
+   * @param { boolean } - whether or not observable should be shown or hidden.
+   * @param { string } - the GUID of the observable.
+   */
+  updateMembership(show: boolean, guid: string): void {
+    this.membershipUpdate$.next({
+      show: show,
+      guid: guid,
+    });
+  }
+
   // Membership
 
   join(group: any, target: string = null) {
@@ -107,6 +136,7 @@ export class GroupsService {
 
     return this.clientService.put(endpoint).then((response: any) => {
       if (response.done) {
+        this.updateMembership(true, group.guid);
         return true;
       }
 
@@ -123,6 +153,7 @@ export class GroupsService {
 
     return this.clientService.delete(endpoint).then((response: any) => {
       if (response.done) {
+        this.updateMembership(false, group.guid);
         return true;
       }
 

src/app/modules/groups/sidebar-markers/sidebar-markers.component.ts

@@ -11,6 +11,7 @@ import { startWith, map, tap, throttle } from 'rxjs/operators';
 import { UpdateMarkersService } from '../../../common/services/update-markers.service';
 import { Client } from '../../../services/api';
 import { Session } from '../../../services/session';
+import { GroupsService } from '../groups-service';
 
 @Component({
   selector: 'm-group--sidebar-markers',
@@ -31,6 +32,7 @@ export class GroupsSidebarMarkersComponent {
     private client: Client,
     public session: Session,
     private updateMarkers: UpdateMarkersService,
+    private groupsService: GroupsService,
     private cd: ChangeDetectorRef
   ) {}
 
@@ -38,6 +40,25 @@ export class GroupsSidebarMarkersComponent {
     this.onResize();
     await this.load(true);
     this.listenForMarkers();
+    this.listenForMembershipUpdates();
+  }
+
+  /**
+   * Listens and responds to membership updates emited from groupsService.
+   */
+  listenForMembershipUpdates(): void {
+    this.groupsService.membershipUpdate$.subscribe(update => {
+      if (!update.guid) {
+        return;
+      }
+      if (update.show) {
+        this.groupsService.load(update.guid).then(group => {
+          this.groups.unshift(group);
+        });
+        return;
+      }
+      this.groups = this.groups.filter(group => group.guid !== update.guid);
+    });
   }
 
   listenForMarkers() {

src/app/modules/videochat/videochat.component.ts

@@ -39,12 +39,15 @@ export class VideoChatComponent implements OnInit {
           this.isActive = false;
         }
         this.cd.markForCheck();
-        this.cd.detectChanges();
+        if (!this.cd['destroyed']) {
+          this.cd.detectChanges();
+        }
       }
     );
   }
 
   ngOnDestroy() {
+    this.cd.detach();
     this.service.deactivate();
     this.isActive$.unsubscribe();
   }