Rama sol

package.json

@@ -15,7 +15,7 @@
     "eslint": "eslint --ext .js src/ test/",
     "stylelint": "stylelint --aei src/**/*.css",
     "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
-    "test": "jest --coverage",
+    "test": "jest  --coverage --env=jsdom",
     "dev": "vite dev src",
     "start": "npm run dev",
     "build": "vite build",

src/components/feed.js

@@ -0,0 +1,166 @@
+/* eslint-disable consistent-return */
+/* eslint-disable no-alert */
+import {
+  post, auth, logOut, addPost, deleteDocData, updatePost, like, disLike,
+} from '../lib/firebase';
+
+export const feed = (onNavigate) => {
+  const root = document.getElementById('root');
+  const feedDiv = document.createElement('div');
+  feedDiv.classList.add('feed-container');
+  feedDiv.innerHTML += `
+    <header id='head-feed'>
+      <img src="./img/logo.png" id="logo">
+      <img src="./img/salir.png" id="salir">
+    </header>
+    <section class='timeline'>
+      <section class='create-post-container'>
+        <section class='create-post'>
+          <h2>Tú</h2>
+          <textarea id='status-description' placeholder=' ¿Que hizo tu animal de compañía hoy?' maxlength='300'></textarea>
+        </section>
+      </section>
+    </section>
+    <div class='post-button-container'>
+      <button class='post'>Publicar</button>
+    </div>
+    <section id='posts-container'>
+    </section>
+    `;
+  root.appendChild(feedDiv);
+
+  /* Botón para salir */
+  const logOutButton = document.getElementById('salir');
+  logOutButton.addEventListener('click', () => {
+    logOut(auth).then(() => {
+      onNavigate('/');
+      /* console.log('the user is signed out'); */
+    });
+  });
+
+  /* Crear post */
+  const postButton = feedDiv.querySelector('.post');
+
+  postButton.addEventListener('click', async () => {
+    const statusDescription = feedDiv.querySelector('#status-description');
+    const postText = statusDescription.value;
+    const validatePost = document.getElementById('status-description').value;
+    if (validatePost === '') {
+      alert('Ingrese post');
+      return false;
+    }
+    await post(postText);
+    statusDescription.value = '';
+  });
+
+  /* Mostrar post en timeline */
+  const postsContainer = document.getElementById('posts-container');
+
+  addPost((posts) => {
+    postsContainer.innerHTML = '';
+    posts.forEach((feedPosts) => {
+      const postElement = document.createElement('section');
+      postElement.classList.add('eachPost');
+      postsContainer.appendChild(postElement);
+
+      const userNameElement = document.createElement('p');
+      userNameElement.classList.add('p1');
+      userNameElement.textContent = feedPosts.userName;
+      postElement.appendChild(userNameElement);
+
+      const textElement = document.createElement('p');
+      textElement.classList.add('p3');
+      textElement.textContent = feedPosts.text;
+      postElement.appendChild(textElement);
+
+      /* Like y DisLike */
+      const likeButton = document.createElement('img');
+      likeButton.classList.add('like');
+      const disLikeButton = document.createElement('img');
+      disLikeButton.classList.add('disLike');
+      // disLikeButton.style.display = 'none';
+      if (feedPosts.likes.includes(auth.currentUser.uid)) {
+        postElement.appendChild(likeButton);
+      } else {
+        postElement.appendChild(disLikeButton);
+      }
+      likeButton.addEventListener('click', async () => {
+        if (likeButton.classList.toggle('disLike')) {
+          disLike(feedPosts.id, auth.currentUser.uid);
+        }
+      });
+      disLikeButton.addEventListener('click', async () => {
+        if (disLikeButton.classList.toggle('like')) {
+          like(feedPosts.id, auth.currentUser.uid);
+        }
+      });
+
+      /* Contador de like y dislike */
+      const counterLike = document.createElement('p');
+      counterLike.classList.add('p2');
+      counterLike.textContent = feedPosts.likes.length;
+      postElement.appendChild(counterLike);
+
+      /* verificar si es nuestro usuario ingresado es igual al del post */
+      if (feedPosts.userId === auth.currentUser.uid) {
+        /* Borrar Post */
+        const deleteButton = document.createElement('img');
+        deleteButton.classList.add('delete-btn');
+        deleteButton.textContent = 'Eliminar';
+        deleteButton.value = feedPosts.id;
+        deleteButton.addEventListener('click', () => {
+          const shouldDelete = window.confirm('¿Estás seguro de que deseas eliminar este post?');
+          if (shouldDelete) {
+            deleteDocData(feedPosts.id);
+          }
+        });
+        postElement.appendChild(deleteButton);
+
+        /* Editar post */
+        const updateButton = document.createElement('img');
+        updateButton.classList.add('update-btn');
+        updateButton.value = feedPosts.id;
+        postElement.appendChild(updateButton);
+
+        const editSection = document.createElement('section');
+        editSection.classList.add('edit-section');
+        editSection.style.display = 'none';
+        postElement.appendChild(editSection);
+
+        const updateInput = document.createElement('input');
+        updateInput.classList.add('update-input');
+        updateInput.id = feedPosts.id;
+        updateInput.textContent = feedPosts.text;
+        editSection.appendChild(updateInput);
+
+        const saveButton = document.createElement('button');
+        saveButton.classList.add('save-btn');
+        saveButton.textContent = 'Guardar';
+        editSection.appendChild(saveButton);
+
+        const cancelButton = document.createElement('button');
+        cancelButton.classList.add('cancel-btn');
+        cancelButton.textContent = 'Cancelar';
+        editSection.appendChild(cancelButton);
+
+        updateButton.addEventListener('click', () => {
+          editSection.style.display = 'block';
+        });
+        saveButton.addEventListener('click', () => {
+          const newPostText = document.getElementById(feedPosts.id);
+          const refPostId = feedPosts.id;
+          /* console.log(refPostId); */
+          updatePost(refPostId, { text: newPostText.value })
+            .then(() => {
+              editSection.style.display = 'none';
+            });
+        });
+        cancelButton.addEventListener('click', () => {
+          editSection.style.display = 'none';
+        });
+        postElement.appendChild(editSection);
+      }
+    });
+  });
+  return feedDiv;
+};

src/components/home.js

@@ -0,0 +1,64 @@
+import {
+  loginWithGoogle,
+  signIn,
+} from '../lib/firebase';
+
+export const home = (onNavigate) => {
+  const root = document.getElementById('root');
+  const singInDiv = document.createElement('div');
+  singInDiv.classList.add('login');
+  singInDiv.innerHTML += `<header>
+    <img src="./img/logo.png" id="logo"><h1 id="welcome">Bienvenida</h1></header><section class="register-container">
+    </header>
+    <h1>Inicio de sesión</h1>
+    <input type="email" id="email" placeholder="Ingrese su correo" /> 
+    <input type="password" id="password" placeholder="Ingrese su contraseña"/>
+    <button type="submit" id="signin-button">Iniciar Sesión</button>
+    <p>¿No tienes cuenta?,</p><a id="here">Registrate aquí</a>
+    <img src="./img/google.png" id="google">`;
+  root.appendChild(singInDiv);
+
+  const submitButton = document.getElementById('signin-button');
+  submitButton.addEventListener('click', () => {
+    const signInEmail = document.getElementById('email').value;
+    const signInPassword = document.getElementById('password').value;
+    const validateEmail = /\S+@\S+/.test(signInEmail);
+    signIn(signInEmail, signInPassword)
+      .then((usercredentials) => {
+        const user = usercredentials.user;
+        localStorage.setItem('idUser', user);
+        onNavigate('/feed');
+      })
+      .catch((error) => {
+        if (signInEmail === '') {
+          // eslint-disable-next-line no-alert
+          alert('Ingrese su email');
+          return false;
+        } if (signInPassword === '') {
+          // eslint-disable-next-line no-alert
+          alert('Ingrese su contraseña');
+          return false;
+        } if (validateEmail === false) {
+          // eslint-disable-next-line no-alert
+          alert('Ingrese email correcto');
+          return false;
+        }
+        return error;
+      });
+  });
+
+  const submitGoogle = document.getElementById('google');
+  submitGoogle.addEventListener('click', () => {
+    loginWithGoogle().then((result) => {
+      const user = result.user;
+      localStorage.setItem('user', JSON.stringify(user));
+      onNavigate('/feed');
+    });
+  });
+  const signInHere = document.getElementById('here');
+  signInHere.addEventListener('click', () => {
+    onNavigate('/register');
+  });
+
+  return singInDiv;
+};

src/index.html

@@ -3,10 +3,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <link rel="icon" type="image/x-icon" href="./img/pawprint.png">
+  <title>Pawsbook</title>
 </head>
 <body>
+  <div id="root"></div>
   <script type="module" src="main.js"></script>
 </body>
 </html>

src/lib/firebase.js

@@ -0,0 +1,112 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable max-len */
+/* eslint-disable import/no-extraneous-dependencies */
+import { initializeApp } from 'firebase/app';
+import {
+  collection, addDoc, getFirestore, setDoc, doc, getDocs, query, onSnapshot, orderBy, Timestamp, deleteDoc, updateDoc, arrayUnion, arrayRemove,
+} from 'firebase/firestore';
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  GoogleAuthProvider,
+  signInWithPopup,
+  onAuthStateChanged,
+  signOut,
+  updateProfile,
+} from 'firebase/auth';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyA3k7Vss44vD0x4ynHhUD288WTXc6WTIIc',
+  authDomain: 'social-network-sn8-d7612.firebaseapp.com',
+  projectId: 'social-network-sn8-d7612',
+  storageBucket: 'social-network-sn8-d7612.appspot.com',
+  messagingSenderId: '409716892814',
+  appId: '1:409716892814:web:5d3567a56c1ff718d255df',
+  measurementId: 'G-9HY48VZDN0',
+};
+
+export const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const db = getFirestore(app);
+
+// FUNCIÓN REGISTRO
+export const createUser = (email, password) => createUserWithEmailAndPassword(auth, email, password);
+
+// Guardar Display Name
+export const updateName = (displayName) => {
+  updateProfile(auth.currentUser, { displayName });
+};
+// FUNCIÓN GUARADR DATOS USUARIO
+export const savedUser = (displayName, email, password, petName, petSpecie, uid) => setDoc(doc(db, 'users', uid), {
+  displayName,
+  email,
+  password,
+  petName,
+  petSpecie,
+  uid,
+});
+
+export const signIn = (email, password) => signInWithEmailAndPassword(auth, email, password);
+
+const provider = new GoogleAuthProvider();
+export const loginWithGoogle = () => signInWithPopup(auth, provider);
+
+/* salir */
+export const logOut = () => signOut(auth);
+
+/* cambiar el status */
+onAuthStateChanged(auth, (user) => user);
+
+/* leer posts */
+export const colRef = collection(db, 'userpost');
+
+/* guardar post */
+export const post = async (postText) => {
+  const docRef = await addDoc(collection(db, 'userpost'), {
+    text: postText,
+    userEmail: auth.currentUser.email,
+    userId: auth.currentUser.uid,
+    userName: auth.currentUser.displayName,
+    dateCreate: Timestamp.now(),
+    likes: [],
+  });
+/*   console.log('Document written with ID: ', docRef.id); */
+};
+
+/* capturar post */
+export const readPosts = () => query(colRef, orderBy('dateCreate', 'desc'));
+export const listenToPosts = (callback) => {
+  onSnapshot(readPosts(), (snapshot) => {
+    const allPosts = [];
+    snapshot.docs.forEach((docPost) => {
+      allPosts.push({ ...docPost.data(), id: doc.id });
+    });
+    callback(allPosts);
+  });
+};
+
+export const read = getDocs(colRef);
+export const addPost = (callback) => {
+  onSnapshot(colRef, (snapshot) => {
+    const allPosts = [];
+    snapshot.docs.forEach((docPost) => {
+      allPosts.push({ ...docPost.data(), id: docPost.id });
+    });
+    callback(allPosts);
+  });
+};
+
+/* Editar Post */
+export const updatePost = (id, newPost) => updateDoc(doc(db, 'userpost', id), newPost);
+
+/* Eliminar Post */
+export const deleteDocData = async (id) => {
+  await deleteDoc(doc(db, 'userpost', id));
+};
+
+/* Guardar like */
+export const like = async (id, uid) => updateDoc(doc(db, 'userpost', id), { likes: arrayUnion(uid) });
+
+/* Quitar like */
+export const disLike = async (id, uid) => updateDoc(doc(db, 'userpost', id), { likes: arrayRemove(uid) });

src/lib/index.js

@@ -2,5 +2,4 @@
 
 export const myFunction = () => {
   // aqui tu codigo
-  console.log('Hola mundo!');
 };