🛂 add folder guard

Author: marcode24

src/app/core/components/header/header.component.scss

@@ -33,7 +33,7 @@ header {
 
   & input.icon {
     background: var(--bg-sidebar);
-    border: var(--border-input);
+    border: 1px solid transparent;
     border-radius: 1rem;
     width: 100%;
     min-width: 0;
@@ -43,6 +43,13 @@ header {
     transition: 0.2s;
     box-shadow: var(--box-shadow);
 
+    &:focus {
+      border: 1px solid var(--border-input);
+      background: var(--bg-2);
+      color: var(--fc-primary);
+      outline: 0;
+    }
+
     & ~ i {
       top: 15px;
       left: 20px;

src/app/core/guards/folder.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FolderGuard } from './folder.guard';
+
+describe('FolderGuard', () => {
+  let guard: FolderGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(FolderGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/core/guards/folder.guard.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { FolderService } from '@services/folder.service';
+import { isMongoId } from '@utils/mongo.util';
+import { Observable, tap } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FolderGuard implements CanActivate {
+
+  constructor(
+    private folderService: FolderService,
+    private router: Router
+  ) {}
+
+  canActivate(route: ActivatedRouteSnapshot)
+    : Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    const folderId = route.params['folderId'];
+    if(!isMongoId(folderId)) return this.router.navigate(['/']);
+    return this.folderService.getFolder(folderId).pipe(tap((hasAccess: boolean) => {
+      if(!hasAccess) {
+        return this.router.navigate(['/']);
+      }
+    }));
+  }
+}

src/app/core/services/folder.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { EventEmitter, Injectable } from '@angular/core';
 import { environment } from 'environments/environment';
 
-import { Observable, map } from 'rxjs';
+import { Observable, catchError, map, of } from 'rxjs';
 
 import { Folder } from '@models/folder.model';
 
@@ -17,6 +17,7 @@ const base_url = environment.base_url;
 })
 export class FolderService {
   folderCreated: EventEmitter<Folder> = new EventEmitter();
+  folderTemp: Folder;
 
   get headers() {
     return {
@@ -39,8 +40,14 @@ export class FolderService {
     });
   }
 
-  getFolder(folderID: string): Observable<Folder> {
+  getFolder(folderID: string): Observable<boolean> {
     const url = `${base_url}/folder/${folderID}`;
-    return this.http.get<IFolderResponse>(url, this.headers).pipe(map(resp => resp.folder));
+    return this.http.get<IFolderResponse>(url, this.headers)
+      .pipe(map(resp => {
+        const { folder } = resp;
+        if(!folder) return false;
+        this.folderTemp = folder;
+        return true;
+    }), catchError(() => of(false)));
   }
 }

src/app/features/folder/folder.component.html

@@ -1,10 +1,10 @@
-<div class="fluid-container" *ngIf="!loading">
+<div class="fluid-container" *ngIf="!loading && folder">
   <app-actions [folder]="folder"></app-actions>
-  <div class="not-items" *ngIf="!allFiles.length && !allFiles.length">
+  <div class="not-items" *ngIf="!allFiles.length">
     <img src="assets/images/no-files.svg" alt="no-files-image">
     <span class="description">Agrega tu primer archivo o carpeta</span>
   </div>
-  <div class="files" *ngIf="allFiles.length && allFiles.length">
+  <div class="files" *ngIf="allFiles.length">
     <section class="group">
       <span class="title">Files</span>
       <div class="items">

src/app/features/folder/folder.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
 
 import { Subscription } from 'rxjs';
 
@@ -9,7 +8,6 @@ import { FolderService } from '@services/folder.service';
 import { File } from '@models/file.model';
 import { Folder } from '@models/folder.model';
 
-import { isMongoId } from '@utils/mongo.util';
 @Component({
   selector: 'app-folder',
   templateUrl: './folder.component.html',
@@ -23,8 +21,6 @@ export class FolderComponent implements OnInit, OnDestroy {
   allFiles: (Folder | File)[];
 
   constructor(
-    private activatedRoute: ActivatedRoute,
-    private router: Router,
     private folderService: FolderService,
     private fileService: FileService,
   ) { }
@@ -44,21 +40,14 @@ export class FolderComponent implements OnInit, OnDestroy {
       this.folder.files.push(...files);
       this.mixFilesAndFolders();
     });
-    this.activatedRoute.params.subscribe(({folderId}) => {
-      if(!isMongoId(folderId)) return this.router.navigate(['/']);
-      this.getFolder(folderId);
-    });
+    this.getFolder();
   }
 
-  getFolder(id: string): void {
+  getFolder(): void {
     this.loading = true;
-    this.folderService.getFolder(id).subscribe({
-      next: (folder) => {
-        this.folder = folder;
-        this.mixFilesAndFolders();
-      },
-      complete: () => this.loading = false
-    });
+    this.folder = this.folderService.folderTemp;
+    this.mixFilesAndFolders();
+    this.loading = false;
   }
 
   private orderFolders(): void {

src/app/features/folder/folder.routing.ts

@@ -2,10 +2,12 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { FolderComponent } from "./folder.component";
+import { FolderGuard } from "@guards/folder.guard";
 
 const childRoutes: Routes = [
   {
     path: ':folderId',
+    canActivate: [FolderGuard],
     component: FolderComponent
   },
 ];

src/app/features/home/components/components.module.ts

@@ -5,6 +5,7 @@ import { DropdownsModule } from '@shared/dropdowns/dropdowns.module';
 
 import { FileComponent } from './file/file.component';
 import { FolderComponent } from './folder/folder.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [
@@ -13,7 +14,8 @@ import { FolderComponent } from './folder/folder.component';
   ],
   imports: [
     CommonModule,
-    DropdownsModule
+    DropdownsModule,
+    RouterModule
   ],
   exports: [
     FileComponent,

src/app/features/home/components/file/file.component.html

@@ -1,5 +1,7 @@
-<div class="icon">
-  <i class="bx " [ngClass]="getIcon"></i>
+<div class="file">
+  <div class="icon">
+    <i class="bx " [ngClass]="getIcon"></i>
+  </div>
+  <span class="name">{{ file.name }}</span>
 </div>
-<span class="name">{{ file.name }}</span>
 <app-dots-dropdown class="actions"></app-dots-dropdown>

src/app/features/home/components/file/file.component.scss

@@ -1,6 +1,16 @@
 @import 'settings/_colors.scss';
 @import 'settings/_typography.scss';
 
+.file {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.6rem 0 0.6rem 1rem;
+  gap: 0.8rem;
+  flex: 1;
+  width: 80%;
+}
+
 .name {
   @include fs-5;
   @include fw-400;
@@ -15,3 +25,7 @@
   @include fs-2;
   color: var(--fc-primary);
 }
+
+.actions {
+  margin-right: 1rem;
+}