Modelo responsive

src/components/Feed.js

@@ -0,0 +1,121 @@
+import { log } from "async";
+import {
+  logOut,
+  crearPost,
+  refPost,
+  db,
+  editRef,
+  actualUser,
+} from "../lib/autenticar";
+import { onNavigate } from "../router/index";
+import { onSnapshot, doc, deleteDoc } from "@firebase/firestore";
+
+// CREAR ELEMENTOS DEL MURO
+export const Feed = () => {
+  // console.log("Esto debería funcionar", actualUser())
+  // Elementos header (mostrar logo)
+  const HomeDiv = document.createElement("div");
+  HomeDiv.classList.add("overlay");
+
+  // Crear el contenedor principal
+  const container = document.createElement("div");
+  container.classList.add("container");
+  const header = document.createElement("header");
+  header.id = "encabezadoFeed";
+
+  //Logo Mamá Genial
+  const img = document.createElement('img');
+  img.setAttribute('src', './img/logo.png');
+  img.setAttribute('alt', 'Logo MaMá Genial');
+  img.id = 'logoFeed';
+  header.appendChild(img);
+  HomeDiv.appendChild(header);
+  // Elementos muro (todo para publicar)
+  const main = document.createElement("main");
+  main.id = "muro";
+  const inputFeed = document.createElement("input");
+  inputFeed.id = "inputComentarios";
+  inputFeed.placeholder = "¿Cómo te sientes hoy?";
+  const buttonPublicar = document.createElement("button");
+  buttonPublicar.id = "publicar";
+  buttonPublicar.textContent = "Publicar";
+  buttonPublicar.addEventListener("click", () => {
+    crearPost(inputFeed.value);
+    inputFeed.value = "";
+  });
+  main.append(inputFeed, buttonPublicar);
+
+  // Pintar los comentarios realizados
+  const articlePost = document.createElement("article");
+  articlePost.id = "postRealizado";
+  onSnapshot(refPost(), (querySnapshot) => {
+    articlePost.innerHTML = "";
+    querySnapshot.forEach((post) => {
+      console.log(post.data().email, post.data().comentario, post.data().date);
+      // Elementos para darle diseño a los comentarios realizados
+      const p = document.createElement("p");
+      p.textContent = post.data().comentario;
+      const strong = document.createElement("strong");
+      strong.textContent = post.data().email;
+      const botonesPost = document.createElement("section");
+      botonesPost.id = "btPost";
+      // Elementos para editar y eliminar comentarios
+      const buttonEliminar = document.createElement("button");
+      buttonEliminar.id = "eliminar";
+      buttonEliminar.textContent = "Eliminar";
+      buttonEliminar.addEventListener("click", async () => {
+        await deleteDoc(doc(db, "post", post.id));
+      });
+      const inputEditable = document.createElement("input");
+      inputEditable.id = "editable";
+      inputEditable.value = post.data().comentario;
+
+      // Utilizar el editar para guardar los cambios realizados en el input
+      const buttonGuardar = document.createElement("button");
+      buttonGuardar.id = "guardar";
+      buttonGuardar.textContent = "Guardar";
+      buttonGuardar.addEventListener("click", async () => {
+        console.log(inputFeed.value);
+        await editRef(post.id, { comentario: inputEditable.value });
+        inputEditable.style.display = "none";
+      });
+      const buttonEditar = document.createElement("button");
+      buttonEditar.id = "editar";
+      buttonEditar.textContent = "Editar";
+
+      buttonEditar.addEventListener("click", () => {
+        buttonEditar.style.display = "none";
+        p.style.display = "none";
+        inputEditable.style.display = "block";
+        buttonGuardar.style.display = "block";
+      });
+      const emailUser = actualUser().email;
+      if (emailUser === post.data().email) {
+        buttonEliminar.style.display = "block";
+        buttonEditar.style.display = "block";
+        buttonGuardar.style.display = "none";
+        inputEditable.style.display = "none";
+      } else {
+        buttonEliminar.style.display = "none";
+        buttonEditar.style.display = "none";
+        buttonGuardar.style.display = "none";
+        inputEditable.style.display = "none";
+      }
+      botonesPost.append(buttonEditar, buttonEliminar, buttonGuardar);
+      articlePost.append(strong, p, inputEditable, botonesPost);
+      HomeDiv.appendChild(articlePost);
+    });
+  });
+  const nav = document.createElement("nav");
+  const buttonCerrarSesion = document.createElement("button");
+  buttonCerrarSesion.id = "cerrarSesion";
+  // BOTON CERRAR SESIÓN Y EVENTO (interacción)
+  buttonCerrarSesion.textContent = "Cerrar Sesión";
+  buttonCerrarSesion.addEventListener("click", () => {
+    logOut().then((resp) => onNavigate("/"));
+  });
+  nav.appendChild(buttonCerrarSesion);
+  HomeDiv.append(header, container, nav, main);
+
+  return HomeDiv;
+};

src/components/Home.js

@@ -0,0 +1,103 @@
+import { onNavigate } from '../router/index';
+import { loginUser, loginGoogle } from '../lib/autenticar';
+
+export const Home = () => {
+  const HomeDiv = document.createElement('section');
+  HomeDiv.classList.add('container');
+  const buttonRegister = document.createElement('button');
+  const buttonLogin = document.createElement('button');
+  const buttonLoginGoogle = document.createElement('button');
+
+  buttonRegister.textContent = 'Registrate';
+  buttonRegister.classList.add('custom-button');
+  buttonLogin.textContent = 'Inicia Sesión';
+  buttonLogin.classList.add('custom-button');
+  buttonLogin.setAttribute('id', 'idLogin');
+  buttonLoginGoogle.textContent = 'Continua con Google';
+  buttonLoginGoogle.classList.add('google-button');
+  buttonLoginGoogle.setAttribute('id', 'idGoogle');
+  const header = document.createElement('header');
+  const img = document.createElement('img');
+  img.setAttribute('src', './img/logo.png');
+  img.setAttribute('alt', 'Logo de la marca MaMá Genial');
+  img.id = 'logoEncabezado';
+  header.appendChild(img);
+  HomeDiv.appendChild(header);
+
+  const main = document.createElement('main');
+  const article = document.createElement('article');
+  const h1 = document.createElement('h1');
+  h1.classList.add('page-title');
+  h1.textContent = 'Para Continuar, Inicia Sesión';
+  /* const inputGoogle = document.createElement('input');
+  inputGoogle.placeholder = 'Continua con Google';
+  inputGoogle.setAttribute('type', 'email'); */
+  // buttonLoginGoogle.addEventListener('click', () => onNavigate('/feed'));
+
+  // INTERACCIÓN BOTON GOOGLE
+  buttonLoginGoogle.addEventListener('click', () => {
+    // llamar a la funcion logincongoogle
+    loginGoogle()
+      .then((credential) => {
+        const user = credential.user;
+        // const user = credential.user.uid;
+        console.log(user);
+        if (user !== undefined) {
+          onNavigate('/feed');
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  });
+  const inputEmail = document.createElement('input');
+  inputEmail.placeholder = 'Ingresa tu Correo';
+  inputEmail.setAttribute('type', 'email');
+  inputEmail.classList.add('custom-input');
+  const inputPassword = document.createElement('input');
+  inputPassword.placeholder = 'Ingresa tu Contraseña';
+  inputPassword.setAttribute('type', 'password');
+  inputPassword.classList.add('custom-input');
+  /* img.setAttribute('alt', 'Logo de la marca MaMá Genial');
+  img.id = 'logoEncabezado'; */
+  article.append(h1, inputEmail, inputPassword, buttonLogin, buttonRegister, buttonLoginGoogle);
+  main.appendChild(article);
+  HomeDiv.appendChild(main);
+
+  // DIRECCIONA REGISTER
+  buttonRegister.addEventListener('click', () => onNavigate('/register'));
+
+  // INTERACCION LOGIN (alertas, ver valores en consola )
+  buttonLogin.addEventListener('click', () => {
+    if (inputEmail.value === '' || inputPassword.value === '') {
+      swal({
+        title: '¡Verifica tus datos!',
+        text: 'la contraseña debe ser mayor a 6 digitos',
+        icon: 'info',
+        dangerMode: true,
+      });
+    } else {
+      console.log(inputEmail.value, inputPassword.value);
+      loginUser(inputEmail.value, inputPassword.value)
+        .then((res) => { // then para promesa cumplida
+        // enviarlo al muro
+          console.log(res);
+
+          // REDIRECCIONA EL LOGIN (pone alertas en usuarios no reistrados)
+          onNavigate('/feed');
+        })
+        .catch((error) => { // para promesa fallida
+          console.log(error.message);
+          swal({
+            title: '¡Usuario no registrado!',
+            text: 'Crea una cuenta',
+            icon: 'info',
+            dangerMode: true,
+          });
+          // quisa aqui ponemos el borrar campos
+        });
+    }
+  });
+
+  return HomeDiv;
+};

src/components/Login.js

@@ -0,0 +1,17 @@
+import { onNavigate } from '../router/index';
+
+
+//CREAMOS LOS ELEMENTOS (para el muro)
+export const Login = () => {
+  const HomeDiv = document.createElement("div");
+  HomeDiv.textContent = "Bienvenida al login";
+  const buttonHome = document.createElement("button");
+
+  buttonHome.textContent = "Regresar al Home";
+  buttonHome.addEventListener("click", () => onNavigate("/"));
+
+  HomeDiv.appendChild(buttonHome);
+  // HomeDiv.appendChild(buttonLogin);
+
+  return HomeDiv;
+};

src/components/Register.js

@@ -0,0 +1,56 @@
+import { createUser } from '../lib/autenticar';
+import { onNavigate } from '../router/index';
+
+//CREANDO ELEMENTOS DE REGISTER
+export const Register = () => {
+  const HomeDiv = document.createElement('main');
+  const img = document.createElement('img');
+  img.setAttribute('src', './img/logo.png');
+  img.setAttribute('alt', 'Logo de la marca MaMá Genial');
+  img.id = 'logoEncabezadoRegister';
+  const h2 = document.createElement('h2');
+  h2.textContent = 'Bienvenida al registro';
+  const inputName = document.createElement('input');
+  inputName.placeholder = 'Ingresa tu Nombre';
+  inputName.setAttribute('type', 'text');
+  const inputEmail = document.createElement('input');
+  inputEmail.placeholder = 'Ingresa tu correo';
+  inputEmail.setAttribute('type', 'email');
+  const inputPassword = document.createElement('input');
+  inputPassword.placeholder = 'Ingresa tu contraseña';
+  inputPassword.setAttribute('type', 'password');
+  const buttonHome = document.createElement('button');
+  const buttonRegister = document.createElement('button');
+  buttonRegister.textContent = 'Registrate';
+
+  buttonHome.textContent = 'Regresar al Home';
+
+  //INTERACCION (EVETOS CLICK >> 3 botones de home)
+  buttonHome.addEventListener('click', () => onNavigate('/'));
+  buttonRegister.addEventListener('click', () => {
+    if (inputEmail.value === '' || inputPassword.value === '') {
+      swal({
+        title: '¡Completa todos los campos!',
+        text: 'la contraseña debe ser mayor a 6 digitos',
+        icon: 'info',
+        dangerMode: true,
+      });
+    } else {
+      console.log(inputName.value, inputEmail.value, inputPassword.value); // promesa pendiente
+      createUser(inputName.value, inputEmail.value, inputPassword.value)
+        .then((res) => { // then para promesa cumplida
+        // enviarlo al muro
+        buttonRegister.addEventListener('click', () => onNavigate('/feed'));
+          console.log(res);
+        })
+        .catch((error) => { // para promesa fallida
+          console.log(error);
+        });
+    }
+  });
+
+
+  HomeDiv.append(img, h2, inputName, inputEmail, inputPassword, buttonRegister, buttonHome);
+
+  return HomeDiv;
+};

src/index.html

@@ -1,12 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
-</head>
-<body>
-  <script type="module" src="main.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>MaMáGenial!!!!!!</title>
+  <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+  <section id="root"></section>
+    <script type="module" src="main.js"></script>  
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+</body>
 </html>