Laboratoria · Laugardc · Dec 16, 2022 · Dec 16, 2022 · Dec 21, 2022 · Dec 22, 2022
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -11,24 +11,25 @@
   "license": "MIT",
   "scripts": {
     "htmlhint": "htmlhint dist/*.html ",
-    "eslint": "eslint --ext .js src/ test/",
+    "eslint:fix":"eslint --fix --ext. js src/ test/",
     "stylelint": "stylelint --aei src/**/*.css",
-    "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
     "test": "jest --coverage",
-    "start": "serve -s src/"
+    "start": "serve -s src/",
+    "deploy": "-d src"
   },
+
   "devDependencies": {
     "@babel/core": "^7.11.4",
     "@babel/preset-env": "^7.11.0",
-    "babel-jest": "^27.0.1",
+    "babel-jest": "^27.5.1",
     "eslint": "^8.3.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^25.3.0",
     "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.5.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,8 @@
     "createdAt": "2022-11-30T16:52:37.204Z",
     "version": "5.5.0",
     "commit": "51e941edf1cc991930aefd7dd9c406a7c43741c1"
+  },
+  "dependencies": {
+    "firebase": "^9.15.0"
   }
-}
+}
diff --git a/responsive.txt b/responsive.txt
@@ -0,0 +1,6 @@
+/*Responsive*/
+.llamarImagenesdiv{
+    display: flex;
+    flex: wrap;
+    gap: 20px;
+}
diff --git a/src/_Mock_@firebase/auth.js b/src/_Mock_@firebase/auth.js
@@ -0,0 +1,8 @@
+export const signInWithPopup = () => Promise.resolve();
+export const getAuth = () => {}; // es un objeto vacío
+export const GoogleAuthProvider = class {}; // son un tipo de objeto que contiene funciones
+
+export const signOut = () => Promise.resolve();
+export const signInWithEmailAndPassword = jest.fn(() => Promise.resolve());
+
+export const createUserWithEmailAndPassword = Promise.resolve();
diff --git a/src/images/1erlike.png b/src/images/1erlike.png
diff --git a/src/images/2dolike.png b/src/images/2dolike.png
diff --git a/src/images/Final1.png b/src/images/Final1.png
diff --git a/src/images/Final2.png b/src/images/Final2.png
diff --git a/src/images/Prototipo1.png b/src/images/Prototipo1.png
diff --git a/src/images/Prototipo2.png b/src/images/Prototipo2.png
diff --git a/src/images/Prototipo3.png b/src/images/Prototipo3.png
diff --git a/src/images/btnGoogle.png b/src/images/btnGoogle.png
diff --git a/src/images/cerrar-sesion.png b/src/images/cerrar-sesion.png
diff --git a/src/images/close.png b/src/images/close.png
diff --git a/src/images/delete.png b/src/images/delete.png
diff --git a/src/images/editar.png b/src/images/editar.png
diff --git a/src/images/final3.png b/src/images/final3.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/logout.png b/src/images/logout.png
diff --git a/src/images/prototipobaja.jpg b/src/images/prototipobaja.jpg
diff --git a/src/images/user.png b/src/images/user.png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,21 @@
 <!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>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+  <link rel='stylesheet' href='style.css' />
+  <title>Social Network</title>
+  <link rel="stylesheet" href="style.css" />
 </head>
+
 <body>
+  <div id="root">
+  </div>
   <script type="module" src="main.js"></script>
+  <!-- <script src="router.js"></script> -->
 </body>
+
 </html>
diff --git a/src/lib/Components/_redirects b/src/lib/Components/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/src/lib/Components/dashboard.js b/src/lib/Components/dashboard.js
@@ -0,0 +1,242 @@
+import { onNavigate } from '../../main.js';
+import {
+  submitPost,
+  logOut,
+  getAllPosts,
+  deletePost,
+  currentUserInfo,
+  getTask,
+  updateTask,
+  giveLike,
+  dislike,
+} from '../index.js';
+
+export const login = () => {
+  const divLogin = document.createElement('div');
+  divLogin.setAttribute('id', 'div-login');
+  const viewLogin = `
+  <html>
+  <header>
+      <img src='./images/logo.png' alt='logoReading' class='logo-header'>
+      <input type='image' id='btn-sign-out' src='../../images/logout.png'></input>
+      <div class='container-images'>
+      </div>
+  </header>
+  <main id='container-post'>
+      <div id='container-btn-input'>
+          <img id='img-input' src='images/user.png' alt='profile'>
+          <button type='button' id='btn-input-modal'>Deja aqui la reseña de tu libro...</button>
+      </div>
+      <div id='timeline-posts'></div>
+      <div id='modal-background-post'>
+          <div id='modal-content-post'>
+              <div id='space-line'>
+                  <p>Crear Reseña</p>
+                  <img src='images/close.png' class='btn-exit'>
+              </div>
+              <div id='line'></div>
+              <div id='after-line'>
+                  <div id='container-img-text'>
+                      <img id='img-modal-post' src='images/user.png' alt='profile'>
+                      <div id='container-text'></div>
+                      </div>
+                      <textarea type='text' id='input-post' placeholder='Deja aquí la reseña de tu libro'> </textarea>
+                      <button disabled type='button' id='btn-post' class='btn-post-inactive'>PUBLICAR</button>  
+                  </div>
+              </div>
+          <div id='div-post'></div>
+          </div>
+  </main>
+  <footer>© 2022 desarrollado por Sandra, Laura B. y Laura G.</footer>
+  </html>`;
+
+  divLogin.innerHTML = viewLogin;
+
+  const divTimeLine = divLogin.querySelector('#timeline-posts');
+  const inputPostText = divLogin.querySelector('#input-post');
+  const btnPost = divLogin.querySelector('#btn-post');
+  const btnLogout = divLogin.querySelector('#btn-sign-out');
+  const btnCreatePost = divLogin.querySelector('#btn-input-modal');
+  const btnExit = divLogin.querySelector('.btn-exit');
+  const divModalBackground = divLogin.querySelector('#modal-background-post');
+  const divModalContent = divLogin.querySelector('#modal-content-post');
+
+  // apertura visual del modal
+  const showModal = () => {
+    divModalBackground.style.display = 'flex';
+    divModalContent.style.display = 'block';
+    document.body.style.overflow = 'hidden';
+  };
+  // ocultar visual del modal
+  const closeModal = () => {
+    divModalBackground.style.display = 'none';
+    divModalContent.style.display = 'none';
+    document.body.style.overflow = 'visible';
+    inputPostText.value = '';
+  };
+  // onclick detelePost
+  const deletePostListener = (event) => {
+    const postId = event.target.dataset.id;
+    const opcion = confirm('Desea eliminar el comentario?');
+    if (opcion === false) { } else {
+      deletePost(postId);
+    }
+    refreshPosts();
+  };
+
+  // onclick editarPost
+  const editPost = async (event) => {
+    const docToEdit = await getTask(event.target.dataset.id);
+    const docData = docToEdit.data();
+    showModal();
+    inputPostText.value = docData.postText;
+    btnPost.disabled = false;
+    btnPost.doc = docToEdit;
+  };
+  // onclikc likedPost
+  const likedPost = async (event) => {
+    const doc = await getTask(event.target.dataset.id);
+    const docData = doc.data();
+
+    if (docData.likes.some((like) => like === currentUserInfo().uid)) {
+      dislike(doc.id).then((response) => {
+        refreshPosts();
+      });
+    } else {
+      giveLike(event.target.dataset.id)
+        .then((response) => {
+          refreshPosts();
+        })
+        .catch();
+    }
+  };
+
+  // funcion que llama getDocs de firestore y re pinta los html elements para mostrar
+  const refreshPosts = () => {
+    getAllPosts().then((posts) => {
+      divTimeLine.innerHTML = '';
+      posts.forEach(((post) => {
+        const postData = post.data();
+        const uid = currentUserInfo().uid;
+        const divPostEntry = document.createElement('div');
+
+        const imgUser = document.createElement('img');
+        const userName = document.createElement('h2');
+        const userPostText = document.createElement('h2');
+        const editIcon = document.createElement('img');
+        const dateTimePost = document.createElement('h1');
+        const deleteIcon = document.createElement('img');
+        const likePost = document.createElement('img');
+        const likeNumber = document.createElement('h3');
+
+        divPostEntry.className = 'timeLine-post';
+        imgUser.setAttribute('src', 'images/user.png');
+        imgUser.className = 'iconUser';
+        imgUser.className = 'iconUser';
+        userName.innerHTML = postData.user;
+        userName.className = 'user-name-post';
+        userPostText.innerHTML = postData.postText;
+        deleteIcon.setAttribute('src', '/images/delete.png');
+        deleteIcon.className = 'delete-icon';
+        deleteIcon.setAttribute('data-id', post.id);
+        deleteIcon.onclick = deletePostListener;
+        userPostText.className = 'textPost';
+        dateTimePost.innerHTML = new Date(post.data().createdDateTime.seconds * 1000).toLocaleString();
+        dateTimePost.className = 'date-post';
+        editIcon.setAttribute('data-id', post.id);
+        editIcon.onclick = editPost;
+        editIcon.setAttribute('src', 'images/editar.png');
+        editIcon.className = 'icon-edit';
+        likePost.className = 'primer-like';
+        likePost.onclick = likedPost;
+        likePost.setAttribute('data-id', post.id);
+        likeNumber.className = 'like-number';
+
+        if (postData.likes.some((like) => like === uid)) {
+          likePost.setAttribute('src', '/images/2dolike.png');
+        } else {
+          likePost.setAttribute('src', '/images/1erlike.png');
+        }
+
+        likeNumber.innerHTML = postData.likes.length;
+
+        if (postData.uid === currentUserInfo().uid) {
+          divPostEntry.appendChild(userName);
+          userName.appendChild(imgUser);
+          divPostEntry.appendChild(userPostText);
+          userName.appendChild(dateTimePost);
+          userPostText.appendChild(editIcon);
+          userPostText.append(deleteIcon);
+          userPostText.appendChild(likePost);
+          userPostText.appendChild(likeNumber);
+          userPostText.appendChild(likeNumber);
+        } else {
+          divPostEntry.appendChild(userName);
+          userName.appendChild(imgUser);
+          divPostEntry.appendChild(userPostText);
+          userName.appendChild(dateTimePost);
+          userPostText.appendChild(likePost);
+          userPostText.appendChild(likeNumber);
+          userPostText.appendChild(likeNumber);
+        }
+
+        divTimeLine.appendChild(divPostEntry);
+        btnPost.innerText = 'PUBLICAR';
+        closeModal();
+      }));
+    });
+  };
+
+  btnPost.addEventListener('click', (event) => {
+    const doc = event.currentTarget.doc;
+
+    if (doc) {
+      const docData = doc.data();
+      docData.postText = inputPostText.value;
+      updateTask(doc.id, docData).then((response) => {
+        btnPost.doc = null;
+        closeModal();
+        refreshPosts();
+      });
+    } else {
+      submitPost(inputPostText.value).then((response) => {
+        closeModal();
+        refreshPosts();
+        alert('Reseña creada', response);
+      });
+    }
+  });
+
+  // aqui se manda llamar el getDocs al cargar la pagina en Dashboard
+  refreshPosts();
+  // Funcion cerrar sesion
+
+  btnLogout.addEventListener('click', () => {
+    logOut(onNavigate);
+  });
+
+  // Funcion crear post
+
+  btnCreatePost.addEventListener('click', () => {
+    showModal();
+    inputPostText.focus();
+  });
+
+  // Listener cerrar modal
+  btnExit.addEventListener('click', () => closeModal());
+
+  // Funcion activacion boton publicar
+  inputPostText.addEventListener('keyup', () => {
+    const valueInput = inputPostText.value.trim();  // trim() metodo que no permite activar boton con espacio
+    if (valueInput === '') {
+      btnPost.disabled = true;
+    } else {
+      btnPost.disabled = false;
+    }
+  });
+
+  divLogin.append(
+    btnLogout,
+  );
+  return divLogin;
+};