refactor: move libs

apps/ngrx/7-power-of-effect/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/7-power-of-effect/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/7-power-of-effect/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/7-power-of-effect/src/app/teacher/store/teacher.selectors.ts

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

apps/ngrx/7-power-of-effect/src/app/teacher/teacher.component.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { AsyncPipe, NgFor } from '@angular/common';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { TeacherSelectors } from './store/teacher.selectors';
+
+@Component({
+  standalone: true,
+  imports: [NgFor, AsyncPipe],
+  selector: 'teacher',
+  template: `
+    <h3>TEACHERS</h3>
+    <div *ngFor="let teacher of teacher$ | async">
+      {{ teacher.firstname }} {{ teacher.lastname }} - {{ teacher.version }}
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: fit-content;
+        height: fit-content;
+        border: 1px solid red;
+        padding: 4px;
+      }
+    `,
+  ],
+})
+export class TeacherComponent {
+  teacher$ = this.store.select(TeacherSelectors.selectTeachers);
+
+  constructor(private store: Store) {}
+}