changes subcription to async

Author: devpato

src/app/components/search-page/search-page.component.ts

@@ -9,26 +9,15 @@ import * as UsersSelectors from '../../shared/state/selectors/users.selector';
   templateUrl: './search-page.component.html',
   styleUrls: ['./search-page.component.scss']
 })
-export class SearchPageComponent implements OnInit, OnDestroy {
-  $users: Observable<User>;
-  $userStoreSubscrition: Subscription;
+export class SearchPageComponent implements OnInit {
+  $users: Observable<User[]>;
   constructor(private store: Store<{ users: User[] }>) {}
 
   ngOnInit(): void {
     this.getUsers();
   }
 
   getUsers(): void {
-    this.$userStoreSubscrition = this.store
-      .select(UsersSelectors.selectUsers)
-      .subscribe(res => {
-        this.$users = of(res);
-      });
-  }
-
-  ngOnDestroy(): void {
-    if (this.$userStoreSubscrition) {
-      this.$userStoreSubscrition.unsubscribe;
-    }
+    this.$users = this.store.select(UsersSelectors.selectUsers);
   }
 }

src/app/components/search-page/serach-results/user-result/user-result.component.ts

@@ -1,23 +1,24 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { UserItems } from 'src/app/shared/models/user-items.model';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { Store } from '@ngrx/store';
 import * as UsersActions from 'src/app/shared/state/actions/users.actions';
 import * as UsersSelectors from 'src/app/shared/state/selectors/users.selector';
 import { map } from 'rxjs/operators';
 import { UiService } from 'src/app/shared/services/ui.service';
 import { UserFullProfile } from 'src/app/shared/models/user-full-profile';
-import { User } from 'src/app/shared/models/user.model';
+
 @Component({
   selector: 'app-user-result',
   templateUrl: './user-result.component.html',
   styleUrls: ['./user-result.component.scss']
 })
-export class UserResultComponent implements OnInit {
+export class UserResultComponent implements OnInit, OnDestroy {
   @Input()
   user: UserItems;
   $subData: Observable<UserFullProfile>;
   selectedUser: UserFullProfile;
+  $usersSubscrition: Subscription;
 
   constructor(
     private store: Store<{ selectedUser: UserFullProfile }>,
@@ -29,7 +30,7 @@ export class UserResultComponent implements OnInit {
   onSelectUser(selectedUser: UserItems): void {
     this.uiService.setTabSelected(false);
     this.store.dispatch(new UsersActions.SetSelectedUser(null));
-    this.store
+    this.$usersSubscrition = this.store
       .select(UsersSelectors.selectSearchSubData)
       .pipe(
         map(usersSubdata =>
@@ -45,4 +46,10 @@ export class UserResultComponent implements OnInit {
         this.uiService.setTabSelected(true);
       });
   }
+
+  ngOnDestroy(): void {
+    if (this.$usersSubscrition) {
+      this.$usersSubscrition.unsubscribe();
+    }
+  }
 }

src/app/components/search-page/tabs/tabs.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
 import { UiService } from 'src/app/shared/services/ui.service';
 import { User } from 'src/app/shared/models/user.model';
 
@@ -8,11 +8,12 @@ import { User } from 'src/app/shared/models/user.model';
   templateUrl: './tabs.component.html',
   styleUrls: ['./tabs.component.scss']
 })
-export class TabsComponent implements OnInit {
+export class TabsComponent implements OnInit, OnDestroy {
   @Input()
   users: User[];
   $tabSelected: Observable<boolean>;
   flag = false;
+  $tabSelectedSubscription: Subscription;
 
   constructor(private uiServivce: UiService) {}
 
@@ -21,6 +22,14 @@ export class TabsComponent implements OnInit {
   }
 
   isTabSelected(): void {
-    this.uiServivce.dataTabSelected.subscribe(flag => (this.flag = flag));
+    this.$tabSelectedSubscription = this.uiServivce.dataTabSelected.subscribe(
+      flag => (this.flag = flag)
+    );
+  }
+
+  ngOnDestroy() {
+    if (this.$tabSelectedSubscription) {
+      this.$tabSelectedSubscription.unsubscribe();
+    }
   }
 }

src/app/shared/state/selectors/users.selector.ts

@@ -7,7 +7,7 @@ import { State } from '../state';
 import { User } from '../../models/user.model';
 import { UserFullProfile } from '../../models/user-full-profile';
 
-const getUsers = (state: State): User => state.users;
+const getUsers = (state: State): User[] => state.users;
 const geSubData = (state: State): UserFullProfile[] => state.subdata;
 const geSelectedUserData = (state: State): UserFullProfile =>
   state.selectedUser;
@@ -22,12 +22,15 @@ export const selectSubDataState: MemoizedSelector<
   State
 > = createFeatureSelector<State>('usersStore');
 
-export const selectUsers: MemoizedSelector<object, User> = createSelector(
+export const selectUsers: MemoizedSelector<object, User[]> = createSelector(
   selectUsersState,
   getUsers
 );
 
-export const selectSearchUser: MemoizedSelector<object, User> = createSelector(
+export const selectSearchUser: MemoizedSelector<
+  object,
+  User[]
+> = createSelector(
   selectUsersState,
   getUsers
 );

src/app/shared/state/state.ts

@@ -2,7 +2,7 @@ import { User } from '../models/user.model';
 import { UserFullProfile } from '../models/user-full-profile';
 
 export interface State {
-  users: User;
+  users: User[];
   subdata: UserFullProfile[];
   selectedUser: UserFullProfile;
 }