19 10 2021

.gitignore

@@ -1,2 +1,3 @@
-/js/
-/node_modules/
+node_modules/
+build/**/*
+public/js/app.min.js

app/client/class/API.ts

@@ -9,25 +9,51 @@ import apiErrorHandler from "../errors/apiErrorHandler";
 export default abstract class API {
   public static async fetchAPI(
     url: string,
-    data?: object
-  ): Promise<Product[] | apiError | Product> {
-    return await fetch(url, {
-      method: "POST",
+    data?: object,
+    method: string = "POST"
+  ): Promise<any | apiError> {
+    const response = await fetch(url, {
+      method,
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
-    })
-      .then((e) => e.json())
-      .then((res) => (Object.keys(res).length === 0 ? API_ERROR : res));
+      body: JSON.stringify(data),
+    });
+    const responseJson = await response.json();
+
+    if (response.ok) {
+      return Object.keys(responseJson).length === 0 ? API_ERROR : responseJson;
+    }
+    return (responseJson as any).message;
+  }
+
+  public static async fetchRedirectAPI(
+    url: string,
+    data?: object,
+    method: string = "POST"
+  ): Promise<any | apiError> {
+    const response = await fetch(url, {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      redirect: "follow",
+      body: JSON.stringify(data),
+    });
+    const responseJson = await response.json();
+
+    if (response.ok) {
+      return Object.keys(responseJson).length === 0 ? API_ERROR : responseJson;
+    }
+    return (responseJson as any).message;
   }
 
   /**
    *
    * @param apiResponse An API method return
    * @returns if the api is or not an Error
    */
-  public static isApiError(apiResponse: Product[] | apiError | Product): boolean {
+  public static isApiError(apiResponse: any | apiError): boolean {
     if (typeof apiResponse === "string") {
       apiErrorHandler("Ha ocurrido un error.");
       return true;

app/client/class/App.ts

@@ -1,4 +1,5 @@
 //  LISTENERES
+import loginRegisterListener from "../listeners/loginRegisterListener";
 import menuHandlerListener from "../listeners/menuHandlerListener";
 import closeCartListener from "../listeners/closeCartListener";
 import paginatorListener from "../listeners/paginatorListener";
@@ -7,29 +8,36 @@ import shopListener from "../listeners/shopListener";
 
 //  CLASSES
 import Favorites from "./Favorites";
+import Router from "./Router";
+import Users from "./Users";
 import Cart from "./Cart";
 import UI from "./UI";
 
 //  SCRIPTS
 import updateQuantityProducts from "../scripts/updateQuantityProducts";
+import loadUsers from "../scripts/loadUsers";
 import loadTable from "../scripts/loadTable";
 import { CURRENT_PAGE } from "../config";
+import favoritesListener from "../listeners/favoritesListener";
 
 export default class App {
   public ui: UI;
   public cart: Cart;
+  public users: Users;
   public favorites: Favorites;
   private PREPARE: {
     [index: string]: string;
   } = {
     products: "productsPrepare",
     product: "productPrepare",
     cart: "cartPrepare",
+    users: "usersPrepare"
   };
 
   constructor(HTML_APP: HTMLElement) {
     this.ui = new UI(HTML_APP);
     this.cart = new Cart();
+    this.users = new Users();
     this.favorites = new Favorites();
   }
 
@@ -52,14 +60,15 @@ export default class App {
    * Loads all listeners for Products.
    */
   private productsPrepare(): void {
+    this.productPrepare();
     paginatorListener();
-    shopListener(this.cart);
   }
 
   /**
    * Loads all listeners for Product.
    */
   private productPrepare(): void {
+    favoritesListener(this.users, this.favorites);
     shopListener(this.cart);
   }
 
@@ -70,4 +79,18 @@ export default class App {
     closeCartListener(this.cart);
     loadTable(this.cart);
   }
+
+  /**
+   * Loads all listeners for Users.
+   */
+  private async usersPrepare(): Promise<void> {
+    if (this.users.isLogued()) {
+      if (!Router.getParam(1)) {
+        return Router.follow(`/users/${this.users.getUser()}`);
+      }
+      return await loadUsers(this.users, this.favorites);
+    }
+
+    loginRegisterListener();
+  }
 }

app/client/class/Cart.ts

@@ -1,12 +1,12 @@
 import CartStructure from "../interfaces/CartStructure";
+import CartProduct from "../interfaces/CartProduct";
 
 import { cartProductsList } from "../types/cart";
 
 import Storage from "./Storage";
 
 import { SS_CART } from "../config";
 import cartErrorHandler from "../errors/cartErrorHandler";
-import CartProduct from "../interfaces/CartProduct";
 
 export default class Cart extends Storage<CartStructure> {
   private products: any = [];

app/client/class/Favorites.ts

@@ -1,61 +1,28 @@
 import { favoritesArray } from "../types/favorites";
 import { productID } from "../types/products";
 
-import Storage from "./Storage";
+import Router from "./Router";
+import API from "./API";
 
-import { SS_FAVORITES } from "../config";
+import UsersStorage from "./UsersStorage";
 
-export default class Favorites extends Storage<favoritesArray> {
+export default class Favorites extends UsersStorage {
   constructor() {
-    super(SS_FAVORITES, []);
+    super();
   }
 
-  public addToFavorites(productID: productID): void {
-    const favoritesSet: Set<number> = new Set(this.getStorage()).add(productID);
-    this.updateFavorites(favoritesSet);
-  }
-
-  public removeFromFavorite(productID: number): void {
-    const favoritesSet: Set<number> = new Set(this.getStorage())
-    favoritesSet.delete(productID);
-    this.updateFavorites(favoritesSet);
-  }
-
-  public handleFavorite(productID: number): void {
-    const favoritesSet: Set<number> = new Set(this.getStorage());
-    if (favoritesSet.has(productID)) {
-      favoritesSet.delete(productID);
-      return
-    }
-    favoritesSet.add(productID);
-  }
-
-  /**
-   * @return if the Cart is empty or not.
-   */
-  public isEmpty(): boolean {
-    return this.getStorage().length === 0;
+  public async toggleFavorites(productID: productID): Promise<boolean> {
+    return await API.fetchAPI(this.getFavoritesAPI(`${productID}`), {}, "PUT");
   }
 
   /**
    * @return favorites products.
    */
-  public getFavorites(): favoritesArray {
-    return this.getStorage();
+  public async getFavorites(): Promise<favoritesArray> {
+    return (await API.fetchAPI(this.getFavoritesAPI())).favorites;
   }
 
-  /**
-   * @return favorites products.
-   */
-  public isFavorite(id: number): boolean {
-    return this.getStorage().includes(id);;
-  }
-
-  /**
-   * Update the Favorites Products Storage.
-   */
-  private updateFavorites(favoritesSet: Set<number>): void {
-    const favoritesArray: favoritesArray = [...favoritesSet];
-    this.updateStorage(favoritesArray);
+  private getFavoritesAPI(productID: string = ""): string {
+    return Router.createURL(`/favorites/${this.getUser()}/${productID}`);
   }
 }

app/client/class/Router.ts

@@ -1,35 +1,42 @@
+import { htmlFileName } from "../types/search";
+
 export default class Router {
-  public static followWithParams(
-    path: string,
-    params: any
-  ): void {
-    window.location.replace(
-      window.location.origin + path + Router.stringfyParams(params)
-    );
+  public static follow(path: string): void {
+    window.location.replace(window.location.origin + path);
   }
 
-  public static followWithCurrentParams(
-    path: string
-  ): void {
+  public static followWithQuery(path: string, query: any): void {
     window.location.replace(
-      window.location.origin + path + Router.getParams()
+      window.location.origin + path + Router.stringfyQuery(query)
     );
   }
 
-  public static getParams(): string {
+  public static followWithCurrentQuery(path: string): void {
+    window.location.replace(window.location.origin + path + Router.getQuery());
+  }
+
+  public static getQuery(): string {
     return window.location.search;
   }
 
   public static createURL(path: string): string {
     return window.location.origin + path;
   }
 
-  private static stringfyParams(params: any): string {
+  public static getPage(): htmlFileName {
+    return window.location.pathname.split("/")[1] as htmlFileName;
+  }
+
+  public static getParam(nParam: number): string {
+    return window.location.pathname.split("/")[nParam + 1];
+  }
+
+  private static stringfyQuery(query: any): string {
     return (
       "?" +
-      Object.keys(params)
-        .map((key) => `${key}=params[key]`)
+      Object.keys(query)
+        .map((key) => `${key}=${query[key]}`)
         .join("&")
     );
   }
-}
+}

app/client/class/UI.ts

@@ -31,10 +31,8 @@ export default class UI {
     maxPage: number
   ): void {
     const innerHTML: string = products
-      .map((product: Product): string =>
-        ProductsCardComponent(product, favorites.isFavorite(product.id))
-      )
+      .map((product: Product): string => ProductsCardComponent(product))
       .join("");
-    PaginatorComponenet(page || 1, maxPage)
+    PaginatorComponenet(page || 1, maxPage);
   }
 }

app/client/class/Users.ts

@@ -0,0 +1,45 @@
+import API from "./API";
+import Router from "./Router";
+import UsersStorage from "./UsersStorage";
+
+export default class Users extends UsersStorage {
+  constructor() {
+    super();
+  }
+
+  public async loginUser(email: string, password: string): Promise<void | string> {
+    const response = await API.fetchAPI(Router.createURL("/users"), { email, password });
+    if (API.isApiError(response)) {
+      return response.message
+    }
+    this.updateStorage({
+      id: response.id,
+      email,
+      password
+    })
+  }
+
+  public async registerUser(email: string, password: string): Promise<void | string> {
+    const response = await API.fetchAPI(Router.createURL("/users"), { email, password }, "PUT");
+    if (API.isApiError(response)) {
+      return response.message
+    }
+    this.updateStorage({
+      id: response.id,
+      email,
+      password
+    })
+  }
+
+  public getEmail() {
+    return super.getEmail();
+  }
+
+  public getUser() {
+    return super.getUser();
+  }
+
+  public isLogued() {
+    return super.isLogued();
+  }
+}

app/client/class/UsersStorage.ts

@@ -0,0 +1,25 @@
+import User from "../interfaces/User";
+
+import Storage from "./Storage";
+
+export default class UsersStorage extends Storage<User> {
+  constructor() {
+    super("user", {
+      id: null,
+      email: "",
+      password: "",
+    });
+  }
+
+  protected getUser(): number {
+    return +this.getStorage().id;
+  }
+
+  protected getEmail(): string {
+    return this.getStorage().email;
+  }
+
+  protected isLogued(): boolean {
+    return !!this.getStorage().id;
+  }
+}

app/client/config.ts

@@ -1,13 +1,15 @@
 import { apiError, apiURL } from "./types/api";
 import { htmlFileName } from "./types/search";
 
+import Router from "./class/Router";
+
 //  HTML
 const SEARCH_INPUT_S: HTMLElement = document.getElementById("search-input-s");
 const SEARCH_INPUT: HTMLElement = document.getElementById("search-input");
 const QUANTITY_PRODUCTS_INDICATOR: HTMLElement = document.getElementById("quantityProducts")
 
 //  GENERAL
-const CURRENT_PAGE: htmlFileName = window.location.pathname.split("/")[1] as htmlFileName;
+const CURRENT_PAGE: htmlFileName = Router.getPage();
 const PAGES: htmlFileName[] = ["index", "cart", "products", "product", "error"];
 const DEFAULT_HTML_FILE: htmlFileName = "index";
 const SEARCH_PAIR_INPUTS: {