feat(challenge7): add all mecanism

apps/ngrx-notification/README.md

@@ -24,8 +24,6 @@
 6. Commit your work
 7. Submit a PR with a title beginning with **Answer:7** that I will review and other dev can review.
 
-<!-- TODO: add challenge number and project Name -->
-
 <a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A7+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="Ngrx notification"/></a>
 
 <!-- TODO: uncomment when done late -->

apps/ngrx-notification/src/app/app.actions.ts

@@ -0,0 +1,8 @@
+import { createActionGroup, emptyProps } from '@ngrx/store';
+
+export const appActions = createActionGroup({
+  source: 'App Component',
+  events: {
+    'Init App': emptyProps(),
+  },
+});

apps/ngrx-notification/src/app/app.component.ts

@@ -1,22 +1,40 @@
-import { Component } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
-import { StudentComponent } from './student.component';
+import { RouterLink, RouterOutlet } from '@angular/router';
-import { TeacherComponent } from './teacher.component';
+import { Store } from '@ngrx/store';
+import { appActions } from './app.actions';
 
 @Component({
   standalone: true,
-  imports: [TeacherComponent, StudentComponent],
+  imports: [RouterOutlet, RouterLink],
   selector: 'app-root',
   template: `
-    <teacher></teacher>
+    <nav>
-    <student></student>
+      <button routerLink="/teacher">Teacher</button>
+      <button routerLink="/student">Student</button>
+      <button routerLink="/school">School</button>
+    </nav>
+
+    <router-outlet></router-outlet>
   `,
   styles: [
     `
       :host {
         display: flex;
+        flex-direction: column;
         gap: 20px;
+
+        nav {
+          display: flex;
+          gap: 20px;
+        }
       }
     `,
   ],
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  private store = inject(Store);
+
+  ngOnInit(): void {
+    this.store.dispatch(appActions.initApp());
+  }
+}

apps/ngrx-notification/src/app/data-access/http.service.ts

@@ -0,0 +1,14 @@
+import { FakeBackendService } from '@angular-challenges/ngrx-notification/backend';
+import { inject, Injectable } from '@angular/core';
+import { take } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class HttpService {
+  private fakeBackend = inject(FakeBackendService);
+
+  getAllTeachers = () => this.fakeBackend.getAllTeachers().pipe(take(1));
+
+  getAllStudents = () => this.fakeBackend.getAllStudents().pipe(take(1));
+
+  getAllSchools = () => this.fakeBackend.getAllStchools().pipe(take(1));
+}

apps/ngrx-notification/src/app/data-access/notification.service.ts

@@ -1,26 +1,39 @@
+import { PushService } from '@angular-challenges/ngrx-notification/backend';
 import {
+  isSchool,
   isStudent,
   isTeacher,
   Push,
 } from '@angular-challenges/ngrx-notification/model';
 import { inject, Injectable } from '@angular/core';
-import { PUSH_ACTION } from './notification.token';
+import { Store } from '@ngrx/store';
-import { StudentStore } from './student.store';
+import { filter } from 'rxjs';
-import { TeacherStore } from './teacher.store';
+import { studentActions } from '../student/store/student.actions';
+import { teacherActions } from '../teacher/store/teacher.actions';
 
 @Injectable({ providedIn: 'root' })
 export class NotificationService {
-  private notification$ = inject(PUSH_ACTION);
+  private pushService = inject(PushService);
-  private teacherStore = inject(TeacherStore);
+  private store = inject(Store);
-  private studentStore = inject(StudentStore);
 
   init() {
-    this.notification$.subscribe((notification: Push) => {
+    this.pushService.notification$
+      .pipe(filter(Boolean))
+      .subscribe((notification: Push) => {
         if (isTeacher(notification)) {
-        this.teacherStore.addOne(notification);
+          this.store.dispatch(
+            teacherActions.addOneTeacher({ teacher: notification })
+          );
         }
         if (isStudent(notification)) {
-        this.studentStore.addOne(notification);
+          this.store.dispatch(
+            studentActions.addOneStudent({ student: notification })
+          );
+        }
+        if (isSchool(notification)) {
+          // SchoolStore is not providedin root. thus at initialization, SchoolStore is undefined
+          // Option 1: set SchoolStore in root, but we don't want this to separate our class.
+          // Option 2: your turn
         }
       });
   }

apps/ngrx-notification/src/app/data-access/notification.token.ts

@@ -1,12 +0,0 @@
-import { PushService } from '@angular-challenges/ngrx-notification/backend';
-import { Push } from '@angular-challenges/ngrx-notification/model';
-import { inject, InjectionToken } from '@angular/core';
-import { filter, Observable, share } from 'rxjs';
-
-export const PUSH_ACTION = new InjectionToken<Observable<Push>>(
-  'Push messaging action stream',
-  {
-    factory: () =>
-      inject(PushService).notification$.pipe(filter(Boolean), share()),
-  }
-);

apps/ngrx-notification/src/app/data-access/student.store.ts

@@ -1,23 +0,0 @@
-import { Student } from '@angular-challenges/ngrx-notification/model';
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class StudentStore {
-  private students = new BehaviorSubject<Student[]>([]);
-  students$ = this.students.asObservable();
-
-  addAll(students: Student[]) {
-    this.students.next(students);
-  }
-
-  addOne(student: Student) {
-    this.students.next([...this.students.value, student]);
-  }
-
-  deleteOne(id: number) {
-    this.students.next(this.students.value.filter((s) => s.id !== id));
-  }
-}

apps/ngrx-notification/src/app/data-access/teacher.store.ts

@@ -1,23 +0,0 @@
-import { Teacher } from '@angular-challenges/ngrx-notification/model';
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class TeacherStore {
-  private teachers = new BehaviorSubject<Teacher[]>([]);
-  teachers$ = this.teachers.asObservable();
-
-  addAll(teachers: Teacher[]) {
-    this.teachers.next(teachers);
-  }
-
-  addOne(teacher: Teacher) {
-    this.teachers.next([...this.teachers.value, teacher]);
-  }
-
-  deleteOne(id: number) {
-    this.teachers.next(this.teachers.value.filter((t) => t.id !== id));
-  }
-}

apps/ngrx-notification/src/app/routes.ts

@@ -0,0 +1,20 @@
+import { Route } from '@angular/router';
+
+export const ROUTES: Route[] = [
+  { path: '', pathMatch: 'full', redirectTo: 'teacher' },
+  {
+    path: 'teacher',
+    loadComponent: () =>
+      import('./teacher/teacher.component').then((m) => m.TeacherComponent),
+  },
+  {
+    path: 'student',
+    loadComponent: () =>
+      import('./student/student.component').then((m) => m.StudentComponent),
+  },
+  {
+    path: 'school',
+    loadComponent: () =>
+      import('./school/school.component').then((m) => m.SchoolComponent),
+  },
+];

apps/ngrx-notification/src/app/school/school.component.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { AsyncPipe, NgFor } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { provideComponentStore } from '@ngrx/component-store';
+import { SchoolStore } from './school.store';
+
+@Component({
+  standalone: true,
+  imports: [NgFor, AsyncPipe],
+  providers: [provideComponentStore(SchoolStore)],
+  selector: 'school',
+  template: `
+    <h3>SCHOOL</h3>
+    <div *ngFor="let school of school$ | async">
+      {{ school.name }} - {{ school.version }}
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: fit-content;
+        height: fit-content;
+        border: 1px solid red;
+        padding: 4px;
+      }
+    `,
+  ],
+})
+export class SchoolComponent {
+  private store = inject(SchoolStore);
+  school$ = this.store.schools$;
+}

apps/ngrx-notification/src/app/school/school.store.ts

@@ -0,0 +1,48 @@
+import { School } from '@angular-challenges/ngrx-notification/model';
+import { Injectable } from '@angular/core';
+import {
+  ComponentStore,
+  OnStoreInit,
+  tapResponse,
+} from '@ngrx/component-store';
+import { pipe, switchMap } from 'rxjs';
+import { HttpService } from '../data-access/http.service';
+
+@Injectable()
+export class SchoolStore
+  extends ComponentStore<{ schools: School[] }>
+  implements OnStoreInit
+{
+  readonly schools$ = this.select((state) => state.schools);
+
+  constructor(private httpService: HttpService) {
+    super({ schools: [] });
+  }
+
+  addSchool = this.updater((state, school: School) => ({
+    ...state,
+    schools: [...state.schools, school],
+  }));
+
+  updateSchool = this.updater((state, school: School) => ({
+    ...state,
+    schools: state.schools.map((t) => (t.id === school.id ? school : t)),
+  }));
+
+  private readonly loadSchools = this.effect<void>(
+    pipe(
+      switchMap(() =>
+        this.httpService.getAllSchools().pipe(
+          tapResponse(
+            (schools) => this.patchState({ schools }),
+            (_) => _
+          )
+        )
+      )
+    )
+  );
+
+  ngrxOnStoreInit() {
+    this.loadSchools();
+  }
+}

apps/ngrx-notification/src/app/student/store/student.actions.ts

@@ -0,0 +1,10 @@
+import { Student } from '@angular-challenges/ngrx-notification/model';
+import { createActionGroup, props } from '@ngrx/store';
+
+export const studentActions = createActionGroup({
+  source: 'Student API',
+  events: {
+    'Add One Student': props<{ student: Student }>(),
+    'Add All Students': props<{ students: Student[] }>(),
+  },
+});

apps/ngrx-notification/src/app/student/store/student.effects.ts

@@ -0,0 +1,23 @@
+import { inject, Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { map, switchMap } from 'rxjs';
+import { appActions } from '../../app.actions';
+import { HttpService } from '../../data-access/http.service';
+import { studentActions } from './student.actions';
+
+@Injectable()
+export class StudentEffects {
+  private actions$ = inject(Actions);
+  private httpService = inject(HttpService);
+
+  loadStudents$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(appActions.initApp),
+      switchMap(() =>
+        this.httpService
+          .getAllStudents()
+          .pipe(map((students) => studentActions.addAllStudents({ students })))
+      )
+    )
+  );
+}

apps/ngrx-notification/src/app/student/store/student.reducer.ts

@@ -0,0 +1,24 @@
+import { Student } from '@angular-challenges/ngrx-notification/model';
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
+import { createReducer, on } from '@ngrx/store';
+import { studentActions } from './student.actions';
+
+export const studentsFeatureKey = 'students';
+
+export type StudentState = EntityState<Student>;
+
+export const studentAdapter: EntityAdapter<Student> =
+  createEntityAdapter<Student>();
+
+export const studentReducer = createReducer(
+  studentAdapter.getInitialState(),
+  on(studentActions.addOneStudent, (state, { student }) =>
+    studentAdapter.upsertOne(student, state)
+  ),
+  on(studentActions.addAllStudents, (state, { students }) =>
+    studentAdapter.setAll(students, state)
+  )
+);
+
+export const { selectIds, selectEntities, selectAll, selectTotal } =
+  studentAdapter.getSelectors();

apps/ngrx-notification/src/app/student/store/student.selectors.ts

@@ -0,0 +1,17 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import {
+  studentAdapter,
+  studentsFeatureKey,
+  StudentState,
+} from './student.reducer';
+
+const selectStudentState =
+  createFeatureSelector<StudentState>(studentsFeatureKey);
+
+export const { selectAll } = studentAdapter.getSelectors();
+
+const selectStudents = createSelector(selectStudentState, selectAll);
+
+export const StudentSelectors = {
+  selectStudents,
+};

apps/ngrx-notification/src/app/student/student.component.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { AsyncPipe, NgFor } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { StudentStore } from './data-access/student.store';
+import { Store } from '@ngrx/store';
+import { StudentSelectors } from './store/student.selectors';
 
 @Component({
   standalone: true,
@@ -10,7 +11,7 @@ import { StudentStore } from './data-access/student.store';
   template: `
     <h3>STUDENTS</h3>
     <div *ngFor="let student of students$ | async">
-      {{ student.firstname }}
+      {{ student.firstname }} {{ student.lastname }} - {{ student.version }}
     </div>
   `,
   styles: [
@@ -26,7 +27,6 @@ import { StudentStore } from './data-access/student.store';
   ],
 })
 export class StudentComponent {
-  students$ = this.studentStore.students$;
+  private store = inject(Store);
-
+  students$ = this.store.select(StudentSelectors.selectStudents);
-  constructor(private studentStore: StudentStore) {}
 }

apps/ngrx-notification/src/app/teacher/store/teacher.actions.ts

@@ -0,0 +1,10 @@
+import { Teacher } from '@angular-challenges/ngrx-notification/model';
+import { createActionGroup, props } from '@ngrx/store';
+
+export const teacherActions = createActionGroup({
+  source: 'Teacher API',
+  events: {
+    'Add One Teacher': props<{ teacher: Teacher }>(),
+    'Add All Teachers': props<{ teachers: Teacher[] }>(),
+  },
+});

apps/ngrx-notification/src/app/teacher/store/teacher.effects.ts

@@ -0,0 +1,23 @@
+import { inject, Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { map, switchMap } from 'rxjs';
+import { appActions } from '../../app.actions';
+import { HttpService } from '../../data-access/http.service';
+import { teacherActions } from './teacher.actions';
+
+@Injectable()
+export class TeacherEffects {
+  private actions$ = inject(Actions);
+  private httpService = inject(HttpService);
+
+  loadTeachers$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(appActions.initApp),
+      switchMap(() =>
+        this.httpService
+          .getAllTeachers()
+          .pipe(map((teachers) => teacherActions.addAllTeachers({ teachers })))
+      )
+    )
+  );
+}

apps/ngrx-notification/src/app/teacher/store/teacher.reducer.ts

@@ -0,0 +1,24 @@
+import { Teacher } from '@angular-challenges/ngrx-notification/model';
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
+import { createReducer, on } from '@ngrx/store';
+import { teacherActions } from './teacher.actions';
+
+export const teachersFeatureKey = 'teachers';
+
+export type TeacherState = EntityState<Teacher>;
+
+export const teacherAdapter: EntityAdapter<Teacher> =
+  createEntityAdapter<Teacher>();
+
+export const teacherReducer = createReducer(
+  teacherAdapter.getInitialState(),
+  on(teacherActions.addOneTeacher, (state, { teacher }) =>
+    teacherAdapter.upsertOne(teacher, state)
+  ),
+  on(teacherActions.addAllTeachers, (state, { teachers }) =>
+    teacherAdapter.setAll(teachers, state)
+  )
+);
+
+export const { selectIds, selectEntities, selectAll, selectTotal } =
+  teacherAdapter.getSelectors();

apps/ngrx-notification/src/app/teacher/store/teacher.selectors.ts

@@ -0,0 +1,17 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import {
+  teacherAdapter,
+  teachersFeatureKey,
+  TeacherState,
+} from './teacher.reducer';
+
+const selectTeacherState =
+  createFeatureSelector<TeacherState>(teachersFeatureKey);
+
+export const { selectAll } = teacherAdapter.getSelectors();
+
+const selectTeachers = createSelector(selectTeacherState, selectAll);
+
+export const TeacherSelectors = {
+  selectTeachers,
+};

apps/ngrx-notification/src/app/teacher/teacher.component.ts

@@ -1,6 +1,8 @@
+/* eslint-disable @angular-eslint/component-selector */
 import { AsyncPipe, NgFor } from '@angular/common';
 import { Component } from '@angular/core';
-import { TeacherStore } from './data-access/teacher.store';
+import { Store } from '@ngrx/store';
+import { TeacherSelectors } from './store/teacher.selectors';
 
 @Component({
   standalone: true,
@@ -9,7 +11,7 @@ import { TeacherStore } from './data-access/teacher.store';
   template: `
     <h3>TEACHERS</h3>
     <div *ngFor="let teacher of teacher$ | async">
-      {{ teacher.firstname }}
+      {{ teacher.firstname }} {{ teacher.lastname }} - {{ teacher.version }}
     </div>
   `,
   styles: [
@@ -25,7 +27,7 @@ import { TeacherStore } from './data-access/teacher.store';
   ],
 })
 export class TeacherComponent {
-  teacher$ = this.teacherStore.teachers$;
+  teacher$ = this.store.select(TeacherSelectors.selectTeachers);
 
-  constructor(private teacherStore: TeacherStore) {}
+  constructor(private store: Store) {}
 }

apps/ngrx-notification/src/main.ts

@@ -1,22 +1,44 @@
-import { PushService } from '@angular-challenges/ngrx-notification/backend';
+import { FakeBackendService } from '@angular-challenges/ngrx-notification/backend';
 import { APP_INITIALIZER, enableProdMode, inject } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { provideEffects } from '@ngrx/effects';
+import { provideStore } from '@ngrx/store';
 import { AppComponent } from './app/app.component';
 import { NotificationService } from './app/data-access/notification.service';
+import { ROUTES } from './app/routes';
+import { StudentEffects } from './app/student/store/student.effects';
+import {
+  studentReducer,
+  studentsFeatureKey,
+} from './app/student/store/student.reducer';
+import { TeacherEffects } from './app/teacher/store/teacher.effects';
+import {
+  teacherReducer,
+  teachersFeatureKey,
+} from './app/teacher/store/teacher.reducer';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
+const REDUCERS = {
+  [teachersFeatureKey]: teacherReducer,
+  [studentsFeatureKey]: studentReducer,
+};
+
 bootstrapApplication(AppComponent, {
   providers: [
+    provideStore(REDUCERS),
+    provideEffects([TeacherEffects, StudentEffects]),
+    provideRouter(ROUTES),
     {
       provide: APP_INITIALIZER,
       multi: true,
       useFactory: () => {
-        const service = inject(PushService);
+        const service = inject(FakeBackendService);
-        return () => service.init();
+        return () => service.start();
       },
     },
     {

apps/ngrx-notification/tsconfig.editor.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "include": [
     "**/*.ts",
-    "../../libs/ngrx-notification/backend/src/lib/push.service.ts"
+    "../../libs/ngrx-notification/backend/src/lib/fake-backend.service.ts"
   ],
   "compilerOptions": {
     "types": []

libs/ngrx-notification/backend/src/index.ts

@@ -1 +1,2 @@
+export * from './lib/fake-backend.service';
 export * from './lib/push.service';

libs/ngrx-notification/backend/src/lib/fake-backend.service.ts

@@ -0,0 +1,105 @@
+import {
+  randSchool,
+  randStudent,
+  randTeacher,
+} from '@angular-challenges/ngrx-notification/model';
+import { inject, Injectable } from '@angular/core';
+import { randCompanyName, randFirstName } from '@ngneat/falso';
+import { concatLatestFrom } from '@ngrx/effects';
+import { map, tap, timer } from 'rxjs';
+import { FakeDBService } from './fake-db.service';
+import { PushService } from './push.service';
+
+@Injectable({ providedIn: 'root' })
+export class FakeBackendService {
+  private fakeDbService = inject(FakeDBService);
+  private pushService = inject(PushService);
+
+  getAllTeachers = () => this.fakeDbService.teachers$;
+  getAllStudents = () => this.fakeDbService.students$;
+  getAllStchools = () => this.fakeDbService.schools$;
+
+  start() {
+    this.fakeAddTeacher();
+    this.fakeUpdateTeacher();
+    this.fakeAddStudent();
+    this.fakeUpdateStudent();
+    this.fakeAddSchool();
+    this.fakeUpdateSchool();
+  }
+
+  private fakeAddTeacher() {
+    timer(0, 4000)
+      .pipe(
+        map(() => randTeacher()),
+        tap((teacher) => this.pushService.pushData(teacher)),
+        tap((teacher) => this.fakeDbService.addTeacher(teacher))
+      )
+      .subscribe();
+  }
+
+  private fakeUpdateTeacher() {
+    timer(8000, 5000)
+      .pipe(
+        concatLatestFrom(() => this.fakeDbService.randomTeacher$),
+        map(([, teacher]) => ({
+          ...teacher,
+          firstname: randFirstName(),
+          version: teacher.version + 1,
+        })),
+        tap((teacher) => this.pushService.pushData(teacher)),
+        tap((teacher) => this.fakeDbService.updateTeacher(teacher))
+      )
+      .subscribe();
+  }
+
+  private fakeAddStudent() {
+    timer(0, 2000)
+      .pipe(
+        map(() => randStudent()),
+        tap((student) => this.pushService.pushData(student)),
+        tap((student) => this.fakeDbService.addStudent(student))
+      )
+      .subscribe();
+  }
+
+  private fakeUpdateStudent() {
+    timer(8000, 6000)
+      .pipe(
+        concatLatestFrom(() => this.fakeDbService.randomStudents$),
+        map(([, student]) => ({
+          ...student,
+          firstname: randFirstName(),
+          version: student.version + 1,
+        })),
+        tap((student) => this.pushService.pushData(student)),
+        tap((student) => this.fakeDbService.updateSudent(student))
+      )
+      .subscribe();
+  }
+
+  private fakeAddSchool() {
+    timer(0, 2000)
+      .pipe(
+        map(() => randSchool()),
+        tap((school) => this.pushService.pushData(school)),
+        tap((school) => this.fakeDbService.addSchool(school))
+      )
+      .subscribe();
+  }
+
+  private fakeUpdateSchool() {
+    timer(8000, 4000)
+      .pipe(
+        concatLatestFrom(() => this.fakeDbService.randomSchool$),
+        map(([, school]) => ({
+          ...school,
+          name: randCompanyName(),
+          version: school.version + 1,
+        })),
+        tap((school) => this.pushService.pushData(school)),
+        tap((school) => this.fakeDbService.updateSchool(school))
+      )
+      .subscribe();
+  }
+}

libs/ngrx-notification/backend/src/lib/fake-db.service.ts

@@ -0,0 +1,67 @@
+import {
+  School,
+  Student,
+  Teacher,
+} from '@angular-challenges/ngrx-notification/model';
+import { Injectable } from '@angular/core';
+import { randNumber } from '@ngneat/falso';
+import { ComponentStore } from '@ngrx/component-store';
+
+@Injectable({ providedIn: 'root' })
+export class FakeDBService extends ComponentStore<{
+  teachers: Teacher[];
+  students: Student[];
+  schools: School[];
+}> {
+  readonly teachers$ = this.select((state) => state.teachers);
+  readonly randomTeacher$ = this.select(
+    this.teachers$,
+    (teachers) => teachers[randNumber({ max: teachers.length - 1 })]
+  );
+
+  readonly students$ = this.select((state) => state.students);
+  readonly randomStudents$ = this.select(
+    this.students$,
+    (students) => students[randNumber({ max: students.length - 1 })]
+  );
+
+  readonly schools$ = this.select((state) => state.schools);
+  readonly randomSchool$ = this.select(
+    this.schools$,
+    (schools) => schools[randNumber({ max: schools.length - 1 })]
+  );
+
+  constructor() {
+    super({ teachers: [], students: [], schools: [] });
+  }
+
+  addTeacher = this.updater((state, teacher: Teacher) => ({
+    ...state,
+    teachers: [...state.teachers, teacher],
+  }));
+
+  updateTeacher = this.updater((state, teacher: Teacher) => ({
+    ...state,
+    teachers: state.teachers.map((t) => (t.id === teacher.id ? teacher : t)),
+  }));
+
+  addStudent = this.updater((state, student: Student) => ({
+    ...state,
+    students: [...state.students, student],
+  }));
+
+  updateSudent = this.updater((state, student: Student) => ({
+    ...state,
+    students: state.students.map((t) => (t.id === student.id ? student : t)),
+  }));
+
+  addSchool = this.updater((state, school: School) => ({
+    ...state,
+    schools: [...state.schools, school],
+  }));
+
+  updateSchool = this.updater((state, school: School) => ({
+    ...state,
+    schools: state.schools.map((t) => (t.id === school.id ? school : t)),
+  }));
+}

libs/ngrx-notification/backend/src/lib/push.service.ts

@@ -1,10 +1,6 @@
-import {
+import { Push } from '@angular-challenges/ngrx-notification/model';
-  Push,
-  randStudent,
-  randTeacher,
-} from '@angular-challenges/ngrx-notification/model';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, tap, timer } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class PushService {
@@ -13,20 +9,7 @@ export class PushService {
   );
   notification$ = this.notificationSubject.asObservable();
 
-  init() {
+  pushData(data: Push) {
-    this.startTeacherNotification();
+    this.notificationSubject.next(data);
-    this.startStudentNotification();
-  }
-
-  private startTeacherNotification() {
-    timer(0, 4000)
-      .pipe(tap(() => this.notificationSubject.next(randTeacher())))
-      .subscribe();
-  }
-
-  private startStudentNotification() {
-    timer(1000, 3000)
-      .pipe(tap(() => this.notificationSubject.next(randStudent())))
-      .subscribe();
   }
 }

libs/ngrx-notification/model/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/push.model';
+export * from './lib/school.model';
 export * from './lib/student.model';
 export * from './lib/teacher.model';

libs/ngrx-notification/model/src/lib/push.model.ts

@@ -1,4 +1,4 @@
-export type PushType = 'teacher' | 'student';
+export type PushType = 'teacher' | 'student' | 'school';
 
 export interface Push {
   type: PushType;

libs/ngrx-notification/model/src/lib/school.model.ts

@@ -0,0 +1,21 @@
+import { incrementalNumber, randCompanyName } from '@ngneat/falso';
+import { Push } from './push.model';
+
+export interface School extends Push {
+  id: number;
+  name: string;
+  version: number;
+}
+
+const schoolTeacher = incrementalNumber();
+
+export const randSchool = (): School => ({
+  id: schoolTeacher(),
+  name: randCompanyName(),
+  version: 0,
+  type: 'school',
+});
+
+export const isSchool = (notif: Push): notif is School => {
+  return notif.type === 'school';
+};

libs/ngrx-notification/model/src/lib/student.model.ts

@@ -1,16 +1,11 @@
-import {
+import { incrementalNumber, randFirstName, randLastName } from '@ngneat/falso';
-  incrementalNumber,
-  randFirstName,
-  randLastName,
-  randWord,
-} from '@ngneat/falso';
 import { Push } from './push.model';
 
 export interface Student extends Push {
   id: number;
   firstname: string;
   lastname: string;
-  school: string;
+  version: number;
 }
 
 const factoryStudent = incrementalNumber();
@@ -19,7 +14,7 @@ export const randStudent = (): Student => ({
   id: factoryStudent(),
   firstname: randFirstName(),
   lastname: randLastName(),
-  school: randWord(),
+  version: 0,
   type: 'student',
 });
 

libs/ngrx-notification/model/src/lib/teacher.model.ts

@@ -1,25 +1,11 @@
-import {
+import { incrementalNumber, randFirstName, randLastName } from '@ngneat/falso';
-  incrementalNumber,
-  rand,
-  randFirstName,
-  randLastName,
-} from '@ngneat/falso';
 import { Push } from './push.model';
 
-export const subject = [
-  'Sciences',
-  'History',
-  'English',
-  'Maths',
-  'Sport',
-] as const;
-export type Subject = typeof subject[number];
-
 export interface Teacher extends Push {
   id: number;
   firstname: string;
   lastname: string;
-  subject: Subject;
+  version: number;
 }
 
 const factoryTeacher = incrementalNumber();
@@ -28,7 +14,7 @@ export const randTeacher = (): Teacher => ({
   id: factoryTeacher(),
   firstname: randFirstName(),
   lastname: randLastName(),
-  subject: rand(subject),
+  version: 0,
   type: 'teacher',
 });
 

package-lock.json

@@ -24,6 +24,7 @@
         "@ngneat/falso": "^6.1.0",
         "@ngrx/component-store": "^14.3.2",
         "@ngrx/effects": "^14.3.2",
+        "@ngrx/entity": "^14.3.2",
         "@ngrx/router-store": "^14.3.2",
         "@ngrx/store": "^14.3.2",
         "@nrwl/angular": "15.0.7",
@@ -42,6 +43,7 @@
         "@angular/language-service": "~14.2.0",
         "@commitlint/cli": "^17.2.0",
         "@commitlint/config-conventional": "^17.2.0",
+        "@ngrx/schematics": "^14.3.2",
         "@nrwl/cli": "15.0.7",
         "@nrwl/cypress": "15.0.7",
         "@nrwl/eslint-plugin-nx": "15.0.7",
@@ -4717,6 +4719,19 @@
         "rxjs": "^6.5.3 || ^7.5.0"
       }
     },
+    "node_modules/@ngrx/entity": {
+      "version": "14.3.2",
+      "resolved": "https://registry.npmjs.org/@ngrx/entity/-/entity-14.3.2.tgz",
+      "integrity": "sha512-Uyb36oVEiTbBJcb6TJ3OTseJdeamNKSxkvqw/uLHt+My87QaRaTEQceDWCsVCBEO4Q4Vgf2g0vbdPZdtGUZcbg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^14.0.0",
+        "@ngrx/store": "14.3.2",
+        "rxjs": "^6.5.3 || ^7.5.0"
+      }
+    },
     "node_modules/@ngrx/router-store": {
       "version": "14.3.2",
       "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-14.3.2.tgz",
@@ -4732,6 +4747,12 @@
         "rxjs": "^6.5.3 || ^7.5.0"
       }
     },
+    "node_modules/@ngrx/schematics": {
+      "version": "14.3.2",
+      "resolved": "https://registry.npmjs.org/@ngrx/schematics/-/schematics-14.3.2.tgz",
+      "integrity": "sha512-KoyAao37bmkNuu1wVW21q5Q2VnaHrd46KAlbGHDS8DjWeaL9zrIPNtH8Cqg3Qwm1cCo63qQVqhbO7fCjWl6q5Q==",
+      "dev": true
+    },
     "node_modules/@ngrx/store": {
       "version": "14.3.2",
       "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-14.3.2.tgz",
@@ -23219,6 +23240,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@ngrx/entity": {
+      "version": "14.3.2",
+      "resolved": "https://registry.npmjs.org/@ngrx/entity/-/entity-14.3.2.tgz",
+      "integrity": "sha512-Uyb36oVEiTbBJcb6TJ3OTseJdeamNKSxkvqw/uLHt+My87QaRaTEQceDWCsVCBEO4Q4Vgf2g0vbdPZdtGUZcbg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngrx/router-store": {
       "version": "14.3.2",
       "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-14.3.2.tgz",
@@ -23227,6 +23256,12 @@
         "tslib": "^2.0.0"
       }
     },
+    "@ngrx/schematics": {
+      "version": "14.3.2",
+      "resolved": "https://registry.npmjs.org/@ngrx/schematics/-/schematics-14.3.2.tgz",
+      "integrity": "sha512-KoyAao37bmkNuu1wVW21q5Q2VnaHrd46KAlbGHDS8DjWeaL9zrIPNtH8Cqg3Qwm1cCo63qQVqhbO7fCjWl6q5Q==",
+      "dev": true
+    },
     "@ngrx/store": {
       "version": "14.3.2",
       "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-14.3.2.tgz",

package.json

@@ -26,6 +26,7 @@
     "@ngneat/falso": "^6.1.0",
     "@ngrx/component-store": "^14.3.2",
     "@ngrx/effects": "^14.3.2",
+    "@ngrx/entity": "^14.3.2",
     "@ngrx/router-store": "^14.3.2",
     "@ngrx/store": "^14.3.2",
     "@nrwl/angular": "15.0.7",
@@ -44,6 +45,7 @@
     "@angular/language-service": "~14.2.0",
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
+    "@ngrx/schematics": "^14.3.2",
     "@nrwl/cli": "15.0.7",
     "@nrwl/cypress": "15.0.7",
     "@nrwl/eslint-plugin-nx": "15.0.7",