Feature post date

package.json

@@ -41,5 +41,8 @@
     "createdAt": "2023-06-06T21:37:46.504Z",
     "version": "6.3.0",
     "commit": "a942adeb868f1fe54b86e34cc4fc4ddb0601700d"
+  },
+  "dependencies": {
+    "firebase": "^9.23.0"
   }
-}
+}

src/components/feed.js

@@ -0,0 +1,68 @@
+import { Header } from "./header.js";
+import { PublishPost } from "./publishPost.js";
+import { addPost } from "../lib/firebase.js";
+import { queryPosts } from "../lib/firebase.js";
+import { MyPosts } from "./myPosts.js";
+import { MyPostEdit } from "./myPostEdit.js";
+
+export const Feed = (onNavigate) => {
+  // Parent
+  const feedDiv = document.createElement("div");
+
+  // Childs
+  const headerHtml = Header(onNavigate);
+  const publishPostHtml = PublishPost();
+
+  feedDiv.appendChild(headerHtml);
+  feedDiv.appendChild(publishPostHtml);
+
+  const buttonPublish = publishPostHtml.querySelector("#buttonPublish");
+  const inputTextPublish = publishPostHtml.querySelector("#inputTextPublish");
+
+  buttonPublish.addEventListener("click", () => {
+    const getUserRegister = JSON.parse(localStorage.getItem("userRegister"));
+    console.log("sin json.parse", localStorage.getItem("userRegister"));
+    console.log(
+      "con json.parse",
+      JSON.parse(localStorage.getItem("userRegister"))
+    );
+    const userName = getUserRegister.email;
+    const likes = 8;
+    const img = "/dadasda/userPruebita.png";
+    const textPublish = inputTextPublish.value;
+    const userId = JSON.parse(localStorage.getItem("userRegister")).id;
+
+    console.log("hice click", textPublish);
+    addPost(img, likes, userName, textPublish, userId)
+      .then((result) => {
+        console.log("result *****************", result);
+        inputTextPublish.value = "";
+        onNavigate("/feed");
+      })
+      .catch((error) => console.log(error));
+  });
+
+  let posts = [];
+  queryPosts()
+    .then((snapshot) => {
+      snapshot.docs.forEach((doc) => {
+        posts.push({ ...doc.data(), id: doc.id });
+      });
+      const userId = JSON.parse(localStorage.getItem("userRegister")).id;
+      posts.forEach((post) => {
+        // Show all Data in HTML
+        let myPostsHtml;
+        if (post.user_id === userId) {
+          myPostsHtml = MyPostEdit(post.user_name, post.user_post);
+        } else {
+          myPostsHtml = MyPosts(post.user_name, post.user_post);
+        }
+        feedDiv.appendChild(myPostsHtml);
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+
+  return feedDiv;
+};

src/components/header.js

@@ -0,0 +1,123 @@
+import { signOut } from "firebase/auth";
+import { auth } from "../lib/firebase.js";
+
+export function Header(onNavigate) {
+  // Template String
+  const logoHeader = `<img class="logoHeader__img" src="./assets/images/catsSociety--logo.png" alt="" />`;
+  const menuProfile = `<ul class="menuProfile">
+                        <li class="menuItemProfile"><img class="menuProfile__img"src="./assets/icons/userIcon.png" alt="userIcon" /></li>
+                        <li class="menuItemProfile"><a id="userName">Nombre de usuario</a></li>
+                        <li class="menuItemProfile"><a id="userNickName">@username</a></li>
+                        <hr class="menu__line" />
+                        <li class="menuItemProfile">
+                          <a id="myPosts"><img class="menuIconProfile"src="./assets/icons/userIcon.png" alt="userIcon" />Mis publicaciones</a>
+                        </li>
+                        <li class="menuItemProfile">
+                          <a id="feeds"><img class="menuIconProfile"src="./assets/icons/postCat.png" alt="postCat" />Feeds</a>
+                        </li>
+                        <li class="menuItemProfile">
+                          <a id="configuration"> <img class="menuIconProfile"src="./assets/icons/blueGear.png" alt="gearIcon" />Configuración</a>
+                        </li>
+                        <hr class="menu__line" />
+                        <li class="menuItemProfile"><a id="logOut">Cerrar Sesión</a></li>
+                      </ul>
+                      <button class="hamburger">
+                        <img class="profileIcon" src="./assets/icons/account-icon.svg"/>
+                        <img class="closeIcon" src="./assets/icons/close-icon.png"/>
+                      </button>`;
+  const menuTopics = `<ul class="menuTopics">
+                          <li class="menuItemTopics">
+                            <a id="understandCat"><img class="menuIcon" src="./assets/icons/Heart.png" alt="heart-icon" />¿Cómo entender a un gato?</a></li>
+                          <li class="menuItemTopics">
+                            <a id="memes"><img class="menuIcon" src="./assets/icons/Happy.png" alt="happy-icon"/>Memes</a></li>
+                          <li class="menuItemTopics">
+                            <a id="tips"><img class="menuIcon" src="./assets/icons/AskQuestion.png" alt="tip-icon" />Tips</a></li>
+                          <li class="menuItemTopics">
+                            <a id="curiosities"><img class="menuIcon" src="./assets/icons/LightOn.png" alt="curiosities icon" />Curiosidades</a></li>
+                          <hr class="menu__line" />
+                          <li class="menuItemTopics">
+                            <a id="tipDay"><img class="menuIcon" src="./assets/icons/Detective.png" alt="tipDay-icon" />Tip/dato del día</a></li>
+                          <li class="menuItemTopics"><a id="vet">
+                            <img class="menuIcon" src="./assets/icons/DoctorsBag.png" alt="vet-icon" />Veterinarios</a></li>
+                          <li class="menuItemTopics"><a id="help">
+                            <img class="menuIcon" src="./assets/icons/Help.png" alt="help-icon" />Ayuda</a></li>
+                        </ul>
+                        <button class="hamburgerTopic">
+                                <img class="profileIconTopic" src="./assets/icons/hamburger-icon.svg"/>
+                                <img class="closeIconTopic" src="./assets/icons/close-icon.png"/>
+                        </button>`;
+
+  const headerTemplate = `<nav class="header__menuTopics">${menuTopics}</nav>
+                          <div class="header__logoHeader">${logoHeader}</div>
+                          <nav class="header__menuProfile">${menuProfile}</nav>`;
+
+  // DOM
+  const headerHtml = document.createElement("div");
+  headerHtml.classList.add("header");
+  headerHtml.innerHTML = headerTemplate;
+
+  const myPosts = headerHtml.querySelector("#myPosts");
+  const feeds = headerHtml.querySelector("#feeds");
+  const logOut = headerHtml.querySelector("#logOut");
+
+  myPosts.addEventListener("click", () => {
+    onNavigate("/myPosts");
+  });
+
+  feeds.addEventListener("click", () => {
+    onNavigate("/feed");
+  });
+  logOut.addEventListener("click", async () => {
+    await signOut(auth);
+    onNavigate("/ ");
+    console.log(signOut(auth));
+    console.log("user signed out");
+  });
+
+  // Menu CSS - Profile
+
+  const menuItemsProfile = headerHtml.querySelectorAll(".menuItemProfile");
+  const hamburgerButton = headerHtml.querySelector(".hamburger");
+  const menuProfileHtml = headerHtml.querySelector(".menuProfile");
+  const closeIcon = headerHtml.querySelector(".closeIcon");
+
+  hamburgerButton.addEventListener("click", () => {
+    if (menuProfileHtml.classList.contains("showMenu")) {
+      menuProfileHtml.classList.remove("showMenu");
+      closeIcon.style.display = "none";
+    } else {
+      menuProfileHtml.classList.add("showMenu");
+      closeIcon.style.display = "block";
+    }
+  });
+
+  menuItemsProfile.forEach((menuItem) => {
+    menuItem.addEventListener("click", () => {
+      console.log("hiciste click");
+    });
+  });
+
+  // Menu CSS - Topics
+  const menuItemsTopics = headerHtml.querySelectorAll(".menuItemTopics");
+  const hamburgerButtonTopic = headerHtml.querySelector(".hamburgerTopic");
+  const menuTopicsHtml = headerHtml.querySelector(".menuTopics");
+  const closeIconTopic = headerHtml.querySelector(".closeIconTopic");
+
+  hamburgerButtonTopic.addEventListener("click", () => {
+    if (menuTopicsHtml.classList.contains("showMenuTopic")) {
+      menuTopicsHtml.classList.remove("showMenuTopic");
+      closeIconTopic.style.display = "none";
+    } else {
+      menuTopicsHtml.classList.add("showMenuTopic");
+      closeIconTopic.style.display = "block";
+    }
+  });
+
+  menuItemsTopics.forEach((menuItem) => {
+    menuItem.addEventListener("click", () => {
+      console.log("hiciste click");
+    });
+  });
+
+  return headerHtml;
+}

src/components/login.js

@@ -0,0 +1,112 @@
+// Funciones para la interacción con el DOM del login y la vista(create element o template string)
+
+import {
+  GoogleAuthProvider,
+  signInWithEmailAndPassword,
+  signInWithPopup,
+} from "firebase/auth";
+import { auth } from "../lib/firebase";
+import { async } from "regenerator-runtime";
+
+export const Login = (onNavigate) => {
+  //Template Strings
+  const loginLogo = `<div class="loginLogo">
+                        <img class="loginLogo__img" src="./assets/images/catsSociety--logo.png" alt="logo CatsSociety" />
+                        <h2 class="loginLogo__title">CatsSociety</h2>
+                      </div>`;
+
+  const loginForm = `<form class="loginForm" id="loginForm">
+                        <label class="loginForm__label marginBottom_4" for="userEmail">Email:</label>
+                        <input class="loginForm__input marginBottom_4" type="email" id="userEmail" name="userEmail" placeholder="John@email.com">
+                        <label class="loginForm__label marginBottom_4" for="userPassword">Contraseña:</label>
+                        <input class="loginForm__input marginBottom_4" type="password" id="userPassword" name="userPassword" placeholder="Contraseña">
+                        <a class="loginForm__link loginForm__link--black marginBottom_16">¿Olvidaste la contraseña?</a>  
+                        <input id="btnLogin" class="btn btn--primary marginBottom_8" type="submit" value="Iniciar Sesión">
+                      </form>`;
+
+  const loginButtons = `<div class="loginButtons">
+                          <h4 class="loginButtons__o marginBottom_8">o</h4>
+                          <button id="loginGoogle" class="btn btn--google marginBottom_16">Continua con Google</button>
+                          <p>¿No tienes una cuenta? <a class="loginForm__link loginForm__link--blue" id="linkRegister">Regístrate</a></p>
+                        </div>`;
+
+  const login = `<section class="sectionLeft">
+                  </section>
+                  <section class="sectionRight">
+                    <div class="login">
+                      ${loginLogo}
+                      ${loginForm}
+                      ${loginButtons}
+                    </div>
+                  </section>`;
+
+  const loginDiv = document.createElement("div");
+  loginDiv.classList.add("container");
+  loginDiv.innerHTML = login;
+
+  const linkRegister = loginDiv.querySelector("#linkRegister");
+  linkRegister.addEventListener("click", () => onNavigate("/register"));
+
+  const loginFormId = loginDiv.querySelector("#loginForm");
+  console.log(loginFormId);
+  loginFormId.addEventListener("submit", async (e) => {
+    console.log("miau");
+    e.preventDefault();
+    const userEmail = loginFormId["userEmail"].value;
+    const password = loginFormId["userPassword"].value;
+    console.log(userEmail, password);
+    let userRegister = {};
+    localStorage.removeItem("userRegister");
+    try {
+      const userCredentials = await signInWithEmailAndPassword(
+        auth,
+        userEmail,
+        password
+      );
+      if (userCredentials.operationType === "signIn") {
+        console.log("user-data", userCredentials);
+        userRegister["email"] = userCredentials.user.email;
+        userRegister["id"] = userCredentials.user.uid;
+        userRegister["photoUrl"] = "./assets/icons/Account circle.svg";
+        localStorage.setItem("userRegister", JSON.stringify(userRegister));
+        console.log(userRegister);
+        onNavigate("/feed");
+      }
+      console.log(userCredentials);
+    } catch (error) {
+      if (error.code === "auth/wrong-password") {
+        alert("Contreseña incorrecta");
+      } else if (error.code === "auth/user-not-found") {
+        alert("Usuario no encontrado");
+      } else {
+        alert(error.message, "error");
+      }
+    }
+  });
+  // -------Login Google-------
+  const googleButton = loginDiv.querySelector("#loginGoogle");
+  googleButton.addEventListener("click", async () => {
+    const provider = new GoogleAuthProvider();
+    let userRegister = {};
+    localStorage.removeItem("userRegister");
+    try {
+      const googleCredentials = await signInWithPopup(auth, provider);
+      console.log(googleCredentials);
+
+      if (googleCredentials.operationType === "signIn") {
+        console.log("user-data", googleCredentials);
+        userRegister["email"] = googleCredentials.user.email;
+        userRegister["id"] = googleCredentials.user.uid;
+        userRegister["photoUrl"] = googleCredentials.user.photoURL;
+        userRegister["name"] = googleCredentials.user.displayName;
+        localStorage.setItem("userRegister", JSON.stringify(userRegister));
+        console.log(userRegister);
+        onNavigate("/feed");
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  });
+
+  return loginDiv;
+};

src/components/myPostEdit.js

@@ -0,0 +1,29 @@
+export const MyPostEdit = (name, textPost, photoUrl) => {
+  const myPostsDiv = document.createElement("div");
+
+  const post = `<div class="containerPost">
+      <div class="containerUser">
+        <img class="userBlack"src="${photoUrl}" alt="user Black"/>
+        <a class="names" >${name}</a>
+        <p>Esta es mi publicación</p>
+    </div>
+
+      <p class="feedPost" >${textPost}</p>
+
+      <div class="horizontal-line"></div>
+
+      <div class="containerIcons">
+        <div class="containerLike">
+          <img class="likeCat" src="./assets/icons/CatHead.png"/>
+          <p class="like">Me gusta</p>
+        </div>
+
+        <div class="sharePost">
+          <img class="share" src="./assets/icons/shares.png"/>
+          <p class="shareText">Compartir</p>
+        </div>
+      </div>
+ </div>`;
+  myPostsDiv.innerHTML = post;
+  return myPostsDiv;
+};