feat: add code comments

hosting/src/app/app-routing.module.ts

@@ -16,7 +16,6 @@
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-// should update docs for v9
 import { redirectUnauthorizedTo, AuthGuard } from '@angular/fire/auth-guard';
 
 import { LoginPageComponent } from './login-page/login-page.component';
@@ -26,35 +25,43 @@ import { ViewPageComponent } from './view-page/view-page.component';
 
 const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
 
+// Add each page (login, edit, view) as separate paths
 const routes: Routes = [
-  { 
-    path: '', 
-    component: LoginPageComponent, 
+  // Show login page on default path
+  {
+    path: '',
+    component: LoginPageComponent,
   },
-  { 
-    path: 'login', 
-    component: LoginPageComponent, 
+  // Add redirect to login
+  {
+    path: 'login',
+    component: LoginPageComponent,
   },
-  { 
-    path: 'edit/:uid', 
-    component: EditPageComponent,     
-    canActivate: [AuthGuard], 
+  {
+    // Allow edit page to take in resume uid as path param
+    path: 'edit/:uid',
+    component: EditPageComponent,
+    // Protect edit page using AuthGuard, redirect user to Login page if unauthorized
+    canActivate: [AuthGuard],
     data: { authGuardPipe: redirectUnauthorizedToLogin },
+    // Resolve the current user data
     resolve: {
       user: UserResolver,
-    }
+    },
   },
-  { 
-    path: 'view/:uid', 
+  {
+    // Allow view page to take in resume uid as path param
+    path: 'view/:uid',
     component: ViewPageComponent,
+    // Resolve the current resume data
     resolve: {
       resume: ResumeResolver,
-    }
+    },
   },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

hosting/src/app/app.component.html

@@ -15,7 +15,9 @@
  -->
 
 <div class="site-layout">
+	<!-- Add header -->
 	<app-header></app-header>
+	<!-- Add router -->
 	<router-outlet></router-outlet>
 </div>
 

hosting/src/app/app.module.ts

@@ -22,9 +22,13 @@ import { AppComponent } from './app.component';
 
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { environment } from '../environments/environment';
-import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
-import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
-import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
+import {
+  provideFirestore,
+  getFirestore,
+  connectFirestoreEmulator,
+} from '@angular/fire/firestore';
 import { LoginPageComponent } from './login-page/login-page.component';
 import { EditPageComponent } from './edit-page/edit-page.component';
 import { ExperienceComponent } from './edit-page/experience/experience.component';
@@ -72,21 +76,26 @@ import { ViewPageComponent } from './view-page/view-page.component';
     AppRoutingModule,
     FormsModule,
     ReactiveFormsModule,
+    // Initialize Firebase from environment
     provideFirebaseApp(() => initializeApp(environment.firebase)),
+    // Initialize Firebase authentication
     provideAuth(() => {
       const auth = getAuth();
-      connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });
+      // Use emulator as default Firebase authentication
+      // connectAuthEmulator(auth, 'http://localhost:9099', {
+      //   disableWarnings: true,
+      // });
       return auth;
     }),
+    // Initialize Firestore
     provideFirestore(() => {
       const firestore = getFirestore();
-      connectFirestoreEmulator(firestore, 'localhost', 8086);
+      // Use emulator as default Firestore
+      // connectFirestoreEmulator(firestore, 'localhost', 8086);
       return firestore;
-    })
-  ],
-  providers: [
-    ResumeService,
+    }),
   ],
-  bootstrap: [AppComponent]
+  providers: [ResumeService],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

hosting/src/app/comments/comments.component.ts

@@ -25,9 +25,11 @@ import { Comment, CommentUpdate } from '../models/resume.model';
   styleUrls: ['./comments.component.css']
 })
 export class CommentsComponent implements OnInit {
+  // Get comments array, user, and resume id from parent
   @Input() comments!: Comment[];
   @Input() user!: User;
   @Input('resume-id') resumeId!: string;
+  // Emit create/delete events to parent
   @Output('on-comment') onComment = new EventEmitter<CommentUpdate>();
   @Output('on-delete') onDelete = new EventEmitter<Comment>();
   newMessage = '';
@@ -36,6 +38,7 @@ export class CommentsComponent implements OnInit {
     this.comments = this.comments || [];
   }
 
+  // Emit add comment event
   send() {
     this.onComment.next({
       uid: this.user.uid,
@@ -48,6 +51,7 @@ export class CommentsComponent implements OnInit {
     this.newMessage = '';
   }
 
+   // Emit delete comment event
   delete(comment: Comment) {
     this.onDelete.next(comment);
   }

hosting/src/app/details/details.component.ts

@@ -20,9 +20,10 @@ import { Experience } from '../models/resume.model';
 @Component({
   selector: 'app-details',
   templateUrl: './details.component.html',
-  styleUrls: ['./details.component.css']
+  styleUrls: ['./details.component.css'],
 })
 export class DetailsComponent {
+  // Emit change event to parent
   @Output('on-change') onChange = new EventEmitter<Experience>();
   @Input() title!: string;
   @Input('experience-id') id!: string;
@@ -35,12 +36,13 @@ export class DetailsComponent {
   ngOnInit() {
     this.newDetails = {
       id: this.id,
-      title: this.title || '', 
-      startDate: this.startDate || new Date(), 
-      endDate: this.endDate || new Date(), 
+      title: this.title || '',
+      startDate: this.startDate || new Date(),
+      endDate: this.endDate || new Date(),
     };
   }
 
+  // Emit update experience event
   onUpdate() {
     this.onChange.next(this.newDetails);
   }

hosting/src/app/edit-page/edit-page.component.html

@@ -1,3 +1,4 @@
+<!-- Read value of resume$ observable -->
 <main *ngIf="resume$ | async as resume">
   <app-resume
     [is-editable]="user.uid === routeId"
@@ -8,6 +9,7 @@
   </app-resume>
 </main>
 
+<!-- Read value of comments$ observable -->
 <aside *ngIf="comments$ | async as comments">
   <app-comments
     [resume-id]="routeId"

hosting/src/app/edit-page/edit-page.component.ts

@@ -14,11 +14,10 @@
  limitations under the License.
  */
 
-import { Component, Inject, inject } from '@angular/core';
-import { Resume, CommentUpdate, Comment, ListUpdate, SkillUpdate, OverviewUpdate, ExperienceUpdate, ResumeListUpdate } from '../models/resume.model';
+import { Component, inject } from '@angular/core';
+import { Resume, CommentUpdate, Comment, ExperienceUpdate, ResumeListUpdate } from '../models/resume.model';
 import { ActivatedRoute } from '@angular/router';
 import { ResumeService } from '../services/resume.service';
-import { startWith } from 'rxjs';
 import { User } from '@angular/fire/auth';
 
 @Component({
@@ -27,13 +26,17 @@ import { User } from '@angular/fire/auth';
   styleUrls: ['./edit-page.component.css'],
 })
 export class EditPageComponent {
+  // Inject ResumeService and ActivatedRoute
   private activatedRoute = inject(ActivatedRoute);
   private resumeService = inject(ResumeService);
+  // Get user and resume uid from ActivatedRoute
   user: User = this.activatedRoute.snapshot.data['user'];
   routeId = this.activatedRoute.snapshot.paramMap.get('uid')!;
+  // Get resume and comments using ResumeService and resume uid
   resume$ = this.resumeService.resume$(this.routeId);
   comments$ = this.resumeService.comments$(this.routeId);
 
+  // Updates the resume doc using ResumeService
   onUpdate(update: ExperienceUpdate) {
     let resumeUpdate: Partial<Resume> = {};
     resumeUpdate.id = this.routeId;
@@ -46,14 +49,17 @@ export class EditPageComponent {
     this.resumeService.updateExperience(this.routeId, update);
   }
 
+  // Update list in resume using ResumeService
   onArrayAdd(update: ResumeListUpdate) {
     this.resumeService.updateArrayInResume(this.routeId, update);
   }
 
+  // Add to list in resume using ResumeService
   addComment(comment: CommentUpdate) {
     this.resumeService.addComment(comment);
   }
 
+  // Delete list in resume using ResumeService
   deleteComment(comment: Comment) {
     this.resumeService.deleteComment(comment);
   }

hosting/src/app/edit-page/experience/experience.component.ts

@@ -23,14 +23,17 @@ import { Experience, ExperienceUpdate } from 'src/app/models/resume.model';
   styleUrls: ['./experience.component.css'],
 })
 export class ExperienceComponent {
-  @Input() experiences?: Experience[];
+  // Emit change event to parent
   @Output('on-change') onChange = new EventEmitter<ExperienceUpdate>();
+  // Get experience array and editable state
+  @Input() experiences?: Experience[];
   @Input('is-editable') isEditable = false;
 
   ngOnInit() {
     this.experiences = this.experiences || [];
   }
 
+  // Emit remove skiexperiencell event
   delete(experience: Experience) {
     this.onChange.next({
       type: 'removed',
@@ -39,25 +42,26 @@ export class ExperienceComponent {
     });
   }
 
+  // Emit add experience event
   add() {
     const item = {
       title: '',
       startDate: new Date(),
       endDate: new Date(),
     };
-    this.onChange.next({  
+    this.onChange.next({
       key: 'experience',
       type: 'added',
       item,
     });
   }
-
+
+  // Emit modify experience event
   onUpdate(experience: Experience) {
     this.onChange.next({
       key: 'experience',
       type: 'modified',
       item: experience,
     });
   }
-
 }

hosting/src/app/edit-page/overview/overview.component.ts

@@ -20,13 +20,16 @@ import { Overview, OverviewUpdate } from 'src/app/models/resume.model';
 @Component({
   selector: 'app-overview',
   templateUrl: './overview.component.html',
-  styleUrls: ['./overview.component.css']
+  styleUrls: ['./overview.component.css'],
 })
 export class OverviewComponent {
+  // Emit change event to parent
+  @Output('on-change') onChange = new EventEmitter<OverviewUpdate>();
+  // Get overview array and editable state
   @Input() overview!: string[];
   @Input('is-editable') isEditable = false;
-  @Output('on-change') onChange = new EventEmitter<OverviewUpdate>();
 
+  // Emit overview update event
   updateWork(update: OverviewUpdate) {
     this.onChange.next(update);
   }

hosting/src/app/edit-page/skill/skill.component.ts

@@ -23,25 +23,29 @@ import { SkillUpdate } from 'src/app/models/resume.model';
   styleUrls: ['./skill.component.css'],
 })
 export class SkillComponent {
+  // Emit change event to parent
   @Output('skill-change') onSkillChange = new EventEmitter<SkillUpdate>();
+  // Get skills array and editable state
   @Input() skills!: string[];
   @Input('is-editable') isEditable = false;
   newSkill = '';
 
+  // Emit add skill event
   onAdd() {
-    this.onSkillChange.emit({ 
-      key: 'skills', 
-      item: this.newSkill, 
-      type: 'added' 
+    this.onSkillChange.emit({
+      key: 'skills',
+      item: this.newSkill,
+      type: 'added',
     });
     this.newSkill = '';
   }
 
+  // Emit remove skill event
   onRemove(skillToDelete: string) {
-    this.onSkillChange.emit({ 
-      key: 'skills', 
-      item: skillToDelete, 
-      type: 'removed' 
+    this.onSkillChange.emit({
+      key: 'skills',
+      item: skillToDelete,
+      type: 'removed',
     });
   }
 }

hosting/src/app/header/header.component.ts

@@ -24,14 +24,18 @@ import { ResumeService } from '../services/resume.service';
   styleUrls: ['./header.component.css']
 })
 export class HeaderComponent {
+  // Inject ResumeService and Auth
   resumeService: ResumeService = inject(ResumeService);
   private auth: Auth = inject(Auth);
+  // Get current user from auth state
   user$ = authState(this.auth)
 
+  // Log out
   logout() {
     signOut(this.auth)
       .catch((error) => {
         console.log('sign out error: ' + error);
       });
+    window.location.reload();
   }
 }

hosting/src/app/login-page/login-page.component.html

@@ -15,6 +15,7 @@
  -->
 
  <main>
+  <!-- Read value of user$ observable -->
   <div *ngIf="user$ | async as user else showLogin">
     <h1 class="title">{{ user.displayName }}</h1>
   </div>