patch test Signal use

src/app/_component/sidbar/sidbar.component.html

@@ -1,12 +1,12 @@
 <div
   class="relative flex h-[calc(100vh-2rem)] w-full max-w-[20rem] flex-col rounded-xl bg-white bg-clip-border p-4 text-gray-700 shadow-xl shadow-blue-gray-900/5">
-  <div class="p-4 mb-2">
-    <h5 class="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
-      YouVideo
+  <div routerLink="/" class="p-4 mb-2">
+    <h5 class="block cursor-pointer font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
+      YouVideo {{ (user$ | async)?.id }}
     </h5>
   </div>
   <nav class="flex min-w-[240px] flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700">
-    <div *ngIf="user.id !== 0" class="relative block w-full">
+    <div *ngIf="(user$ | async)?.id" class="relative block w-full">
       <div role="button"
            class="flex items-center w-full p-0 leading-tight transition-all rounded-lg outline-none bg-blue-gray-50/50 text-start text-blue-gray-700 hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
         <button type="button"
@@ -47,21 +47,11 @@
               </div>
               Mes playlists
             </div>
-            <div role="button"
-                 class="flex items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
-              <div class="grid mr-4 place-items-center">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
-                     stroke="currentColor" aria-hidden="true" class="w-5 h-3">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
-                </svg>
-              </div>
-              Rechercher
-            </div>
           </nav>
         </div>
       </div>
     </div>
-    <div *ngIf="user.id === 0" routerLink="/login" role="button"
+    <div *ngIf="(user$ | async)?.id" routerLink="/login" role="button"
          class="flex cursor-pointer items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
       <div class="grid mr-4 place-items-center">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
@@ -73,8 +63,8 @@
       </div>
       Connexion/Inscription
     </div>
-    <div *ngIf="user.id !== 0" role="button"
-         class="flex items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
+    <div *ngIf="(user$ | async)?.id" routerLink="/p" role="button"
+         class="flex cursor-pointer items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
       <div class="grid mr-4 place-items-center">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
              class="w-5 h-5">
@@ -85,7 +75,7 @@
       </div>
       Profile
     </div>
-    <div *ngIf="user.id !== 0" (click)="logout()" role="button"
+    <div *ngIf="(user$ | async)?.id" (click)="logout()" role="button"
          class="flex cursor-pointer items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
       <div class="grid mr-4 place-items-center">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"

src/app/_component/sidbar/sidbar.component.ts

@@ -1,51 +1,35 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {AuthService} from '../../_services/auth.service';
 import {Users} from '../../_models/users';
-import {catchError, of, Subscription} from 'rxjs';
-import {NgIf} from '@angular/common';
+import {BehaviorSubject, catchError, Observable, of, Subscription} from 'rxjs';
+import {AsyncPipe, NgIf} from '@angular/common';
 import {Router, RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-sidbar',
   imports: [
     NgIf,
-    RouterLink
+    RouterLink,
+    AsyncPipe
   ],
   templateUrl: './sidbar.component.html',
   styleUrl: './sidbar.component.css'
 })
-export class SidbarComponent implements OnInit, OnDestroy {
+export class SidbarComponent implements OnInit {
 
-  user: Users = { id: 0, email: '', firstname: '', lastname: '', password_hash: '', updated_at: new Date(), created_at: new Date() };
-
-  private authSubscription!: Subscription;
-  private authCheckInterval: any;
+  user$: BehaviorSubject<Users> = new BehaviorSubject<Users>(null as unknown as Users);
 
   constructor(private authService: AuthService, private router: Router) {}
 
   ngOnInit(): void {
     this.checkAuthAndLoadUser();
-
-    this.authCheckInterval = setInterval(() => {
-      this.checkAuthAndLoadUser();
-    }, 3000);
-  }
-
-  ngOnDestroy(): void {
-    if (this.authCheckInterval) {
-      clearInterval(this.authCheckInterval);
-    }
-    if (this.authSubscription) {
-      this.authSubscription.unsubscribe();
-    }
   }
 
   checkAuthAndLoadUser(): void {
     this.authService.isAuthenticated().subscribe(isAuthenticated => {
+      console.log(isAuthenticated);
       if (isAuthenticated) {
         this.loadUsers();
-      } else {
-        this.user = { id: 0, email: '', firstname: '', lastname: '', password_hash: '', updated_at: new Date(), created_at: new Date() };
       }
     });
   }
@@ -58,7 +42,7 @@ export class SidbarComponent implements OnInit, OnDestroy {
       })
     ).subscribe(users => {
       if (users) {
-        this.user = users;
+        this.user$.next(users)
       }
     });
   }

src/app/app.routes.ts

@@ -1,9 +1,12 @@
 import { Routes } from '@angular/router';
 import {NotFoundComponent} from './public/pages/not-found/not-found.component';
+import {authGuard} from './_guards/auth.guard';
 
 export const routes: Routes = [
   { path: '', loadChildren: () => import('./public/public.module')
       .then(m => m.PublicModule)
   },
-  { path: '**', component: NotFoundComponent }
+  { path: 'p', loadChildren: () => import('./private/private.module')
+      .then(m => m.PrivateModule), canActivate: [authGuard]
+  },
 ];

src/app/private/pages/profile/profile.component.html

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

src/app/private/pages/profile/profile.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  imports: [],
+  templateUrl: './profile.component.html',
+  styleUrl: './profile.component.css'
+})
+export class ProfileComponent {
+
+}

src/app/private/private-layout/private-layout.component.html

@@ -0,0 +1 @@
+<router-outlet />

src/app/private/private-layout/private-layout.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+
+@Component({
+  selector: 'app-private-layout',
+  imports: [
+    RouterOutlet
+  ],
+  templateUrl: './private-layout.component.html',
+  styleUrl: './private-layout.component.css'
+})
+export class PrivateLayoutComponent {
+
+}

src/app/private/private-routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {NotFoundComponent} from '../public/pages/not-found/not-found.component';
+import {PrivateLayoutComponent} from './private-layout/private-layout.component';
+import {ProfileComponent} from './pages/profile/profile.component';
+
+const routes: Routes = [
+  { path: '', component: PrivateLayoutComponent, children: [
+      { path: '',  component: ProfileComponent },
+    ]
+  },
+  { path: '**', component: NotFoundComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PrivateRoutingModule { }

src/app/private/private.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PrivateRoutingModule } from './private-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    PrivateRoutingModule
+  ]
+})
+export class PrivateModule { }

src/app/public/pages/home/home.component.html

@@ -18,7 +18,6 @@
         <div class="mt-4">
           <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
           <h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
-          <p class="mt-1">$21.15</p>
         </div>
       </div>
       <div class="lg:w-1/4 md:w-1/2 p-4 w-full">