ultimos cambios

package.json

@@ -28,6 +28,7 @@
     "eslint-plugin-jest": "^22.1.2",
     "htmlhint": "^0.11.0",
     "jest": "^24.8.0",
+    "mock-cloud-firestore": "^0.12.0",
     "regenerator-runtime": "^0.13.1",
     "serve": "^11.0.2",
     "stylelint": "^10.1.0",

src/components/modal.js

@@ -1,6 +1,7 @@
 import { commentPublish } from '../lib/firebaseFirestore.js';
 
 export const publish = (userPhoto, userID, userName) =>{
+  const photoDefault = 'https://www.nicepng.com/png/detail/202-2022264_usuario-annimo-usuario-annimo-user-icon-png-transparent.png';
   const modal = document.createElement('section');
   modal.setAttribute('class', 'modal');
   modal.innerHTML = `<div class="modal-content">
@@ -27,9 +28,9 @@ export const publish = (userPhoto, userID, userName) =>{
       </div>`
 
   let photo =  modal.querySelector('#userPhoto');
-  photo.src = `${userPhoto}`;
+  photo.src = `${(userPhoto === null ? photoDefault : userPhoto)}`;
   const publish = modal.querySelector('#formComment');
-  //const img = form.loadImg.value;
+
   publish.addEventListener('submit', (e)=>{
     e.preventDefault();
     let comment = publish.comment.value;

src/components/printPost.js

@@ -1,15 +1,17 @@
-import { deletePost } from '../lib/firebaseFirestore.js';
+import { deletePost, likePost } from '../lib/firebaseFirestore.js';
 import { updateFieldData } from '../lib/firebaseFirestore.js';
+import {currentUser} from '../lib/firebaseAuth.js';
 
 //Imprime el post en el timeline y en profile
 export default (post, user, postid) => {
+  let photoDefault = "https://www.nicepng.com/png/detail/202-2022264_usuario-annimo-usuario-annimo-user-icon-png-transparent.png";
   const newpost = document.createElement('div');
   newpost.setAttribute('id', postid);
   newpost.setAttribute('class', 'post');
   newpost.innerHTML = `<div class="card">
   <div class="content">
   <div class="header">
-    <div class="profile-pic"><img src="${user.photo}" id="profile-pic"/></div>
+    <div class="profile-pic"><img src="${(user.photo === null ? photoDefault : user.photo)}" id="profile-pic"/></div>
       <div class="detail">
       <p class="name">${user.name}</p>
       <p class="posted">${post.date.toDate().toDateString()}</p>
@@ -21,6 +23,11 @@ export default (post, user, postid) => {
   </div>
   </div></div>`;
 
+  // Toma el id del usuario logueado y valida y está dentro del arreglo de likes
+  const userid = currentUser();
+  let pushLike = post.likes.some(likes => likes === userid.uid);
+  // FIN
+
   const categoryIcon = newpost.querySelector('.categories');
   switch (post.category) {
     case 'Movie':
@@ -39,15 +46,14 @@ export default (post, user, postid) => {
   icons.setAttribute('class', 'input-comment');
   icons.innerHTML = `<div id="icons">
     <img src="img/delete.png" id="delete" class="icons"/>
-    <button type="button" class="btnEdits" id="edits">
     <img src="img/edit.png" id="edit" class="icons"/>
-    </button>
-    <img src="img/like.png" id="likes" class="icons"/>
-    <span>00000</span>
+    <img src="${pushLike ? 'img/like.png' : 'img/dislike.png'}" id="likes" class="icons"/>
+    <span>${post.likes.length}</span>
     <img src="img/comment.png" class="commentaries icons"/>
-    <span>00000</span>
+    <span>0</span>
     </div>
-    <button type="button" class="btn" id="saveBtn" style="display:none">GUARDAR</button>
+    <button type="button" class="btn" id="saveBtn" style="display:none" style="height:25px" style="width: 100px" style="font-size: 12px" style=" margin-top: 1em">
+    GUARDAR</button>
     <div id="confirm">
       <h2>¿Estás seguro que quieres eliminar la publicación?</h2>
       <button type="submit" class="btn" id="deleteBtn">ELIMINAR</button>
@@ -58,7 +64,8 @@ export default (post, user, postid) => {
   </div>`;
 
   newpost.appendChild(icons);
-  const comments = document.createElement('section');
+
+  /*const comments = document.createElement('section');
   comments.setAttribute('class', 'newsfeed');
   comments.innerHTML = `
   <div class="comments">
@@ -67,22 +74,22 @@ export default (post, user, postid) => {
           </div>
       </div>
       <div class="desc">
-      "" </div></div>`;
+      "" </div></div>`;*/
 
   if (window.location.hash === '#timeline') {
     icons.querySelector('#delete').style.display = 'none';
     icons.querySelector('#edit').style.display = 'none';
   }
-  // newpost.appendChild(comments);
+
   const postId = newpost.getAttribute('id');
+
   window.addEventListener('click', (e) => {
     if (e.target === icons.querySelector('.commentaries')) {
       icons.querySelector('.inputCommentandButton').style.display = 'block';
       newpost.querySelector('.card').style.display = 'none';
     } else if (e.target === icons.querySelector('#delete')) {
       icons.querySelector('#confirm').style.display = 'block';
     } else if (e.target === icons.querySelector('#deleteBtn')) {
-      //const postId = newpost.getAttribute('id');
       deletePost(postId);
     } else {
       icons.querySelector('.inputCommentandButton').style.display = 'none';
@@ -91,32 +98,51 @@ export default (post, user, postid) => {
     }
   });
 
-  let editPost = newpost.querySelector('#post');
-  const btnEdit = icons.querySelector('#edits');
+  // ocultar comentarios
+  window.addEventListener('click', (e) => {
+    if (e.target == icons.querySelector('.commentaries ')) {
+      icons.querySelector('.inputCommentandButton').style.display = 'block';
+      newpost.querySelector('.card', '#icons').style.display = 'none';
+    } else {
+      icons.querySelector('.inputCommentandButton').style.display = 'none';
+      newpost.querySelector('.card').style.display = 'block';
+    }
+  });
+
+  // like activo inactivo
+  const btnlike = icons.querySelector('#likes');
+  btnlike.addEventListener('click', () => {
+    const userid = currentUser();
+    likePost(userid.uid, postid, pushLike);
+    if (pushLike) {
+      pushLike = false;
+    } else {
+      pushLike = true;
+    }
+  });
+
+  //Editar post
+
+  const editPost = newpost.querySelector('#post');
+  const btnEdit = icons.querySelector('#edit');
   const btnSave = icons.querySelector('#saveBtn');
 
   btnEdit.addEventListener ('click', () => {
     editPost.contentEditable = true;
+    editPost.style.backgroundColor = 'white';
     btnSave.style.display = 'block';
     console.log('editing')
 
   });
 
   btnSave.addEventListener ('click', () => {
-    updateFieldData('post',postId,{comment: editPost.innerHTML})
+    updateFieldData('post',postId,{comment: editPost.innerHTML});
     console.log(postId,editPost.innerHTML);
     editPost.contentEditable = false;
     btnSave.style.display = 'none';
 
 
   });
 
-  /* window.addEventListener('click', (e)=>{
-    if(e.target == icons.querySelector('.commentaries')){
-      icons.querySelector('.inputCommentandButton').style.display = 'block';
-    }else{
-      icons.querySelector('.inputCommentandButton').style.display = 'none';
-    }); */
-
   return newpost;
 };

src/css/createAccount.css

@@ -1,5 +1,5 @@
 .accountOne{
-  height: 100%;
+  height: 90vh;
   display: flex;
   padding: 0 20px;
 }

src/css/home.css

@@ -1,5 +1,5 @@
 .home{
-  height: 100%;
+  height: 90vh;
   display: flex;
   justify-content: center;
   align-items: center;

src/css/login.css

@@ -1,5 +1,5 @@
 .container {
-  height: 100%;
+  height: 90vh;
   display: flex;
   justify-content: center;
   align-items: center;

src/css/profile.css

@@ -88,7 +88,7 @@
 
 #biographyid{
   width:200px;
-  height:50px;
+  height:80px;
   font-family: 'Source Sans Pro';
   background: #DED5D5;
   color:black;

src/css/recover.css

@@ -1,6 +1,6 @@
 .recover{
   display: flex;
-  height: 100%;
+  height: 90vh;
   justify-content: center;
   align-items: center;
   background-image: url(background/recoveraccaunt.png);

src/css/thanksAccount.css

@@ -1,5 +1,5 @@
 #thanku {
-height: 100%;
+height: 90vh;
 display: flex;
 justify-content: center;
 align-items: center;

src/lib/firebaseAuth.js

@@ -4,19 +4,17 @@ export  function currentUser() {
     return user;
 }
 
-export async function signUp(email, password, name) {
+export async function signUp(email, password, name, birthday) {
+  const photoDefault = 'https://www.nicepng.com/png/detail/202-2022264_usuario-annimo-usuario-annimo-user-icon-png-transparent.png';
   try {
     const newUser = await auth.createUserWithEmailAndPassword(email, password);
-    let currentUser = await auth.currentUser;
-    currentUser.updateProfile({displayName: name});
-    let userDb = await data.collection('users').doc(currentUser.uid)
-    .set({birthday, biography:'', name, photo: currentUser.photoURL});
-
-    window.location.hash = "#thankAccount";
-
+    const currentUser = await auth.currentUser;
+    currentUser.photoURL = (currentUser.photoURL === null ? photoDefault : currentUser.photoURL);
+    currentUser.updateProfile({ displayName: name });
+    const userDb = await data.collection('users').doc(currentUser.uid)
+      .add({ birthday, biography:'', name, photo: (currentUser.photoURL) });
+    window.location.hash = '#thankAccount';
     return newUser;
-
-
   } catch (error) {
     // Handle Errors here.
     const errorCode = error.code;
@@ -52,7 +50,7 @@ export async function logInGoogle(provider) {
     let currentUser = await auth.currentUser;
     currentUser.providerData.forEach(function (profile){
       data.collection('users').doc(currentUser.uid)
-      .set({name: profile.displayName, photo: profile.photoURL, biography:''});
+      .add({name: profile.displayName, photo: profile.photoURL, biography:''});
     })
   } catch (error) {
     // Handle Errors here.