vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 04:43:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(rxjs): refactor challenge 11

Browse Source
This commit is contained in:
thomas
2025-01-29 20:25:35 +01:00
parent 2050f7a932
commit 3cea14982e
111 changed files with 31 additions and 2787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/ngrx/2-effect-vs-selector/.eslintrc.json
View File

@@ -1,36 +0,0 @@
{
"extends": ["../../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts"],
"extends": [
"plugin:@nx/angular",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@nx/angular-template"],
"rules": {}
}
]
}

13
apps/ngrx/2-effect-vs-selector/README.md
View File

@@ -1,13 +0,0 @@
# Effect vs Selector
> author: thomas-laforge
### Run Application
```bash
npx nx serve ngrx-effect-vs-selector
```
### Documentation and Instruction
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/ngrx/2-effect-selector/).

23
apps/ngrx/2-effect-vs-selector/jest.config.ts
View File

@@ -1,23 +0,0 @@
/* eslint-disable */
export default {
displayName: 'ngrx-effect-vs-selector',
preset: '../../../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
globals: {},
coverageDirectory: '../../../coverage/apps/ngrx/2-effect-vs-selector',
transform: {
'^.+\\.(ts|mjs|js|html)$': [
'jest-preset-angular',
{
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
],
},
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
};

84
apps/ngrx/2-effect-vs-selector/project.json
View File

@@ -1,84 +0,0 @@
{
"name": "ngrx-effect-vs-selector",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"sourceRoot": "apps/ngrx/2-effect-vs-selector/src",
"prefix": "app",
"tags": [],
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/ngrx/2-effect-vs-selector",
"index": "apps/ngrx/2-effect-vs-selector/src/index.html",
"main": "apps/ngrx/2-effect-vs-selector/src/main.ts",
"polyfills": "apps/ngrx/2-effect-vs-selector/src/polyfills.ts",
"tsConfig": "apps/ngrx/2-effect-vs-selector/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"apps/ngrx/2-effect-vs-selector/src/favicon.ico",
"apps/ngrx/2-effect-vs-selector/src/assets"
],
"styles": ["apps/ngrx/2-effect-vs-selector/src/styles.scss"],
"scripts": [],
"allowedCommonJsDependencies": ["seedrandom"]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "ngrx-effect-vs-selector:build:production"
},
"development": {
"buildTarget": "ngrx-effect-vs-selector:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "ngrx-effect-vs-selector:build"
}
},
"test": {
"options": {
"passWithNoTests": true
},
"configurations": {
"ci": {
"ci": true,
"coverage": true
}
}
}
}
}

71
apps/ngrx/2-effect-vs-selector/src/app/app.component.ts
View File

@@ -1,71 +0,0 @@
import { AsyncPipe, NgFor } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
OnInit,
inject,
} from '@angular/core';
import { Store } from '@ngrx/store';
import { loadActivities } from './store/activity/activity.actions';
import { ActivityType } from './store/activity/activity.model';
import { selectActivities } from './store/activity/activity.selectors';
import { loadStatuses } from './store/status/status.actions';
import { selectAllTeachersByActivityType } from './store/status/status.selectors';
import { loadUsers } from './store/user/user.actions';
@Component({
selector: 'app-root',
imports: [NgFor, AsyncPipe],
template: `
<h1>Activity Board</h1>
<section>
<div class="card" *ngFor="let activity of activities$ | async">
<h2>Activity Name: {{ activity.name }}</h2>
<p>Main teacher: {{ activity.teacher.name }}</p>
<span>All teachers available for : {{ activity.type }} are</span>
<ul>
<li
*ngFor="
let teacher of getAllTeachersForActivityType$(activity.type)
| async
">
{{ teacher.name }}
</li>
</ul>
</div>
</section>
`,
styles: [
`
section {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
}
.card {
display: flex;
flex-direction: column;
border: solid;
border-width: 1px;
border-color: black;
padding: 2px;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
private store = inject(Store);
activities$ = this.store.select(selectActivities);
ngOnInit(): void {
this.store.dispatch(loadActivities());
this.store.dispatch(loadUsers());
this.store.dispatch(loadStatuses());
}
getAllTeachersForActivityType$ = (type: ActivityType) =>
this.store.select(selectAllTeachersByActivityType(type));
}

27
apps/ngrx/2-effect-vs-selector/src/app/app.config.ts
View File

@@ -1,27 +0,0 @@
import { ApplicationConfig } from '@angular/core';
import { provideEffects } from '@ngrx/effects';
import { provideStore } from '@ngrx/store';
import { ActivityEffects } from './store/activity/activity.effects';
import {
activityFeatureKey,
activityReducer,
} from './store/activity/activity.reducer';
import { StatusEffects } from './store/status/status.effects';
import { UserEffects } from './store/user/user.effects';
import { statusFeatureKey, statusReducer } from './store/status/status.reducer';
import { userFeatureKey, userReducer } from './store/user/user.reducer';
const reducers = {
[statusFeatureKey]: statusReducer,
[activityFeatureKey]: activityReducer,
[userFeatureKey]: userReducer,
};
export const appConfig: ApplicationConfig = {
providers: [
provideStore(reducers),
provideEffects([ActivityEffects, UserEffects, StatusEffects]),
],
};

14
apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.actions.ts
View File

@@ -1,14 +0,0 @@
import { createAction, props } from '@ngrx/store';
import { Activity } from './activity.model';
export const loadActivities = createAction('[Activity Effect] Load Activities');
export const loadActivitiesSuccess = createAction(
'[Activity Effect] Load Activities Success',
props<{ activities: Activity[] }>(),
);
export const loadActivitiesFailure = createAction(
'[Activity Effect] Load Activities Failure',
props<{ error: unknown }>(),
);

30
apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.effects.ts
View File

@@ -1,30 +0,0 @@
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, concatMap, map } from 'rxjs/operators';
import * as ActivityActions from './activity.actions';
import { ActivityService } from './activity.service';
@Injectable()
export class ActivityEffects {
loadActivities$ = createEffect(() => {
return this.actions$.pipe(
ofType(ActivityActions.loadActivities),
concatMap(() =>
this.ActivityService.fetchActivities().pipe(
map((activities) =>
ActivityActions.loadActivitiesSuccess({ activities }),
),
catchError((error) =>
of(ActivityActions.loadActivitiesFailure({ error })),
),
),
),
);
});
constructor(
private actions$: Actions,
private ActivityService: ActivityService,
) {}
}

55
apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.model.ts
View File

@@ -1,55 +0,0 @@
import {
incrementalNumber,
rand,
randFirstName,
randText,
} from '@ngneat/falso';
export const activityType = [
'Sport',
'Sciences',
'History',
'Maths',
'Physics',
] as const;
export type ActivityType = (typeof activityType)[number];
export interface Person {
id: number;
name: string;
}
export interface Activity {
id: number;
name: string;
type: ActivityType;
teacher: Person;
}
const factoryPerson = incrementalNumber();
export const randPerson = () => ({
id: factoryPerson(),
name: randFirstName(),
});
const factoryActivity = incrementalNumber();
export const randActivity = (): Activity => ({
id: factoryActivity(),
name: randText(),
type: rand(activityType),
teacher: randPerson(),
});
export const activities: Activity[] = [
randActivity(),
randActivity(),
randActivity(),
randActivity(),
randActivity(),
randActivity(),
randActivity(),
randActivity(),
randActivity(),
];

25
apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.reducer.ts
View File

@@ -1,25 +0,0 @@
import { createReducer, on } from '@ngrx/store';
import * as ActivityActions from './activity.actions';
import { Activity } from './activity.model';
export const activityFeatureKey = 'Activity';
export interface ActivityState {
activities: Activity[];
}
export const initialState: ActivityState = {
activities: [],
};
export const activityReducer = createReducer(
initialState,
on(ActivityActions.loadActivitiesSuccess, (state, { activities }) => ({
...state,
activities,
})),
on(ActivityActions.loadActivitiesFailure, (state) => ({
state,
activities: [],
})),
);

10
apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.selectors.ts
View File

@@ -1,10 +0,0 @@
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { ActivityState, activityFeatureKey } from './activity.reducer';
export const selectActivityState =
createFeatureSelector<ActivityState>(activityFeatureKey);
export const selectActivities = createSelector(
selectActivityState,
(state) => state.activities,
);

10
apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.service.ts
View File

@@ -1,10 +0,0 @@
import { Injectable } from '@angular/core';
import { map, timer } from 'rxjs';
import { activities } from './activity.model';
@Injectable({
providedIn: 'root',
})
export class ActivityService {
fetchActivities = () => timer(500).pipe(map(() => activities));
}

9
apps/ngrx/2-effect-vs-selector/src/app/store/status/status.actions.ts
View File

@@ -1,9 +0,0 @@
import { createAction, props } from '@ngrx/store';
import { Status } from './status.model';
export const loadStatuses = createAction('[Status] Load Statuses');
export const loadStatusesSuccess = createAction(
'[Status] Load Statuses Success',
props<{ statuses: Status[] }>(),
);

52
apps/ngrx/2-effect-vs-selector/src/app/store/status/status.effects.ts
View File

@@ -1,52 +0,0 @@
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { combineLatest, concatMap, map } from 'rxjs';
import { selectActivities } from '../activity/activity.selectors';
import { selectUser } from '../user/user.selectors';
import * as StatusActions from './status.actions';
import { Status } from './status.model';
@Injectable()
export class StatusEffects {
loadStatuses$ = createEffect(() => {
return this.actions$.pipe(
ofType(StatusActions.loadStatuses),
concatMap(() =>
combineLatest([
this.store.select(selectUser),
this.store.select(selectActivities),
]).pipe(
map(([user, activities]): Status[] => {
if (user?.isAdmin) {
return activities.reduce(
(status: Status[], activity): Status[] => {
const index = status.findIndex(
(s) => s.name === activity.type,
);
if (index === -1) {
return [
...status,
{ name: activity.type, teachers: [activity.teacher] },
];
} else {
status[index].teachers.push(activity.teacher);
return status;
}
},
[],
);
}
return [];
}),
map((statuses) => StatusActions.loadStatusesSuccess({ statuses })),
),
),
);
});
constructor(
private actions$: Actions,
private store: Store,
) {}
}

6
apps/ngrx/2-effect-vs-selector/src/app/store/status/status.model.ts
View File

@@ -1,6 +0,0 @@
import { ActivityType, Person } from '../activity/activity.model';
export interface Status {
name: ActivityType;
teachers: Person[];
}

29
apps/ngrx/2-effect-vs-selector/src/app/store/status/status.reducer.ts
View File

@@ -1,29 +0,0 @@
import { createReducer, on } from '@ngrx/store';
import { ActivityType, Person } from '../activity/activity.model';
import * as StatusActions from './status.actions';
import { Status } from './status.model';
export const statusFeatureKey = 'status';
export interface StatusState {
statuses: Status[];
teachersMap: Map<ActivityType, Person[]>;
}
export const initialState: StatusState = {
statuses: [],
teachersMap: new Map(),
};
export const statusReducer = createReducer(
initialState,
on(StatusActions.loadStatusesSuccess, (state, { statuses }): StatusState => {
const map = new Map();
statuses.forEach((s) => map.set(s.name, s.teachers));
return {
...state,
statuses,
teachersMap: map,
};
}),
);

17
apps/ngrx/2-effect-vs-selector/src/app/store/status/status.selectors.ts
View File

@@ -1,17 +0,0 @@
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { ActivityType } from '../activity/activity.model';
import { StatusState, statusFeatureKey } from './status.reducer';
export const selectStatusState =
createFeatureSelector<StatusState>(statusFeatureKey);
export const selectStatuses = createSelector(
selectStatusState,
(state) => state.statuses,
);
export const selectAllTeachersByActivityType = (name: ActivityType) =>
createSelector(
selectStatusState,
(state) => state.teachersMap.get(name) ?? [],
);

14
apps/ngrx/2-effect-vs-selector/src/app/store/user/user.actions.ts
View File

@@ -1,14 +0,0 @@
import { createAction, props } from '@ngrx/store';
import { User } from './user.model';
export const loadUsers = createAction('[User] Load Users');
export const loadUsersSuccess = createAction(
'[User] Load Users Success',
props<{ user: User }>(),
);
export const loadUsersFailure = createAction(
'[User] Load Users Failure',
props<{ error: unknown }>(),
);

26
apps/ngrx/2-effect-vs-selector/src/app/store/user/user.effects.ts
View File

@@ -1,26 +0,0 @@
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, concatMap, map } from 'rxjs/operators';
import * as UserActions from './user.actions';
import { UserService } from './user.service';
@Injectable()
export class UserEffects {
loadUsers$ = createEffect(() => {
return this.actions$.pipe(
ofType(UserActions.loadUsers),
concatMap(() =>
this.userService.fetchUser().pipe(
map((user) => UserActions.loadUsersSuccess({ user })),
catchError((error) => of(UserActions.loadUsersFailure({ error }))),
),
),
);
});
constructor(
private actions$: Actions,
private userService: UserService,
) {}
}

15
apps/ngrx/2-effect-vs-selector/src/app/store/user/user.model.ts
View File

@@ -1,15 +0,0 @@
import { randFirstName, randLastName, randText } from '@ngneat/falso';
export interface User {
firstname: string;
lastname: string;
isAdmin: boolean;
apiKey: string;
}
export const user: User = {
firstname: randFirstName(),
lastname: randLastName(),
isAdmin: true,
apiKey: randText(),
};

19
apps/ngrx/2-effect-vs-selector/src/app/store/user/user.reducer.ts
View File

@@ -1,19 +0,0 @@
import { createReducer, on } from '@ngrx/store';
import * as UserActions from './user.actions';
import { User } from './user.model';
export const userFeatureKey = 'user';
export interface UserState {
user?: User;
}
export const initialState: UserState = {
user: undefined,
};
export const userReducer = createReducer(
initialState,
on(UserActions.loadUsersSuccess, (state, { user }) => ({ ...state, user })),
on(UserActions.loadUsersFailure, (state) => ({ ...state, user: undefined })),
);

9
apps/ngrx/2-effect-vs-selector/src/app/store/user/user.selectors.ts
View File

@@ -1,9 +0,0 @@
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { UserState, userFeatureKey } from './user.reducer';
export const selectUserState = createFeatureSelector<UserState>(userFeatureKey);
export const selectUser = createSelector(
selectUserState,
(state) => state.user,
);

10
apps/ngrx/2-effect-vs-selector/src/app/store/user/user.service.ts
View File

@@ -1,10 +0,0 @@
import { Injectable } from '@angular/core';
import { map, timer } from 'rxjs';
import { user } from './user.model';
@Injectable({
providedIn: 'root',
})
export class UserService {
fetchUser = () => timer(500).pipe(map(() => user));
}

0
apps/ngrx/2-effect-vs-selector/src/assets/.gitkeep
View File

BIN
apps/ngrx/2-effect-vs-selector/src/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

13
apps/ngrx/2-effect-vs-selector/src/index.html
View File

@@ -1,13 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ngrx-effect-vs-selector</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

6
apps/ngrx/2-effect-vs-selector/src/main.ts
View File

@@ -1,6 +0,0 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig);

52
apps/ngrx/2-effect-vs-selector/src/polyfills.ts
View File

@@ -1,52 +0,0 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes recent versions of Safari, Chrome (including
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

0
apps/ngrx/2-effect-vs-selector/src/styles.scss
View File

1
apps/ngrx/2-effect-vs-selector/src/test-setup.ts
View File

@@ -1 +0,0 @@
import 'jest-preset-angular/setup-jest';

12
apps/ngrx/2-effect-vs-selector/tsconfig.app.json
View File

@@ -1,12 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"types": [],
"target": "ES2022",
"useDefineForClassFields": false
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts"],
"exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
}

7
apps/ngrx/2-effect-vs-selector/tsconfig.editor.json
View File

@@ -1,7 +0,0 @@
{
"extends": "./tsconfig.json",
"include": ["**/*.ts"],
"compilerOptions": {
"types": ["jest", "node"]
}
}

31
apps/ngrx/2-effect-vs-selector/tsconfig.json
View File

@@ -1,31 +0,0 @@
{
"extends": "../../../tsconfig.base.json",
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
},
{
"path": "./tsconfig.editor.json"
}
],
"compilerOptions": {
"target": "es2020",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

10
apps/ngrx/2-effect-vs-selector/tsconfig.spec.json
View File

@@ -1,10 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"files": ["src/test-setup.ts"],
"include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
}

36
apps/ngrx/7-power-of-effect/.eslintrc.json
View File

@@ -1,36 +0,0 @@
{
"extends": ["../../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts"],
"extends": [
"plugin:@nx/angular",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@nx/angular-template"],
"rules": {}
}
]
}

13
apps/ngrx/7-power-of-effect/README.md
View File

@@ -1,13 +0,0 @@
# Power of Effect
> author: thomas-laforge
### Run Application
```bash
npx nx serve ngrx-power-of-effect
```
### Documentation and Instruction
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/ngrx/7-power-effect/).

76
apps/ngrx/7-power-of-effect/project.json
View File

@@ -1,76 +0,0 @@
{
"name": "ngrx-power-of-effect",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"sourceRoot": "apps/ngrx/7-power-of-effect/src",
"prefix": "app",
"tags": [],
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/ngrx/7-power-of-effect",
"index": "apps/ngrx/7-power-of-effect/src/index.html",
"main": "apps/ngrx/7-power-of-effect/src/main.ts",
"polyfills": "apps/ngrx/7-power-of-effect/src/polyfills.ts",
"tsConfig": "apps/ngrx/7-power-of-effect/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"apps/ngrx/7-power-of-effect/src/favicon.ico",
"apps/ngrx/7-power-of-effect/src/assets"
],
"styles": [
"apps/ngrx/7-power-of-effect/src/styles.scss",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
],
"scripts": [],
"allowedCommonJsDependencies": ["seedrandom"]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "ngrx-power-of-effect:build:production"
},
"development": {
"buildTarget": "ngrx-power-of-effect:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "ngrx-power-of-effect:build"
}
}
}
}

9
apps/ngrx/7-power-of-effect/src/app/app.actions.ts
View File

@@ -1,9 +0,0 @@
import { createActionGroup, emptyProps } from '@ngrx/store';
// This is the global actions.
export const appActions = createActionGroup({
source: 'App Component',
events: {
'Init App': emptyProps(),
},
});

39
apps/ngrx/7-power-of-effect/src/app/app.component.ts
View File

@@ -1,39 +0,0 @@
import { Component, inject, OnInit } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import { Store } from '@ngrx/store';
import { appActions } from './app.actions';
@Component({
imports: [RouterOutlet, RouterLink],
selector: 'app-root',
template: `
<nav>
<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 implements OnInit {
private store = inject(Store);
ngOnInit(): void {
this.store.dispatch(appActions.initApp());
}
}

50
apps/ngrx/7-power-of-effect/src/app/app.config.ts
View File

@@ -1,50 +0,0 @@
import { FakeBackendService } from '@angular-challenges/power-of-effect/backend';
import {
ApplicationConfig,
inject,
provideAppInitializer,
} from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
import { provideEffects } from '@ngrx/effects';
import { provideStore } from '@ngrx/store';
import { NotificationService } from './data-access/notification.service';
import { ROUTES } from './routes';
import { StudentEffects } from './student/store/student.effects';
import {
studentReducer,
studentsFeatureKey,
} from './student/store/student.reducer';
import { TeacherEffects } from './teacher/store/teacher.effects';
import {
teacherReducer,
teachersFeatureKey,
} from './teacher/store/teacher.reducer';
const REDUCERS = {
[teachersFeatureKey]: teacherReducer,
[studentsFeatureKey]: studentReducer,
};
export const appConfig: ApplicationConfig = {
providers: [
provideStore(REDUCERS),
provideEffects([TeacherEffects, StudentEffects]),
provideRouter(ROUTES),
provideAppInitializer(() => {
const initializerFn = (() => {
const service = inject(FakeBackendService);
return () => service.start();
})();
return initializerFn();
}),
provideAppInitializer(() => {
const initializerFn = (() => {
const service = inject(NotificationService);
return () => service.init();
})();
return initializerFn();
}),
provideAnimations(),
],
};

14
apps/ngrx/7-power-of-effect/src/app/data-access/http.service.ts
View File

@@ -1,14 +0,0 @@
import { FakeBackendService } from '@angular-challenges/power-of-effect/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.getAllSchools().pipe(take(1));
}

39
apps/ngrx/7-power-of-effect/src/app/data-access/notification.service.ts
View File

@@ -1,39 +0,0 @@
import { PushService } from '@angular-challenges/power-of-effect/backend';
import {
isSchool,
isStudent,
isTeacher,
Push,
} from '@angular-challenges/power-of-effect/model';
import { inject, Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { filter } from 'rxjs';
import { studentActions } from '../student/store/student.actions';
import { teacherActions } from '../teacher/store/teacher.actions';
@Injectable({ providedIn: 'root' })
export class NotificationService {
private pushService = inject(PushService);
private store = inject(Store);
init() {
this.pushService.notification$
.pipe(filter(Boolean))
.subscribe((notification: Push) => {
if (isTeacher(notification)) {
this.store.dispatch(
teacherActions.addOneTeacher({ teacher: notification }),
);
}
if (isStudent(notification)) {
this.store.dispatch(
studentActions.addOneStudent({ student: notification }),
);
}
if (isSchool(notification)) {
// SchoolStore is a ComponentStore. We can't dispatch a school action here.
// We are stuck. We must have done something wrong and need to refactor...
}
});
}
}

20
apps/ngrx/7-power-of-effect/src/app/routes.ts
View File

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

32
apps/ngrx/7-power-of-effect/src/app/school/school.component.ts
View File

@@ -1,32 +0,0 @@
/* 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({
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$;
}

45
apps/ngrx/7-power-of-effect/src/app/school/school.store.ts
View File

@@ -1,45 +0,0 @@
import { School } from '@angular-challenges/power-of-effect/model';
import { Injectable } from '@angular/core';
import { ComponentStore, OnStoreInit } from '@ngrx/component-store';
import { tapResponse } from '@ngrx/operators';
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 }),
(_) => _, // not handling the error
),
),
),
),
);
ngrxOnStoreInit() {
this.loadSchools();
}
}

10
apps/ngrx/7-power-of-effect/src/app/student/store/student.actions.ts
View File

@@ -1,10 +0,0 @@
import { Student } from '@angular-challenges/power-of-effect/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[] }>(),
},
});

23
apps/ngrx/7-power-of-effect/src/app/student/store/student.effects.ts
View File

@@ -1,23 +0,0 @@
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 }))),
),
),
);
}

24
apps/ngrx/7-power-of-effect/src/app/student/store/student.reducer.ts
View File

@@ -1,24 +0,0 @@
import { Student } from '@angular-challenges/power-of-effect/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();

17
apps/ngrx/7-power-of-effect/src/app/student/store/student.selectors.ts
View File

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

31
apps/ngrx/7-power-of-effect/src/app/student/student.component.ts
View File

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

10
apps/ngrx/7-power-of-effect/src/app/teacher/store/teacher.actions.ts
View File

@@ -1,10 +0,0 @@
import { Teacher } from '@angular-challenges/power-of-effect/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[] }>(),
},
});

23
apps/ngrx/7-power-of-effect/src/app/teacher/store/teacher.effects.ts
View File

@@ -1,23 +0,0 @@
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 }))),
),
),
);
}

24
apps/ngrx/7-power-of-effect/src/app/teacher/store/teacher.reducer.ts
View File

@@ -1,24 +0,0 @@
import { Teacher } from '@angular-challenges/power-of-effect/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();

17
apps/ngrx/7-power-of-effect/src/app/teacher/store/teacher.selectors.ts
View File

@@ -1,17 +0,0 @@
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,
};

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

@@ -1,32 +0,0 @@
/* 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({
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) {}
}

0
apps/ngrx/7-power-of-effect/src/assets/.gitkeep
View File

BIN
apps/ngrx/7-power-of-effect/src/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

13
apps/ngrx/7-power-of-effect/src/index.html
View File

@@ -1,13 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ngrx-power-of-effect</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

9
apps/ngrx/7-power-of-effect/src/main.ts
View File

@@ -1,9 +0,0 @@
import { appConfig } from './app/app.config';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);

52
apps/ngrx/7-power-of-effect/src/polyfills.ts
View File

@@ -1,52 +0,0 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes recent versions of Safari, Chrome (including
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

1
apps/ngrx/7-power-of-effect/src/styles.scss
View File

@@ -1 +0,0 @@
/* You can add global styles to this file, and also import other style files */

12
apps/ngrx/7-power-of-effect/tsconfig.app.json
View File

@@ -1,12 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"types": [],
"target": "ES2022",
"useDefineForClassFields": false
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts"],
"exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
}

10
apps/ngrx/7-power-of-effect/tsconfig.editor.json
View File

@@ -1,10 +0,0 @@
{
"extends": "./tsconfig.json",
"include": [
"**/*.ts",
"../../../libs/power-of-effect/backend/src/lib/fake-backend.service.ts"
],
"compilerOptions": {
"types": []
}
}

28
apps/ngrx/7-power-of-effect/tsconfig.json
View File

@@ -1,28 +0,0 @@
{
"extends": "../../../tsconfig.base.json",
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.editor.json"
}
],
"compilerOptions": {
"target": "es2020",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

32
apps/rxjs/11-high-order-operator-bug/src/app/app.component.ts
View File

@@ -1,46 +1,44 @@
/* eslint-disable @angular-eslint/component-selector */
import { AsyncPipe, NgFor } from '@angular/common';
import { Component, Input, inject } from '@angular/core';
import { BehaviorSubject, take } from 'rxjs';
import { Component, inject, input, signal } from '@angular/core';
import { take } from 'rxjs';
import { AppService } from './app.service';
import { TopicType } from './localDB.service';
@Component({
selector: 'button-delete-topic',
imports: [AsyncPipe],
template: `
<button (click)="deleteTopic()"><ng-content></ng-content></button>
<div>{{ message$$ | async }}</div>
<button (click)="deleteTopic()"><ng-content /></button>
<div>{{ message() }}</div>
`,
})
export class ButtonDeleteComponent {
@Input() topic!: TopicType;
readonly topic = input.required<TopicType>();
message$$ = new BehaviorSubject<string>('');
message = signal('');
private service = inject(AppService);
deleteTopic() {
this.service
.deleteOldTopics(this.topic)
.deleteOldTopics(this.topic())
.pipe(take(1))
.subscribe((result) =>
this.message$$.next(
this.message.set(
result
? `All ${this.topic} have been deleted`
: `Error: deletion of some ${this.topic} failed`,
? `All ${this.topic()} have been deleted`
: `Error: deletion of some ${this.topic()} failed`,
),
);
}
}
@Component({
imports: [AsyncPipe, NgFor, ButtonDeleteComponent],
imports: [ButtonDeleteComponent],
selector: 'app-root',
template: `
<div *ngFor="let item of all$ | async">
{{ item.id }} - {{ item.topic }}
</div>
@for (info of allInfo(); track info.id) {
<div>{{ info.id }} - {{ info.topic }}</div>
}
<button-delete-topic topic="food">Delete Food</button-delete-topic>
<button-delete-topic topic="sport">Delete Sport</button-delete-topic>
@@ -50,5 +48,5 @@ export class ButtonDeleteComponent {
export class AppComponent {
private service = inject(AppService);
all$ = this.service.getAll$;
allInfo = this.service.getAllInfo;
}

20
apps/rxjs/11-high-order-operator-bug/src/app/app.service.ts
View File

@@ -1,23 +1,19 @@
import { inject, Injectable } from '@angular/core';
import { merge, mergeMap, Observable, of, take } from 'rxjs';
import { merge, Observable, of } from 'rxjs';
import { LocalDBService, TopicType } from './localDB.service';
@Injectable({ providedIn: 'root' })
export class AppService {
private dbService = inject(LocalDBService);
getAll$ = this.dbService.infos$;
getAllInfo = this.dbService.infos;
deleteOldTopics(type: TopicType): Observable<boolean> {
return this.dbService.searchByType(type).pipe(
take(1),
mergeMap((topicToDelete) =>
topicToDelete.length > 0
? topicToDelete
.map((t) => this.dbService.deleteOneTopic(t.id))
.reduce((acc, curr) => merge(acc, curr), of(true))
: of(true),
),
);
const infoByType = this.dbService.searchByType(type);
return infoByType.length > 0
? infoByType
.map((t) => this.dbService.deleteOneTopic(t.id))
.reduce((acc, curr) => merge(acc, curr), of(true))
: of(true);
}
}

21
apps/rxjs/11-high-order-operator-bug/src/app/localDB.service.ts
View File

@@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/member-ordering */
import { randomError } from '@angular-challenges/shared/utils';
import { Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';
import { computed, Injectable, signal } from '@angular/core';
import { of } from 'rxjs';
export type TopicType = 'food' | 'book' | 'sport';
@@ -31,21 +30,17 @@ const initialState: DBState = {
};
@Injectable({ providedIn: 'root' })
export class LocalDBService extends ComponentStore<DBState> {
constructor() {
super(initialState);
}
export class LocalDBService {
private state = signal(initialState);
infos$ = this.select((state) => state.infos);
infos = computed(() => this.state().infos);
searchByType = (type: TopicType) =>
this.select((state) => state.infos.filter((i) => i.topic === type));
this.infos().filter((i) => i.topic === type);
deleteOne = this.updater(
(state, id: number): DBState => ({
infos: state.infos.filter((i) => i.id !== id),
}),
);
deleteOne = (id: number) => {
this.state.set({ infos: this.state().infos.filter((i) => i.id !== id) });
};
deleteOneTopic = (id: number) =>
randomError({