merge interaccion boton registro con js

package.json

@@ -17,18 +17,19 @@
     "test": "jest --coverage",
     "start": "serve -s src/"
   },
+
   "devDependencies": {
     "@babel/core": "^7.11.4",
     "@babel/preset-env": "^7.11.0",
     "babel-jest": "^27.0.1",
     "eslint": "^8.3.0",
-    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^25.3.0",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
     "regenerator-runtime": "^0.13.1",
-    "serve": "^13.0.2",
+    "serve": "^14.1.2",
     "stylelint": "^14.1.0",
     "stylelint-config-recommended": "^6.0.0"
   },
@@ -39,5 +40,20 @@
     "createdAt": "2022-11-30T16:52:37.204Z",
     "version": "5.5.0",
     "commit": "51e941edf1cc991930aefd7dd9c406a7c43741c1"
-  }
-}
+  },
+  "dependencies": {
+    "firebase": "^9.15.0"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dvnielx/DEV002-social-network.git"
+  },
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/dvnielx/DEV002-social-network/issues"
+  },
+  "homepage": "https://github.com/dvnielx/DEV002-social-network#readme"
+}

src/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/firebase/configuracion.js

@@ -0,0 +1,202 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable max-len */
+/* eslint-disable no-alert */
+/* eslint-disable no-console */
+/* eslint-disable no-shadow */
+// Importa la biblioteca de Firebase
+// eslint-disable-next-line import/no-unresolved
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js';
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  sendEmailVerification,
+  GoogleAuthProvider,
+  onAuthStateChanged,
+  signInWithPopup,
+  updateProfile,
+  getAuth,
+  signOut,
+// eslint-disable-next-line import/no-unresolved
+} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js';
+import {
+  getFirestore,
+  arrayRemove,
+  onSnapshot,
+  arrayUnion,
+  collection,
+  deleteDoc,
+  updateDoc,
+  Timestamp,
+  getDocs,
+  orderBy,
+  addDoc,
+  getDoc,
+  query,
+  doc,
+// eslint-disable-next-line import/no-unresolved
+} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js';
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: 'AIzaSyAAHfvbH9LChUrOwAbR4cydwCsmHa7Q330',
+  authDomain: 'usuarias-journey-mates.firebaseapp.com',
+  projectId: 'usuarias-journey-mates',
+  storageBucket: 'usuarias-journey-mates.appspot.com',
+  messagingSenderId: '15257223280',
+  appId: '1:15257223280:web:eecc0cb646124a2f42b4b5',
+  measurementId: 'G-4W8ETMYH7S',
+};
+
+// Inicializa la aplicación de Firebase
+export const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const provider = new GoogleAuthProvider(app);
+export const db = getFirestore(app);
+export const user = () => auth.currentUser;
+
+export const saveTask = (description) => addDoc(collection(db, 'tasks'), {
+  description,
+  name: auth.currentUser.displayName,
+  uid: auth.currentUser.uid,
+  likes: [],
+  createdDateTime: Timestamp.fromDate(new Date()),
+});
+
+export const saveUser = (name, uid, email, pais) => addDoc(collection(db, 'users'), {
+  name,
+  uid,
+  email,
+  pais,
+  createdDateTime: Timestamp.fromDate(new Date()),
+});
+
+// Estas funciones realizan una operación específica en la colección de tareas en Firestore.
+export const getTasks = () => getDocs(collection(db, 'tasks'));
+export const deleteTask = (id) => deleteDoc(doc(db, 'tasks', id));
+export const getTask = (id) => getDoc(doc(db, 'tasks', id));
+export const updateTask = (id, newFields) => updateDoc(doc(db, 'tasks', id), newFields);
+export const dateTask = (querySnapshot) => {
+  const q = query(collection(db, 'tasks'), orderBy('createdDateTime', 'desc'));
+  onSnapshot(q, querySnapshot);
+};
+
+// Create new users
+
+export function registerUser(email, password, name, pais, callback) {
+  createUserWithEmailAndPassword(auth, email, password)
+    .then((userCredential) => {
+      sendEmailVerification(auth.currentUser);
+      updateProfile(auth.currentUser, {
+        displayName: name,
+
+      });
+
+      const user = userCredential.user;
+      const userId = user.uid;
+      user.displayName = name;
+      saveUser(user.displayName, userId, email, pais);
+      callback(true); // Se llama una función de callback para indicar que el registro se ha realizado correctamente.
+    })
+    .catch((error) => {
+      console.error(error.code);
+      if (error.code === 'auth/email-already-in-use') {
+        alert('Este correo ya está registrado');
+      } else if (error.code === 'auth/weak-password') {
+        alert('Tu contraseña debe contener al menos 6 caracteres');
+      } else if (error.code === 'auth/invalid-email') {
+        alert('Este correo no existe o es inválido');
+      } else if (error.code === 'auth/internal-error') {
+        alert('Completa todos los campos');
+      }
+      callback(false);
+    });
+}
+
+// Inicio de sesión con email
+
+export async function inicioDeSesionEmail(email, password) {
+  try {
+    const userCredential = await signInWithEmailAndPassword(auth, email, password);
+    const user = userCredential.user;
+    const userId = user.uid;
+    return true; // Si la operación es exitosa, la función imprime un mensaje "signed in" y devuelve true.
+  } catch (error) {
+    if (error.code === 'auth/email-already-in-use') {
+      alert('Este correo ya está registrado');
+    } else if (error.code === 'auth/weak-password') {
+      alert('Tu contraseña no es segura');
+    } else if (error.code === 'auth/invalid-email') {
+      alert('Este correo no existe o es inválido');
+    } else if (error.code === 'auth/internal-error') {
+      alert('Completa todos los campos');
+    }
+    return false;
+  }
+}
+
+// Sign in with Google
+
+export const authGoogle = async () => {
+  try {
+    const userResult = await signInWithPopup(auth, provider);
+    window.location.href = '/timeLine';
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// Cerrar sesión
+
+export const signOutFirebase = (auth) => auth.signOut(); // llama a su método signOut() que termina la sesión actual.
+
+export const onAuth = (auth) => {
+  auth.onAuthStateChanged((user) => {
+    if (user) {
+      console.log('user is signed in');
+    } else {
+      console.log('user is signed out');
+    }
+  });
+};
+
+// Like function
+
+export const tapLike = (id, newLike) => {
+  updateDoc(doc(db, 'tasks', id), { // Actualiza el documento en la colección "tasks" con el
+    likes: // identificador "id" agregando un nuevo elemento "newLike" a la lista de "likes"
+      arrayUnion( // Permite agregar un nuevo elemento a un campo en la base de datos
+        newLike,
+      ),
+  });
+};
+
+export const dislike = (id, oldLike) => { // Se realiza la operación opuesta, eliminando un elemento "oldLike" de la lista de "likes".
+  updateDoc(doc(db, 'tasks', id), { // updateDoc actualiza el documento en la base de datos y doc toma como argumentos db, task y id
+    likes:
+      arrayRemove( // Permite eliminar un elemento en la base de datos.
+        oldLike,
+      ),
+  });
+};
+
+export {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  onAuthStateChanged,
+  GoogleAuthProvider,
+  signInWithPopup,
+  updateProfile,
+  getFirestore,
+  arrayRemove,
+  collection,
+  onSnapshot,
+  arrayUnion,
+  updateDoc,
+  deleteDoc,
+  Timestamp,
+  signOut,
+  getDocs,
+  getDoc,
+  addDoc,
+  doc,
+};

src/firebase/firestore.js

@@ -0,0 +1,135 @@
+/* eslint-disable max-len */
+/* eslint-disable no-alert */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-console */
+// import { async } from 'regenerator-runtime';
+import {
+  saveTask, deleteTask, getTask, updateTask, tapLike, dislike, user, auth, dateTask,
+} from './configuracion.js';
+
+const tasksContainer = document.getElementById('contenedor-publicaciones');
+const taskForm = document.getElementById('task-form');
+
+let editStatus = false;
+let id = '';
+
+window.addEventListener('DOMContentLoaded', async () => {
+  dateTask((querySnapshot) => {
+    let html = '';
+
+    querySnapshot.forEach((doc) => {
+      const task = doc.data();
+      // const fecha=Timestamp.fromDate(new Date())
+      const likes = task.likes;
+      const likesNumber = likes.length;
+      const userId = user().uid;
+      const currentLike = likes.indexOf(userId);
+      let likeSrc = '';
+      const likeImg = () => {
+        if (currentLike === -1) {
+          likeSrc = 'images/like-logo.png';
+        } else {
+          likeSrc = './images/heart.png';
+        }
+      };
+      likeImg();
+
+      html += `
+                <div class = 'contenedor-padre'> 
+                  <p class="name-post"> ${task.name} </p>
+                  <p class="date">${task.createdDateTime.toDate().toLocaleString('es-ES', {
+    year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
+  })} </p>
+                    <textarea class ='div-post-publicado'>${task.description}</textarea>`;
+
+      if (task.uid === auth.currentUser.uid) {
+        html += `
+                        <img src="./images/editlogo2.png" class='btn-edit' data-id="${doc.id}">
+                        <img src="./images/deletelogo2.png" class='btn-delete' data-id="${doc.id}"> 
+                    <div class="contenedor-likes">
+                        <img class="like-logo" data-id="${doc.id}" src='${likeSrc}' alt="heart">
+                        <p class="contadorLikes" data-id="${doc.id}"> ${likesNumber}</p>
+                    </div>
+                `;
+      } else {
+        html += ` 
+                     <div class="contenedor-likes">
+                        <img class="like-logo" data-id="${doc.id}" src='${likeSrc}' alt="heart">
+                        <p class="contadorLikes" data-id="${doc.id}"> ${likesNumber}</p>
+                    </div>
+                    </div>
+                    `;
+      }
+    });
+
+    tasksContainer.innerHTML = html;
+
+    const userId = user().uid;
+    const botonLike = tasksContainer.querySelectorAll('.like-logo');
+
+    botonLike.forEach((btn) => {
+      btn.addEventListener('click', async (e) => { //  Al hacer clic, se obtiene su identificador único a partir de su atributo 'data-id'
+        const id1 = e.target.dataset.id;
+        const doc = await getTask(id1); // se llama a la función 'getTask' pasándole ese identificador como argumento
+        const likes = doc.data().likes;
+        const currentLike = likes.indexOf(userId);
+
+        if (currentLike === -1) {
+          tapLike(id1, userId); // se busca el valor 'userId' dentro de ese arreglo y se llama a la función 'tapLike' pasándole el identificador y el 'userId'
+        } else {
+          dislike(id1, userId);
+        }
+      });
+    });
+
+    const btnsDelete = tasksContainer.querySelectorAll('.btn-delete');
+    if (btnsDelete) {
+      btnsDelete.forEach((btn) => {
+        btn.addEventListener('click', ({ target: { dataset } }) => {
+          if (confirm('¿Estás segura de que deseas eliminar esta publicación?')) {
+            deleteTask(dataset.id); // se llama a la función deleteTask(dataset.id), pasándole como argumento el identificador de la tarea (que está almacenado en el atributo de datos dataset.id del botón)
+          }
+        });
+      });
+    }
+
+    const btnsEdit = tasksContainer.querySelectorAll('.btn-edit');
+    btnsEdit.forEach((btn) => {
+      btn.addEventListener('click', async (e) => {
+        const doc = await getTask(e.target.dataset.id); // "target" es utilizada para acceder al elemento que lanzó el evento click
+        const task = doc.data();
+
+        taskForm['task-description'].value = task.description;
+
+        editStatus = true;
+        id = doc.id;
+
+        taskForm['btn-publicar'].innerText = 'Publicar';
+      });
+    });
+  });
+});
+
+if (taskForm) {
+  taskForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    const description = taskForm['task-description'];
+
+    if (description.value.trim() === '') {
+      alert('No se pueden publicar campos vacíos :(');
+    } else {
+      if (!editStatus) {
+        saveTask(description.value);
+      } else {
+        updateTask(id, {
+          description: description.value,
+        });
+
+        editStatus = false;
+      }
+
+      taskForm.reset();
+    }
+  });
+}