Issue #SH-38, #SH-37, #SH-418 fix: removed unused imports, added type… … (#4539)

* Issue #SH-37 fix: user can add members to group

* Issue #SH-37 fix: user can add members to group

* Issue #SB-19457 fix: changes text msg

* Issue #SH-37 fix: user can add members to group

* Issue #SH-37 fix: user can add members to group

* Issue #SH-38, #SH-37, #SH-418 fix: removed unused imports, added types and fixed missing scenarios

* Issue #SH-38, #SH-37, #SH-418 fix: removed unused imports, added types and fixed missing scenarios

* Issue #SH-38, #SH-37, #SH-418 fix: removed unused imports, added types and fixed missing scenarios

* Issue #SH-38, #SH-37, #SH-418 fix: removed unused imports, added types and fixed missing scenarios

* Issue #SH-38, #SH-37, #SH-418 fix: removed unused imports, added types and fixed missing scenarios

* Issue #SH-38, #SH-37, #SH-418 fix: removed unused imports, added types and fixed missing scenarios

* Issue #SH-38, #SH-37, #SH-418 fix: removed unused impo...

src/app/client/src/app/app.routing.ts

-import { MY_GROUPS } from './modules/groups/components/routerLinks';
+import { MY_GROUPS } from './modules/groups';
 import { NgModule } from '@angular/core';
 import { ErrorPageComponent, AuthGuard } from '@sunbird/core';
 import { RouterModule, Routes } from '@angular/router';

src/app/client/src/app/modules/groups/components/activity/activity-list/activity-list.component.ts

@@ -3,7 +3,7 @@ import { ConfigService } from '../../../../shared/services/config/config.service
 import { fromEvent, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ResourceService } from '../../../../shared/services/resource/resource.service';
-import { ACTIVITY_DETAILS, MY_GROUPS } from '../../routerLinks';
+import { ACTIVITY_DETAILS } from './../../../interfaces';
 import { Router, ActivatedRoute } from '@angular/router';
 
 export interface IActivity {

src/app/client/src/app/modules/groups/components/add-member/add-member.component.spec.ts

@@ -40,7 +40,18 @@ describe('AddMemberComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AddMemberComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+
+    component.membersList = [{identifier: '1', initial: 'J', title: 'John Doe', isAdmin: true, isMenu: false,
+    indexOfMember: 1, isCreator: true, name: 'John Doe', userId: '1', role: 'admin'}];
+
+    component.verifiedMember = {identifier: '2', initial: 'T', title: 'Test User', isAdmin: false, isMenu: false,
+    indexOfMember: 2, isCreator: false, name: 'Test User', userId: '2', role: 'member'};
+
+    component.groupData = {id: '123', name: 'Test', members: [{userId: '1', role: 'admin', name: 'user'}], createdBy: '1'};
+
+    component.memberId = '2';
+
+    // fixture.detectChanges();
   });
 
   it('should create', () => {
@@ -51,14 +62,14 @@ describe('AddMemberComponent', () => {
     expect(component['groupsService'].addFieldsToMember).toHaveBeenCalled();
   });
 
-  it ('should reset values', () => {
+  it('should reset values', () => {
     component.reset();
     expect(component.showLoader).toBeFalsy();
     expect(component.isInvalidUser).toBeFalsy();
     expect(component.isVerifiedUser).toBeFalsy();
   });
 
-  it ('should reset form values', () => {
+  it('should reset form values', () => {
     component.resetValue();
     expect(component.memberId).toEqual('');
     expect(component.showLoader).toBeFalsy();
@@ -66,18 +77,13 @@ describe('AddMemberComponent', () => {
     expect(component.isVerifiedUser).toBeFalsy();
   });
 
-  it ('should return is member is already present', () => {
-    component.memberId = '2';
-    component.membersList = [{userId: '1', name: 'user'}];
+  it('should return is member is already present', () => {
     spyOn(component, 'isExistingMember').and.returnValue(true);
     component.verifyMember();
     expect(component.isExistingMember).toHaveBeenCalled();
   });
 
-  it ('should return is member is not already present', () => {
-    component.groupData = {name: 'Test', members: [{userId: '1', role: 'admin', name: 'user'}], createdBy: '1'};
-    component.memberId = '2';
-    component.membersList = [{userId: '1', name: 'user'}];
+  it('should return is member is not already present', () => {
     spyOn(component['userService'], 'getUserData').and.returnValue(of ({result: {response: {identifier: '2', name: 'user 2'}}}));
     spyOn(component, 'isExistingMember').and.returnValue(false);
     component.verifyMember();
@@ -85,26 +91,22 @@ describe('AddMemberComponent', () => {
     expect(component['userService'].getUserData).toHaveBeenCalledWith('2');
   });
 
-  it ('should throw error', () => {
+  it('should throw error', () => {
     component.memberId = '1';
-    component.membersList = [{userId: '1', name: 'user'}];
     spyOn(component['toasterService'], 'error');
+    spyOn(component, 'resetValue');
     const value = component.isExistingMember();
     expect(component['toasterService'].error).toHaveBeenCalledWith(resourceBundle.messages.emsg.m007);
     expect(value).toBeTruthy();
+    expect(component.resetValue).toHaveBeenCalled();
   });
 
-  it ('should not throw error', () => {
-    component.memberId = '2';
-    component.membersList = [{userId: '1', name: 'user'}];
+  it('should not throw error', () => {
     const value = component.isExistingMember();
     expect(value).toBeFalsy();
   });
 
-  it ('should get getGroupById()', () => {
-    component.memberId = '2';
-    component.membersList = [{}];
-    component.groupData = {id: '123'};
+  it('should get getGroupById()', () => {
     const response = {id: '123', name: 'Test', members:
     [{userId: '2', role: 'member', name: 'user'}, {userId: '1', role: 'admin', name: 'user 2'}]};
     spyOn(component['groupsService'], 'addFieldsToMember').and.returnValue([response]);
@@ -115,44 +117,35 @@ describe('AddMemberComponent', () => {
     });
     });
 
-  it ('should  add member to group', () => {
-    component.memberId = '2';
-    component.groupData = {id: '123'};
+  it('should  add member to group', () => {
     component.membersList = [];
-    component.verifiedMember = {title: 'user 2'};
     spyOn(component, 'isExistingMember').and.returnValue(false);
     spyOn(component['groupsService'], 'addMemberById').and.returnValue(of ({}));
     spyOn(component['toasterService'], 'success');
     component.addMemberToGroup();
     expect(component.isExistingMember).toHaveBeenCalled();
-    component['groupsService'].addMemberById('123', [{userId: '2', role: 'member'}]).subscribe(data => {
-    expect(component['toasterService'].success).toHaveBeenCalledWith('user 2 added to group successfully');
+    component['groupsService'].addMemberById('123', {members: [{userId: '2', role: 'member'}]}).subscribe(data => {
+    expect(component['toasterService'].success).toHaveBeenCalledWith('Test User added to group successfully');
     });
   });
 
-  it ('should throw error while adding member to group id there is error {}', () => {
-    component.memberId = '2';
-    component.verifiedMember = {title: 'user 2'};
-    component.groupData = {id: '123'};
+  it('should throw error while adding member to group id there is error {}', () => {
     component.membersList = [];
     spyOn(component['groupsService'], 'addMemberById').and.returnValue(of ({errors: ['2']}));
     spyOn(component, 'showErrorMsg');
     component.addMemberToGroup();
-    component['groupsService'].addMemberById('123', [{userId: '2', role: 'member'}]).subscribe(data => {
+    component['groupsService'].addMemberById('123', {members: [{userId: '2', role: 'member'}]}).subscribe(data => {
       expect(data).toEqual({errors: ['2']});
       expect(component.showErrorMsg).toHaveBeenCalledWith(data);
     });
   });
 
-  it ('should throw error while adding member to group', () => {
-    component.memberId = '2';
-    component.verifiedMember = {title: 'user 2'};
-    component.groupData = {id: '123'};
+  it('should throw error while adding member to group', () => {
     component.membersList = [];
     spyOn(component['groupsService'], 'addMemberById').and.returnValue(throwError ({}));
     spyOn(component, 'showErrorMsg');
     component.addMemberToGroup();
-    component['groupsService'].addMemberById('123', [{userId: '2', role: 'member'}]).subscribe(data => {}, err => {
+    component['groupsService'].addMemberById('123', {members: [{userId: '2', role: 'member'}]}).subscribe(data => {}, err => {
       expect(component.showErrorMsg).toHaveBeenCalled();
     });
   });

src/app/client/src/app/modules/groups/components/add-member/add-member.component.ts

@@ -3,7 +3,7 @@ import { UserService } from '@sunbird/core';
 import { ResourceService, ToasterService } from '@sunbird/shared';
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import * as _ from 'lodash-es';
-import { IGroupMember } from '../../interfaces';
+import { IGroupMember, IGroupCard, IMember } from '../../interfaces';
 import { GroupsService } from '../../services';
 import { Subject } from 'rxjs';
 @Component({
@@ -14,14 +14,14 @@ import { Subject } from 'rxjs';
 export class AddMemberComponent implements OnInit {
   showModal = false;
   instance: string;
-  membersList = [];
-  groupData;
+  membersList: IGroupMember[] ;
+  groupData: IGroupCard;
   showLoader = false;
   isVerifiedUser = false;
   memberId: string;
   config = { size: 'medium', isBold: true, isSelectable: false, view: 'horizontal' };
   isInvalidUser = false;
-  verifiedMember: {};
+  verifiedMember: IGroupMember;
   public unsubscribe$ = new Subject<void>();
   @Output() members = new EventEmitter<any>();
 
@@ -50,7 +50,7 @@ export class AddMemberComponent implements OnInit {
   verifyMember() {
     this.showLoader = true;
     if (!this.isExistingMember()) {
-      this.userService.getUserData(this.memberId).subscribe(member => {
+      this.userService.getUserData(this.memberId).pipe(takeUntil(this.unsubscribe$)).subscribe(member => {
         const user = this.groupsService.addFields(_.get(member, 'result.response'));
         this.verifiedMember = _.pick(user, ['title', 'initial', 'identifier', 'isAdmin', 'isCreator']);
         this.showLoader = false;
@@ -74,8 +74,8 @@ export class AddMemberComponent implements OnInit {
 
   addMemberToGroup() {
     if (!this.isExistingMember()) {
-      const member = [{ userId: this.memberId, role: 'member' }];
-      this.groupsService.addMemberById(this.groupData.id, member).subscribe(response => {
+      const member: IMember = {members: [{ userId: this.memberId, role: 'member' }]};
+      this.groupsService.addMemberById(this.groupData.id, member).pipe(takeUntil(this.unsubscribe$)).subscribe(response => {
         this.getUpdatedGroupData();
         const value = _.isEmpty(response.errors) ? this.toasterService.success((this.resourceService.messages.smsg.m004).replace('{memberName}',
           this.verifiedMember['title'])) : this.showErrorMsg(response);

src/app/client/src/app/modules/groups/components/create-edit-group/create-edit-group.component.html

@@ -35,7 +35,7 @@
         [ngClass]="{'is-invalid' : isFieldValid('groupToc')}">
         <span class="font-weight-normal fnormal">{{resourceService?.frmelmnts?.lbl?.agreeGroupToc | interpolate:'{instance}': instance }} <a href="{{url}}/term-of-use.html " target="_blank" class="sb-color-primary">{{resourceService?.frmelmnts?.lbl?.termsOfService}}</a></span>
       </label>
-      <small class="line-height-normal d-block message sb-color-error font-weight-bold mt-8 pl-20" *ngIf="isFieldValid('groupToc')">{{resourceService?.frmelmnts?.lbl?.groupToc}}</small>
+      <small class="line-height-normal d-block message sb-color-error font-weight-bold mt-8 pl-20" *ngIf="isFieldValid('groupToc')">{{resourceService?.frmelmnts?.lbl?.groupToc | interpolate:'{instance}': instance}}</small>
     </div>
     </form>
   

src/app/client/src/app/modules/groups/components/create-edit-group/create-edit-group.component.ts

-import { ActivatedRoute } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { ActivatedRoute, Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
 import { ResourceService, ToasterService, NavigationHelperService } from '@sunbird/shared';
-import { Component, OnInit, Output, EventEmitter, ViewChild, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import { GroupsService } from '../../services';
 import { IGroup } from '../../interfaces';
 import * as _ from 'lodash-es';
@@ -14,21 +15,19 @@ import * as _ from 'lodash-es';
 export class CreateEditGroupComponent implements OnInit, OnDestroy {
   @ViewChild('createGroupModal') createGroupModal;
   groupForm: FormGroup;
-  public formFieldOptions = [];
-  public selectedOption: any = {};
-  private unsubscribe: Subscription;
-  groupDetails;
+  groupDetails: {};
   groupId: string;
   url = document.location.origin;
   instance: string;
+  private unsubscribe$ = new Subject<void>();
 
   constructor(public resourceService: ResourceService, private toasterService: ToasterService,
     private fb: FormBuilder, public groupService: GroupsService, private navigationHelperService: NavigationHelperService,
-    private activatedRoute: ActivatedRoute) { }
+    private activatedRoute: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
     this.instance = _.upperCase(this.resourceService.instance);
-    this.groupId = _.get(this.activatedRoute, 'snapshot.params.groupId');
+    this.groupId = _.get(this.activatedRoute, 'parent.snapshot.params.groupId');
     this.groupDetails = this.groupId ? this.groupService.groupData : {};
     this.initializeForm();
   }
@@ -52,7 +51,7 @@ export class CreateEditGroupComponent implements OnInit, OnDestroy {
   onSubmitForm() {
     if (this.groupForm.valid) {
       const request: IGroup = _.omit(this.groupForm.value, 'groupToc');
-      this.groupService.createGroup(request).subscribe(group => {
+      this.groupService.createGroup(request).pipe(takeUntil(this.unsubscribe$)).subscribe(group => {
         if (group) {
           this.toasterService.success(this.resourceService.messages.smsg.m001);
         }
@@ -74,7 +73,7 @@ export class CreateEditGroupComponent implements OnInit, OnDestroy {
     if (this.groupForm.valid) {
       const updatedForm = _.omit(this.groupForm.value, 'groupToc');
       updatedForm.status = _.get(this.groupDetails, 'status');
-      this.groupService.updateGroup(this.groupId, updatedForm).subscribe(group => {
+      this.groupService.updateGroup(this.groupId, updatedForm).pipe(takeUntil(this.unsubscribe$)).subscribe(group => {
           this.toasterService.success(this.resourceService.messages.smsg.m003);
           this.closeModal();
       }, err => {
@@ -104,13 +103,13 @@ export class CreateEditGroupComponent implements OnInit, OnDestroy {
     if (this.createGroupModal && this.createGroupModal.deny) {
       this.createGroupModal.deny();
     }
+    this.groupService.emitCloseForm();
   }
 
   ngOnDestroy() {
-    if (this.unsubscribe) {
-      this.unsubscribe.unsubscribe();
-    }
     this.close();
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
   }
 
 }

src/app/client/src/app/modules/groups/components/ftu-popup/ftu-popup.component.html

@@ -35,7 +35,7 @@
         </div>
         <div ngxSlickItem  class="item-help">
           <h6>{{ resourceService?.frmelmnts?.lbl?.step3 }}</h6>
-          <p class="fnormal mt-8 mb-16">{{ resourceService?.frmelmnts?.lbl?.SeetheInstanceIDhere }}</p>
+          <p class="fnormal mt-8 mb-16">{{ resourceService?.frmelmnts?.lbl?.SeetheInstanceIDhere | interpolate:'{instance}': instance }}</p>
             <img src="./assets/images/step_3.png" alt="">
           </div>
       </ngx-slick>

src/app/client/src/app/modules/groups/components/group-details/group-details.component.html

-<div>
+<div *ngIf="groupData">
   <app-group-header [groupData]="groupData"></app-group-header>
   <div class="ui container">
     <div class="sb-g mt-24">
@@ -27,4 +27,5 @@
 <sui-modal [mustScroll]="true" [isClosable]="true" [transitionDuration]="0" [size]="'small'" class="sb-modal"
   appBodyScroll (dismissed)="toggleActivityModal(false)" #addActivityModal *ngIf="showModal">
   <app-activity-form (nextClick)="handleNextClick($event)"></app-activity-form>
-</sui-modal>
\ No newline at end of file
+</sui-modal>
+<router-outlet></router-outlet>
\ No newline at end of file

src/app/client/src/app/modules/groups/components/group-details/group-details.component.spec.ts

@@ -66,9 +66,9 @@ describe('GroupDetailsComponent', () => {
 
   it('should get group data', () => {
     const groupService = TestBed.get(GroupsService);
-    spyOn(groupService, 'getGroupById').and.returnValue(of({ name: 'groupName' }));
+    spyOn(groupService, 'getGroupById').and.returnValue(of({id: '123', name: 'groupName', members: [], createdBy: '1' }));
     component.getGroupData();
-    expect(component.groupData).toEqual({ name: 'groupName' });
+    expect(component.groupData).toEqual({id: '123', name: 'groupName', members: [], createdBy: '1' });
   });
 
   it('should handle error', () => {

src/app/client/src/app/modules/groups/components/group-details/group-details.component.ts

@@ -5,9 +5,7 @@ import * as _ from 'lodash-es';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { GroupsService } from '../../services';
-
-import { ADD_ACTIVITY_TO_GROUP, MY_GROUPS, COURSES } from '../routerLinks';
-import { IGroupMemberConfig } from '../../interfaces';
+import { IGroupMemberConfig, IGroupCard, ADD_ACTIVITY_TO_GROUP, COURSES  } from '../../interfaces';
 
 @Component({
   selector: 'app-group-details',
@@ -16,7 +14,7 @@ import { IGroupMemberConfig } from '../../interfaces';
 })
 export class GroupDetailsComponent implements OnInit, OnDestroy {
   @ViewChild('addActivityModal') addActivityModal;
-  groupData;
+  groupData: IGroupCard;
   showModal = false;
   private groupId: string;
   public unsubscribe$ = new Subject<void>();
@@ -43,6 +41,9 @@ export class GroupDetailsComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.groupId = _.get(this.activatedRoute, 'snapshot.params.groupId');
     this.getGroupData();
+    this.groupService.closeForm.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+      this.getGroupData();
+    });
   }
 
   getGroupData() {

src/app/client/src/app/modules/groups/components/group-header/group-header.component.html

 <app-back-button></app-back-button>
 
-<div class="content-header" *ngIf="groupData">
+<div class="content-header">
   <div class="ui container py-16">
     <div class="d-flex flex-ai-center flex-jc-space-between flex-w-wrap">
       <div class="flex-basis-1 mr-32">
         <div class="content-header__title font-weight-bold sb__ellipsis sb__ellipsis--one d-flex">
-            <div>{{groupData.name}}</div>
+            <div>{{groupData?.name}}</div>
         </div>
         <div class="d-flex flex-ai-center content-header__info">
           <div>{{resourceService?.frmelmnts?.lbl?.groupCreatedBy | interpolate:'{name}': creator}}</div>
@@ -37,8 +37,7 @@
     {{resourceService?.frmelmnts?.lbl?.deleteGroup}} ?
   </div>
   <div class="sb-modal-content">
-    <p > {{resourceService?.messages?.imsg?.m0082}}
-      {{groupName}} ?</p>
+    <p > {{resourceService?.messages?.imsg?.m0082 | interpolate:'{group name}': groupData?.name}} ?</p>
   </div>
   <div class="sb-modal-actions">
     <button class="sb-btn sb-btn-normal sb-btn-outline-error" (click)="deleteGroup()">{{resourceService?.frmelmnts?.btn?.delete}}</button>

src/app/client/src/app/modules/groups/components/group-header/group-header.component.spec.ts

-import { CREATE_GROUP } from './../routerLinks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
 import { SharedModule, ResourceService } from '@sunbird/shared';
@@ -9,7 +8,7 @@ import { configureTestSuite } from '@sunbird/test-util';
 import { GroupHeaderComponent } from './group-header.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { MY_GROUPS, GROUP_DETAILS } from '../routerLinks';
+import { MY_GROUPS, GROUP_DETAILS, CREATE_GROUP } from './../../interfaces';
 import { APP_BASE_HREF } from '@angular/common';
 import { of } from 'rxjs';
 import * as _ from 'lodash-es';
@@ -49,7 +48,7 @@ describe('GroupHeaderComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(GroupHeaderComponent);
     component = fixture.componentInstance;
-    component.groupData = {id: '123', isAdmin: true, createdBy: 'user_123',
+    component.groupData = {id: '123', isAdmin: true, createdBy: 'user_123', name: 'Test group',
     members: [{createdBy: 'user_123', name: 'user123', role: 'admin'}]};
     fixture.detectChanges();
   });
@@ -71,7 +70,6 @@ describe('GroupHeaderComponent', () => {
   });
 
   it('should call toggle modal and deleteGroupById', fakeAsync(() => {
-    component.groupData = {id: '1234'};
     spyOn(component, 'toggleModal');
     spyOn(component['groupService'], 'deleteGroupById').and.returnValue(of (true));
     spyOn(component['toasterService'], 'success');
@@ -80,14 +78,13 @@ describe('GroupHeaderComponent', () => {
     tick();
     fixture.detectChanges();
     fixture.whenStable().then(() => {
-      component['groupService'].deleteGroupById('1234').subscribe(response => {
+      component['groupService'].deleteGroupById('123').subscribe(response => {
       expect(component['toasterService'].success).toHaveBeenCalledWith(resourceBundle.messages.smsg.m002);
       });
     });
   }));
 
   it ('should route to create-edit-group', () => {
-    component.groupData = {id: '1234'};
     component.editGroup();
     expect(component['router'].navigate).toHaveBeenCalledWith([`${MY_GROUPS}/${GROUP_DETAILS}`,
     _.get(component.groupData, 'id'), CREATE_GROUP]);

src/app/client/src/app/modules/groups/components/group-header/group-header.component.ts

 import { UserService } from '@sunbird/core';
 import { Router } from '@angular/router';
-import { Component, ViewChild, Input, EventEmitter, Output, Renderer2, OnInit } from '@angular/core';
+import { Component, ViewChild, Input, Renderer2, OnInit, OnDestroy } from '@angular/core';
 import { ResourceService, NavigationHelperService, ToasterService } from '@sunbird/shared';
-import { MY_GROUPS, CREATE_GROUP, GROUP_DETAILS } from '../routerLinks';
+import { MY_GROUPS, CREATE_GROUP, GROUP_DETAILS, IGroupCard } from './../../interfaces';
 import { GroupsService } from '../../services';
 import * as _ from 'lodash-es';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 @Component({
   selector: 'app-group-header',
   templateUrl: './group-header.component.html',
   styleUrls: ['./group-header.component.scss']
 })
-export class GroupHeaderComponent implements OnInit {
-  showDeleteModal;
-  showPastMemberModal;
+export class GroupHeaderComponent implements OnInit, OnDestroy {
   dropdownContent = true;
   @ViewChild('modal') modal;
-  @Input() modalName: string;
-  @Output() modalClosed = new EventEmitter();
-  @Input() groupData: {};
+  @Input() groupData: IGroupCard;
   showModal = false;
   showEditModal: boolean;
   creator: string;
   showMemberPopup = false;
   isGroupAdmin = false;
+  private unsubscribe$ = new Subject<void>();
+
   constructor(private renderer: Renderer2, public resourceService: ResourceService, private router: Router,
     private groupService: GroupsService, private navigationHelperService: NavigationHelperService, private toasterService: ToasterService,
     private userService: UserService) {
@@ -47,7 +47,7 @@ export class GroupHeaderComponent implements OnInit {
   deleteGroup() {
     this.toggleModal(false);
     setTimeout(() => {
-      this.groupService.deleteGroupById(_.get(this.groupData, 'id')).subscribe(data => {
+      this.groupService.deleteGroupById(_.get(this.groupData, 'id')).pipe(takeUntil(this.unsubscribe$)).subscribe(data => {
         this.toasterService.success(this.resourceService.messages.smsg.m002);
       }, err => {
         this.toasterService.error(this.resourceService.messages.emsg.m003);
@@ -70,4 +70,9 @@ export class GroupHeaderComponent implements OnInit {
   toggleFtuModal(visibility: boolean = false) {
     this.showMemberPopup = visibility;
   }
+
+  ngOnDestroy() {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
 }

src/app/client/src/app/modules/groups/components/group-members/group-members.component.spec.ts

+import { IGroupMember } from './../../interfaces/group';
 import { SuiModule } from 'ng2-semantic-ui';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
@@ -10,11 +11,12 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CoreModule } from '@sunbird/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { configureTestSuite } from '@sunbird/test-util';
+import { of } from 'rxjs';
 
 describe('GroupMembersComponent', () => {
   let component: GroupMembersComponent;
   let fixture: ComponentFixture<GroupMembersComponent>;
-
+  let members: IGroupMember[] = [];
   const resourceBundle = {
     'messages': {
       'fmsg': {
@@ -57,18 +59,23 @@ describe('GroupMembersComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(GroupMembersComponent);
     component = fixture.componentInstance;
+    members = [
+      { identifier: '1', initial: 'J', title: 'John Doe', isAdmin: true, isMenu: false,
+      indexOfMember: 1, isCreator: true, name: 'John Doe', userId: '1', role: 'admin'},
+      { identifier: '2', initial: 'P', title: 'Paul Walker', isAdmin: false, isMenu: true,
+      indexOfMember: 5, isCreator: false, name: 'Paul Walke', userId: '2', role: 'member' },
+      { identifier: '6', initial: 'R', title: 'Robert Downey', isAdmin: true, isMenu: true,
+      indexOfMember: 7, isCreator: false, name: 'Robert Downey', userId: '3', role: 'member' }
+    ];
+    component['groupsService'].groupData = {id: '123', name: 'Test group', members: members, createdBy: '1'};
+    spyOn(component['groupsService'], 'addFieldsToMember').and.returnValue(members);
+    spyOn(component['groupsService'], 'membersList').and.returnValue(of (members));
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    const members = [
-      { identifier: '1', initial: 'J', title: 'John Doe', isAdmin: true, isMenu: false, indexOfMember: 1, isCreator: true },
-      { identifier: '2', initial: 'P', title: 'Paul Walker', isAdmin: false, isMenu: true, indexOfMember: 5, isCreator: false },
-      { identifier: '6', initial: 'R', title: 'Robert Downey', isAdmin: true, isMenu: true, indexOfMember: 7, isCreator: false }];
-
     const expectedMemberList = members.map(item => { item.isMenu = false; return item; });
     console.log('expectedMemberList', expectedMemberList);
-    component.members = members;
     component.showKebabMenu = true;
     component.config.showMemberMenu = false;
     document.body.dispatchEvent(new Event('click'));
@@ -91,8 +98,9 @@ describe('GroupMembersComponent', () => {
 
   it('should call search', () => {
     component.showSearchResults = false;
-    const members = [
-      { identifier: '1', initial: 'J', title: 'John Doe', isAdmin: true, isMenu: false, indexOfMember: 1, isCreator: true }
+     members = [
+      { identifier: '1', initial: 'J', title: 'John Doe', isAdmin: true, isMenu: false,
+      indexOfMember: 1, isCreator: true, name: 'John Doe', userId: '1', role: 'admin'},
     ];
     component.members = members;
     component.memberListToShow = [];
@@ -102,8 +110,9 @@ describe('GroupMembersComponent', () => {
 
   it('should reset the list to membersList when no search key present', () => {
     component.showSearchResults = true;
-    const members = [
-      { identifier: '1', initial: 'J', title: 'John Doe', isAdmin: true, isMenu: false, indexOfMember: 1, isCreator: true }
+     members = [
+      { identifier: '1', initial: 'J', title: 'John Doe', isAdmin: true, isMenu: false,
+      indexOfMember: 1, isCreator: true, name: 'John Doe', userId: '1', role: 'admin'},
     ];
     component.members = members;
     component.search('');

src/app/client/src/app/modules/groups/components/group-members/group-members.component.ts

-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ResourceService } from '@sunbird/shared';
 import * as _ from 'lodash-es';
 import { fromEvent, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { ADD_MEMBER, GROUP_DETAILS, MY_GROUPS } from './../routerLinks';
-import { IGroupMemberConfig, IGroupMember } from '../../interfaces';
+import { IGroupMemberConfig, IGroupMember, ADD_MEMBER, GROUP_DETAILS, MY_GROUPS } from '../../interfaces';
 import { GroupsService } from '../../services';
 
 
@@ -15,7 +14,7 @@ import { GroupsService } from '../../services';
   templateUrl: './group-members.component.html',
   styleUrls: ['./group-members.component.scss']
 })
-export class GroupMembersComponent implements OnInit {
+export class GroupMembersComponent implements OnInit, OnDestroy {
   @ViewChild('searchInputBox') searchInputBox: ElementRef;
   @Input() config: IGroupMemberConfig = {
     showMemberCount: false,
@@ -27,10 +26,10 @@ export class GroupMembersComponent implements OnInit {
   showKebabMenu = false;
   showModal = false;
   showSearchResults = false;
-  memberListToShow = [];
+  memberListToShow: IGroupMember[] = [];
   memberAction: string;
   searchQuery = '';
-  selectedMember = {};
+  selectedMember: IGroupMember;
   private unsubscribe$ = new Subject<void>();
   groupId;
   memberCardConfig = { size: 'small', isBold: false, isSelectable: false, view: 'horizontal' };
@@ -43,12 +42,14 @@ export class GroupMembersComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.memberListToShow = _.cloneDeep(this.members);
+
+    const groupData = this.groupsService.groupData;
+    this.members = this.groupsService.addFieldsToMember(groupData.members);
+    this.memberListToShow = this.members;
     this.groupId = _.get(this.activatedRoute, 'snapshot.params.groupId');
-    /* istanbul ignore else */
-    if (!this.config.showMemberMenu) {
-      this.memberListToShow.forEach(item => item.isMenu = false);
-    }
+
+    this.memberListToShow.forEach(item => item.isMenu =
+      ((groupData.createdBy === item.userId) ? false : this.config.showMemberMenu));
 
     fromEvent(document, 'click')
       .pipe(takeUntil(this.unsubscribe$))

src/app/client/src/app/modules/groups/components/member-actions/member-actions.component.spec.ts

@@ -48,7 +48,10 @@ describe('MemberActionsComponent', () => {
       isAdmin: false,
       isMenu: true,
       indexOfMember: 5,
-      isCreator: false
+      isCreator: false,
+      userId: '2',
+      role: 'member',
+      name: 'Paul Walker'
     };
     component.performAction();
     expect(component.actionConfirm.emit).toHaveBeenCalled();

src/app/client/src/app/modules/groups/components/my-groups/my-groups.component.html

-<div class="flex-dc mt-48 sb-group-container sb-group-container--sm" *ngIf="!groupList.length">
+<div class="flex-dc mt-48 sb-group-container sb-group-container--sm" *ngIf="!groupList.adminGroups.length && !groupList.memberGroups.length">
   <div class="d-flex flex-dc flex-ai-center flex-jc-center">
     <img src="./assets/images/mygroups.svg" width="220">
     <div class="my-24 fs-1 text-center">
@@ -14,7 +14,7 @@
   </div>
 </div>
 
-<div *ngIf="groupList.length">
+<div *ngIf="groupList.adminGroups.length || groupList.memberGroups.length">
 
   <div class="sb-bg-color-white">
     <div class="ui container">
@@ -41,12 +41,16 @@
 
   <div class="ui container mt-24">
     <div class="sb-card-grid">
-      <div class="sbcard sbcard--resource sbcard--course" *ngFor="let group of groupList">
+      <div class="sbcard sbcard--resource sbcard--course" *ngFor="let group of groupList?.adminGroups">
+        <sb-group-card [group]= "group" [isAdmin]="group?.isAdmin" [initial]="group?.initial" (cardClick)="navigateToDetailPage($event)"></sb-group-card>
+      </div>
+      <div class="sbcard sbcard--resource sbcard--course" *ngFor="let group of groupList?.memberGroups">
         <sb-group-card [group]= "group" [isAdmin]="group?.isAdmin" [initial]="group?.initial" (cardClick)="navigateToDetailPage($event)"></sb-group-card>
       </div>
     </div>
   </div>
 
 </div>
+<router-outlet></router-outlet>
 
 <app-ftu-popup *ngIf="showModal" [showWelcomePopup]="showModal" (close)="closeModal()"></app-ftu-popup>
\ No newline at end of file

src/app/client/src/app/modules/groups/components/my-groups/my-groups.component.spec.data.ts

@@ -7,6 +7,6 @@ export const mockGroupList = [
           'createdOn': '2020-05-06T15:16:38.655+0000',
           'lastUpdatedOn': '2020-05-06T15:19:44.610+0000',
           'createdBy': '123',
-          'members': []
+          'members': [{userId: '123', role: 'admin'}]
         }
     ];

src/app/client/src/app/modules/groups/components/my-groups/my-groups.component.spec.ts

-import { MY_GROUPS, GROUP_DETAILS, CREATE_GROUP } from './../routerLinks';
+import { MY_GROUPS, GROUP_DETAILS, CREATE_GROUP } from './../../interfaces';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MyGroupsComponent } from './my-groups.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -60,7 +60,7 @@ describe('MyGroupsComponent', () => {
     spyOn(component.groupService, 'searchUserGroups').and.callFake(() => of (mockGroupList));
     component.getMyGroupList();
     component.groupService.searchUserGroups({filters: {userId: '123'}}).subscribe(data => {
-      expect(component.groupList[0].isAdmin).toBeTruthy();
+      expect(component.groupList.adminGroups[0].isAdmin).toBeTruthy();
     });
   });
 
@@ -68,7 +68,7 @@ describe('MyGroupsComponent', () => {
     spyOn(component.groupService, 'searchUserGroups').and.callFake(() => throwError ({}));
     component.getMyGroupList();
     component.groupService.searchUserGroups({filters: {userId: '123'}}).subscribe(data => {}, err => {
-      expect(component.groupList).toEqual([]);
+      expect(component.groupList).toEqual({adminGroups: [], memberGroups: []});
     });
   });
 

src/app/client/src/app/modules/groups/components/my-groups/my-groups.component.ts

 import { UserService } from '@sunbird/core';
-import { IGroupSearchRequest, IGroupCard } from './../../interfaces';
-import { GROUP_DETAILS, MY_GROUPS, CREATE_GROUP } from './../routerLinks';
-import { Component, OnInit } from '@angular/core';
+import { IGroupSearchRequest, IGroupCard, GROUP_DETAILS, MY_GROUPS, CREATE_GROUP } from './../../interfaces';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { GroupsService } from '../../services';
 import { ResourceService } from '@sunbird/shared';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import * as _ from 'lodash-es';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 @Component({
   selector: 'app-my-groups',
   templateUrl: './my-groups.component.html',
   styleUrls: ['./my-groups.component.scss']
 })
-export class MyGroupsComponent implements OnInit {
+export class MyGroupsComponent implements OnInit, OnDestroy {
   showGroupCreateForm = false;
-  public groupList: IGroupCard[] = [];
+  public groupList: {adminGroups: IGroupCard[], memberGroups: IGroupCard[]} = {adminGroups: [], memberGroups: []};
   public showModal = false;
+  private unsubscribe$ = new Subject<void>();
   constructor(public groupService: GroupsService, public router: Router, public resourceService: ResourceService,
-    private userService: UserService) {
+    private userService: UserService, private activatedRoute: ActivatedRoute) {
+
   }
 
   ngOnInit() {
     this.showModal = !localStorage.getItem('login_ftu_groups');
     this.getMyGroupList();
+    this.groupService.closeForm.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+      this.getMyGroupList();
+    });
   }
 
   getMyGroupList() {
+    this.groupList = {adminGroups: [], memberGroups: []};
     const request: IGroupSearchRequest = {filters: {userId: this.userService.userid}};
-    this.groupService.searchUserGroups(request).subscribe(groups => {
+    this.groupService.searchUserGroups(request).pipe(takeUntil(this.unsubscribe$)).subscribe(groups => {
       _.forEach(groups, (group) => {
         if (group) {
-          group.isAdmin = (group.createdBy === this.userService.userid);
+          group.isAdmin = _.find(group.members, {userId: this.userService.userid}).role === 'admin';
           group.initial = group.name[0];
-          this.groupList.push(group);
+          group.isAdmin ? this.groupList.adminGroups.push(group) : this.groupList.memberGroups.push(group);
         }
       });
+      _.orderBy(this.groupList.adminGroups, 'createdOn');
+      _.orderBy(this.groupList.memberGroups, 'createdOn');
     }, (err) => {
-      this.groupList = [];
+      this.groupList = {adminGroups: [], memberGroups: []};
     });
   }
 
@@ -56,4 +65,8 @@ export class MyGroupsComponent implements OnInit {
     localStorage.setItem('login_ftu_groups', 'login_user');
   }
 
+  ngOnDestroy() {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
 }