feat: got app working again! cleaned out console logs

thisdot · Sep 23, 2022 · df180ec · df180ec
1 parent 89be771
commit df180ec
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 74 deletions.
diff --git a/angular-ngrx-scss/src/app/app.module.ts b/angular-ngrx-scss/src/app/app.module.ts
@@ -11,6 +11,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { TokenInterceptor } from './auth/services/token.interceptor';
 import { reducers } from './state';
+import { AuthEffects } from './state/auth';
 // import { DashboardEffects } from './state/dashboard/dashboard.effects';
 import { ProfileEffects } from './state/profile/profile.effects';
 import { RepositoryEffects } from './state/repository/repository.effects';
@@ -30,6 +31,7 @@ import { UserEffects } from './state/user';
     }),
     EffectsModule.forRoot([
       // DashboardEffects,
+      AuthEffects,
       UserEffects,
       ProfileEffects,
       RepositoryEffects,

diff --git a/angular-ngrx-scss/src/app/auth/auth.module.ts b/angular-ngrx-scss/src/app/auth/auth.module.ts
@@ -4,17 +4,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AuthComponent } from './auth.component';
 import { AuthRoutingModule } from './auth-routing.module';
 import { RedirectComponent } from './redirect/redirect.component';
-import { EffectsModule } from '@ngrx/effects';
-import { AuthEffects } from '../state/auth/auth.effects';
 
 @NgModule({
   declarations: [AuthComponent, RedirectComponent],
-  imports: [
-    CommonModule,
-    AuthRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    EffectsModule.forFeature([AuthEffects]),
-  ],
+  imports: [CommonModule, AuthRoutingModule, FormsModule, ReactiveFormsModule],
 })
 export class AuthModule {}
diff --git a/angular-ngrx-scss/src/app/home/nav-bar/nav-bar.component.ts b/angular-ngrx-scss/src/app/home/nav-bar/nav-bar.component.ts
@@ -1,8 +1,8 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { fetchAuthenticatedUserData, signOutUser } from 'src/app/state/auth';
-import { selectAuthUserName, selectAuthUserAvatar } from '../../state/auth';
+import { signOutUser } from 'src/app/state/auth';
+import { selectAuthUserAvatar, selectAuthUserName } from '../../state/auth';
 
 @Component({
   selector: 'app-nav-bar',
@@ -20,21 +20,13 @@ import { selectAuthUserName, selectAuthUserAvatar } from '../../state/auth';
     ]),
   ],
 })
-export class NavBarComponent implements OnInit {
+export class NavBarComponent {
   dropdownMenuIsOpen = false;
   userAvatar$ = this.store.select(selectAuthUserAvatar);
   username$ = this.store.select(selectAuthUserName);
 
   constructor(private store: Store) {}
 
-  ngOnInit() {
-    this.username$.subscribe((user) => {
-      if (!user) {
-        this.store.dispatch(fetchAuthenticatedUserData());
-      }
-    });
-  }
-
   toggleMenu() {
     this.dropdownMenuIsOpen = !this.dropdownMenuIsOpen;
   }

diff --git a/angular-ngrx-scss/src/app/state/auth/auth.actions.ts b/angular-ngrx-scss/src/app/state/auth/auth.actions.ts
@@ -29,10 +29,6 @@ export const authUserSaved = createAction(
   '[Auth API] Authenticated user data already saved',
 );
 
-export const fetchAuthenticatedUserData = createAction(
-  '[Auth API] Fetch authenticated user data',
-);
-
 export const fetchAuthenticatedUserDataSuccess = createAction(
   '[Auth API] Successfully fetched authenticated user data',
   props<{ userData: AuthUserData }>(),

diff --git a/angular-ngrx-scss/src/app/state/auth/auth.effects.ts b/angular-ngrx-scss/src/app/state/auth/auth.effects.ts
@@ -1,32 +1,32 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
 import { of } from 'rxjs';
 import {
   catchError,
   concatMap,
   map,
+  mergeMap,
   skipWhile,
   switchMap,
   tap,
 } from 'rxjs/operators';
 import { UserService } from 'src/app/user/services/user.service';
-import { AuthUserData } from './auth.state';
 import { AuthService } from '../../auth/services/auth.service';
 import {
+  fetchAuthenticatedUserDataFailure,
+  fetchAuthenticatedUserDataSuccess,
+  removeUserToken,
   saveUserToken,
   saveUserTokenFailure,
   saveUserTokenSuccess,
-  removeUserToken,
-  signOutUser,
   signInUser,
-  fetchAuthenticatedUserDataSuccess,
-  fetchAuthenticatedUserDataFailure,
+  signOutUser,
   userTokenExists,
-  fetchAuthenticatedUserData,
 } from './auth.actions';
 import { selectAuthUserName } from './auth.selectors';
-import { Store } from '@ngrx/store';
+import { AuthUserData } from './auth.state';
 
 @Injectable()
 export class AuthEffects {
@@ -70,51 +70,32 @@ export class AuthEffects {
     );
   });
 
-  // This is what should work, to prevent too many fetch calls. however currently does not call correctly
-  // fetchAuthUserData$ = createEffect(() => {
-  //   return this.actions$.pipe(
-  //     ofType(saveUserTokenSuccess, userTokenExists),
-  //     switchMap(() =>
-  //       this.store.select(selectAuthUserName).pipe(
-  //         skipWhile((name) => name.length > 0),
-  //         mergeMap(() =>
-  //           this.userService.getAuthenticatedUserInfo().pipe(
-  //             map((userData) => {
-  //               const user: AuthUserData = {
-  //                 avatar: userData.avatar_url,
-  //                 email: userData.email,
-  //                 username: userData.login,
-  //               };
-  //               return fetchAuthenticatedUserDataSuccess({ userData: user });
-  //             }),
-  //             catchError((error) =>
-  //               of(fetchAuthenticatedUserDataFailure({ error })),
-  //             ),
-  //           ),
-  //         ),
-  //       ),
-  //     ),
-  //   );
-  // });
-
+  /**
+   * Gets authenticated user's name, photo, and email
+   */
   fetchAuthUserData$ = createEffect(() => {
     return this.actions$.pipe(
-      ofType(fetchAuthenticatedUserData, userTokenExists),
-      switchMap(() => {
-        return this.userService.getAuthenticatedUserInfo().pipe(
-          map((userData) => {
-            const user: AuthUserData = {
-              avatar: userData.avatar_url,
-              email: userData.email,
-              username: userData.login,
-            };
-            return fetchAuthenticatedUserDataSuccess({ userData: user });
-          }),
-          catchError((error) =>
-            of(fetchAuthenticatedUserDataFailure({ error })),
+      ofType(saveUserTokenSuccess, userTokenExists),
+      switchMap(() =>
+        this.store.select(selectAuthUserName).pipe(
+          skipWhile((name) => name.length > 0),
+          mergeMap(() =>
+            this.userService.getAuthenticatedUserInfo().pipe(
+              map((userData) => {
+                const user: AuthUserData = {
+                  avatar: userData.avatar_url,
+                  email: userData.email,
+                  username: userData.login,
+                };
+                return fetchAuthenticatedUserDataSuccess({ userData: user });
+              }),
+              catchError((error) =>
+                of(fetchAuthenticatedUserDataFailure({ error })),
+              ),
+            ),
           ),
-        );
-      }),
+        ),
+      ),
     );
   });