refactor(EditProfileComponent): reduce duplication

src/app/common/edit-profile/edit-profile.component.scss

@@ -0,0 +1,12 @@
+.actions {
+  margin-top: 8px;
+}
+
+.google-icon {
+  height: 1.8em;
+  width: auto;
+}
+
+.unlink {
+  margin: 8px 0;
+}

src/app/common/edit-profile/edit-profile.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EditProfileComponent } from './edit-profile.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+describe('EditProfileComponent', () => {
+  let component: EditProfileComponent;
+  let fixture: ComponentFixture<EditProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EditProfileComponent],
+      imports: [MatDialogModule, MatSnackBarModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/common/edit-profile/edit-profile.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { UnlinkGoogleAccountConfirmComponent } from '../../modules/shared/unlink-google-account-confirm/unlink-google-account-confirm.component';
+
+@Component({
+  selector: 'edit-profile',
+  templateUrl: './edit-profile.component.html',
+  styleUrls: ['./edit-profile.component.scss']
+})
+export class EditProfileComponent {
+  changed: boolean = false;
+
+  constructor(public dialog: MatDialog, public snackBar: MatSnackBar) {}
+
+  handleUpdateProfileResponse(response) {
+    if (response.status === 'success') {
+      this.changed = false;
+      this.snackBar.open($localize`Profile updated.`);
+    } else {
+      this.snackBar.open($localize`An error occurred. Please try again.`);
+    }
+  }
+
+  unlinkGoogleAccount() {
+    this.dialog.open(UnlinkGoogleAccountConfirmComponent, {
+      panelClass: 'dialog-sm'
+    });
+  }
+}

src/app/domain/profile.constants.ts

@@ -0,0 +1,12 @@
+export const schoolLevels: SchoolLevel[] = [
+  { code: 'ELEMENTARY_SCHOOL', label: $localize`Elementary School` },
+  { code: 'MIDDLE_SCHOOL', label: $localize`Middle School` },
+  { code: 'HIGH_SCHOOL', label: $localize`High School` },
+  { code: 'COLLEGE', label: $localize`College` },
+  { code: 'OTHER', label: $localize`Other` }
+];
+
+export interface SchoolLevel {
+  code: string;
+  label: string;
+}

src/app/register/register-teacher-form/register-teacher-form.component.ts

@@ -10,6 +10,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { ReCaptchaV3Service } from 'ng-recaptcha';
 import { NewPasswordAndConfirmComponent } from '../../password/new-password-and-confirm/new-password-and-confirm.component';
 import { ConfigService } from '../../services/config.service';
+import { SchoolLevel, schoolLevels } from '../../domain/profile.constants';
 
 @Component({
   selector: 'register-teacher-form',
@@ -36,13 +37,7 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
   isSubmitted = false;
   passwordsFormGroup = this.fb.group({});
   processing: boolean = false;
-  schoolLevels: any[] = [
-    { code: 'ELEMENTARY_SCHOOL', label: $localize`Elementary School` },
-    { code: 'MIDDLE_SCHOOL', label: $localize`Middle School` },
-    { code: 'HIGH_SCHOOL', label: $localize`High School` },
-    { code: 'COLLEGE', label: $localize`College` },
-    { code: 'OTHER', label: $localize`Other` }
-  ];
+  schoolLevels: SchoolLevel[] = schoolLevels;
   teacherUser: Teacher = new Teacher();
 
   constructor(

src/app/student/account/edit-profile/edit-profile.component.scss

@@ -6,16 +6,3 @@
 .inputs {
   max-width: breakpoint('sm.min');
 }
-
-.actions {
-  margin-top: 8px;
-}
-
-.google-icon {
-  height: 1.8em;
-  width: auto;
-}
-
-.unlink {
-  margin: 8px 0;
-}

src/app/student/account/edit-profile/edit-profile.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { EditProfileComponent } from './edit-profile.component';
+import { StudentEditProfileComponent } from './edit-profile.component';
 import { User } from '../../../domain/user';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { UserService } from '../../../services/user.service';
@@ -53,9 +53,9 @@ export class MockStudentService {
   }
 }
 
-describe('EditProfileComponent', () => {
-  let component: EditProfileComponent;
-  let fixture: ComponentFixture<EditProfileComponent>;
+describe('StudentEditProfileComponent', () => {
+  let component: StudentEditProfileComponent;
+  let fixture: ComponentFixture<StudentEditProfileComponent>;
 
   const getSubmitButton = () => {
     return fixture.debugElement.nativeElement.querySelector('button[type="submit"]');
@@ -72,7 +72,7 @@ describe('EditProfileComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [EditProfileComponent],
+      declarations: [StudentEditProfileComponent],
       imports: [
         BrowserAnimationsModule,
         ReactiveFormsModule,
@@ -87,7 +87,7 @@ describe('EditProfileComponent', () => {
       ],
       schemas: [NO_ERRORS_SCHEMA]
     });
-    fixture = TestBed.createComponent(EditProfileComponent);
+    fixture = TestBed.createComponent(StudentEditProfileComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/student/account/edit-profile/edit-profile.component.ts

@@ -7,17 +7,19 @@ import { UserService } from '../../../services/user.service';
 import { StudentService } from '../../student.service';
 import { Subscription } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
-import { UnlinkGoogleAccountConfirmComponent } from '../../../modules/shared/unlink-google-account-confirm/unlink-google-account-confirm.component';
+import { EditProfileComponent } from '../../../common/edit-profile/edit-profile.component';
 
 @Component({
-  selector: 'app-edit-profile',
+  selector: 'student-edit-profile',
   templateUrl: './edit-profile.component.html',
-  styleUrls: ['./edit-profile.component.scss']
+  styleUrls: [
+    '../../../common/edit-profile/edit-profile.component.scss',
+    './edit-profile.component.scss'
+  ]
 })
-export class EditProfileComponent {
+export class StudentEditProfileComponent extends EditProfileComponent {
   user: Student;
   languages: object[];
-  changed: boolean = false;
   isSaving: boolean = false;
   isGoogleUser: boolean = false;
   userSubscription: Subscription;
@@ -35,6 +37,7 @@ export class EditProfileComponent {
     public dialog: MatDialog,
     public snackBar: MatSnackBar
   ) {
+    super(dialog, snackBar);
     this.user = <Student>this.getUser().getValue();
     this.setControlFieldValue('firstName', this.user.firstName);
     this.setControlFieldValue('lastName', this.user.lastName);
@@ -86,20 +89,4 @@ export class EditProfileComponent {
   getControlFieldValue(fieldName) {
     return this.editProfileFormGroup.get(fieldName).value;
   }
-
-  handleUpdateProfileResponse(response) {
-    if (response.status === 'success') {
-      this.changed = false;
-      this.snackBar.open($localize`Profile updated.`);
-    } else {
-      this.snackBar.open($localize`An error occurred. Please try again.`);
-    }
-    this.isSaving = false;
-  }
-
-  unlinkGoogleAccount() {
-    this.dialog.open(UnlinkGoogleAccountConfirmComponent, {
-      panelClass: 'dialog-sm'
-    });
-  }
 }

src/app/student/account/edit/edit.component.html

@@ -13,7 +13,7 @@
   <mat-tab-group>
     <mat-tab i18n-label label="Account Info">
       <div class="section__tab">
-        <app-edit-profile></app-edit-profile>
+        <student-edit-profile></student-edit-profile>
       </div>
     </mat-tab>
     <mat-tab i18n-label label="Password">

src/app/student/account/edit/edit.component.spec.ts

@@ -6,20 +6,22 @@ import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 @Component({ selector: 'app-edit-password', template: '' })
 class EditPasswordComponent {}
 
-@Component({ selector: 'app-edit-profile', template: '' })
-class EditProfileComponent {}
+@Component({ selector: 'student-edit-profile', template: '' })
+class StudentEditProfileComponent {}
 
 describe('EditComponent', () => {
   let component: EditComponent;
   let fixture: ComponentFixture<EditComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [EditComponent],
-      providers: [],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [EditComponent],
+        providers: [],
+        schemas: [NO_ERRORS_SCHEMA]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditComponent);

src/app/student/student.module.ts

@@ -33,7 +33,7 @@ import { StudentRunListItemComponent } from './student-run-list-item/student-run
 import { AuthGuard } from './auth.guard';
 import { AddProjectDialogComponent } from './add-project-dialog/add-project-dialog.component';
 import { EditComponent } from './account/edit/edit.component';
-import { EditProfileComponent } from './account/edit-profile/edit-profile.component';
+import { StudentEditProfileComponent } from './account/edit-profile/edit-profile.component';
 import { TimelineModule } from '../modules/timeline/timeline.module';
 import { TeamSignInDialogComponent } from './team-sign-in-dialog/team-sign-in-dialog.component';
 import { GoogleSignInModule } from '../modules/google-sign-in/google-sign-in.module';
@@ -57,7 +57,7 @@ import { GoogleSignInModule } from '../modules/google-sign-in/google-sign-in.mod
     StudentRunListComponent,
     StudentRunListItemComponent,
     EditComponent,
-    EditProfileComponent,
+    StudentEditProfileComponent,
     TeamSignInDialogComponent
   ],
   providers: [AuthGuard],

src/app/teacher/account/edit-profile/edit-profile.component.html

@@ -95,7 +95,7 @@
       <mat-form-field appearance="fill" fxFlex>
         <mat-label i18n>School Level</mat-label>
         <mat-select formControlName="schoolLevel">
-          <mat-option *ngFor="let schoolLevel of schoolLevels" [value]="schoolLevel.id">
+          <mat-option *ngFor="let schoolLevel of schoolLevels" [value]="schoolLevel.code">
             {{ schoolLevel.label }}
           </mat-option>
         </mat-select>

src/app/teacher/account/edit-profile/edit-profile.component.scss

@@ -21,16 +21,3 @@
     }
   }
 }
-
-.actions {
-  margin-top: 8px;
-}
-
-.google-icon {
-  height: 1.8em;
-  width: auto;
-}
-
-.unlink {
-  margin: 8px 0;
-}

src/app/teacher/account/edit-profile/edit-profile.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { EditProfileComponent } from './edit-profile.component';
+import { TeacherEditProfileComponent } from './edit-profile.component';
 import { UserService } from '../../../services/user.service';
 import { Teacher } from '../../../domain/teacher';
 import { Observable, of, BehaviorSubject } from 'rxjs';
@@ -67,9 +67,9 @@ export class MockTeacherService {
   }
 }
 
-describe('EditProfileComponent', () => {
-  let component: EditProfileComponent;
-  let fixture: ComponentFixture<EditProfileComponent>;
+describe('TeacherEditProfileComponent', () => {
+  let component: TeacherEditProfileComponent;
+  let fixture: ComponentFixture<TeacherEditProfileComponent>;
 
   const getSubmitButton = () => {
     return fixture.debugElement.nativeElement.querySelector('button[type="submit"]');
@@ -86,7 +86,7 @@ describe('EditProfileComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [EditProfileComponent],
+      declarations: [TeacherEditProfileComponent],
       imports: [
         BrowserAnimationsModule,
         ReactiveFormsModule,
@@ -101,7 +101,7 @@ describe('EditProfileComponent', () => {
       ],
       schemas: [NO_ERRORS_SCHEMA]
     });
-    fixture = TestBed.createComponent(EditProfileComponent);
+    fixture = TestBed.createComponent(TeacherEditProfileComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });