taskjunior

angular.json

@@ -30,6 +30,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -90,12 +91,16 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "c12e42a4-6c83-4e2d-9907-18d0cfda47b1"
   }
 }

package.json

@@ -11,13 +11,18 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.3.0",
+    "@angular/cdk": "^17.3.10",
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",
     "@angular/core": "^17.3.0",
     "@angular/forms": "^17.3.0",
+    "@angular/material": "^17.3.10",
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "@ngrx/effects": "^18.1.1",
+    "@ngrx/store": "^18.1.1",
+    "@ngrx/store-devtools": "^18.1.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -35,4 +40,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.2"
   }
-}
+}

src/app/Store/StoreUsers/users.action.ts

@@ -0,0 +1,15 @@
+import {createAction, createActionGroup, props} from "@ngrx/store";
+import {User} from "../../models/user";
+
+
+export const UsersActions = createActionGroup({
+  source: "UsersActions",
+  events: {
+    "loadUser": props<{text: string}>(),
+    "setUsers": props<{users: User[]}>(),
+    "deleteUser": props<{userId: number}>(),
+    "createUser": props<{user: User}>(),
+    "editUser": props<{editedUser: User}>(),
+    "failure loading": props<{error: string}>()
+  }
+});

src/app/Store/StoreUsers/users.effects.ts

@@ -0,0 +1,36 @@
+import {Actions, createEffect, ofType} from "@ngrx/effects";
+import {inject} from "@angular/core";
+import {UsersApiService} from "../../services/users-api.service";
+import {UsersActions} from "./users.action";
+import {catchError, map, mergeMap, of, switchMap} from "rxjs";
+import {User} from "../../models/user";
+import {Store} from "@ngrx/store";
+import {selectUsers} from "./users.selector";
+
+
+export const loadUserEffect = createEffect(() => {
+  const actions$ = inject(Actions);
+  const ApiService = inject(UsersApiService);
+  const store = inject(Store);
+
+  return actions$.pipe(
+    ofType(UsersActions.loadUser),
+    mergeMap(() =>
+      store.select(selectUsers).pipe(
+        switchMap((users) => {
+          if (users.length === 0) {
+            return ApiService.getUsers().pipe(
+              map((users: User[]) => UsersActions.setUsers({ users })),
+              catchError((error: string) => of(UsersActions.failureLoading({ error })))
+            );
+          } else {
+            // Если данные уже есть в Store, возвращаем пустой observable
+            return of();
+          }
+        })
+      )
+    )
+  );
+}, { functional: true });
+
+

src/app/Store/StoreUsers/users.reducers.ts

@@ -0,0 +1,36 @@
+import {User} from "../../models/user";
+import {createReducer, on} from "@ngrx/store";
+import {UsersActions} from "./users.action";
+
+
+const initialState: {users: User[],status?: string} = {
+  users: []
+}
+
+export const userReducer = createReducer(
+  initialState,
+  on(UsersActions.loadUser, (state,payload) => ({
+    users: state.users,
+    status: payload.text,
+  })),
+  on(UsersActions.setUsers,(state,payload) => ({
+    users: payload.users,
+    status: "setSuccess"
+  })),
+  on(UsersActions.deleteUser, (state,payload) => ({
+    users: state.users.filter(user => user.id !== payload.userId)
+  })),
+  on(UsersActions.createUser, (state,payload) => ({
+    users: [...state.users,payload.user],
+    status: "createSuccess"
+  })),
+  on(UsersActions.editUser, (state,payload) => ({
+    users: state.users.map((user) => {
+      if(user.id === payload.editedUser.id) {
+        return payload.editedUser;
+      } else {
+        return user;
+      }
+    }),
+  }))
+)

src/app/Store/StoreUsers/users.selector.ts

@@ -0,0 +1,19 @@
+import {User} from "../../models/user";
+import {createSelector} from "@ngrx/store";
+
+export interface AppState {
+  users: UserState
+}
+
+export interface UserState {
+  users: User[]
+}
+
+export const selectFeatuteUsers = (state: AppState) => state.users;
+
+export const selectUsers = createSelector(
+  selectFeatuteUsers,
+  (state) => state.users
+)
+
+