Show all categories in index

Author: jbarcia2019

angular/wallypop/src/app/components/index/index.component.html

@@ -16,12 +16,10 @@ <h3 class="text-center text-light">Haz tuyo lo de los demás…</h3>
   <h2 class="text-center text-light">Todas las categorías que imaginas</h2>
   <div class="container">
     <div class="full-width container-category">
-      <!-- {{#Categories}}
-      <a href="/commercial/{{ID_CATEGORY}}" id="categori-{{ID_CATEGORY}}">
-        <i aria-hidden="true" class="fa fa-{{ICON}}"></i> -->
-      <!--  <span>{{TITLE}}</span> -->
-      <!--  </a> -->
-      <!-- {{/Categories}} -->
+      <a *ngFor="let category of categories" href="/commercial/{{category.id_CATEGORY}}" id="categori-{{category.id_CATEGORY}}">
+        <i aria-hidden="true" class="fa fa-{{category.icon}}"></i>
+      <span>{{category.title}}</span>
+      </a>
     </div>
   </div>
 </section>

angular/wallypop/src/app/components/index/index.component.ts

@@ -1,12 +1,24 @@
 import {Component, OnInit} from '@angular/core';
+import {Category} from '../../models/category.model';
+import {Router} from '@angular/router';
+import {CategoryService} from '../../services/category.service';
 
 @Component({
   selector: 'index',
   templateUrl: './index.component.html'
 })
 export class IndexComponent implements OnInit {
+
+  categories: Category[];
+
+  constructor(private categoryService: CategoryService) {
+  }
+
   ngOnInit(): void {
-    // Cargar categorías
+    this.categoryService.getCategories().subscribe(
+      category => this.categories = category,
+      error => console.log(error)
+    );
   }
 
 }

angular/wallypop/src/app/services/category.service.ts

@@ -14,60 +14,60 @@ export class CategoryService {
     constructor(private httpClient: HttpClient, private router: Router) {
     }
 
+    static handleError(error: any): Observable<never> {
+        console.log('ERROR:');
+        console.error(error);
+        return throwError('Server error (' + error.status + '): ' + error.text());
+    }
+
     getCategories(): Observable<Category[]> {
-        return this.httpClient.get(BASE_URL).pipe(
-            catchError(error => this.handleError(error))
+        return this.httpClient.get(BASE_URL + 'categories').pipe(
+            catchError(error => CategoryService.handleError(error))
         ) as Observable<Category[]>;
     }
 
     getCategory(id: number | string): Observable<Category> {
-        return this.httpClient.get(BASE_URL + id).pipe(
-            catchError(error => this.handleError(error))
+        return this.httpClient.get(BASE_URL + 'categories/' + id).pipe(
+            catchError(error => CategoryService.handleError(error))
         ) as Observable<Category>;
     }
 
-    addCategory(title: string, description: string, icon: string) {
+    addCategory(title: string, description: string, icon: string): Observable<any> {
 
-        this.httpClient.post(BASE_URL + 'admin/categories', {title, description, icon}, {withCredentials: true})
+        /*this.httpClient.post(BASE_URL + 'admin/categories', {title, description, icon}, {withCredentials: true})
             .subscribe(
                 (response) => this.router.navigate(['profile']),
                 (error) => alert('Usuario ya existe, inicie sesión')
-            );
-        /*return this.httpClient.post(BASE_URL + 'admin/categories', {title, description, icon})
-            .pipe(
-                catchError(error => this.handleError(error))
             );*/
+        return this.httpClient.post(BASE_URL + 'admin/categories', {title, description, icon}, {withCredentials: true})
+            .pipe(
+                catchError(error => CategoryService.handleError(error))
+            );
     }
 
-    setCategoryImage(category: Category, formData: FormData) {
-        return this.httpClient.post(BASE_URL + category.id_CATEGORY + '/image', formData)
+    setCategoryImage(category: Category, formData: FormData): Observable<any> {
+        return this.httpClient.post(BASE_URL + 'admin/categories/' + category.id_CATEGORY + '/image', formData)
             .pipe(
-                catchError(error => this.handleError(error))
+                catchError(error => CategoryService.handleError(error))
             );
     }
 
-    deleteCategoryImage(category: Category) {
-        return this.httpClient.delete(BASE_URL + category.id_CATEGORY + '/image')
+    deleteCategoryImage(category: Category): Observable<any> {
+        return this.httpClient.delete(BASE_URL + 'admin/categories/' + category.id_CATEGORY + '/image')
             .pipe(
-                catchError(error => this.handleError(error))
+                catchError(error => CategoryService.handleError(error))
             );
     }
 
-    deleteCategory(category: Category) {
-        return this.httpClient.delete(BASE_URL + category.id_CATEGORY).pipe(
-            catchError(error => this.handleError(error))
+    deleteCategory(category: Category): Observable<any> {
+        return this.httpClient.delete(BASE_URL + 'admin/categories/' + category.id_CATEGORY).pipe(
+            catchError(error => CategoryService.handleError(error))
         );
     }
 
-    updateCategory(category: Category) {
-        return this.httpClient.put(BASE_URL + category.id_CATEGORY, category).pipe(
-            catchError(error => this.handleError(error))
+    updateCategory(category: Category): Observable<any> {
+        return this.httpClient.put(BASE_URL + 'admin/categories/' +  category.id_CATEGORY, category).pipe(
+            catchError(error => CategoryService.handleError(error))
         );
     }
-
-    private handleError(error: any) {
-        console.log('ERROR:');
-        console.error(error);
-        return throwError('Server error (' + error.status + '): ' + error.text());
-    }
 }