commit modification

db_users_projects_companies.json

       "lastname": "Touitou",
       "email": "david.touitou@natan.fr",
       "address": {
-        "numRue": 44,
+        "numRue": 445,
         "nomRue": "Rue Notre Dame de Paris",
         "bp": 75002,
         "ville": "Paris",
     },
     {
       "id": 13,
-      "firstname": null,
-      "lastname": null,
-      "email": null,
+      "firstname": "azyd_yiuj",
+      "lastname": "azegr_èéiu",
+      "email": "zehr@zeuhuh",
+      "address": {
+        "numRue": 65652,
+        "nomRue": "zedtyuhjn",
+        "bp": 74512,
+        "ville": "zhgaèzty",
+        "pays": "sdgauzej"
+      }
+    },
+    {
+      "id": 14,
+      "firstname": "Naolie",
+      "lastname": "Boudouka Tété",
+      "email": "naolie.boudouka-tete@natan.fr",
       "address": {
-        "numRue": null,
-        "nomRue": null,
-        "bp": null,
-        "ville": null,
-        "pays": null
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
+      }
+    },
+    {
+      "id": 15,
+      "firstname": "Rayene",
+      "lastname": "Bessrour",
+      "email": "rayene.bessrour@natan.fr",
+      "address": {
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
       }
     }
   ],

src/app/ngrx/msg.state.ts

   FORM_LOADING = 'FORM LOADING',
   FORM_LOADED = 'FORM LOADED',
   FORM_LOAD_ERR= 'FORM LOADING ERROR',
-  CONFIRM = 'CONFIRM',
+  CONFIRM_ADD = 'CONFIRM ADDING OF',
+  CONFIRM_DEL = 'CONFIRM DELETION OF',
   ADDED = 'SUCCESSFULLY ADDED',
   EXIST = 'ALREADY EXISTS',
   UPDATED = '[User] SUCCESSFULLY UPDATED',

src/app/ngrx/users/users.actions.ts

 
 export class CreateFormUserAddAction implements Action {
   type: UserActionType = UserActionType.CREATE_FORM_ADD_USER;
-  constructor(public payload: void) {}
+  constructor(public payload: any) {}
 }
 
 export class CreateFormUserAddActionSuccess implements Action {

src/app/ngrx/users/users.effects.ts

-import { UserActionType, GetAllUsersActionSuccess, GetAllUsersActionError, UserActionUnion, SearchUserActionSuccess, SearchUserActionError, CreareFormUserEditActionSuccess, CreareFormUserEditActionActionError, DeleteUserActionSuccess, DeleteUserActionError, CreateFormUserAddActionSuccess, CreateFormUserAddActionError, SaveUserFormActionSuccess, SaveUserFormActionError, UpdateUserFormAction, UpdateUserFormActionError, UpdateUserFormActionSuccess } from './users.actions';
+import {
+  UserActionType,
+  GetAllUsersActionSuccess,
+  GetAllUsersActionError,
+  UserActionUnion,
+  SearchUserActionSuccess,
+  SearchUserActionError,
+  CreareFormUserEditActionSuccess,
+  CreareFormUserEditActionActionError,
+  DeleteUserActionSuccess,
+  DeleteUserActionError,
+  CreateFormUserAddActionSuccess,
+  CreateFormUserAddActionError,
+  SaveUserFormActionSuccess,
+  SaveUserFormActionError,
+  UpdateUserFormAction,
+  UpdateUserFormActionError,
+  UpdateUserFormActionSuccess,
+} from './users.actions';
 import { map, mergeMap, Observable, catchError, of } from 'rxjs';
 import { UsersService } from './../../shared/services/users.service';
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { User } from 'src/app/shared/models/user.model';
 
 @Injectable()
-export class UserEffects{
+export class UserEffects {
+  constructor(
+    private usersService: UsersService,
+    private effectActions: Actions
+  ) {}
 
-  constructor(private usersService: UsersService, private effectActions: Actions){}
+  /** creation of effects about all cations related to a user */
 
-  //create getAllUsers effects
+  //create getAllUsers effect
 
-  getAllUsersEffect: Observable<UserActionUnion> = createEffect(
-
-    () => this.effectActions.pipe(
+  getAllUsersEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
       ofType(UserActionType.GET_ALL_USERS),
-      mergeMap(
-        () =>{
-
-          return this.usersService.getAllUsers().pipe(
-              map((users: User[])=> new GetAllUsersActionSuccess(users)),
-              catchError((err) => of(new GetAllUsersActionError(err.message)))
-            );
-        }
-      )
-
-    )
-  );
-   //create searchUser effects
-   searchUserEffect: Observable<UserActionUnion> = createEffect(
-
-    () => this.effectActions.pipe(
-      ofType(UserActionType.SEARCH_A_USER),
-      mergeMap(
-        (userAction: UserActionUnion) =>{
-
-          return this.usersService.searchUser(userAction.payload).pipe(
-              map((users: User[])=> new SearchUserActionSuccess(users)),
-              catchError((err) => of(new SearchUserActionError(err.message)))
-            );
-        }
-      )
-
+      mergeMap(() => {
+        return this.usersService.getAllUsers().pipe(
+          map((users: User[]) => new GetAllUsersActionSuccess(users)),
+          catchError((err) => of(new GetAllUsersActionError(err.message)))
+        );
+      })
     )
   );
 
+  //create searchUser effect
 
-  //create deleteUser effect
-  deleteUserEffect: Observable<UserActionUnion> = createEffect(
-    ()=> this.effectActions.pipe(
-      ofType(UserActionType.DELETE_A_USER),
-      mergeMap( (userAction: UserActionUnion) => {
-        return this.usersService.deleteUser(userAction.payload.id).pipe(
-          map( ()=> new DeleteUserActionSuccess(userAction.payload)),
-          catchError( (err) => of(new DeleteUserActionError(err.message)))
-        )
+  searchUserEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
+      ofType(UserActionType.SEARCH_A_USER),
+      mergeMap((userAction: UserActionUnion) => {
+        return this.usersService.searchUser(userAction.payload).pipe(
+          map((users: User[]) => new SearchUserActionSuccess(users)),
+          catchError((err) => of(new SearchUserActionError(err.message)))
+        );
       })
     )
   );
 
   //create a user add form effect
-  createAddUserFormEffect: Observable<UserActionUnion> = createEffect(
-    () => this.effectActions.pipe(
+  createAddUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
       ofType(UserActionType.CREATE_FORM_ADD_USER),
-      map( ()=>{
+      map(() => {
         return new CreateFormUserAddActionSuccess({});
       }),
-      catchError( (err) => of(new CreateFormUserAddActionError(err.message)))
+      catchError((err) => of(new CreateFormUserAddActionError(err.message)))
     )
   );
 
-  //action of saving user form data effect
-  saveUserFormEffect : Observable<UserActionUnion> = createEffect(
-    () => this.effectActions.pipe(
+  //saving user form data effect
+
+  saveUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
       ofType(UserActionType.SAVE_USERFORM_ADD),
-      mergeMap( (userAction: UserActionUnion) => {
+      mergeMap((userAction: UserActionUnion) => {
         return this.usersService.createUser(userAction.payload).pipe(
-          map (user => new SaveUserFormActionSuccess(user)),
-          catchError( err => of(new SaveUserFormActionError(err.message)))
+          map((user) => new SaveUserFormActionSuccess(user)),
+          catchError((err) => of(new SaveUserFormActionError(err.message)))
         );
       })
     )
   );
 
-  //create update user form with data of user to update effect
-  createUpdateUserFormEffect: Observable<UserActionUnion> = createEffect(
-    () => this.effectActions.pipe(
+  // create an update user form effect and fill it with data of a user to update
+
+  createUpdateUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
       ofType(UserActionType.CREATE_FORM_USER_EDIT),
-      mergeMap( (userAction: UserActionUnion)=>{
+      mergeMap((userAction: UserActionUnion) => {
         return this.usersService.getUserById(userAction.payload.id).pipe(
-          map( (user: User)=> new CreareFormUserEditActionSuccess(user)),
-          catchError( (err) => of(new CreareFormUserEditActionActionError(err.message)))
-        )
+          map((user: User) => new CreareFormUserEditActionSuccess(user)),
+          catchError((err) =>
+            of(new CreareFormUserEditActionActionError(err.message))
+          )
+        );
       })
     )
   );
 
-  updateUserFormDataEffect: Observable<UserActionUnion> = createEffect(
-    () => this.effectActions.pipe(
+  // update a user with data of form effect
+
+  updateUserFormDataEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
       ofType(UserActionType.UPDATE_USER_FORM),
-      mergeMap( (userAction: UserActionUnion) =>{
+      mergeMap((userAction: UserActionUnion) => {
         return this.usersService.updateUser(userAction.payload).pipe(
-          map( (user: User) => new UpdateUserFormActionSuccess(user)),
-          catchError( err => of(new UpdateUserFormActionError(err.message)))
+          map((user: User) => new UpdateUserFormActionSuccess(user)),
+          catchError((err) => of(new UpdateUserFormActionError(err.message)))
+        );
+      })
+    )
+  );
+
+  //deleteUser effect
+
+  deleteUserEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
+      ofType(UserActionType.DELETE_A_USER),
+      mergeMap((userAction: UserActionUnion) => {
+        return this.usersService.deleteUser(userAction.payload.id).pipe(
+          map(() => new DeleteUserActionSuccess(userAction.payload)),
+          catchError((err) => of(new DeleteUserActionError(err.message)))
         );
       })
     )

src/app/ngrx/users/users.reducer.ts

 import { Action } from '@ngrx/store';
 import { User } from 'src/app/shared/models/user.model';
 import { MsgState } from '../msg.state';
+import { UserState } from './user.state';
 import { UserActionUnion, UserActionType } from './users.actions';
 
-//create a state
-export class UserState {
-  currentUser!: User | null;
-  usersList!: User[];
-  msgState!: MsgState;
-  userServerErrorMsg!: string;
-}
+/** create reducer,
+ * a reducer need a initial state and an action to perform*/
 
-//create reducer, a reducer need a initial state and an action
-const initUserState: UserState = {
+const initialUserState: UserState = {
   usersList: [],
   currentUser: null,
   msgState: MsgState.INIT_STATE,
 };
 
 export function userReducer(
-  state: UserState = initUserState,
+  state: UserState = initialUserState,
   action: Action
 ): UserState {
 
   switch (action.type) {
 
-    /** get all users actions */
+    // get all users actions
     case UserActionType.GET_ALL_USERS:
       return { ...state, msgState: MsgState.LOADING };
 
       return {
         ...state,
         msgState: MsgState.LOADED,
-        usersList: (<UserActionUnion> action).payload,
+        usersList: (<UserActionUnion>action).payload,
       };
 
     case UserActionType.GET_ALL_USERS_ERROR:
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
-
-    /** search a user actions */
+    // search a user actions
     case UserActionType.SEARCH_A_USER:
       return { ...state, msgState: MsgState.LOADING };
 
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
-
-    /** create a user form actions */
+    // create a user form actions
     case UserActionType.CREATE_FORM_ADD_USER:
       return {
         ...state,
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
-    /** save a user (data of form) action*/
+    // save a user (data of form) action
     case UserActionType.SAVE_USERFORM_ADD:
       return {
         ...state,
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
-
-      /**create a edit user form actions */
+    // create a edit user form actions
     case UserActionType.CREATE_FORM_USER_EDIT:
       return {
         ...state,
       return {
         ...state,
         msgState: MsgState.FORM_LOADED,
-        currentUser: modifiedUser
+        currentUser: modifiedUser,
       };
 
     case UserActionType.CREATE_FORM_USER_EDIT_ERROR:
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
+    // update user with user form data
 
-      /** update user with user form data*/
-
-      case UserActionType.UPDATE_USER_FORM:
-        return {
-          ...state,
-          msgState:MsgState.DEFAULT_MSG
-        };
-
-      case UserActionType.UPDATE_USER_FORM_SUCCESS:
-        let updatedUser: User = (<UserActionUnion> action).payload;
-        let usersListCopy2 : User[] = state.usersList.map(
-          (user)=>(user.id==updatedUser.id)?updatedUser:user);
+    case UserActionType.UPDATE_USER_FORM:
+      return {
+        ...state,
+        msgState: MsgState.DEFAULT_MSG,
+      };
 
-          return{
-          ...state,
-          currentUser: updatedUser,
-          msgState: MsgState.UPDATED
-        }
+    case UserActionType.UPDATE_USER_FORM_SUCCESS:
+      let updatedUser: User = (<UserActionUnion>action).payload;
+      let usersListCopy2: User[] = [...state.usersList];
+      usersListCopy2 = usersListCopy2.map((user) =>
+        user.id == updatedUser.id ? updatedUser : user
+      );
 
-      case UserActionType.UPDATE_USER_FORM_ERROR:
-        return{
-          ...state,
-          msgState: MsgState.ERR,
-          userServerErrorMsg: (<UserActionUnion>action).payload,
-        }
+      return {
+        ...state,
+        usersList: usersListCopy2,
+        msgState: MsgState.UPDATED,
+      };
 
+    case UserActionType.UPDATE_USER_FORM_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        userServerErrorMsg: (<UserActionUnion>action).payload,
+      };
 
-    /** delete a user actions */
+    // delete a user actions
     case UserActionType.DELETE_A_USER:
       return {
         ...state,

src/app/pages/users-manager/users-management/user-create/user-create.component.ts

   readonly msgState = MsgState;
 
   ngOnInit(): void {
-    this.store.dispatch(new CreateFormUserAddAction());
+    this.store.dispatch(new CreateFormUserAddAction({}));
 
     this.store.subscribe((myState) => {
       this.userState = myState.userReducerKey;
        alert(lastname + ' ' + this.msgState.EXIST);
        return;
      }
+     else{
 
-     if (window.confirm(MsgState.CONFIRM)) {
-       this.store.dispatch(new SaveUserFormAction(this.userFormGroup.value));
+      if (window.confirm(MsgState.CONFIRM_ADD+' '+user.firstname+' '+user.lastname)) {
+        this.store.dispatch(new SaveUserFormAction(user));
+      }
      }
    });
   }
 
   onNewUser() {
-    this.store.dispatch(new CreateFormUserAddAction());
+    this.store.dispatch(new CreateFormUserAddAction({}));
   }
 
   tryEgain() {
-    this.store.dispatch(new CreateFormUserAddAction());
+    this.store.dispatch(new CreateFormUserAddAction({}));
   }
 }

src/app/pages/users-manager/users-management/user-update/user-update.component.ts

   }
 
   onUserUpdate() {
-    if(window.confirm(MsgState.CONFIRM)){
+    if(window.confirm(MsgState.CONFIRM_ADD)){
       this.store.dispatch(new UpdateUserFormAction(this.userFormGrp.value));
     }
   }

src/app/pages/users-manager/users-management/users-list/users-list.component.ts

 import { Router } from '@angular/router';
-import { userReducer } from 'src/app/ngrx/users/users.reducer';
 import {
-  CreareFormUserEditAction,
   DeleteUsersAction,
 } from './../../../../ngrx/users/users.actions';
 import { User } from 'src/app/shared/models/user.model';
   }
 
   onUserDelete(user: User) {
-    if (window.confirm(MsgState.CONFIRM)) {
+    if (window.confirm(MsgState.CONFIRM_DEL+' '+user.firstname+' '+user.lastname)) {
       this.store.dispatch(new DeleteUsersAction(user));
     }
   }