[Angular - NgRx - SCSS] 440: state & service refactor

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 { ProfileEffects } from './state/profile/profile.effects';
 import { RepositoryEffects } from './state/repository/repository.effects';
 import { UserEffects } from './state/user';
@@ -27,7 +28,12 @@ import { UserEffects } from './state/user';
       logOnly: environment.production,
       autoPause: true,
     }),
-    EffectsModule.forRoot([UserEffects, ProfileEffects, RepositoryEffects]),
+    EffectsModule.forRoot([
+      AuthEffects,
+      UserEffects,
+      ProfileEffects,
+      RepositoryEffects,
+    ]),
   ],
   declarations: [AppComponent],
   providers: [

angular-ngrx-scss/src/app/auth/auth.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
-import { startSignIn } from '../state/auth/auth.actions';
+import { signInUser } from '../state/auth/auth.actions';
 
 @Component({
   selector: 'app-auth',
@@ -17,6 +17,6 @@ export class AuthComponent {
   constructor(private store: Store) {}
 
   onSubmit() {
-    this.store.dispatch(startSignIn());
+    this.store.dispatch(signInUser());
   }
 }

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 {}

angular-ngrx-scss/src/app/file-viewer/file-explorer-blob/file-explorer-blob.component.spec.ts

@@ -4,7 +4,7 @@ import { FileExplorerBlobComponent } from './file-explorer-blob.component';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppState } from '../../state';
-import { fetchFileContents, RepoState } from '../../state/repository';
+import { fetchFileContents, RepositoryState } from '../../state/repository';
 import { ActivatedRoute } from '@angular/router';
 import { FileExplorerNavComponent } from '../file-explorer-nav/file-explorer-nav.component';
 import { FileViewerComponent } from '../file-viewer/file-viewer.component';
@@ -15,14 +15,14 @@ describe('FileExplorerBlobComponent', () => {
   let fixture: ComponentFixture<FileExplorerBlobComponent>;
   let store: MockStore;
   const initialState: AppState = {
-    repo: {
+    repository: {
       selectedFile: {
         content: 'this is a readme file',
         name: 'starter.dev-github-showcases',
         type: 'file',
         size: 223,
       },
-    } as RepoState,
+    } as RepositoryState,
   } as AppState;
 
   beforeEach(async () => {

angular-ngrx-scss/src/app/file-viewer/file-explorer-container/file-explorer-container.component.spec.ts

@@ -30,11 +30,17 @@ describe('FileExplorerContainerComponent', () => {
         name: '.github',
         type: 'file',
         path: '.github',
+        content: '',
+        encoding: '',
+        size: 0,
       },
       {
         name: 'packages',
         type: 'dir',
         path: 'packages',
+        content: '',
+        encoding: '',
+        size: 0,
       },
     ];
     component.name = 'starter.dev-github-showcases';
@@ -60,6 +66,9 @@ describe('FileExplorerContainerComponent', () => {
         name: 'README.md',
         type: 'file',
         path: 'README.md',
+        content: '',
+        encoding: '',
+        size: 0,
       }),
     ).toEqual('/thisdot/starter.dev-github-showcases/blob/main/README.md');
   });
@@ -70,6 +79,9 @@ describe('FileExplorerContainerComponent', () => {
         name: '.github',
         type: 'dir',
         path: '.github',
+        content: '',
+        encoding: '',
+        size: 0,
       }),
     ).toEqual('/thisdot/starter.dev-github-showcases/tree/main/.github');
   });

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.html

@@ -4,14 +4,14 @@
       <app-file-explorer-nav
         [owner]="owner"
         [name]="repoName"
-        [branch]="branch ?? repo.activeBranch"
+        [branch]="repo.activeBranch"
         [path]="path"
         [showCrumbs]="!!path"
       ></app-file-explorer-nav>
 
       <app-file-explorer-container
         [repoPage]="repo.tree"
-        [branch]="branch ?? repo.activeBranch"
+        [branch]="repo.activeBranch"
         [owner]="owner"
         [name]="repoName"
       ></app-file-explorer-container>

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.spec.ts

@@ -4,7 +4,7 @@ import { FileExplorerComponent } from './file-explorer.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import { AppState } from '../../state';
-import { RepoState } from '../../state/repository';
+import { RepositoryState } from '../../state/repository';
 import { ActivatedRoute } from '@angular/router';
 import { of } from 'rxjs';
 import { By } from '@angular/platform-browser';
@@ -13,7 +13,7 @@ describe('FileExplorerComponent', () => {
   let component: FileExplorerComponent;
   let fixture: ComponentFixture<FileExplorerComponent>;
   const initialState: AppState = {
-    repo: {
+    repository: {
       tree: [
         {
           name: 'packages',
@@ -24,7 +24,7 @@ describe('FileExplorerComponent', () => {
       activeBranch: 'main',
       description: '',
       website: '',
-    } as RepoState,
+    } as RepositoryState,
   } as AppState;
   const activatedRouteStub = {
     paramMap: of({

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 import {
   fetchRepository,
   RepoContents,
-  selectRepositoryState,
+  selectedRepository,
 } from '../../state/repository';
 import { map, takeWhile, tap } from 'rxjs';
 
@@ -18,7 +18,7 @@ export class FileExplorerComponent implements OnInit, OnDestroy {
   repoName = '';
   path = '';
   branch = '';
-  repo$ = this.store.select(selectRepositoryState).pipe(
+  repo$ = this.store.select(selectedRepository).pipe(
     map((repo) => {
       const fileItems: RepoContents[] = [];
       const dirItems: RepoContents[] = [];

angular-ngrx-scss/src/app/home/home.component.ts

@@ -1,19 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { selectUserLoginName } from '../state/user';
+import { Subject, takeUntil } from 'rxjs';
+import { selectAuthUserName } from '../state/auth';
 import { fetchUserData } from '../state/user/user.actions';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent implements OnInit {
-  user$ = this.store.select(selectUserLoginName);
+export class HomeComponent implements OnInit, OnDestroy {
+  destroy$: Subject<boolean> = new Subject<boolean>();
+  user$ = this.store.select(selectAuthUserName);
 
   constructor(private store: Store) {}
 
   ngOnInit() {
-    this.store.dispatch(fetchUserData());
+    this.user$.pipe(takeUntil(this.destroy$)).subscribe((user) => {
+      this.store.dispatch(fetchUserData({ username: user }));
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
   }
 }

angular-ngrx-scss/src/app/home/nav-bar/nav-bar.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { signOut } from 'src/app/state/auth/auth.actions';
+import { signOutUser } from 'src/app/state/auth/auth.actions';
 import { NavBarComponent } from './nav-bar.component';
 
 describe('NavbarComponent', () => {
@@ -36,6 +36,6 @@ describe('NavbarComponent', () => {
     const dispatchSpy = spyOn(store, 'dispatch').and.callThrough();
 
     component.signOut();
-    expect(dispatchSpy).toHaveBeenCalledWith(signOut());
+    expect(dispatchSpy).toHaveBeenCalledWith(signOutUser());
   });
 });

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 } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { signOut } from 'src/app/state/auth';
-import { selectUserAvatar, selectUserLoginName } from '../../state/user';
+import { signOutUser } from 'src/app/state/auth';
+import { selectAuthUserAvatar, selectAuthUserName } from '../../state/auth';
 
 @Component({
   selector: 'app-nav-bar',
@@ -22,8 +22,8 @@ import { selectUserAvatar, selectUserLoginName } from '../../state/user';
 })
 export class NavBarComponent {
   dropdownMenuIsOpen = false;
-  userAvatar$ = this.store.select(selectUserAvatar);
-  username$ = this.store.select(selectUserLoginName);
+  userAvatar$ = this.store.select(selectAuthUserAvatar);
+  username$ = this.store.select(selectAuthUserName);
 
   constructor(private store: Store) {}
 
@@ -37,6 +37,6 @@ export class NavBarComponent {
 
   signOut() {
     this.closeDropdown();
-    this.store.dispatch(signOut());
+    this.store.dispatch(signOutUser());
   }
 }

angular-ngrx-scss/src/app/home/profile/profile-about/profile-about.component.html

@@ -35,7 +35,7 @@ <h1>
         <span class="icon" appOcticon="link"></span>
         <a [href]="profile.user.blog">{{ profile.user.blog }}</a>
       </div>
-      <div *ngIf="profile.user.twitter_username">
+      <div *ngIf="profile.user.twitterUsername">
         <span class="icon twitter-icon">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -50,8 +50,8 @@ <h1>
             ></path>
           </svg>
         </span>
-        <a href="https://twitter.com/{{ profile.user.twitter_username }}"
-          >@{{ profile.user.twitter_username }}</a
+        <a href="https://twitter.com/{{ profile.user.twitterUsername }}"
+          >@{{ profile.user.twitterUsername }}</a
         >
       </div>
     </div>

angular-ngrx-scss/src/app/pull-requests/pull-requests.component.spec.ts

@@ -6,21 +6,21 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { AppState } from '../state';
-import { fetchPullRequests, RepoState } from '../state/repository';
+import { fetchPullRequests, RepositoryState } from '../state/repository';
 
 describe('PullRequestsComponent', () => {
   let component: PullRequestsComponent;
   let fixture: ComponentFixture<PullRequestsComponent>;
   let store: MockStore;
   const initialState: AppState = {
-    repo: {
+    repository: {
       selectedFile: {
         content: 'this is a readme file',
         name: 'starter.dev-github-showcases',
         type: 'file',
         size: 223,
       },
-    } as RepoState,
+    } as RepositoryState,
   } as AppState;
 
   beforeEach(async () => {

angular-ngrx-scss/src/app/repository/components/repo-header/repo-heading/repo-heading.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { RepoState } from 'src/app/state/repository';
+import { RepositoryState } from 'src/app/state/repository';
 
 @Component({
   selector: 'app-repo-heading',
@@ -8,7 +8,7 @@ import { RepoState } from 'src/app/state/repository';
 })
 export class RepositoryHeadingComponent {
   @Input()
-  repo?: RepoState;
+  repo?: RepositoryState;
 
   get ownerPath(): string {
     return `/${this.repo?.ownerName}`;

angular-ngrx-scss/src/app/repository/components/repo-header/repo-navigation/repo-navigation.component.ts

@@ -1,13 +1,13 @@
 import { Component, Input } from '@angular/core';
-import { RepoState } from 'src/app/state/repository';
+import { RepositoryState } from 'src/app/state/repository';
 
 @Component({
   selector: 'app-repo-navigation',
   templateUrl: './repo-navigation.component.html',
   styleUrls: ['./repo-navigation.component.scss'],
 })
 export class RepositoryNavigationComponent {
-  @Input() repo?: RepoState;
+  @Input() repo?: RepositoryState;
   @Input() issuesCount = 0;
   @Input() pullsCount = 0;