Modificada la base de datos a Firestora Database. Completado el proceso de dar...

Modificada la base de datos a Firestora Database. Completado el proceso de dar de alta un nuevo usuario y mostrar sus datos en su perfil.

src/app/mi-cuenta/completar-registro/completar-registro.component.ts

@@ -46,10 +46,8 @@ export class CompletarRegistroComponent implements OnInit {
       .createUserWithEmail(this.user.email, form.value.password1)
       .subscribe(
         (res) => {
-          this.user.uid = res.user.uid;
-          this.databaseService.createNewUser(this.user);
+          this.databaseService.createNewUserInDatabase(this.user);
           this.authService.changeLogState();
-          console.log(this.databaseService.getUserFromDatabase(this.user.uid));
           this.router.navigate(['../perfil'], { relativeTo: this.route });
         },
         (error) => {

src/app/mi-cuenta/inicio-sesion-registro/inicio-sesion-registro.component.ts

@@ -6,6 +6,7 @@ import { NgForm } from '@angular/forms';
 import { UserCredential } from 'firebase/auth';
 import { waitForAsync } from '@angular/core/testing';
 import { Usuario } from 'src/app/services-interfaces/interfaces/usuario';
+import { DatabaseService } from 'src/app/services-interfaces/services/database.service';
 
 @Component({
   selector: 'app-inicio-sesion-registro',
@@ -21,7 +22,8 @@ export class InicioSesionRegistroComponent implements OnInit {
   constructor(
     private router: Router,
     private authService: AuthService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private databaseService: DatabaseService
   ) {}
 
   ngOnInit(): void {
@@ -36,7 +38,16 @@ export class InicioSesionRegistroComponent implements OnInit {
         next: (user: UserCredential) => {
           this.loading = false;
           this.authService.changeLogState();
+          this.databaseService.getUserFromDatabase(user.user.uid).subscribe(
+            (userRes: any) => {
+              console.log(userRes);
               this.router.navigate(['../perfil'], { relativeTo: this.route });
+            },
+            (error) => {
+              console.log(error);
+            }
+          );
+
           /* to-do guardar user en el local storage */
         },
         error: (e) => {

src/app/mi-cuenta/perfil-cuenta/datos-personales/datos-personales.component.html

 <div class="container d-flex flex-column">
   <div class="row mt-5">
-    <h4 class="verde-tienda pw-bold">Nombre apellido1 apellido 2</h4>
+    <h4 class="verde-tienda pw-bold">{{ user.nombre }} {{ user.apellidos }}</h4>
   </div>
   <div class="row border rounded-3">
     <h4 class="mt-2">Correo electrónico</h4>
@@ -8,7 +8,7 @@
       <div
         class="col-12 d-flex justify-content-between align-items-center pb-2"
       >
-        <h6 class="">hola@hola.es</h6>
+        <h6 class="">{{ user.email }}</h6>
         <button class="btn btn-primary bg-fucsia border-white">
           Cambiar correo
         </button>
@@ -35,7 +35,7 @@
       <div
         class="col-12 d-flex justify-content-between align-items-center pb-2"
       >
-        <h6 class="">+34 666 666 666</h6>
+        <h6 class="">+34 {{ user.telefono }}</h6>
         <button class="btn btn-primary bg-fucsia border-white">
           Modificar teléfono
         </button>

src/app/mi-cuenta/perfil-cuenta/datos-personales/datos-personales.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Usuario } from 'src/app/services-interfaces/interfaces/usuario';
+import { AuthService } from 'src/app/services-interfaces/services/auth.service';
+import { DatabaseService } from 'src/app/services-interfaces/services/database.service';
 
 @Component({
   selector: 'app-datos-personales',
   templateUrl: './datos-personales.component.html',
-  styleUrls: ['./datos-personales.component.css']
+  styleUrls: ['./datos-personales.component.css'],
 })
 export class DatosPersonalesComponent implements OnInit {
-
-  constructor() { }
+  user: Usuario;
+  constructor(
+    private authService: AuthService,
+    private databaseService: DatabaseService
+  ) {}
 
   ngOnInit(): void {
+    this.databaseService
+      .getUserFromDatabase(this.authService.getAuthUser().uid)
+      .subscribe(
+        (userRes: any) => {
+          this.user = userRes;
+        },
+        (error) => {}
+      );
   }
-
 }

src/app/mi-cuenta/perfil-cuenta/direcciones/direcciones.component.html

@@ -9,36 +9,38 @@
         <div class="row">
           <div class="col-sm-12 col-md-6">
             <h4>Nombre</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">{{ user.direccionEnvio.nombre }}</h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>Apellidos</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">{{ user.direccionEnvio.apellidos }}</h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>Calle, Número, Piso</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">{{ user.direccionEnvio.direccion }}</h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>Población</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">{{ user.direccionEnvio.poblacion }}</h5>
           </div>
           <div class="col-sm-12 col-md-6">
             <h4>Codigo postal</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">
+              {{ user.direccionEnvio.codigoPostal }}
+            </h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>Provincia</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">{{ user.direccionEnvio.provincia }}</h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>País</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">{{ user.direccionEnvio.pais }}</h5>
           </div>
         </div>
       </div>
@@ -54,37 +56,48 @@
         <div class="row">
           <div class="col-sm-12 col-md-6">
             <h4>Nombre</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">
+              {{ user.direccionFacturacion.nombre }}
+            </h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>Apellidos</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">
+              {{ user.direccionFacturacion.apellidos }}
+            </h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>Calle, Número, Piso</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">
+              {{ user.direccionFacturacion.direccion }}
+            </h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>Población</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">
+              {{ user.direccionFacturacion.poblacion }}
+            </h5>
           </div>
-
           <div class="col-sm-12 col-md-6">
             <h4>Codigo postal</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">
+              {{ user.direccionFacturacion.codigoPostal }}
+            </h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>Provincia</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">
+              {{ user.direccionFacturacion.provincia }}
+            </h5>
           </div>
 
           <div class="col-sm-12 col-md-6">
             <h4>País</h4>
-            <h5>-----</h5>
+            <h5 class="text-secondary">{{ user.direccionFacturacion.pais }}</h5>
           </div>
         </div>
       </div>

src/app/mi-cuenta/perfil-cuenta/direcciones/direcciones.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Usuario } from 'src/app/services-interfaces/interfaces/usuario';
+import { AuthService } from 'src/app/services-interfaces/services/auth.service';
+import { DatabaseService } from 'src/app/services-interfaces/services/database.service';
 
 @Component({
   selector: 'app-direcciones',
   templateUrl: './direcciones.component.html',
-  styleUrls: ['./direcciones.component.css']
+  styleUrls: ['./direcciones.component.css'],
 })
 export class DireccionesComponent implements OnInit {
-
-  constructor() { }
-
+  user: Usuario;
+  constructor(
+    private authService: AuthService,
+    private databaseService: DatabaseService
+  ) {}
   ngOnInit(): void {
+    this.databaseService
+      .getUserFromDatabase(this.authService.getAuthUser().uid)
+      .subscribe(
+        (userRes: any) => {
+          this.user = userRes;
+        },
+        (error) => {}
+      );
   }
-
 }

src/app/services-interfaces/interfaces/pedido.model.ts

 export interface Pedido {
-  numeroPedido: string /* numero identificativo del pedido */;
   uid: string /* numero identificador del usuario del pedido */;
   fechaPedido: string /* Fecha en la que se realizó el pedido */;
   estadoPedido: string /* Estado actual del pedido */;

src/app/services-interfaces/interfaces/producto.model.ts

 export interface Producto {
-  categoria: string;
   nombre: string;
+  categoria: string;
   descripcion: string;
   precio: number;
   stockEnAlmacen: number;
@@ -14,4 +14,6 @@ export interface Producto {
     proteinas: number;
   };
   ingredientes: string;
+  imagenIconoPath: string;
+  imagenesPaths: string[];
 }

src/app/services-interfaces/interfaces/usuario.ts

@@ -2,7 +2,6 @@ import { Cesta } from './cesta.model';
 import { MetodoPago } from './metodoPago.model';
 
 export class Usuario {
-  uid!: string;
   nombre!: string;
   apellidos!: string;
   email!: string;

src/app/services-interfaces/services/auth.service.ts

@@ -13,7 +13,6 @@ import { from, Observable } from 'rxjs';
 export class AuthService {
   isUserLogged = false;
   public user: Usuario = {
-    uid: '',
     nombre: '',
     apellidos: '',
     email: '',
@@ -81,4 +80,7 @@ export class AuthService {
   public changeLogState() {
     this.isUserLogged = !this.isUserLogged;
   }
+  public getAuthUser() {
+    return this.auth.currentUser;
+  }
 }

src/app/services-interfaces/services/database.service.ts

@@ -4,10 +4,11 @@ import {
   AngularFireList,
   AngularFireObject,
 } from '@angular/fire/compat/database';
-import { Query } from '@angular/fire/compat/firestore';
+import { AngularFirestore, Query } from '@angular/fire/compat/firestore';
 import { Pedido } from '../interfaces/pedido.model';
 import { Producto } from '../interfaces/producto.model';
 import { Usuario } from '../interfaces/usuario';
+import { AuthService } from './auth.service';
 
 @Injectable({
   providedIn: 'root',
@@ -20,13 +21,44 @@ export class DatabaseService {
   private userRef!: AngularFireObject<any>;
   private pedidosRef!: AngularFireList<Pedido>;
   private productosRef!: AngularFireList<Producto>;
-  constructor(private db: AngularFireDatabase) {}
+  constructor(
+    private db: AngularFireDatabase,
+    private angularFirestore: AngularFirestore,
+    private authService: AuthService
+  ) {}
 
-  createNewUser(user: Usuario): void {
-    this.usersRef = this.db.list(this.usersPath);
-    this.usersRef.push(user);
+  createNewUserInDatabase(user: Usuario): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      this.angularFirestore
+        .collection('users')
+        .doc(this.authService.getAuthUser().uid)
+        .set({
+          nombre: user.nombre,
+          apellidos: user.apellidos,
+          email: user.email,
+          telefono: '',
+          direccionEnvio: user.direccionEnvio,
+          direccionFacturacion: user.direccionFacturacion,
+          metodosPago: [],
+          cesta: {
+            productos: [],
+          },
+        })
+        .then(
+          (response) => {
+            console.log(response);
+          },
+          (error) => {
+            reject(error);
+          }
+        );
+    });
+  }
+
+  getUserFromDatabase(uid: string) {
+    return this.angularFirestore.collection('users').doc(uid).valueChanges();
   }
-  getUserFromDatabase(uid: string): AngularFireObject<Usuario> {
-    return (this.userRef = this.db.object(this.usersPath + '/' + uid));
+  getAllUsersFromDatabase() {
+    return this.angularFirestore.collection('users').snapshotChanges();
   }
 }

tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
@@ -18,10 +18,7 @@
     "importHelpers": true,
     "target": "es2017",
     "module": "es2020",
-    "lib": [
-      "es2020",
-      "dom"
-    ]
+    "lib": ["es2020", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,