commit modifications

angular.json

               "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/font-awesome/css/font-awesome.min.css"
+              "node_modules/font-awesome/css/font-awesome.min.css",
+              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",

db_users_projects_companies.json

       "lastname": "Touitou",
       "email": "david.touitou@natan.fr",
       "address": {
-        "numRue": 445,
+        "numRue": 44,
         "nomRue": "Rue Notre Dame de Paris",
         "bp": 75002,
         "ville": "Paris",
       "lastname": "Ben Mohamed",
       "email": "nadhir.ben-mohamed@natan.fr",
       "address": {
-        "numRue": 44,
+        "numRue": 45,
         "nomRue": "Rue Notre Dame de Paris",
         "bp": 75002,
         "ville": "Paris",
       }
     },
     {
-      "id": 13,
-      "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é",
       "address": {
         "numRue": 44,
         "nomRue": "Rue Notre Dame de Paris",
-        "bp": 75002,
+        "bp": 75004,
         "ville": "Paris",
         "pays": "France"
       }
+    },
+    {
+      "id": 17,
+      "firstname": "user test",
+      "lastname": "user test",
+      "email": "user.test@test",
+      "address": {
+        "numRue": 952,
+        "nomRue": "user test",
+        "bp": 45,
+        "ville": "user test",
+        "pays": "user test"
+      }
     }
   ],
-  "projects": []
+  "projects": [
+    {
+      "id": 1,
+      "projectName": "Project-1",
+      "priority": 1,
+      "creationDate": "03 06 2022",
+      "companyId": 2,
+      "description": "Training users to frontend in angular",
+      "userId": 3,
+      "state": "END"
+    },
+    {
+      "id": 2,
+      "projectName": "Project-2",
+      "priority": 1,
+      "creationDate": "03 06 2022",
+      "companyId": 2,
+      "description": "Project description for action",
+      "userId": 3,
+      "state": "END"
+    },
+    {
+      "id": 3,
+      "projectName": "Project-3",
+      "priority": 1,
+      "creationDate": "03 06 2022",
+      "companyId": 3,
+      "description": "Project description for action",
+      "userId": 4,
+      "state": "END"
+    },
+    {
+      "id": 4,
+      "projectName": "Project-4",
+      "priority": 1,
+      "creationDate": "03 06 2022",
+      "companyId": 3,
+      "description": "Project description for action",
+      "userId": 12,
+      "state": "END"
+    }
+  ]
 }

package-lock.json

       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "~13.3.0",
+        "@angular/cdk": "~13.3.6",
         "@angular/common": "~13.3.0",
         "@angular/compiler": "~13.3.0",
         "@angular/core": "~13.3.0",
         "@angular/forms": "~13.3.0",
+        "@angular/material": "~13.3.6",
         "@angular/platform-browser": "~13.3.0",
         "@angular/platform-browser-dynamic": "~13.3.0",
         "@angular/router": "~13.3.0",
         "@angular/core": "13.3.9"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
+      "integrity": "sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^13.0.0 || ^14.0.0-0",
+        "@angular/core": "^13.0.0 || ^14.0.0-0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "13.3.6",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.6.tgz",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.9.tgz",
+      "integrity": "sha512-FU8lcMgo+AL8ckd27B4V097ZPoIZNRHiCe3wpgkImT1qC0YwcyXZVn0MqQTTFSdC9a/aI8wPm3AbTClJEVw5Vw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^13.0.0 || ^14.0.0-0",
+        "@angular/cdk": "13.3.9",
+        "@angular/common": "^13.0.0 || ^14.0.0-0",
+        "@angular/core": "^13.0.0 || ^14.0.0-0",
+        "@angular/forms": "^13.0.0 || ^14.0.0-0",
+        "@angular/platform-browser": "^13.0.0 || ^14.0.0-0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "13.3.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.9.tgz",
         "tslib": "^2.3.0"
       }
     },
+    "@angular/cdk": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
+      "integrity": "sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "13.3.6",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.6.tgz",
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.9.tgz",
+      "integrity": "sha512-FU8lcMgo+AL8ckd27B4V097ZPoIZNRHiCe3wpgkImT1qC0YwcyXZVn0MqQTTFSdC9a/aI8wPm3AbTClJEVw5Vw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "13.3.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.9.tgz",

package.json

   "private": true,
   "dependencies": {
     "@angular/animations": "~13.3.0",
+    "@angular/cdk": "~13.3.6",
     "@angular/common": "~13.3.0",
     "@angular/compiler": "~13.3.0",
     "@angular/core": "~13.3.0",
     "@angular/forms": "~13.3.0",
+    "@angular/material": "~13.3.6",
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.6.2"
   }
-}
+}

src/app/app.component.html

-<app-base-nav-bar></app-base-nav-bar>
-<router-outlet></router-outlet>
+<app-base-nav-menu></app-base-nav-menu>
+<!-- <router-outlet></router-outlet> -->

src/app/app.component.ts

   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'users-projects-companies-NgRx';
+  title = 'users-projects-companies';
 }

src/app/app.module.ts

+import { BaseNavMenuComponent } from './pages/base-nav-menu/base-nav-menu.component';
 import { FormsModule } from '@angular/forms';
 import { AccueilModule } from './pages/accueil/accueil.module';
 import { CompaniesManagerModule } from './pages/companies-manager/companies-manager.module';
 import { UsersManagerModule } from './pages/users-manager/users-manager.module';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BaseNavBarComponent } from './pages/base-nav-bar/base-nav-bar.component';
 import { HttpClientModule } from '@angular/common/http';
-
+import { LayoutModule } from '@angular/cdk/layout';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { ProjectCreateEffects } from './ngrx/projects/effects.projectcreate';
+import { UserCreateEffects } from './ngrx/users/effects.user.createuser';
+import { UserGetSearchEffects } from './ngrx/users/effects.user.getsearchuser';
+import { UserUpdateEffects } from './ngrx/users/effects.user.update';
+import { userReducer } from './ngrx/users/users.reducer';
+import { projectReducer } from './ngrx/projects/projects.reducer';
+import { ProjectGet } from './ngrx/projects/effects.projectget';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    BaseNavBarComponent
-  ],
+  declarations: [AppComponent, BaseNavMenuComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
     AccueilModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    FormsModule
+    FormsModule,
+    LayoutModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule,
+    MatMenuModule,
+    StoreModule.forRoot({
+      userReducerKey: userReducer,
+      productReducerKey: projectReducer,
+    }),
+    EffectsModule.forRoot([
+      UserCreateEffects,
+      UserGetSearchEffects,
+      UserUpdateEffects,
+      ProjectCreateEffects,
+      ProjectGet
+    ]),
+    StoreDevtoolsModule.instrument(),
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/ngrx/msg.state.ts

 export enum MsgState {
-  LOADING = '[User] USERS ARE LOADING ...',
-  LOADED = '[User] SUCCESSFUL LOADED',
+  LOADING = 'LOADING ...',
+  LOADED = 'SUCCESSFUL LOADED',
   ERR = 'ERROR ACCURRED',
-  INIT_STATE = '[User] INITIAL STATE',
+  INIT_STATE = 'INITIAL STATE',
   FORM_LOADING = 'FORM LOADING',
   FORM_LOADED = 'FORM LOADED',
   FORM_LOAD_ERR= 'FORM LOADING ERROR',
   CONFIRM_DEL = 'CONFIRM DELETION OF',
   ADDED = 'SUCCESSFULLY ADDED',
   EXIST = 'ALREADY EXISTS',
-  UPDATED = '[User] SUCCESSFULLY UPDATED',
-  DEFAULT_MSG = 'DEFAULT LOADING MSG'
+  UPDATED = ' SUCCESSFULLY UPDATED',
+  DEFAULT_MSG = 'DEFAULT MSG LOADING'
 }

src/app/ngrx/projects/effects.projectcreate.ts

+import { ProjectActionTypes } from './project.action.types';
+import { ProjectActionUnion, CreateProjectFormAddAction, SaveProjectFormDataActionSuccess, SaveProjectFormDataActionError, CreateProjectFormAddActionSuccess } from './projects.actions';
+import { map, Observable, mergeMap, catchError, of } from 'rxjs';
+import { ProjectsService } from './../../shared/services/projects.service';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Injectable } from '@angular/core';
+import { Project } from 'src/app/shared/models/project.model';
+
+@Injectable()
+export class ProjectCreateEffects {
+
+  constructor(
+    private projectActions: Actions,
+    private projectsService: ProjectsService
+  ) {}
+
+  //create project form effect
+  createAddProjectFormEffect:Observable<ProjectActionUnion> = createEffect(
+    ()=> this.projectActions.pipe(
+      ofType((ProjectActionTypes.CREATE_PROJECT_FORM_ADD)),
+      map( (projectAction: ProjectActionUnion)=>{
+        return new CreateProjectFormAddActionSuccess(projectAction.payload);
+      })
+    )
+  );
+
+  //save project form data effect
+  saveProjectFormDataEffect : Observable<ProjectActionUnion> = createEffect(
+    ()=> this.projectActions.pipe(
+      ofType(ProjectActionTypes.SAVE_PROJECT_FORM_DATA),
+      mergeMap( (action: ProjectActionUnion) =>{
+        return this.projectsService.createProject(action.payload).pipe(
+          map((project: Project)=> new SaveProjectFormDataActionSuccess(project)),
+          catchError(err=>of(new SaveProjectFormDataActionError(err.message)))
+        )
+      })
+    )
+  )
+}

src/app/ngrx/projects/effects.projectget.ts

+import { Project } from './../../shared/models/project.model';
+import { ProjectActionTypes } from './project.action.types';
+import { ProjectActionUnion, GetAllProjectsActionSuccess, GetAllProjectsActionError } from './projects.actions';
+import { Observable, mergeMap, map, catchError, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { ProjectsService } from './../../shared/services/projects.service';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ProjectGet {
+  constructor(
+    private projectsService: ProjectsService,
+    private projectActions: Actions
+  ) {}
+
+  getAllProjectsEffect: Observable<ProjectActionUnion> = createEffect(
+    () => this.projectActions.pipe(
+      ofType(ProjectActionTypes.GET_ALL_PROJECTS),
+      mergeMap((action: ProjectActionUnion)=>{
+        return this.projectsService.getAllProjects().pipe(
+          map( (projects: Project[] )=> new GetAllProjectsActionSuccess(projects)),
+          catchError( err => of(new GetAllProjectsActionError(err.message)))
+        );
+      })
+    )
+  );
+}

src/app/ngrx/projects/project.action.types.ts

+/** Project actions types */
+
+export enum ProjectActionTypes{
+
+  //get all project action
+  GET_ALL_PROJECTS = '[Project] GET ALL PROJECTS',
+  GET_ALL_PROJECTS_SUCCESS = '[Project] GET ALL PROJECTS SUCCESS',
+  GET_ALL_PROJECTS_ERROR = '[Project] GET ALL PROJECTS ERROR',
+
+  //create project form to add a project
+  CREATE_PROJECT_FORM_ADD = '[Project] CREATE PROJECT FORM ADD',
+  CREATE_PROJECT_FORM_ADD_SUCCESS = '[Project] CREATE PROJECT FORM ADD SUCCESS',
+  CREATE_PROJECT_FORM_ADD_ERROR = '[Project] CREATE PROJECT FORM ADD ERROR',
+
+  //save project form data
+  SAVE_PROJECT_FORM_DATA ='[Project] SAVE PROJECT FORM DATA',
+  SAVE_PROJECT_FORM_DATA_SUCCESS ='[Project] SAVE PROJECT FORM DATA SUCCESS',
+  SAVE_PROJECT_FORM_DATA_ERROR ='[Project] SAVE PROJECT FORM DATA ERROR',
+}

src/app/ngrx/projects/project.state.ts

+import { MsgState } from 'src/app/ngrx/msg.state';
+import { Project } from './../../shared/models/project.model';
+import { ProjectActionUnion } from './projects.actions';
+
+export class ProjectState{
+  currentProject !: Project| null;
+  projectsList: any;
+  msgState!: MsgState;
+  serverErrorMsg!: string;
+  currectAction!: ProjectActionUnion | null;
+}
+

src/app/ngrx/projects/projects.actions.ts

+import { Project } from './../../shared/models/project.model';
+import { ProjectActionTypes } from './project.action.types';
+import { Action } from '@ngrx/store';
+
+/** create actions related to projects */
+
+//create get all project action
+export class GetAllProjectsAction implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.GET_ALL_PROJECTS;
+  constructor(public payload: any) {}
+}
+
+export class GetAllProjectsActionSuccess implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.GET_ALL_PROJECTS_SUCCESS;
+  constructor(public payload: Project[]) {}
+}
+
+export class GetAllProjectsActionError implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.GET_ALL_PROJECTS_ERROR;
+  constructor(public payload: string) {}
+}
+
+//create project form to add a project
+
+export class CreateProjectFormAddAction implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_PROJECT_FORM_ADD;
+  constructor (public payload: any){}
+}
+
+export class CreateProjectFormAddActionSuccess implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_PROJECT_FORM_ADD_SUCCESS;
+  constructor (public payload: any){}
+}
+
+export class CreateProjectFormAddActionError implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_PROJECT_FORM_ADD_ERROR;
+  constructor (public payload: string){}
+}
+
+//save project form data
+export class SaveProjectFormDataAction implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA
+  constructor (public payload: Project){}
+}
+//save project form data
+export class SaveProjectFormDataActionSuccess implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA_SUCCESS
+  constructor (public payload: Project){}
+}
+//save project form data
+export class SaveProjectFormDataActionError implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA_ERROR
+  constructor (public payload: string){}
+}
+
+export type ProjectActionUnion =
+  | GetAllProjectsAction
+  | GetAllProjectsActionSuccess
+  | GetAllProjectsActionError
+  | CreateProjectFormAddAction
+  | CreateProjectFormAddActionSuccess
+  | CreateProjectFormAddActionError
+  | SaveProjectFormDataAction
+  | SaveProjectFormDataActionSuccess
+  | SaveProjectFormDataActionError;

src/app/ngrx/projects/projects.reducer.ts

+import { ProjectActionUnion } from './projects.actions';
+import { Action } from '@ngrx/store';
+import { MsgState } from '../msg.state';
+import { ProjectState } from './project.state';
+import { ProjectActionTypes } from './project.action.types';
+import { Project } from 'src/app/shared/models/project.model';
+
+/** a reducer need first initial state and action to perform */
+
+const projectInitState: ProjectState = {
+  currentProject: null,
+  projectsList: [],
+  msgState: MsgState.INIT_STATE,
+  serverErrorMsg: 'no error massage',
+  currectAction: null,
+};
+
+export function projectReducer(
+  state: ProjectState = projectInitState,
+  projectAction: Action
+): ProjectState {
+
+  switch (projectAction.type) {
+
+    // get all projects action reducer
+    case ProjectActionTypes.GET_ALL_PROJECTS:
+      return {
+        ...state,
+        msgState: MsgState.LOADING,
+      };
+
+    case ProjectActionTypes.GET_ALL_PROJECTS_SUCCESS:
+      return {
+        ...state,
+        msgState: MsgState.LOADED,
+        projectsList: (<ProjectActionUnion> projectAction).payload,
+      };
+
+    case ProjectActionTypes.GET_ALL_PROJECTS_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        serverErrorMsg: (<ProjectActionUnion> projectAction).payload,
+      };
+
+
+    // create project form to add action reducer
+
+    case ProjectActionTypes.CREATE_PROJECT_FORM_ADD:
+      return{
+        ...state,
+        msgState: MsgState.FORM_LOADING,
+      };
+
+    case ProjectActionTypes.CREATE_PROJECT_FORM_ADD_SUCCESS:
+      return{
+        ...state,
+        msgState: MsgState.FORM_LOADED
+      };
+
+    case ProjectActionTypes.CREATE_PROJECT_FORM_ADD_ERROR:
+      return{
+        ...state,
+        msgState: MsgState.ERR,
+        serverErrorMsg: (<ProjectActionUnion> projectAction).payload
+      }
+
+    //saving project form data
+
+    case ProjectActionTypes.SAVE_PROJECT_FORM_DATA:
+      return{
+        ...state,
+        msgState: MsgState.LOADING
+      };
+
+    case ProjectActionTypes.CREATE_PROJECT_FORM_ADD_SUCCESS:
+      let createdProject: Project = (<ProjectActionUnion> projectAction).payload;
+      let projectsListCopy: Project[] = [...state.projectsList];
+      projectsListCopy.push(createdProject);
+
+      return{
+        ...state,
+        msgState: MsgState.ADDED,
+        projectsList: projectsListCopy
+      };
+
+
+    default:
+      return { ...state };
+  }
+}

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

+import { UsersService } from '../../shared/services/users.service';
+import { CreateFormUserAddActionError, CreateFormUserAddActionSuccess, SaveUserFormAddActionError, SaveUserFormAddActionSuccess, UserActionUnion } from './users.actions';
+import { Injectable } from "@angular/core";
+import { catchError, map, mergeMap, Observable, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { UserActionTypes } from './user.action.types';
+import { User } from 'src/app/shared/models/user.model';
+
+@Injectable()
+export class UserCreateEffects{
+
+  constructor(private userActions: Actions, private usersService: UsersService){}
+
+
+
+   //create a user add form effect
+   createAddUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+   this.userActions.pipe(
+     ofType(UserActionTypes.CREATE_FORM_ADD_USER),
+     map((userAction: UserActionUnion) => {
+       return new CreateFormUserAddActionSuccess(userAction.payload);
+     }),
+     catchError((err) => of(new CreateFormUserAddActionError(err.message)))
+   )
+ );
+
+ //saving user form data effect
+
+ saveUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+   this.userActions.pipe(
+     ofType(UserActionTypes.SAVE_USERFORM_ADD),
+     mergeMap((userAction: UserActionUnion) => {
+       return this.usersService.createUser(userAction.payload).pipe(
+         map((user:User) => new SaveUserFormAddActionSuccess(user)),
+         catchError((err) => of(new SaveUserFormAddActionError(err.message)))
+       );
+     })
+   )
+ );
+
+}

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

+import { Router } from '@angular/router';
+import { UsersService } from '../../shared/services/users.service';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Injectable } from '@angular/core';
+import { GetAllUsersActionError, GetAllUsersActionSuccess, GetUser_s_ProjectsError, GetUser_s_ProjectsSuccess, SearchUserActionError, SearchUserActionSuccess, UserActionUnion } from './users.actions';
+import { Observable, mergeMap, map, catchError, of, tap } from 'rxjs';
+import { User } from 'src/app/shared/models/user.model';
+import { UserActionTypes } from './user.action.types';
+
+@Injectable()
+export class UserGetSearchEffects {
+  constructor(
+    private userActions: Actions,
+    private usersService: UsersService,
+    private router: Router
+  ) {}
+
+  //create getAllUsers effect
+
+  getAllUsersEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.userActions.pipe(
+      ofType(UserActionTypes.GET_ALL_USERS),
+      mergeMap(() => {
+        return this.usersService.getAllUsers().pipe(
+          map((users: User[]) => new GetAllUsersActionSuccess(users)),
+          catchError((err) => of(new GetAllUsersActionError(err.message)))
+        );
+      })
+    )
+  );
+
+  //create searchUser effect
+
+  searchUserEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.userActions.pipe(
+      ofType(UserActionTypes.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)))
+        );
+      })
+    )
+  );
+
+  // navigate to another component effect
+  navigate:Observable<UserActionUnion> = createEffect(
+    () => this.userActions.pipe(
+        ofType(UserActionTypes.NAVIGATE_TO_USER_S_PROJECTS_COMPONENT_SUCCESS),
+        tap(() => {
+            this.router.navigate(['/user-s-projects']);
+        })
+    ),
+    { dispatch: false }
+);
+
+  loadUserSProjectsEffect : Observable<UserActionUnion> = createEffect(
+    ()=> this.userActions.pipe(
+      ofType(UserActionTypes.GET_USER_S_PROJECTS),
+      mergeMap( (action: UserActionUnion)=>{
+        return this.usersService.getUser_sProjects().pipe(
+          map( (users: any)=> new GetUser_s_ProjectsSuccess(users)),
+          catchError(err => of(new GetUser_s_ProjectsError(err.message)))
+        )
+      })
+    )
+  );
+}

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

+import {
+  UserActionUnion,
+  CreareFormUserEditActionSuccess,
+  CreareFormUserEditActionActionError,
+  DeleteUserActionSuccess,
+  DeleteUserActionError,
+  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 { Actions, createEffect, ofType } from '@ngrx/effects';
+import { User } from 'src/app/shared/models/user.model';
+import { UserActionTypes } from './user.action.types';
+import { Router } from '@angular/router';
+
+@Injectable()
+
+export class UserUpdateEffects {
+  constructor(
+    private usersService: UsersService,
+    private effectActions: Actions,
+    private router: Router
+  ) {}
+
+
+  // create an update user form effect and fill it with data of a user to update
+
+  createUpdateUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
+      ofType(UserActionTypes.CREATE_FORM_USER_EDIT),
+      mergeMap((userAction: UserActionUnion) => {
+        return this.usersService.getUserById(userAction.payload.id).pipe(
+          map((user: User) => new CreareFormUserEditActionSuccess(user)),
+          catchError((err) =>
+            of(new CreareFormUserEditActionActionError(err.message))
+          )
+        );
+      })
+    )
+  );
+
+  // update a user with data of form effect
+
+  updateUserFormDataEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
+      ofType(UserActionTypes.UPDATE_USER_FORM),
+      mergeMap((userAction: UserActionUnion) => {
+        return this.usersService.updateUser(userAction.payload).pipe(
+          map((user: User) => new UpdateUserFormActionSuccess(user)),
+          catchError((err) => of(new UpdateUserFormActionError(err.message)))
+        );
+      })
+    )
+  );
+
+  //deleteUser effect
+
+  deleteUserEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.effectActions.pipe(
+      ofType(UserActionTypes.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/user.action.types.ts

+/**type of actions*/
+
+export enum UserActionTypes {
+
+  // action: get all users
+  GET_ALL_USERS = '[User] GET ALL USERS',
+  GET_ALL_USERS_SUCCESS = '[User] GET-ALL USERS SUCCESS',
+  GET_ALL_USERS_ERROR = '[User] GET ALL USERS ERROR',
+
+  // action: search a user
+  SEARCH_A_USER = '[User] SEARCH A USER',
+  SEARCH_A_USER_SUCCESS = '[User] SEARCH A USER SUCCESS',
+  SEARCH_A_USER_ERROR = '[User] SEARCH A USER ERROR',
+
+
+  // action of button: create a user form
+  CREATE_FORM_ADD_USER = '[User] USER FORM ADD',
+  CREATE_FORM_ADD_USER_SUCCESS = '[User] USER FORM ADD SUCCESS',
+  CREATE_FORM_ADD_USER_ERROR = '[User] USER FORM ADD ERROR',
+
+  // action of saving user data in the form
+  SAVE_USERFORM_ADD = '[User] SAVE USER',
+  SAVE_USERFORM_ADD_SUCCESS = '[User] SAVE USER SUCCESS',
+  SAVE_USERFORM_ADD_ERROR = '[User] SAVE USER ERROR',
+
+  // action: create form to edit a user
+  CREATE_FORM_USER_EDIT = '[User] USER FORM EDIT',
+  CREATE_FORM_USER_EDIT_SUCCESS = '[User] USER FORM EDIT SUCCESS',
+  CREATE_FORM_USER_EDIT_ERROR = '[User] USER FORM EDIT ERROR',
+
+  // action of updating user from user form
+  UPDATE_USER_FORM = '[User] USER FORM UPDATE',
+  UPDATE_USER_FORM_SUCCESS = '[User] USER FORM UPDATE SUCCESS',
+  UPDATE_USER_FORM_ERROR = '[User] USER FORM UPDATE ERROR',
+
+
+  // action: delete a user
+  DELETE_A_USER = '[User] DELETE A USER',
+  DELETE_A_USER_SUCCESS = '[User] DELETE A USER SUCCESS',
+  DELETE_A_USER_ERROR = '[User] DELETE A USER ERROR',
+
+  //action : load user's projects
+
+  GET_USER_S_PROJECTS = 'GET USER\'S PROJECTS',
+  GET_USER_S_PROJECTS_SUCCESS = 'GET USER\'S PROJECTS SUCCESS',
+  GET_USER_S_PROJECTS_ERROR = 'GET USER\'S PROJECTS ERROR',
+
+  //action:navigate to another component
+  NAVIGATE_TO_USER_S_PROJECTS_COMPONENT_SUCCESS = 'NAVIGATE TO USER\'S PROJECTS COMPONENT SUCCESS'
+}

src/app/ngrx/users/user.state.ts

+import { UserActionUnion } from './users.actions';
 import { User } from "src/app/shared/models/user.model";
 import { MsgState } from "../msg.state";
 
 //create a state
 export class UserState {
   currentUser!: User | null;
-  usersList!: User[];
+  usersList!: any;
   msgState!: MsgState;
-  userServerErrorMsg!: string;
+  serverMsgError!: string
 }

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

 import { Action } from '@ngrx/store';
 import { User } from 'src/app/shared/models/user.model';
+import { UserActionTypes } from './user.action.types';
 
-/**type of actions*/
-
-export enum UserActionType {
-
-  // action: get all users
-  GET_ALL_USERS = '[User] GET ALL USERS',
-  GET_ALL_USERS_SUCCESS = '[User] GET-ALL USERS SUCCESS',
-  GET_ALL_USERS_ERROR = '[User] GET-ALL USERS ERROR',
-
-  // action: search a user
-  SEARCH_A_USER = '[User] SEARCH A USER',
-  SEARCH_A_USER_SUCCESS = '[User] SEARCH A USER SUCCESS',
-  SEARCH_A_USER_ERROR = '[User] SEARCH A USER ERROR',
-
-
-  // action of button: create a user form
-  CREATE_FORM_ADD_USER = '[User] USER FORM ADD',
-  CREATE_FORM_ADD_USER_SUCCESS = '[User] USER FORM ADD SUCCESS',
-  CREATE_FORM_ADD_USER_ERROR = '[User] USER FORM ADD ERROR',
-
-  // action of saving user data in the form
-  SAVE_USERFORM_ADD = '[User] SAVE USER',
-  SAVE_USERFORM_ADD_SUCCESS = '[User] SAVE USER SUCCESS',
-  SAVE_USERFORM_ADD_ERROR = '[User] SAVE USER ERROR',
-
-  // action: create form to edit a user
-  CREATE_FORM_USER_EDIT = '[User] USER FORM EDIT',
-  CREATE_FORM_USER_EDIT_SUCCESS = '[User] USER FORM EDIT SUCCESS',
-  CREATE_FORM_USER_EDIT_ERROR = '[User] USER FORM EDIT ERROR',
-
-  // action of updating user from user form
-  UPDATE_USER_FORM = '[User] USER FORM UPDATE',
-  UPDATE_USER_FORM_SUCCESS = '[User] USER FORM UPDATE SUCCESS',
-  UPDATE_USER_FORM_ERROR = '[User] USER FORM UPDATE ERROR',
-
-
-  // action: delete a user
-  DELETE_A_USER = '[User] DELETE A USER',
-  DELETE_A_USER_SUCCESS = '[User] DELETE A USER SUCCESS',
-  DELETE_A_USER_ERROR = '[User] DELETE A USER ERROR',
-}
 
 /**create actions related to a user*/
 
 //get all users actions
 
 export class GetAllUsersAction implements Action {
-  type: UserActionType = UserActionType.GET_ALL_USERS;
+  type: UserActionTypes = UserActionTypes.GET_ALL_USERS;
 
   constructor(public payload: any) {}
 }
 
 export class GetAllUsersActionSuccess implements Action {
-  type: UserActionType = UserActionType.GET_ALL_USERS_SUCCESS;
+  type: UserActionTypes = UserActionTypes.GET_ALL_USERS_SUCCESS;
   constructor(public payload: User[]) {}
 }
 
 export class GetAllUsersActionError implements Action {
-  type: UserActionType = UserActionType.GET_ALL_USERS_ERROR;
+  type: UserActionTypes = UserActionTypes.GET_ALL_USERS_ERROR;
   constructor(public payload: string) {}
 }
 
  // Actios of searching a user
 
 export class SearchUsersAction implements Action {
-  type: UserActionType = UserActionType.SEARCH_A_USER;
+  type: UserActionTypes = UserActionTypes.SEARCH_A_USER;
 
   constructor(public payload: any) {}
 }
 
 export class SearchUserActionSuccess implements Action {
-  type: UserActionType = UserActionType.SEARCH_A_USER_SUCCESS;
+  type: UserActionTypes = UserActionTypes.SEARCH_A_USER_SUCCESS;
   constructor(public payload: User[]) {}
 }
 
 export class SearchUserActionError implements Action {
-  type: UserActionType = UserActionType.SEARCH_A_USER_ERROR;
+  type: UserActionTypes = UserActionTypes.SEARCH_A_USER_ERROR;
   constructor(public payload: string) {}
 }
 
 // Actios of creating a user form to add user
 
 export class CreateFormUserAddAction implements Action {
-  type: UserActionType = UserActionType.CREATE_FORM_ADD_USER;
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_ADD_USER;
   constructor(public payload: any) {}
 }
 
 export class CreateFormUserAddActionSuccess implements Action {
-  type: UserActionType = UserActionType.CREATE_FORM_ADD_USER_SUCCESS;
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_ADD_USER_SUCCESS;
   constructor(public payload: any) {}
 }
 
 export class CreateFormUserAddActionError implements Action {
-  type: UserActionType = UserActionType.CREATE_FORM_ADD_USER_ERROR;
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_ADD_USER_ERROR;
   constructor(public payload: string) {}
 }
 
 //actions of saving a user form data
-export class SaveUserFormAction implements Action{
-  type: UserActionType = UserActionType.SAVE_USERFORM_ADD;
+export class SaveUserFormAddAction implements Action{
+  type: UserActionTypes = UserActionTypes.SAVE_USERFORM_ADD;
   constructor(public payload: User){}
 }
 
-export class SaveUserFormActionSuccess implements Action{
-  type: UserActionType = UserActionType.SAVE_USERFORM_ADD_SUCCESS;
+export class SaveUserFormAddActionSuccess implements Action{
+  type: UserActionTypes = UserActionTypes.SAVE_USERFORM_ADD_SUCCESS;
   constructor(public payload: User){}
 }
 
-export class SaveUserFormActionError implements Action{
-  type: UserActionType = UserActionType.SAVE_USERFORM_ADD_ERROR;
+export class SaveUserFormAddActionError implements Action{
+  type: UserActionTypes = UserActionTypes.SAVE_USERFORM_ADD_ERROR;
   constructor(public payload: string){}
 }
 
 // Actions of creating a user form to edit user
 
 export class CreareFormUserEditAction implements Action {
-  type: UserActionType = UserActionType.CREATE_FORM_USER_EDIT;
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_USER_EDIT;
 
   constructor(public payload: User) {}
 }
 
 export class CreareFormUserEditActionSuccess implements Action {
-  type: UserActionType = UserActionType.CREATE_FORM_USER_EDIT_SUCCESS;
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_USER_EDIT_SUCCESS;
   constructor(public payload: User) {}
 }
 
 export class CreareFormUserEditActionActionError implements Action {
-  type: UserActionType = UserActionType.CREATE_FORM_USER_EDIT_ERROR;
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_USER_EDIT_ERROR;
   constructor(public payload: string) {}
 }
 
 // action of updating user from user data form
 
 export class UpdateUserFormAction implements Action{
-  type: UserActionType = UserActionType.UPDATE_USER_FORM;
+  type: UserActionTypes = UserActionTypes.UPDATE_USER_FORM;
   constructor(public payload: User){}
 }
 
 export class UpdateUserFormActionSuccess implements Action{
-  type: UserActionType = UserActionType.UPDATE_USER_FORM_SUCCESS;
+  type: UserActionTypes = UserActionTypes.UPDATE_USER_FORM_SUCCESS;
   constructor(public payload: User){}
 }
 
 export class UpdateUserFormActionError implements Action{
 
-  type: UserActionType = UserActionType.UPDATE_USER_FORM_ERROR;
+  type: UserActionTypes = UserActionTypes.UPDATE_USER_FORM_ERROR;
   constructor(public payload: string){}
 }
 
 // Actions of deleting a user
 export class DeleteUsersAction implements Action {
-  type: UserActionType = UserActionType.DELETE_A_USER;
+  type: UserActionTypes = UserActionTypes.DELETE_A_USER;
 
   constructor(public payload: User) {}
 }
 
 export class DeleteUserActionSuccess implements Action {
-  type: UserActionType = UserActionType.DELETE_A_USER_SUCCESS;
+  type: UserActionTypes = UserActionTypes.DELETE_A_USER_SUCCESS;
   constructor(public payload: User) {}
 }
 
 export class DeleteUserActionError implements Action {
-  type: UserActionType = UserActionType.DELETE_A_USER_ERROR;
+  type: UserActionTypes = UserActionTypes.DELETE_A_USER_ERROR;
   constructor(public payload: string) {}
 }
 
+//Action of loading user's projects
+export class GetUser_S_Projects implements Action{
+  type: UserActionTypes = UserActionTypes.GET_USER_S_PROJECTS;
+  constructor(public payload: any){}
+}
+
+export class GetUser_s_ProjectsSuccess implements Action{
+  type: UserActionTypes = UserActionTypes.GET_USER_S_PROJECTS_SUCCESS;
+  constructor(public payload: any){}
+}
+
+export class GetUser_s_ProjectsError implements Action{
+  type: UserActionTypes = UserActionTypes.GET_USER_S_PROJECTS_ERROR;
+  constructor(public payload: string){}
+}
+
+//action of navigating to another component
+export class NavigateActionSuccess implements Action{
+  type: UserActionTypes = UserActionTypes.NAVIGATE_TO_USER_S_PROJECTS_COMPONENT_SUCCESS
+  constructor(public payload: any){}
+}
+
 export type UserActionUnion =
   | GetAllUsersAction
   | GetAllUsersActionSuccess
   | CreateFormUserAddAction
   | CreateFormUserAddActionSuccess
   | CreateFormUserAddActionError
-  | SaveUserFormAction
-  | SaveUserFormActionSuccess
-  | SaveUserFormActionError
+  | SaveUserFormAddAction
+  | SaveUserFormAddActionSuccess
+  | SaveUserFormAddActionError
   | CreareFormUserEditAction
   | CreareFormUserEditActionSuccess
   | CreareFormUserEditActionActionError
   | UpdateUserFormActionError
   | DeleteUsersAction
   | DeleteUserActionSuccess
-  | DeleteUserActionError;
+  | DeleteUserActionError
+  | GetUser_S_Projects
+  | GetUser_s_ProjectsSuccess
+  | GetUser_s_ProjectsError
+  | NavigateActionSuccess;

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

+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Observable, mergeMap, map, catchError, of, tap } from 'rxjs';
+import { User } from 'src/app/shared/models/user.model';
+import { UsersService } from 'src/app/shared/services/users.service';
+import { UserActionTypes } from './user.action.types';
 import {
-  UserActionType,
+  UserActionUnion,
   GetAllUsersActionSuccess,
   GetAllUsersActionError,
-  UserActionUnion,
   SearchUserActionSuccess,
   SearchUserActionError,
-  CreareFormUserEditActionSuccess,
+  GetUser_s_ProjectsSuccess,
+  GetUser_s_ProjectsError,
+  CreateFormUserAddActionError,
+  CreateFormUserAddActionSuccess,
+  SaveUserFormAddActionError,
+  SaveUserFormAddActionSuccess,
   CreareFormUserEditActionActionError,
-  DeleteUserActionSuccess,
+  CreareFormUserEditActionSuccess,
   DeleteUserActionError,
-  CreateFormUserAddActionSuccess,
-  CreateFormUserAddActionError,
-  SaveUserFormActionSuccess,
-  SaveUserFormActionError,
-  UpdateUserFormAction,
+  DeleteUserActionSuccess,
   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 { Actions, createEffect, ofType } from '@ngrx/effects';
-import { User } from 'src/app/shared/models/user.model';
-
 @Injectable()
-export class UserEffects {
+export class UsersEffects {
+  effectActions: any;
   constructor(
+    private userActions: Actions,
     private usersService: UsersService,
-    private effectActions: Actions
+    private router: Router
   ) {}
 
-  /** creation of effects about all cations related to a user */
-
   //create getAllUsers effect
 
   getAllUsersEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.effectActions.pipe(
-      ofType(UserActionType.GET_ALL_USERS),
+    this.userActions.pipe(
+      ofType(UserActionTypes.GET_ALL_USERS),
       mergeMap(() => {
         return this.usersService.getAllUsers().pipe(
           map((users: User[]) => new GetAllUsersActionSuccess(users)),
   //create searchUser effect
 
   searchUserEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.effectActions.pipe(
-      ofType(UserActionType.SEARCH_A_USER),
+    this.userActions.pipe(
+      ofType(UserActionTypes.SEARCH_A_USER),
       mergeMap((userAction: UserActionUnion) => {
         return this.usersService.searchUser(userAction.payload).pipe(
           map((users: User[]) => new SearchUserActionSuccess(users)),
     )
   );
 
-  //create a user add form effect
-  createAddUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.effectActions.pipe(
-      ofType(UserActionType.CREATE_FORM_ADD_USER),
-      map(() => {
-        return new CreateFormUserAddActionSuccess({});
-      }),
-      catchError((err) => of(new CreateFormUserAddActionError(err.message)))
-    )
+  // navigate to another component effect
+  navigate: Observable<UserActionUnion> = createEffect(
+    () =>
+      this.userActions.pipe(
+        ofType(UserActionTypes.NAVIGATE_TO_USER_S_PROJECTS_COMPONENT_SUCCESS),
+        tap(() => {
+          this.router.navigate(['/user-s-projects']);
+        })
+      ),
+    { dispatch: false }
   );
 
-  //saving user form data effect
-
-  saveUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.effectActions.pipe(
-      ofType(UserActionType.SAVE_USERFORM_ADD),
-      mergeMap((userAction: UserActionUnion) => {
-        return this.usersService.createUser(userAction.payload).pipe(
-          map((user) => new SaveUserFormActionSuccess(user)),
-          catchError((err) => of(new SaveUserFormActionError(err.message)))
+  loadUserSProjectsEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.userActions.pipe(
+      ofType(UserActionTypes.GET_USER_S_PROJECTS),
+      mergeMap((action: UserActionUnion) => {
+        return this.usersService.getUser_sProjects().pipe(
+          map((users: any) => new GetUser_s_ProjectsSuccess(users)),
+          catchError((err) => of(new GetUser_s_ProjectsError(err.message)))
         );
       })
     )
   );
 
-  // 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) => {
-        return this.usersService.getUserById(userAction.payload.id).pipe(
-          map((user: User) => new CreareFormUserEditActionSuccess(user)),
-          catchError((err) =>
-            of(new CreareFormUserEditActionActionError(err.message))
-          )
-        );
-      })
-    )
-  );
+   //create a user add form effect
+   createAddUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+   this.userActions.pipe(
+     ofType(UserActionTypes.CREATE_FORM_ADD_USER),
+     map((userAction: UserActionUnion) => {
+       return new CreateFormUserAddActionSuccess(userAction.payload);
+     }),
+     catchError((err) => of(new CreateFormUserAddActionError(err.message)))
+   )
+ );
 
-  // update a user with data of form effect
+ //saving user form data effect
 
-  updateUserFormDataEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.effectActions.pipe(
-      ofType(UserActionType.UPDATE_USER_FORM),
-      mergeMap((userAction: UserActionUnion) => {
-        return this.usersService.updateUser(userAction.payload).pipe(
-          map((user: User) => new UpdateUserFormActionSuccess(user)),
-          catchError((err) => of(new UpdateUserFormActionError(err.message)))
-        );
-      })
-    )
-  );
+ saveUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+   this.userActions.pipe(
+     ofType(UserActionTypes.SAVE_USERFORM_ADD),
+     mergeMap((userAction: UserActionUnion) => {
+       return this.usersService.createUser(userAction.payload).pipe(
+         map((user:User) => new SaveUserFormAddActionSuccess(user)),
+         catchError((err) => of(new SaveUserFormAddActionError(err.message)))
+       );
+     })
+   )
+ );
 
-  //deleteUser effect
+ // create an update user form effect and fill it with data of a user to update
+
+ createUpdateUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+ this.effectActions.pipe(
+   ofType(UserActionTypes.CREATE_FORM_USER_EDIT),
+   mergeMap((userAction: UserActionUnion) => {
+     return this.usersService.getUserById(userAction.payload.id).pipe(
+       map((user: User) => new CreareFormUserEditActionSuccess(user)),
+       catchError((err) =>
+         of(new CreareFormUserEditActionActionError(err.message))
+       )
+     );
+   })
+ )
+);
+
+// update a user with data of form effect
+
+updateUserFormDataEffect: Observable<UserActionUnion> = createEffect(() =>
+ this.effectActions.pipe(
+   ofType(UserActionTypes.UPDATE_USER_FORM),
+   mergeMap((userAction: UserActionUnion) => {
+     return this.usersService.updateUser(userAction.payload).pipe(
+       map((user: User) => new UpdateUserFormActionSuccess(user)),
+       catchError((err) => of(new UpdateUserFormActionError(err.message)))
+     );
+   })
+ )
+);
+
+//deleteUser effect
+
+deleteUserEffect: Observable<UserActionUnion> = createEffect(() =>
+ this.effectActions.pipe(
+   ofType(UserActionTypes.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)))
+     );
+   })
+ )
+);
 
-  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 { UserActionTypes } from './user.action.types';
 import { UserState } from './user.state';
-import { UserActionUnion, UserActionType } from './users.actions';
+import { UserActionUnion } from './users.actions';
 
 /** create reducer,
+ *
  * a reducer need a initial state and an action to perform*/
 
 const initialUserState: UserState = {
   usersList: [],
   currentUser: null,
   msgState: MsgState.INIT_STATE,
-  userServerErrorMsg: 'No error message',
+  serverMsgError: 'No error message'
 };
 
 export function userReducer(
   action: Action
 ): UserState {
 
-  switch (action.type) {
 
+  switch (action.type) {
     // get all users actions
-    case UserActionType.GET_ALL_USERS:
+    case UserActionTypes.GET_ALL_USERS:
       return { ...state, msgState: MsgState.LOADING };
 
-    case UserActionType.GET_ALL_USERS_SUCCESS:
+    case UserActionTypes.GET_ALL_USERS_SUCCESS:
       return {
         ...state,
         msgState: MsgState.LOADED,
         usersList: (<UserActionUnion>action).payload,
       };
 
-    case UserActionType.GET_ALL_USERS_ERROR:
+    case UserActionTypes.GET_ALL_USERS_ERROR:
       return {
         ...state,
         msgState: MsgState.ERR,
-        userServerErrorMsg: (<UserActionUnion>action).payload,
+        serverMsgError: (<UserActionUnion>action).payload
       };
 
     // search a user actions
-    case UserActionType.SEARCH_A_USER:
-      return { ...state, msgState: MsgState.LOADING };
+    case UserActionTypes.SEARCH_A_USER:
+      return {
+        ...state,
+        msgState: MsgState.LOADING
+      };
 
-    case UserActionType.SEARCH_A_USER_SUCCESS:
+    case UserActionTypes.SEARCH_A_USER_SUCCESS:
       return {
         ...state,
         msgState: MsgState.LOADED,
-        usersList: (<UserActionUnion>action).payload,
+        usersList: (<UserActionUnion>action).payload
       };
 
-    case UserActionType.SEARCH_A_USER_ERROR:
+    case UserActionTypes.SEARCH_A_USER_ERROR:
       return {
         ...state,
         msgState: MsgState.ERR,
-        userServerErrorMsg: (<UserActionUnion>action).payload,
+        serverMsgError: (<UserActionUnion>action).payload
       };
 
     // create a user form actions
-    case UserActionType.CREATE_FORM_ADD_USER:
+    case UserActionTypes.CREATE_FORM_ADD_USER:
       return {
         ...state,
-        msgState: MsgState.FORM_LOADING,
+        msgState: MsgState.FORM_LOADING
       };
 
-    case UserActionType.CREATE_FORM_ADD_USER_SUCCESS:
+    case UserActionTypes.CREATE_FORM_ADD_USER_SUCCESS:
       return {
         ...state,
-        msgState: MsgState.FORM_LOADED,
+        msgState: MsgState.FORM_LOADED
       };
 
-    case UserActionType.CREATE_FORM_ADD_USER_ERROR:
+    case UserActionTypes.CREATE_FORM_ADD_USER_ERROR:
       return {
         ...state,
         msgState: MsgState.FORM_LOAD_ERR,
-        userServerErrorMsg: (<UserActionUnion>action).payload,
+        serverMsgError: (<UserActionUnion>action).payload
       };
 
     // save a user (data of form) action
-    case UserActionType.SAVE_USERFORM_ADD:
+    case UserActionTypes.SAVE_USERFORM_ADD:
       return {
         ...state,
-        msgState: MsgState.DEFAULT_MSG,
+        msgState: MsgState.DEFAULT_MSG
       };
-    case UserActionType.SAVE_USERFORM_ADD_SUCCESS:
+
+    case UserActionTypes.SAVE_USERFORM_ADD_SUCCESS:
       let createdUser: User = (<UserActionUnion>action).payload;
       let usersListCopy1: User[] = [...state.usersList];
       usersListCopy1.push(createdUser);
 
       return {
         ...state,
-        msgState: MsgState.LOADED,
-        usersList: usersListCopy1,
+        msgState: MsgState.ADDED,
+        usersList: usersListCopy1
       };
 
-    case UserActionType.SAVE_USERFORM_ADD_ERROR:
+    case UserActionTypes.SAVE_USERFORM_ADD_ERROR:
       return {
         ...state,
         msgState: MsgState.ERR,
-        userServerErrorMsg: (<UserActionUnion>action).payload,
+        serverMsgError: (<UserActionUnion>action).payload
       };
 
     // create a edit user form actions
-    case UserActionType.CREATE_FORM_USER_EDIT:
+    case UserActionTypes.CREATE_FORM_USER_EDIT:
       return {
         ...state,
         msgState: MsgState.FORM_LOADING,
       };
 
-    case UserActionType.CREATE_FORM_USER_EDIT_SUCCESS:
+    case UserActionTypes.CREATE_FORM_USER_EDIT_SUCCESS:
       let modifiedUser: User = (<UserActionUnion>action).payload;
       return {
         ...state,
         msgState: MsgState.FORM_LOADED,
-        currentUser: modifiedUser,
+        currentUser: modifiedUser
       };
 
-    case UserActionType.CREATE_FORM_USER_EDIT_ERROR:
+    case UserActionTypes.CREATE_FORM_USER_EDIT_ERROR:
       return {
         ...state,
         msgState: MsgState.ERR,
-        userServerErrorMsg: (<UserActionUnion>action).payload,
+        serverMsgError: (<UserActionUnion>action).payload
       };
 
     // update user with user form data
 
-    case UserActionType.UPDATE_USER_FORM:
+    case UserActionTypes.UPDATE_USER_FORM:
       return {
         ...state,
-        msgState: MsgState.DEFAULT_MSG,
+        msgState: MsgState.DEFAULT_MSG
       };
 
-    case UserActionType.UPDATE_USER_FORM_SUCCESS:
+    case UserActionTypes.UPDATE_USER_FORM_SUCCESS:
       let updatedUser: User = (<UserActionUnion>action).payload;
       let usersListCopy2: User[] = [...state.usersList];
       usersListCopy2 = usersListCopy2.map((user) =>
       return {
         ...state,
         usersList: usersListCopy2,
-        msgState: MsgState.UPDATED,
+        msgState: MsgState.UPDATED
       };
 
-    case UserActionType.UPDATE_USER_FORM_ERROR:
+    case UserActionTypes.UPDATE_USER_FORM_ERROR:
       return {
         ...state,
         msgState: MsgState.ERR,
-        userServerErrorMsg: (<UserActionUnion>action).payload,
+        serverMsgError: (<UserActionUnion>action).payload
       };
 
     // delete a user actions
-    case UserActionType.DELETE_A_USER:
+    case UserActionTypes.DELETE_A_USER:
       return {
         ...state,
-        msgState: MsgState.LOADING,
+        msgState: MsgState.LOADING
       };
 
-    case UserActionType.DELETE_A_USER_SUCCESS:
+    case UserActionTypes.DELETE_A_USER_SUCCESS:
       let deletedUser: User = (<UserActionUnion>action).payload;
       let deletedUserIndex = state.usersList.indexOf(deletedUser);
       let usersListCopy3: User[] = [...state.usersList];
       return {
         ...state,
         msgState: MsgState.LOADED,
-        usersList: usersListCopy3,
+        usersList: usersListCopy3
       };
 
-    case UserActionType.DELETE_A_USER_ERROR:
+    case UserActionTypes.DELETE_A_USER_ERROR:
       return {
         ...state,
         msgState: MsgState.ERR,
-        userServerErrorMsg: (<UserActionUnion>action).payload,
+        serverMsgError: (<UserActionUnion>action).payload
       };
 
+      //load user's project actions
+
+    case UserActionTypes.GET_USER_S_PROJECTS:
+      return{
+        ... state,
+        msgState: MsgState.LOADING
+      };
+
+    case UserActionTypes.GET_USER_S_PROJECTS_SUCCESS:
+      return{
+        ...state,
+        msgState: MsgState.LOADED,
+        usersList: (<UserActionUnion> action).payload
+      };
+
+      case UserActionTypes.GET_USER_S_PROJECTS_ERROR:
+        return{
+          ...state,
+          msgState: MsgState.ERR,
+          serverMsgError: (<UserActionUnion> action).payload
+        };
+
+    case UserActionTypes.NAVIGATE_TO_USER_S_PROJECTS_COMPONENT_SUCCESS:
+      return{
+        ...state,
+        msgState: MsgState.DEFAULT_MSG
+      };
+
+
     default:
       return { ...state };
   }

src/app/pages/accueil/accueil-routing.module.ts

 import { AccueilComponent } from './accueil/accueil.component';
 
 const routes: Routes = [
-  {
-    path:'', component: AccueilComponent
-  }
+  // {
+  //   path:'', component: AccueilComponent
+  // }
 ];
 
 @NgModule({

src/app/pages/base-nav-bar/base-nav-bar.component.html

-<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
-
-  <a routerLink="/"
-    ><img src="../assets/images/logo-natan.png" width="100"
-  /></a>
-  <ul class="navbar-nav">
-
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/users-management"><h6>users</h6></a>
-    </li>
-
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/project-nav-bar"><h6>projects</h6></a>
-    </li>
-
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/company-nav-bar"><h6>companies</h6></a>
-    </li>
-  </ul>
-</nav>

src/app/pages/base-nav-bar/base-nav-bar.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-base-nav-bar',
-  templateUrl: './base-nav-bar.component.html',
-  styleUrls: ['./base-nav-bar.component.css']
-})
-export class BaseNavBarComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/pages/base-nav-menu/base-nav-menu.component.css

+.sidenav-container {
+  height: 100%;
+}
+
+.sidenav {
+  width: 200px;
+}
+
+.sidenav .mat-toolbar {
+  background: inherit;
+}
+
+.mat-toolbar.mat-primary {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}

src/app/pages/base-nav-menu/base-nav-menu.component.html

+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav #drawer class="sidenav" fixedInViewport
+      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+      [mode]="(isHandset$ | async) ? 'over' : 'side'"
+      [opened]="(isHandset$ | async) === false">
+    <mat-toolbar>
+      <img src="../assets/images/logo-natan.png" width="100"/>
+    </mat-toolbar>
+
+      <mat-nav-list>
+        <a mat-list-item routerLink="/users-management"> User Manager</a>
+        <a mat-list-item routerLink="/projects-management">project Manager</a>
+        <a mat-list-item routerLink="/companies-management">company Manager</a>
+      </mat-nav-list>
+  </mat-sidenav>
+
+  <mat-sidenav-content>
+    <mat-toolbar>
+      <button
+        type="button"
+        aria-label="Toggle sidenav"
+        mat-icon-button
+        (click)="drawer.toggle()"
+        *ngIf="isHandset$ | async">
+        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+      </button>
+      <span>Users, Projects and Companies Management</span>
+    </mat-toolbar>
+    <!-- Add Content Here -->
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/app/pages/base-nav-menu/base-nav-menu.component.spec.ts

+import { LayoutModule } from '@angular/cdk/layout';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { BaseNavMenuComponent } from './base-nav-menu.component';
+
+describe('BaseNavMenuComponent', () => {
+  let component: BaseNavMenuComponent;
+  let fixture: ComponentFixture<BaseNavMenuComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [BaseNavMenuComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BaseNavMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/base-nav-menu/base-nav-menu.component.ts

+import { Router } from '@angular/router';
+import { Component } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
+import { GetAllUsersAction } from 'src/app/ngrx/users/users.actions';
+import { Store } from '@ngrx/store';
+import { UserState } from 'src/app/ngrx/users/user.state';
+
+@Component({
+  selector: 'app-base-nav-menu',
+  templateUrl: './base-nav-menu.component.html',
+  styleUrls: ['./base-nav-menu.component.css'],
+})
+export class BaseNavMenuComponent {
+  isHandset$: Observable<boolean> = this.breakpointObserver
+    .observe(Breakpoints.Handset)
+    .pipe(
+      map((result) => result.matches),
+      shareReplay()
+    );
+
+  constructor(
+    private breakpointObserver: BreakpointObserver,
+    private router: Router,
+    private store: Store<{ userReducerKey: UserState }>,
+  ) {}
+
+  onUserCreate(): void {
+    this.router.navigateByUrl('/user-create');
+  }
+
+  onUsersGetAll(){
+    this.store.dispatch(new GetAllUsersAction({}));
+  }
+}

src/app/pages/companies-manager/companies-management/companies-management.component.html

+<app-company-nav-bar></app-company-nav-bar>

src/app/pages/companies-manager/companies-management/companies-management.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompaniesManagementComponent } from './companies-management.component';
+
+describe('CompaniesManagementComponent', () => {
+  let component: CompaniesManagementComponent;
+  let fixture: ComponentFixture<CompaniesManagementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CompaniesManagementComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CompaniesManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/companies-manager/companies-management/companies-management.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-companies-management',
+  templateUrl: './companies-management.component.html',
+  styleUrls: ['./companies-management.component.css']
+})
+export class CompaniesManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/companies-manager/company-nav-bar/company-nav-bar.component.html → src/app/pages/companies-manager/companies-management/company-nav-bar/company-nav-bar.component.html

         pButton
         type="button"
         label="create company"
-        class="p-button-outlined"
+        class="btn btn-outline-primary"
         (click)="onCompanyCreate()"
       ></button>
       &nbsp;
         pButton
         type="button"
         label="all companies"
-        class="p-button-outlined"
+        class="btn btn-outline-primary"
         (click)="onCompaniesGetAll()"
 
       ></button>
         pButton
         type="button"
         label="company's projects"
-        class="p-button-outlined"
+        class="btn btn-outline-primary"
         (click)="onProjectsOfCampany()"
       ></button>
     </div>

src/app/pages/companies-manager/companies-manager-routing.module.ts

-import { CompanyNavBarComponent } from './company-nav-bar/company-nav-bar.component';
-import { CompaniesCreateComponent } from './companies-create/companies-create.component';
+import { CompaniesManagementComponent } from './companies-management/companies-management.component';
+import { CompanyNavBarComponent } from './companies-management/company-nav-bar/company-nav-bar.component';
+import { CompaniesCreateComponent } from './companies-management/companies-create/companies-create.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {path: 'company-create', component: CompaniesCreateComponent},
-  {path: 'company-nav-bar', component: CompanyNavBarComponent}
+  {path: 'companies-management', component: CompaniesManagementComponent}
 ];
 
 @NgModule({

src/app/pages/companies-manager/companies-manager.module.ts

 import { CommonModule } from '@angular/common';
 
 import { CompaniesManagerRoutingModule } from './companies-manager-routing.module';
-import { CompaniesCreateComponent } from './companies-create/companies-create.component';
-import { CompanyNavBarComponent } from './company-nav-bar/company-nav-bar.component';
+import { CompaniesCreateComponent } from './companies-management/companies-create/companies-create.component';
+import { CompanyNavBarComponent } from './companies-management/company-nav-bar/company-nav-bar.component';
+import { CompaniesManagementComponent } from './companies-management/companies-management.component';
 
 
 @NgModule({
   declarations: [
     CompaniesCreateComponent,
-    CompanyNavBarComponent
+    CompanyNavBarComponent,
+    CompaniesManagementComponent
   ],
   imports: [
     CommonModule,

src/app/pages/projects-manager/project-create/project-create.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-project-create',
-  templateUrl: './project-create.component.html',
-  styleUrls: ['./project-create.component.css']
-})
-export class ProjectCreateComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/pages/projects-manager/project-nav-bar/project-nav-bar.component.ts

-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-project-nav-bar',
-  templateUrl: './project-nav-bar.component.html',
-  styleUrls: ['./project-nav-bar.component.css']
-})
-export class ProjectNavBarComponent {
-
-  onProjectCreate(){}
-  onProjectsGetAll(){}
-  onProjectsVsUsersGet(){}
-  onProjectCompanyAssociated(){}
-
-}

src/app/pages/projects-manager/project-create/project-create.component.html → src/app/pages/projects-manager/projects-management/project-create/project-create.component.html

 <p>project-create works!</p>
+

src/app/pages/projects-manager/projects-management/project-create/project-create.component.ts

+
+import { UserState } from 'src/app/ngrx/users/user.state';
+import { GetAllUsersAction } from './../../../../ngrx/users/users.actions';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { CreateProjectFormAddAction } from './../../../../ngrx/projects/projects.actions';
+import { ProjectState } from './../../../../ngrx/projects/project.state';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'app-project-create',
+  templateUrl: './project-create.component.html',
+  styleUrls: ['./project-create.component.css'],
+})
+export class ProjectCreateComponent implements OnInit {
+
+  projectFormGroup!: FormGroup;
+
+  constructor(
+  ) {}
+
+  ngOnInit(): void {
+
+  }
+
+  onProjectCreate(){}
+  onNewProject(){}
+  tryEgain(){}
+}

src/app/pages/projects-manager/project-nav-bar/project-nav-bar.component.html → src/app/pages/projects-manager/projects-management/project-nav-bar/project-nav-bar.component.html

         pButton
         type="button"
         label="create project"
-        class="p-button-outlined"
+        class="btn btn-outline-primary"
         (click)="onProjectCreate()"
       ></button>
       &nbsp;
         pButton
         type="button"
         label="all projects"
-        class="p-button-outlined"
+        class="btn btn-outline-primary"
         (click)="onProjectsGetAll()"
       ></button>
       &nbsp;
         pButton
         type="button"
         label="project->user involved"
-        class="p-button-outlined"
+        class="btn btn-outline-primary"
         (click)="onProjectsVsUsersGet()"
       ></button>
       &nbsp;
         pButton
         type="button"
         label="project->company"
-        class="p-button-outlined"
+        class="btn btn-outline-primary"
         (click)="onProjectCompanyAssociated()"
       ></button>
     </div>

src/app/pages/projects-manager/projects-management/project-nav-bar/project-nav-bar.component.ts

+import { Router } from '@angular/router';
+import {
+  GetAllProjectsAction
+} from './../../../../ngrx/projects/projects.actions';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-project-nav-bar',
+  templateUrl: './project-nav-bar.component.html',
+  styleUrls: ['./project-nav-bar.component.css'],
+})
+export class ProjectNavBarComponent {
+  constructor(private store: Store<any>, private router: Router) {}
+
+  onProjectCreate() {
+    this.router.navigateByUrl('/project-create');
+  }
+
+  onProjectsGetAll() {
+    this.store.dispatch(new GetAllProjectsAction({}));
+  }
+  onProjectsVsUsersGet() {}
+  onProjectCompanyAssociated() {}
+}

src/app/pages/projects-manager/projects-management/projects-list/projects-list.component.html

+<div class="container">
+  <div *ngIf="inputProjectState.projectsList && inputProjectState.projectsList.length>0" style="position:relative">
+    <input
+      type="text"
+      class="form-control"
+      id="search"
+      placeholder="search a project by name"
+      width="20"
+    />
+  </div>
+</div>
+
+<div class="container">
+  <p-table
+    [value]="inputProjectState.projectsList"
+    responsiveLayout="scroll"
+    styleClass="p-datatable-striped"
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} of {totalRecords} projects"
+    [rowsPerPageOptions]="[5, 8, 10]"
+  >
+    <ng-template pTemplate="header">
+      <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Priority</th>
+        <th>Creation Date</th>
+        <th>Company ID</th>
+        <th>Description</th>
+        <th>User ID</th>
+        <th>state</th>
+        <th>action1</th>
+        <th>action2</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-project>
+      <tr>
+        <td>{{ project.id }}</td>
+        <td>{{ project.projectName }}</td>
+        <td>{{ project.priority }}</td>
+        <td>{{project.creationDate | date:'dd MM yyyy'}}</td>
+        <td>{{ project.companyId }}</td>
+        <td>{{ project.description }}</td>
+        <td>{{ project.userId }}</td>
+        <td>{{ project.state }}</td>
+        <td>
+          <button class="btn">
+            <i class="fa fa-pencil" style="color:mediumturquoise"></i>
+          </button>
+        </td>
+        <td>
+          <button class="btn">
+            <i class="fa fa-trash" style="color:red"></i>
+          </button>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+</div>

src/app/pages/base-nav-bar/base-nav-bar.component.spec.ts → src/app/pages/projects-manager/projects-management/projects-list/projects-list.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BaseNavBarComponent } from './base-nav-bar.component';
+import { ProjectsListComponent } from './projects-list.component';
 
-describe('BaseNavBarComponent', () => {
-  let component: BaseNavBarComponent;
-  let fixture: ComponentFixture<BaseNavBarComponent>;
+describe('ProjectsListComponent', () => {
+  let component: ProjectsListComponent;
+  let fixture: ComponentFixture<ProjectsListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ BaseNavBarComponent ]
+      declarations: [ ProjectsListComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BaseNavBarComponent);
+    fixture = TestBed.createComponent(ProjectsListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

+import { ProjectState } from './../../../../ngrx/projects/project.state';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-projects-list',
+  templateUrl: './projects-list.component.html',
+  styleUrls: ['./projects-list.component.css']
+})
+export class ProjectsListComponent implements OnInit {
+
+  constructor() { }
+
+  @Input() inputProjectState!: ProjectState;
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/projects-manager/projects-management/projects-management.component.html

+<app-project-nav-bar></app-project-nav-bar>
+
+<div class="container">
+
+  <ng-container *ngIf="projectState$ | async as projectState "[ngSwitch]="projectState.msgState">
+
+    <ng-container *ngSwitchCase="msgState.INIT_STATE">
+      <div class="p-2">{{projectState.msgState}}</div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.LOADING">
+      <div class="p-2">{{projectState.msgState}}</div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.ERR">
+      <div class="p-2 text-danger"> {{projectState.msgState}} </div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.LOADED">
+      <app-projects-list [inputProjectState]="projectState"></app-projects-list>
+    </ng-container>
+
+  </ng-container>
+
+</div>

src/app/pages/projects-manager/projects-management/projects-management.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectsManagementComponent } from './projects-management.component';
+
+describe('ProjectsManagementComponent', () => {
+  let component: ProjectsManagementComponent;
+  let fixture: ComponentFixture<ProjectsManagementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProjectsManagementComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectsManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/projects-manager/projects-management/projects-management.component.ts

+import { Observable } from 'rxjs';
+import { ProjectState } from './../../../ngrx/projects/project.state';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { MsgState } from 'src/app/ngrx/msg.state';
+
+
+@Component({
+  selector: 'app-projects-management',
+  templateUrl: './projects-management.component.html',
+  styleUrls: ['./projects-management.component.css']
+})
+export class ProjectsManagementComponent implements OnInit {
+
+  constructor(private store: Store<{productReducerKey: ProjectState}>) { }
+
+  projectState$!:Observable<ProjectState>
+
+  readonly msgState = MsgState;
+
+  ngOnInit(): void {
+
+    this.projectState$= this.store.select("productReducerKey");
+  }
+
+}

src/app/pages/projects-manager/projects-manager-routing.module.ts

-import { ProjectNavBarComponent } from './project-nav-bar/project-nav-bar.component';
-import { ProjectCreateComponent } from './project-create/project-create.component';
+import { ProjectsManagementComponent } from './projects-management/projects-management.component';
+import { ProjectNavBarComponent } from './projects-management/project-nav-bar/project-nav-bar.component';
+import { ProjectCreateComponent } from './projects-management/project-create/project-create.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {path:'project-create', component: ProjectCreateComponent},
-  {path:'project-nav-bar', component: ProjectNavBarComponent}
+  {path: 'projects-management', component:ProjectsManagementComponent}
 ];
 
 @NgModule({

src/app/pages/projects-manager/projects-manager.module.ts

+import { TableModule } from 'primeng/table';
 import { ButtonModule } from 'primeng/button';
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 
 import { ProjectsManagerRoutingModule } from './projects-manager-routing.module';
-import { ProjectCreateComponent } from './project-create/project-create.component';
-import { ProjectNavBarComponent } from './project-nav-bar/project-nav-bar.component';
+import { ProjectCreateComponent } from './projects-management/project-create/project-create.component';
+import { ProjectNavBarComponent } from './projects-management/project-nav-bar/project-nav-bar.component';
+import { ProjectsManagementComponent } from './projects-management/projects-management.component';
+import { ProjectsListComponent } from './projects-management/projects-list/projects-list.component';
+
+
 
 
 @NgModule({
   declarations: [
     ProjectCreateComponent,
-    ProjectNavBarComponent
+    ProjectNavBarComponent,
+    ProjectsManagementComponent,
+    ProjectsListComponent
+
   ],
   imports: [
     CommonModule,
     ProjectsManagerRoutingModule,
-    ButtonModule
+    ButtonModule,
+    TableModule
+  ],
+  providers:[
+    DatePipe
   ]
 })
 

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

 <div class="container">
 
-    <ng-container *ngIf="userState">
+    <ng-container *ngIf="userState as state" [ngSwitch]="state.msgState">
 
-      <ng-container *ngIf="userState.msgState == msgState.LOADED">
+      <ng-container *ngSwitchCase="msgState.DEFAULT_MSG">
+        {{state.msgState}}
+      </ng-container>
+
+      <ng-container *ngSwitchCase="msgState.ADDED">
         <div class="alert-success container p-3 m-3">
-          <span> {{msgState.ADDED}}</span> &nbsp;
+          <span> {{state.msgState}}</span> &nbsp;
           <button class="btn btn-success" (click)="onNewUser()"> create user</button>
         </div>
       </ng-container>
 
-      <ng-container *ngIf="userState.msgState == msgState.LOADING">
+      <ng-container *ngSwitchCase="msgState.ERR">
         <div class="alert-danger container pt-3 mt-3">
-          <span> {{msgState.ERR}}</span> &nbsp;
+          <span> {{state.msgState}}</span> &nbsp;
           <button class="btn btn-danger ml-3" (click)="tryEgain()"> try again</button>
         </div>
       </ng-container>
 
-      <ng-container *ngIf="userState.msgState==msgState.FORM_LOADED">
+
+
+      <ng-container *ngSwitchCase="msgState.FORM_LOADED">
 
         <div class="card mt-3">
-          <div class="card-header bg-light">Update user informations</div>
+          <div class="card-header bg-light">Input form of User information</div>
           <div class="card-body">
             <form [formGroup]="userFormGroup" (ngSubmit)="onUserSave(); userFormGroup.reset()">
 
               <div class="row">
 
-                <div class="col">
+                <div class="col card">
 
                   <div class="col-md-auto mb-3">
                     <label for="id">Firstname</label>
                   </div>
 
                 </div>
-
-                <div class="col">
+                &nbsp;
+                <div class="col card">
 
                   <div formGroupName="address">
                     <div class="col-md-auto mb-3">
                       </div>
                     </div>
                   </div>
-
                 </div>
 
               </div>
 
-              <div class="row">
-                <div class="text-center">
+
+              <div class="text-center col-md-auto mt-3">
                   <button
                     class="btn btn-outline-primary"
                     type="submit"
                     save</button
                   >&nbsp;
                   <button class="btn btn-outline-danger" type="reset">reset</button>
-                </div>
               </div>
 
             </form>
           </div>
         </div>
-
-
       </ng-container>
 
     </ng-container>

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

-import { UsersService } from './../../../../shared/services/users.service';
-import { User } from './../../../../shared/models/user.model';
+import { UsersService } from '../../../../shared/services/users.service';
+import { User } from '../../../../shared/models/user.model';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import {
   CreateFormUserAddAction,
-  SaveUserFormAction,
-} from './../../../../ngrx/users/users.actions';
+  SaveUserFormAddAction,
+} from '../../../../ngrx/users/users.actions';
 import { Store } from '@ngrx/store';
 import { Component, OnInit } from '@angular/core';
 import { MsgState } from 'src/app/ngrx/msg.state';
   styleUrls: ['./user-create.component.css'],
 })
 export class UserCreateComponent implements OnInit {
+
   userFormGroup!: FormGroup;
 
   constructor(
   readonly msgState = MsgState;
 
   ngOnInit(): void {
+
     this.store.dispatch(new CreateFormUserAddAction({}));
 
     this.store.subscribe((myState) => {
      else{
 
       if (window.confirm(MsgState.CONFIRM_ADD+' '+user.firstname+' '+user.lastname)) {
-        this.store.dispatch(new SaveUserFormAction(user));
+        this.store.dispatch(new SaveUserFormAddAction(user));
       }
      }
    });

src/app/pages/users-manager/users-management/user-nav-bar/user-nav-bar.component.html

         pButton
         type="button"
         label="create user"
-        class="p-button-outlined"
+        class="btn btn-outline-primary"
         (click)="onUserCreate()"
       ></button>
       &nbsp;
         pButton
         type="button"
         label="all users"
-        class="p-button-outlined"
         (click)="onUsersGetAll()"
+        class="btn btn-outline-primary"
       ></button>
       &nbsp;
       <button
         pButton
         type="button"
         label="user's projects"
-        class="p-button-outlined"
-        (click)="onGetUsersVsProjects()"
+        class="btn btn-outline-primary"
+        (click)="onGetUser_s_Projects()"
       ></button>
     </div>
 
     <ul class="navbar-nav ml-auto">
       <li>
-        <form #form="ngForm"
-          (ngSubmit)="onSearch(form.value)"
-          novalidate
-        >
+        <form #form="ngForm" (ngSubmit)="onSearch(form.value)" novalidate>
           <div class="input-group">
             <input
               type="text"

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

 import { UserState } from './../../../../ngrx/users/user.state';
 import {
+  NavigateActionSuccess,
   SearchUsersAction,
-  CreateFormUserAddAction,
 } from './../../../../ngrx/users/users.actions';
 import { GetAllUsersAction } from '../../../../ngrx/users/users.actions';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Router } from '@angular/router';
+import { UserActionTypes } from 'src/app/ngrx/users/user.action.types';
 
 @Component({
   selector: 'app-user-nav-bar',
   templateUrl: './user-nav-bar.component.html',
   styleUrls: ['./user-nav-bar.component.css'],
 })
-export class UserNavBarComponent {
+export class UserNavBarComponent implements OnInit{
   constructor(
     private store: Store<{ userReducerKey: UserState }>,
     private router: Router
   ) {}
 
+  userActionTypes = UserActionTypes;
+  userState!: UserState;
+
+  ngOnInit(): void {
+
+    this.store.subscribe((userState)=>{
+      this.userState = userState.userReducerKey;
+    })
+  }
+
+
 
   onUserCreate(): void {
     this.router.navigateByUrl('/user-create');
   onUsersGetAll(): any {
     this.store.dispatch(new GetAllUsersAction({}));
   }
-  onGetUsersVsProjects(): any {}
+
+  onGetUser_s_Projects(): any {
+   this.store.dispatch(new NavigateActionSuccess({}))
+  }
 
   onSearch(searchForm: any) {
     this.store.dispatch(new SearchUsersAction(searchForm.keyword));

src/app/pages/users-manager/users-management/user-s-projects/user-s-projects.component.css

+ul{
+  list-style-type: none;
+}

src/app/pages/users-manager/users-management/user-s-projects/user-s-projects.component.html

+<div class="container m-3 p-3">
+  <ng-container
+    *ngIf="usersState$ | async as userState"
+    [ngSwitch]="userState.msgState"
+  >
+    <ng-container *ngSwitchCase="msgState.LOADING">
+      {{ msgState.LOADING }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.ERR">
+      {{ msgState.ERR }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.LOADED">
+      <p-table
+        [value]="userState.usersList"
+        responsiveLayout="scroll"
+        styleClass="p-datatable-striped"
+        *ngIf="userState.usersList && userState.usersList.length > 0"
+        [paginator]="true"
+        [rows]="2"
+        [showCurrentPageReport]="true"
+        currentPageReportTemplate="{first} - {last} of {totalRecords} users"
+        [rowsPerPageOptions]="[2, 3, 5]"
+      >
+        <ng-template pTemplate="header">
+          <tr>
+            <th>ID</th>
+            <th>Firstname</th>
+            <th>Lastname</th>
+            <th>Projects involving user</th>
+            <th>Email</th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-user>
+          <tr>
+            <td>{{ user.id }}</td>
+            <td>{{ user.firstname }}</td>
+            <td>{{ user.lastname }}</td>
+            <td>
+              <ul *ngFor="let project of user.projects">
+                <li>
+                  <span style="font-weight: bold"
+                    >Project ID: {{ project.id }}</span
+                  >
+                </li>
+
+                <li>Project Name: {{ project.projectName }}</li>
+                <li>Priority: {{ project.priority }}</li>
+                <li>Creation Date: {{ project.creationDate }}</li>
+                <li>Company ID: {{ project.companyId }}</li>
+                <li>Description: {{ project.description }}</li>
+                <li>User ID: {{ project.userId }}</li>
+                <li>Project State: {{ project.state }}</li>
+              </ul>
+            </td>
+
+            <td>{{ user.email }}</td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </ng-container>
+  </ng-container>
+</div>

src/app/pages/users-manager/users-management/user-s-projects/user-s-projects.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserSProjectsComponent } from './user-s-projects.component';
+
+describe('UserSProjectsComponent', () => {
+  let component: UserSProjectsComponent;
+  let fixture: ComponentFixture<UserSProjectsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserSProjectsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserSProjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { MsgState } from './../../../../ngrx/msg.state';
+import { Observable } from 'rxjs';
+import { GetUser_S_Projects, UserActionUnion } from './../../../../ngrx/users/users.actions';
+import { UserState } from './../../../../ngrx/users/user.state';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { User } from 'src/app/shared/models/user.model';
+
+@Component({
+  selector: 'app-user-s-projects',
+  templateUrl: './user-s-projects.component.html',
+  styleUrls: ['./user-s-projects.component.css'],
+})
+export class UserSProjectsComponent implements OnInit {
+  constructor(
+    private store: Store<{ userReducerKey: UserState }>,
+  ) {
+
+  }
+
+  usersState$!: Observable<{
+    currentUser: User| null,
+    usersList: any,
+    msgState: MsgState,
+    serverMsgError: string
+  }>
+
+  msgState = MsgState;
+
+  ngOnInit(): void {
+
+    this.store.dispatch(new GetUser_S_Projects({}));
+
+    this.usersState$= this.store.select("userReducerKey");
+    console.log(this.usersState$)
+
+  }
+}

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

 
             <div class="row">
 
-              <div class="col">
+              <div class="col card">
 
                 <div class="col-md-auto mb-3">
                   <label for="id">Firstname</label>
 
               </div>
 
-              <div class="col">
+              <div class="col card">
 
                 <div formGroupName="address">
                   <div class="col-md-auto mb-3">

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

 import { MsgState } from 'src/app/ngrx/msg.state';
-import { UsersService } from './../../../../shared/services/users.service';
+import { UsersService } from '../../../../shared/services/users.service';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { CreareFormUserEditAction, UpdateUserFormAction } from './../../../../ngrx/users/users.actions';
+import { CreareFormUserEditAction, UpdateUserFormAction } from '../../../../ngrx/users/users.actions';
 import { UserState } from 'src/app/ngrx/users/user.state';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';

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

-<p-table #tbl
+<p-table
 [value]="inputState.usersList"
 responsiveLayout="scroll"
 *ngIf="inputState.usersList && inputState.usersList.length > 0"

src/app/pages/users-manager/users-management/users-management.component.html

-<div class="p-4">
-  <app-user-nav-bar></app-user-nav-bar>
+<app-user-nav-bar></app-user-nav-bar>
+<div class="container">
+  <ng-container *ngIf="userState$ | async as userState "[ngSwitch]="userState.msgState">
 
-  <ng-container *ngIf="userState$ | async as userState" [ngSwitch]="userState.msgState">
-
-    <ng-container *ngSwitchCase="userMsg.INIT_STATE">
+    <ng-container *ngSwitchCase="msgState.INIT_STATE">
       <div class="p-2">{{userState.msgState}}</div>
     </ng-container>
 
-    <ng-container *ngSwitchCase="userMsg.LOADING">
-      <div class="p-2">{{userMsg.LOADING}}</div>
+    <ng-container *ngSwitchCase="msgState.LOADING">
+      <div class="p-2">{{userState.msgState}}</div>
     </ng-container>
 
-    <ng-container *ngSwitchCase="userMsg.ERR">
-      <div class="p-2 text-danger"> {{userState.userServerErrorMsg}} </div>
+    <ng-container *ngSwitchCase="msgState.ERR">
+      <div class="p-2 text-danger"> {{userState.msgState}} </div>
     </ng-container>
 
-    <ng-container *ngSwitchCase="userMsg.LOADED">
+    <ng-container *ngSwitchCase="msgState.LOADED">
       <app-users-list [inputState]="userState"></app-users-list>
     </ng-container>
 

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

 
   userState$!: Observable<{
     currentUser: User | null,
-    usersList: User[],
+    usersList: any,
     msgState: MsgState,
-    userServerErrorMsg: string
+    serverMsgError: string
   }>;
 
-  readonly userMsg = MsgState;
+  readonly msgState = MsgState;
 
   constructor(private store: Store<{ userReducerKey: UserState }>) {}
 
    // this.userState$ = this.store.select('userReducerKey');
     //or
     this.userState$ = this.store.pipe(
-      map( (userState) => userState.userReducerKey)
+      map( (userState) => userState.userReducerKey),
     )
   }
 }

src/app/pages/users-manager/users-manager-routing.module.ts

+import { UserSProjectsComponent } from './users-management/user-s-projects/user-s-projects.component';
 import { UserUpdateComponent } from './users-management/user-update/user-update.component';
 import { UsersManagementComponent } from './users-management/users-management.component';
 import { NgModule } from '@angular/core';
   { path: 'user-create', component: UserCreateComponent },
   { path: 'users-management', component: UsersManagementComponent },
   { path: 'user-update/:id', component: UserUpdateComponent },
+  { path: 'user-s-projects', component: UserSProjectsComponent },
 ];
 
 @NgModule({

src/app/pages/users-manager/users-manager.module.ts

 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { StoreModule } from '@ngrx/store';
-import { UserEffects } from 'src/app/ngrx/users/users.effects';
 import { userReducer } from 'src/app/ngrx/users/users.reducer';
 import { TableModule } from "primeng/table";
 import { UsersListComponent } from './users-management/users-list/users-list.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { UserUpdateComponent } from './users-management/user-update/user-update.component';
+import { UserSProjectsComponent } from './users-management/user-s-projects/user-s-projects.component';
+import { UserCreateEffects } from 'src/app/ngrx/users/effects.user.createuser';
+import { UserGetSearchEffects } from 'src/app/ngrx/users/effects.user.getsearchuser';
+import { UserUpdateEffects } from 'src/app/ngrx/users/effects.user.update';
+import { ProjectCreateEffects } from 'src/app/ngrx/projects/effects.projectcreate';
 
 
 
     UserNavBarComponent,
     UsersManagementComponent,
     UsersListComponent,
-    UserUpdateComponent
+    UserUpdateComponent,
+    UserSProjectsComponent
   ],
   imports: [
     CommonModule,
     UsersManagerRoutingModule,
     ButtonModule,
-    StoreModule.forRoot({userReducerKey: userReducer}),
-    EffectsModule.forRoot([UserEffects]),
-    StoreDevtoolsModule.instrument(),
     TableModule,
     FormsModule,
     ReactiveFormsModule

src/app/shared/models/project.priority.ts

+export enum Priority{
+  PRIORITY1=1,
+  PRIORITY2=2,
+  PRIORITY3=3,
+  PRIORITY4=4,
+  PRIORITY5=5,
+}

src/app/shared/models/project.state.ts

+export enum State {
+  END = "END",
+  INPROGRESS = "IN PROGRESS"
+}

src/app/shared/services/users.service.ts

     });
   }
 
-  baseUrl: string = Math.random() > 0.2 ? environment.host : environment.unreachibleHost;
+  baseUrl: string = Math.random() > 0.01 ? environment.host : environment.unreachibleHost;
   headers = { 'content-type': 'application/json' };
 
   getAllUsers(): Observable<User[]> {