coffee

package.json

@@ -41,5 +41,9 @@
     "createdAt": "2023-05-12T17:41:08.657Z",
     "version": "6.2.0",
     "commit": "a5360f78b634be4f14eaea996ee4c7afc85a2f48"
+  },
+  "dependencies": {
+    "@types/jest": "^29.5.2",
+    "firebase": "^9.22.2"
   }
-}
+}

src/components/home.js

@@ -0,0 +1,32 @@
+import { registerWithGoogle } from '../lib';
+
+//  export para tenerlo accesible, se crean los botones de acceso: registro e inicio sesión
+//  onNavigate, se crea por parametro y argumento.
+export const home = (onNavigate) => {
+  const homeDiv = document.createElement('div');
+  const buttonLogin = document.createElement('button');
+  const buttonRegister = document.createElement('button');
+  const buttonGoogle = document.createElement('img');
+  homeDiv.classList = 'div';
+  buttonRegister.textContent = 'Regístrate';
+  buttonRegister.classList = 'buttonsHome';
+  buttonLogin.textContent = 'Inicia Sesión';
+  buttonLogin.classList = 'buttonsHome';
+  buttonGoogle.classList = 'logoG';
+  buttonGoogle.src = '/images/btngo2.png';
+  buttonGoogle.addEventListener('click', () => {
+    registerWithGoogle()
+      .then(() => {
+        onNavigate('/recommendations');
+      })
+      .catch(() => {
+        alert('Error al iniciar sesión, intente de nuevo');
+      });
+  });
+  buttonLogin.addEventListener('click', () => onNavigate('/login'));
+  buttonRegister.addEventListener('click', () => onNavigate('/register'));
+  homeDiv.appendChild(buttonLogin);
+  homeDiv.appendChild(buttonRegister);
+  // homeDiv.appendChild(buttonGoogle);
+  return homeDiv;
+};

src/components/login.js

@@ -0,0 +1,96 @@
+import { logIn, recoverPassword, registerWithGoogle } from '../lib/index';
+
+//  Se crea la ruta
+export const login = (onNavigate) => {
+  //  se crean los elementos de HTML para insertar
+  const homeDiv = document.createElement('div');
+  const buttonHome = document.createElement('button');
+  const inputEmail = document.createElement('input');
+  const inputPassword = document.createElement('input');
+  const buttonLogIn = document.createElement('button');
+  const buttonForgotPassword = document.createElement('button');
+  const buttonLogInGoogle = document.createElement('img');
+  const email = document.createElement('p');
+  const password = document.createElement('p');
+  const inputRevealPasswordText = document.createElement('p');
+  //  se da características de HTML como valor, id,clase, tipo
+  homeDiv.classList = 'div';
+  email.textContent = 'EMAIL';
+  email.classList = 'message';
+  password.textContent = 'CONTRASEÑA';
+  password.classList = 'message';
+  inputEmail.id = 'email';
+  inputEmail.classList = 'form';
+  inputEmail.type = 'email';
+  inputPassword.classList = 'form';
+  inputPassword.type = 'password';
+  inputPassword.id = 'password';
+  buttonLogIn.textContent = 'Iniciar Sesión';
+  buttonLogIn.classList = 'buttons';
+  buttonForgotPassword.textContent = '¿Olvidaste tu contraseña?';
+  buttonForgotPassword.classList = 'buttons';
+  buttonHome.textContent = 'Regresar al inicio';
+  buttonHome.classList = 'buttons';
+  buttonLogInGoogle.classList = 'logoG';
+  buttonLogInGoogle.src = 'images/btngo2.png';
+  inputRevealPasswordText.textContent = 'Mostrar contraseña';
+  inputRevealPasswordText.classList = 'buttons';
+  //  se crea ruta para volver al inicio
+  buttonHome.addEventListener('click', () => onNavigate('/'));
+  const home = document.getElementById('home');
+  home.addEventListener('click', () => onNavigate('/'));
+  inputRevealPasswordText.addEventListener('click', () => {
+    if (inputPassword.type === 'password') {
+      inputPassword.type = 'text';
+      inputRevealPasswordText.textContent = 'Ocultar contraseña';
+    } else {
+      inputPassword.type = 'password';
+      inputRevealPasswordText.textContent = 'Mostrar contraseña';
+    }
+  });
+  buttonLogIn.addEventListener('click', () => {
+    if (inputEmail.value.includes('@') === false) {
+      return alert('Ingrese un correo válido');
+    }
+    if (inputPassword.value.length < 6) {
+      return alert('La contraseña debe tener al menos 6 caracteres');
+    }
+    return logIn(inputEmail.value, inputPassword.value)
+      .then(() => {
+        alert('Bienvenido');
+        onNavigate('/recommendations');
+      })
+      .catch(() => {
+        alert('Error al iniciar sesión, intente de nuevo');
+      });
+  });
+  //  olvido contraseña
+  buttonForgotPassword.addEventListener('click', () => {
+    const emailReset = prompt('Ingrese su correo');
+    recoverPassword(emailReset).then(() => {
+      alert('Se ha enviado una nueva contraseña a su correo');
+    });
+  });
+  //  google
+  buttonLogInGoogle.addEventListener('click', () => {
+    registerWithGoogle()
+      .then(() => {
+        alert('Bienvenido');
+        onNavigate('/recommendations');
+      })
+      .catch(() => {
+        alert('Error al iniciar sesión, intente de nuevo');
+      });
+  });
+  //  se insertan los elementos en el HTML padre(root)
+  homeDiv.appendChild(email);
+  homeDiv.appendChild(inputEmail);
+  homeDiv.appendChild(password);
+  homeDiv.appendChild(inputPassword);
+  homeDiv.appendChild(inputRevealPasswordText);
+  homeDiv.appendChild(buttonLogIn);
+  homeDiv.appendChild(buttonForgotPassword);
+  homeDiv.appendChild(buttonLogInGoogle);
+  homeDiv.appendChild(buttonHome);
+  return homeDiv;
+};

src/components/recommendations.js

@@ -0,0 +1,136 @@
+import { auth } from '../firebase';
+import {
+  createPost,
+  enlistarPost,
+  deletePost,
+  updatePost,
+  removeLike,
+  addLike,
+} from '../lib';
+//  creación de elementos
+export const recommendations = (onNavigate) => {
+  const recommendationsDiv = document.createElement('div');
+  const recommendationsTitle = document.createElement('h1');
+  const postContent = document.createElement('input');
+  const buttonPost = document.createElement('button');
+  const backToTheWall = document.createElement('button');
+  const postsDiv = document.createElement('div');
+  const textPost = document.createElement('p');
+  const initialMessage = document.createElement('p');
+  //  caracterización de elementos
+  postsDiv.classList = 'container';
+  textPost.classList = 'posts';
+  recommendationsDiv.classList = 'div';
+  recommendationsTitle.classList = 'title';
+  recommendationsTitle.textContent = 'Recomendaciones';
+  postContent.classList = 'postContent';
+  postContent.placeholder = 'Escribe tu recomendación acá';
+  buttonPost.classList = 'buttons';
+  buttonPost.textContent = 'Subir una recomendación';
+  backToTheWall.classList = 'buttons';
+  backToTheWall.textContent = 'Cerrar sesión';
+  backToTheWall.id = 'close';
+  //  funcionalidad
+  backToTheWall.addEventListener('click', () => onNavigate('/'));
+  const home = document.getElementById('home');
+  home.addEventListener('click', () => onNavigate('/'));
+  buttonPost.addEventListener('click', () => {
+    if (postContent.value.length < 1) {
+      alert('Por favor ingresa algun texto para poder postear');
+    } else {
+      createPost(postContent.value, auth.currentUser.email)
+        .then(() => {
+          alert('Post creado');
+          postContent.value = '';
+        })
+        .catch(() => {
+          alert('error al subir el post, intente de nuevo');
+        });
+    }
+  });
+  //  inserción de posts
+  enlistarPost((callback) => {
+    console.log(callback);
+    postsDiv.innerHTML = '';
+    callback.forEach((element) => {
+      //  hay que limpiar el post para que no se repita postsDiv.innerHTML = '';
+      const post = document.createElement('div');
+      const deleteButton = document.createElement('button');
+      const updateButton = document.createElement('button');
+      const likeLoge = document.createElement('img');
+      const likeNumber = document.createElement('p');
+      const userName = document.createElement('p');
+      const userMail = document.createElement('div');
+      deleteButton.textContent = 'Borrar Post';
+      deleteButton.classList = 'postButtons';
+      deleteButton.name = 'botonBorrar';
+      updateButton.textContent = 'Editar Post';
+      updateButton.classList = 'postButtons';
+      likeLoge.classList = 'like';
+      likeLoge.src = 'images/like.png';
+      likeNumber.classList = 'likeCount';
+      likeNumber.textContent = '0';
+      likeNumber.classList = 'like';
+      // likeNumber.textContent = '0';
+      post.classList = 'posts';
+      userName.classList = 'userName';
+      userMail.classList = 'datosUser';
+      userName.appendChild(document.createTextNode(element.data().email));
+      console.log(element);
+      likeNumber.appendChild(
+        document.createTextNode(element.data().like.length),
+      );
+      deleteButton.setAttribute('id', element.id);
+      post.appendChild(userMail);
+
+      userMail.appendChild(userName);
+      userMail.appendChild(likeLoge);
+      userMail.appendChild(likeNumber);
+      userMail.appendChild(userName);
+      post.appendChild(document.createTextNode(element.data().content));
+      //  agregar un atributo
+      post.appendChild(updateButton);
+      post.appendChild(deleteButton);
+      postsDiv.appendChild(post);
+      deleteButton.addEventListener('click', () => {
+        if (auth.currentUser.email !== element.data().email) {
+          alert('Sólo puedes eliminar tus propios post');
+          updateButton.disabled = true;
+        } else {
+          deletePost(element.id);
+        }
+      });
+      updateButton.addEventListener('click', () => {
+        if (auth.currentUser.email !== element.data().email) {
+          alert('Sólo puedes editar tus propios post');
+          updateButton.disabled = true;
+        } else {
+          const postReset = prompt('Edita tu recomendación: ');
+          updatePost(element.id, postReset);
+        }
+      });
+      likeLoge.addEventListener('click', () => {
+        likeNumber.innerHTML = '';
+        if (!element.data().like.includes(auth.currentUser.email)) {
+          addLike(element.id, auth.currentUser.email);
+          likeNumber.appendChild(
+            document.createTextNode(element.data().like.length),
+          );
+        } else {
+          removeLike(element.id, auth.currentUser.email);
+          likeNumber.appendChild(
+            document.createTextNode(element.data().like.length),
+          );
+        }
+      });
+    });
+  });
+  //  inserción al HTML
+  recommendationsDiv.appendChild(recommendationsTitle);
+  recommendationsDiv.appendChild(postContent);
+  recommendationsDiv.appendChild(buttonPost);
+  recommendationsDiv.appendChild(initialMessage);
+  recommendationsDiv.appendChild(postsDiv);
+  recommendationsDiv.appendChild(backToTheWall);
+  return recommendationsDiv;
+};

src/components/register.js

@@ -0,0 +1,87 @@
+import { createUser, registerWithGoogle } from '../lib/index';
+
+export const register = (onNavigate) => {
+  const homeDiv = document.createElement('div');
+  homeDiv.classList = 'div';
+  const buttonHome = document.createElement('button');
+  const buttonName = document.createElement('input');
+  const buttonNewEmail = document.createElement('input');
+  const buttonNewPassword = document.createElement('input');
+  const buttonSignIn = document.createElement('button');
+  const buttonGoogle = document.createElement('img');
+  const conditionsPassword = document.createElement('p');
+  const buttonRegisterWithGoogle = document.createElement('button');
+  const name = document.createElement('P');
+  const email = document.createElement('p');
+  const password = document.createElement('p');
+  const inputRevealPasswordText = document.createElement('button');
+  buttonGoogle.classList = 'logoG';
+  buttonGoogle.src = 'images/btngo2.png';
+  buttonName.classList = 'form';
+  buttonNewEmail.classList = 'form';
+  buttonNewPassword.classList = 'form';
+  buttonNewPassword.type = 'password';
+  conditionsPassword.classList = 'text';
+  conditionsPassword.textContent = '(La contraseña debe tener al menos 6 carácteres)';
+  buttonSignIn.textContent = 'Registrarse';
+  buttonSignIn.classList = 'buttons';
+  buttonHome.textContent = 'Regresar al inicio';
+  buttonHome.classList = 'buttons';
+  buttonRegisterWithGoogle.classList = 'buttonGoogle';
+  buttonRegisterWithGoogle.textContent = 'Registrarse con Google';
+  name.textContent = 'INGRESA TU NOMBRE';
+  name.classList = 'message';
+  email.textContent = 'EMAIL';
+  email.classList = 'message';
+  password.textContent = 'CONTRASEÑA';
+  password.classList = 'message';
+  inputRevealPasswordText.textContent = 'Mostrar contraseña';
+  inputRevealPasswordText.classList = 'buttons';
+  //  funcionalidad
+  buttonHome.addEventListener('click', () => onNavigate('/'));
+  const home = document.getElementById('home');
+  home.addEventListener('click', () => onNavigate('/'));
+  inputRevealPasswordText.addEventListener('click', () => {
+    if (buttonNewPassword.type === 'password') {
+      buttonNewPassword.type = 'text';
+      inputRevealPasswordText.textContent = 'Ocultar contraseña';
+    } else {
+      buttonNewPassword.type = 'password';
+      inputRevealPasswordText.textContent = 'Mostrar contraseña';
+    }
+  });
+  buttonSignIn.addEventListener('click', () => {
+    if (buttonName.value.length === 0) return alert('Por favor ingresa tu nombre');
+    if (buttonNewEmail.value.includes('@') === false) return alert('Ingrese un correo válido');
+    if (buttonNewPassword.value.length < 6) return alert('La contraseña debe tener al menos 6 caracteres');
+    return createUser(buttonNewEmail.value, buttonNewPassword.value)
+      .then(() => {
+        alert('Usuario registrado con éxito');
+        onNavigate('/recommendations');
+      })
+      .catch(() => {
+        alert('Error al crear el usuario, intente de nuevo');
+      });
+  });
+  buttonRegisterWithGoogle.addEventListener('click', () => {
+    registerWithGoogle()
+      .then(() => {
+        onNavigate('/recommendations');
+      })
+      .catch(() => {
+        alert('Error al iniciar sesión, intente de nuevo');
+      });
+  });
+  homeDiv.appendChild(name);
+  homeDiv.appendChild(buttonName);
+  homeDiv.append(email);
+  homeDiv.appendChild(buttonNewEmail);
+  homeDiv.appendChild(password);
+  homeDiv.appendChild(buttonNewPassword);
+  homeDiv.appendChild(inputRevealPasswordText);
+  homeDiv.appendChild(conditionsPassword);
+  homeDiv.appendChild(buttonSignIn);
+  homeDiv.appendChild(buttonGoogle);
+  homeDiv.appendChild(buttonHome);
+  return homeDiv;
+};

src/components/wall.js

@@ -0,0 +1,14 @@
+export const wall = (onNavigate) => {
+  const wallDiv = document.createElement('div');
+  const wallTitle = document.createElement('h1');
+  const buttonRecommendations = document.createElement('button');
+  wallDiv.classList = 'wallDiv';
+  wallTitle.textContent = 'Bienvenidos al rincón del café';
+  wallTitle.classList = 'title';
+  buttonRecommendations.classList = 'buttons';
+  buttonRecommendations.textContent = 'Recomendaciones';
+  buttonRecommendations.addEventListener('click', () => onNavigate('/recommendations'));
+  wallDiv.appendChild(wallTitle);
+  wallDiv.appendChild(buttonRecommendations);
+  return wallDiv;
+};