Refactor home component to prevent multiple subscriptions and redunda…

…nt storing for values (#292) * Subscribe to observable with async pipe only once Unwrapping observable into object prevents ngIf from hiding whole menu when waiting for listConfig to arrive * Don't store isLoggedIn value * Use new Angular's control flow in template * Use standalone components instead of common module
stefanoslig · Nov 19, 2023 · a28c569 · a28c569
1 parent bc75e6f
commit a28c569
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 36 deletions.
diff --git a/libs/home/src/lib/home.component.html b/libs/home/src/lib/home.component.html
@@ -10,33 +10,32 @@ <h1 class="logo-font">conduit</h1>
     <div class="row">
       <div class="col-md-9">
         <div class="feed-toggle">
-          <ul class="nav nav-pills outline-active">
-            <li class="nav-item">
-              <a
-                [ngClass]="{ active: (listConfig$ | async)?.type === 'FEED' }"
-                class="nav-link"
-                (click)="setListTo('FEED')"
-                >Your Feed</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                data-e2e-id="global-feed"
-                [ngClass]="{
-                  active: (listConfig$ | async)?.type === 'ALL' && !(listConfig$ | async).filters?.tag
-                }"
-                class="nav-link"
-                (click)="setListTo('ALL')"
-                >Global Feed</a
-              >
-            </li>
-            <li class="nav-item" [hidden]="!(listConfig$ | async).filters?.tag">
-              <a class="nav-link active">
-                <i class="ion-pound"></i>
-                {{ (listConfig$ | async).filters?.tag }}
-              </a>
-            </li>
-          </ul>
+          @if ({listConfig: listConfig$ | async}; as model) {
+            <ul class="nav nav-pills outline-active">
+              <li class="nav-item">
+                <a [ngClass]="{ active: model.listConfig?.type === 'FEED' }" class="nav-link" (click)="setListTo('FEED')"
+                  >Your Feed</a
+                >
+              </li>
+              <li class="nav-item">
+                <a
+                  data-e2e-id="global-feed"
+                  [ngClass]="{
+                    active: model.listConfig?.type === 'ALL' && !model.listConfig?.filters?.tag
+                  }"
+                  class="nav-link"
+                  (click)="setListTo('ALL')"
+                  >Global Feed</a
+                >
+              </li>
+              <li class="nav-item" [hidden]="!model.listConfig?.filters?.tag">
+                <a class="nav-link active">
+                  <i class="ion-pound"></i>
+                  {{ model.listConfig?.filters?.tag }}
+                </a>
+              </li>
+            </ul>
+          }
         </div>
 
         <cdt-article-list></cdt-article-list>

diff --git a/libs/home/src/lib/home.component.ts b/libs/home/src/lib/home.component.ts
@@ -7,7 +7,7 @@ import {
   ListType,
 } from '@realworld/articles/data-access';
 import { selectLoggedIn } from '@realworld/auth/data-access';
-import { CommonModule } from '@angular/common';
+import { AsyncPipe, NgClass} from '@angular/common';
 import { TagsListComponent } from './tags-list/tags-list.component';
 import { ArticleListComponent } from '@realworld/articles/feature-articles-list/src';
 import { HomeStoreService } from './home.store';
@@ -19,7 +19,7 @@ import { Store } from '@ngrx/store';
   standalone: true,
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css'],
-  imports: [CommonModule, TagsListComponent, ArticleListComponent],
+  imports: [AsyncPipe, NgClass, TagsListComponent, ArticleListComponent],
   providers: [provideComponentStore(HomeStoreService)],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -30,24 +30,20 @@ export class HomeComponent implements OnInit {
 
   listConfig$ = this.store.select(articleListQuery.selectListConfig);
   tags$ = this.homeStore.tags$;
-  isAuthenticated = false;
 
   ngOnInit() {
     this.store
       .select(selectLoggedIn)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((isLoggedIn) => {
-        this.isAuthenticated = isLoggedIn;
-        this.getArticles();
-      });
+      .subscribe((isLoggedIn) => this.getArticles(isLoggedIn));
   }
 
   setListTo(type: ListType = 'ALL') {
     this.store.dispatch(articleListActions.setListConfig({ config: { ...articleListInitialState.listConfig, type } }));
   }
 
-  getArticles() {
-    if (this.isAuthenticated) {
+  getArticles(isLoggedIn: boolean) {
+    if (isLoggedIn) {
       this.setListTo('FEED');
     } else {
       this.setListTo('ALL');