userService

src/app/app.component.ts

@@ -7,6 +7,9 @@ import { BookListComponent } from './components/book-list/book-list.component';
 import { BookMenuComponent } from './components/book-menu/book-menu.component';
 
 
+import { UserService } from './services/user-service';
+import { User } from './models/user.model';
+
 import { BookService } from './services/book-service';
 import { Book } from './models/book.model';
 
@@ -16,13 +19,14 @@ import { Book } from './models/book.model';
   imports: [RouterOutlet, BookListComponent, BookFormComponent, BookMenuComponent, HttpClientModule],
   templateUrl: './app.component.html',
   providers: [
-    BookService
+    BookService,
+    UserService
   ]
 })
 export class AppComponent {
   title = 'angular-tp2-correct';
 
-  constructor(protected bookService: BookService){ }
+  constructor(protected bookService: BookService, protected userService: UserService){ }
   
   addBook($event: Book): void {
     this.bookService.addBook($event);

src/app/app.routes.ts

@@ -4,12 +4,15 @@ import { BookFormComponent } from './components/book-form/book-form.component';
 import { BookDetailComponent } from './components/book-detail/book-detail.component';
 import { BookHomeComponent } from './components/book-home/book-home.component';
 import { LoginComponent } from './components/login/login.component';
-
+import { UserListComponent } from './components/user-list/user-list.component';
+import { UserDetailComponent } from './components/user-detail/user-detail.component';
 
 export const routes: Routes = [
     { path: '', component: LoginComponent },
     { path: 'books', component: BookListComponent },
     { path: 'book/add', component: BookFormComponent },    
     { path: 'book/:id', component: BookDetailComponent },
+    { path: 'users', component: UserListComponent },
+    { path: 'user/:id', component: UserDetailComponent },
     { path: '**', redirectTo: '', pathMatch: 'full' }
 ];

src/app/components/login/login.component.ts

@@ -8,7 +8,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
-import { User } from '../../models/user.model';
+import { User } from '../../models/user.model'
 
 @Component({
   selector: 'app-login',
@@ -27,7 +27,7 @@ import { User } from '../../models/user.model';
   styleUrl: './login.component.css'
 })
 export class LoginComponent {
-  user: User = { login: '', password: '' }
+  user: User = {id:1, login: '', password: '', streak: null, streaks: [], points: null}
   loginForm: FormGroup = new FormGroup({
     login: new FormControl(this.user.login, Validators.required),
     password: new FormControl(this.user.password, Validators.required),

src/app/components/user-detail/user-detail.component.html

@@ -0,0 +1 @@
+<p>user-detail works!</p>

src/app/components/user-detail/user-detail.component.spec.ts

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

src/app/components/user-detail/user-detail.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { ActivatedRoute } from '@angular/router';
+import { UserService } from '../../services/user-service';
+import { User } from '../../models/user.model';
+
+@Component({
+  selector: 'app-user-detail',
+  standalone: true,
+  imports: [],
+  templateUrl: './user-detail.component.html',
+  styleUrl: './user-detail.component.css'
+})
+export class UserDetailComponent {
+  selectedUser!: User | undefined;
+
+  constructor(protected userService: UserService, private activatedRoute: ActivatedRoute) {}
+
+  ngOnInit() {
+    const id = this.activatedRoute.snapshot.params["id"];
+    this.selectedUser = this.userService.getUserById(id);
+  }
+}

src/app/components/user-list/user-list.component.html

@@ -0,0 +1,7 @@
+<h2>User list</h2>
+
+<ul>
+    <li *ngFor="let user of users">
+        <a routerLink="/user/{{ user.id }}">{{ user.login }}</a>
+    </li>
+</ul>

src/app/components/user-list/user-list.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgFor } from '@angular/common';
+
+import { User } from '../../models/user.model';
+import { UserService } from '../../services/user-service';
+
+@Component({
+  selector: 'app-user-list',
+  standalone: true,
+  imports: [RouterModule,NgFor,],
+  templateUrl: './user-list.component.html',
+  styleUrl: './user-list.component.css'
+})
+export class UserListComponent {
+  users: User[] = [];
+
+  constructor(protected userService: UserService) {
+  }
+
+  ngOnInit() {
+    this.users = this.userService.getAll();
+  }
+}

src/app/models/user.model.ts

@@ -1,4 +1,8 @@
 export interface User {
+    id: number
     login: string,
     password: string,
+    streak: number | null,
+    points: number | null,
+    streaks: number[],
 }

src/app/services/user-service.ts

@@ -0,0 +1,36 @@
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from "@angular/core";
+import { User } from "../models/user.model";
+
+@Injectable()
+export class UserService {
+    private users: User[];
+    private readonly userApiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/users';
+
+    public constructor(private http: HttpClient){
+        this.users = [];
+
+        this.http.get<User[]>(this.userApiUrl).subscribe(users => {
+            users.forEach(user => {
+                this.addUserToLocal(user);
+            });
+        });
+    }
+
+    public getAll(): User[]{
+        return this.users;
+    }
+
+    public getUserById(id: number): User | undefined{
+        return this.users.find(user => user.id === id);
+        let user: User;
+        this.http.get<User>(this.userApiUrl).subscribe(u => {
+            user = u;
+        });
+    }
+
+    private addUserToLocal(user: User): void{
+        console.log('addBookToLocal', user);
+        this.users.push(user);
+    }
+}