diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 00000000..d6a387ae --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "socialnetwork-15a5f" + } +} diff --git a/database.rules.json b/database.rules.json new file mode 100644 index 00000000..c0aa595d --- /dev/null +++ b/database.rules.json @@ -0,0 +1,6 @@ +{ + "rules": { + ".read": "auth != null", + ".write": "auth != null" + } +} \ No newline at end of file diff --git a/firebase.json b/firebase.json new file mode 100644 index 00000000..2dbc6cb3 --- /dev/null +++ b/firebase.json @@ -0,0 +1,16 @@ +{ + "database": { + "rules": "database.rules.json" + }, + "hosting": { + "public": "src", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ] + }, + "storage": { + "rules": "storage.rules" + } +} diff --git a/package.json b/package.json index 9a365577..f59500b2 100644 --- a/package.json +++ b/package.json @@ -32,5 +32,8 @@ "serve": "^11.0.2", "stylelint": "^10.1.0", "stylelint-config-recommended": "^2.2.0" + }, + "dependencies": { + "bulma": "^0.8.2" } -} \ No newline at end of file +} diff --git a/src/404.html b/src/404.html new file mode 100644 index 00000000..829eda8f --- /dev/null +++ b/src/404.html @@ -0,0 +1,33 @@ + + + + + + Page Not Found + + + + +
+

404

+

Page Not Found

+

The specified file was not found on this website. Please check the URL for mistakes and try again.

+

Why am I seeing this?

+

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

+
+ + diff --git a/src/example.js b/src/example.js deleted file mode 100644 index 52d2c7ea..00000000 --- a/src/example.js +++ /dev/null @@ -1,3 +0,0 @@ -export const example = () => { - // aquí tu código -} \ No newline at end of file diff --git a/src/index.html b/src/index.html index bb6937cc..361d3f20 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,59 @@ - + + - Document + Red social Microcuentos + + + + + + - + + +
+
+
+ + + + + + + + - \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index 35868bab..85315b02 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,240 @@ -import { example } from './example.js'; +import { root } from "../main.js"; +import { viewLogin } from '/main.js' +import { viewSign } from '/main.js' +import { showPosts } from "./views/home.js" +import { renderPostView } from "./views/post.js" +import { renderProfileView } from "./views/profile.js" +import { userObserverProfile } from "./views/profile.js" -example(); +//Instanciar Firestore +const db = firebase.firestore(); + +//login, instancia del provedor del servicio +const provider = new firebase.auth.GoogleAuthProvider(); +const providerf = new firebase.auth.FacebookAuthProvider(); + +//Autenticar con Google +export function loginGoogle(errorGooFbkModal) { + //console.log(viewLogin); + let btngoGoogle = document.querySelector('#goGoogle') + btngoGoogle.addEventListener('click', (e) => { + e.preventDefault() + firebase.auth()//Se llama a la func autenticar + .signInWithPopup(provider)//Se va a usar una popUp y se va a loguear con la var provider que es google + .then(function (result) {//lo que se hace cuando el usuario ya inicio sension y ya dio permisos, nos dio su info + console.log(result.user);//trae info de usuario(correo, nombre, foto, etc) + saveDataG(result.user)//Se le manda a la func guardDatos para hacer uns BD + renderPostView(); + //userObserverProfile() + + + }) + .catch(function (error) { + errorGooFbkModal.classList.add('is-active'); + console.log('error:', error); + }) + }); +} + +//Guardar datos gmail en BD +function saveDataG(user) { + //console.log(user); + const docRef = db.collection('datausers/').doc(user.uid) + docRef.get().then(userBD => { + if (userBD.exists === true) { + console.log(userBD); + console.log('ya existe'); + + } else { + console.log('no existe'); + console.log(userBD); + docRef.set({ + uid: user.uid,//Servirá para eliminar + name: user.displayName,//Se obtiene el nom + email: user.email, + photo: user.photoURL, + //interests: 'uhuggy' + }) + .then(function () { + console.log('Los datos se guardaron'); + }) + .catch(function (error) { + console.log('Hubo en error:', error); + }) + + } + }) + /* const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario */ + + updateData(docRef) +} + +//Leer los datos de la BD +function updateData(docRef) { + docRef.get().then(function (snapshot) { + let myData = snapshot.data(); + console.log(myData); + /* div.innerHTML = `Hola ${myData.nombre}` */ + }) +} + + +//Autenticar con facebook +export function loginFacebook(errorGooFbkModal) { + let btngoFacebook = document.querySelector('#goFacebook'); + btngoFacebook.addEventListener('click', function (e) { + e.preventDefault() + firebase.auth()//Se llama a la func autenticar + .signInWithPopup(providerf)//Se va a usar una popUp y se va a loguear con la var provider que es google + .then(function (result) {//lo que se hace cuando el usuario ya inicio sension y ya dio permisos, nos dio su info + console.log(result.user);//trae info de usuario(correo, nombre, foto, etc) + console.log(result.credential); + saveDataF(result.user)//Se le manda a la func guardDatos para hacer una BD + //userObserverProfile() + renderPostView(); + + //div.innerHTML = `` + + }) + .catch(function (error) { + errorGooFbkModal.classList.add('is-active'); + console.log('Hubo en error:', error); + }) + }); +} + +//Guardar datos Fb en BD +function saveDataF(user) { + //console.log(user); + const docRef = db.collection('datausers/').doc(user.uid) + docRef.get().then(userBD => { + if (userBD.exists === true) { + console.log(userBD); + console.log('ya existe'); + + } else { + console.log('no existe'); + console.log(userBD); + docRef.set({ + uid: user.uid,//Servirá para eliminar + name: user.displayName,//Se obtiene el nom + email: user.email, + photo: user.photoURL, + interests: 'Interes' + }) + .then(function () { + console.log('Los datos se guardaron'); + }) + .catch(function (error) { + console.log('Hubo en error:', error); + }) + + } + }) + updateDataFb(docRef) +} + +//Leer los datos de la BD +function updateDataFb(docRef) { + docRef.get().then(function (snapshot) { + let myData = snapshot.data(); + console.log(myData); + /* div.innerHTML = `Hola ${myData.nombre} ` */ + }) +} + + +//Crear cuenta con email +//Registrarse: +export function createUser(newName, newEmail, newPassword, registryModal, alreadyExistModal) { + //console.log(user); + console.log(newName + newEmail + newPassword); + //const expRegName = /^[a-z0-9_-]{3,16}$/ + const expRegEmail = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/ + const expRegPass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/ + if (expRegPass.test(newPassword) === true && expRegEmail.test(newEmail) === true) { + firebase.auth().createUserWithEmailAndPassword(newEmail, newPassword) + + .then(function (user) { + console.log('Se ha creado la cuenta!'); + console.log(user.user); + saveEmailBD(newName, newEmail, newPassword, user) + renderPostView(); + }) + .catch(function (error) {//Si la cuenta se ha creado se muestra el error + alreadyExistModal.classList.add('is-active'); + console.log(error.message); + }) + } else { + registryModal.classList.add('is-active'); + //alert('Comprueba tu correo o contraseña (debe contener al menos 6 caracteres,un número, una minúscula y al menos una mayúscula).') + } +} + +//:Guardar los datos en BD +function saveEmailBD(newName, newEmail, newPassword, user) { + const docRef = db.collection('datausers/').doc(user.user.uid);//la / y el + user.uid hace que no se duplique el usuario + docRef.set({ + name: newName, + email: newEmail, + password: newPassword, + interests: 'Interés', + photo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS_nu03Fphc39lFDYvqsGjluX8keorjzG79akJclhK2fS2SwLKo&usqp=CAU', + uid: user.user.uid + + }) + .then(function () { + console.log('Los datos se guardaron'); + }) + .catch(function (error) { + console.log('Hubo en error:', error); + }) +} + + +//Inicio de Sesión: +//:Comparar los datos del usuario con los datos que usó para crear cuenta +export function loginUser(email, password, errorModal) { + //console.log(email + password + errorModal); + firebase.auth().signInWithEmailAndPassword(email, password) + .then(function (user) { + console.log('Datos correctos, bienvenido!') + //console.log(user); + renderPostView() + }) + .catch(function (error) { + errorModal.classList.add('is-active'); + //alert('Upsi, datos incorrectos'); + }) + +} + + +//Salir de la sesión: +export function signoutUser() { + //e.preventDefault() + firebase.auth().signOut(); + console.log('Adiós Bye'); + /* const divRoot = document.querySelector('#root') + divRoot.innerHTML = principal() */ + principalView() + +} + +//Nos dice que usuario tiene sesión abierta y nos trae sus datos de la BD +function userObserver() { + firebase.auth().onAuthStateChanged(function (user) { + //console.log(user); + if (user) { + const docRef = db.collection('datausers/').doc(user.uid); + docRef.get().then(function (snapshot) { + let myData = snapshot.data(); + console.log(myData) + }) + } else { + // No user is signed in. + console.log('No user'); + } + }); +} +userObserver() \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 00000000..6723ad4c --- /dev/null +++ b/src/main.js @@ -0,0 +1,138 @@ +import { renderPostView } from "./views/post.js" +import { showPosts } from "./views/home.js" +import { renderProfileView } from "./views/profile.js" +import { showPosts } from "./views/home.js" +import { userObserverProfile } from "./views/profile.js" +import { renderExitView } from "./views/exit.js" +import login from "./views/login.js" +import signIn from "./views/signIn.js" +import principal from "./views/principal.js" +import { loginGoogle } from '/index.js'// Se importa para usar addEventListener +import { loginFacebook } from '/index.js' +import { createUser } from '/index.js' +import { loginUser } from '/index.js' +import { signoutUser } from '/index.js' + +// Nodos +export const root = document.querySelector('#root'); +export const showP = document.querySelector('#showP') +export const navBar = document.querySelector('#navBar'); +const homeButton = document.querySelector('#home'); +const postButton = document.querySelector('#post'); +const profileButton = document.querySelector('#profile'); +const exitButton = document.querySelector('#exit'); + +// listeners +homeButton.addEventListener("click", showPosts) +postButton.addEventListener("click", renderPostView) +profileButton.addEventListener('click', userObserverProfile); +exitButton.addEventListener("click", signoutUser) + +window.onload = principalView(); + +export function principalView() { + root.innerHTML = principal(); + let goLogin = document.querySelector('#goLogin') + goLogin.addEventListener('click', viewLogin) +} + +// Mostrar vista iniciar sesión +export function viewLogin() { + root.innerHTML = login() + let goSignIn = document.querySelector('#goSignIn'); + + //Mostrar vista iniciar sesión + export function viewLogin() { + root.innerHTML = login() + let goSignIn = document.querySelector('#goSignIn') + + + // Listeners modales + const btnCloseError = document.querySelector('#btnCloseError'); + btnCloseError.addEventListener('click', closeError); + const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); + const btnCloseGoogleError = document.querySelector('#btnCloseNoGooFbk'); + btnCloseGoogleError.addEventListener('click', closeGooFbkError) + + //Ingresar + let btnEnter = document.querySelector('#enter') + btnEnter.addEventListener('click', function (e) { + e.preventDefault() + let email = document.querySelector('#email').value + let password = document.querySelector('#password').value + const errorModal = document.querySelector('#errorModal'); + /* console.log(email); + console.log(password); */ + loginUser(email, password, errorModal) + }) + //Ocultar Modaless + function closeError() { + errorModal.classList.remove('is-active'); + } + function closeGooFbkError() { + errorGooFbkModal.classList.remove('is-active'); + } + viewSign(goSignIn) + loginGoogle(errorGooFbkModal) + loginFacebook(errorGooFbkModal) + } + //Mostrar vista Resgistro + export function viewSign(goSignIn) { + goSignIn.addEventListener('click', (e) => { + e.preventDefault() + root.innerHTML = signIn() + + //Listeners Modales + const btnCloseError = document.querySelector('#btnCloseError'); + btnCloseError.addEventListener('click', closeError); + const btnCloseExist = document.querySelector('#btnCloseExistAccount'); + btnCloseExist.addEventListener('click', closeErrorExist); + let btnBack = document.querySelector('#backOne') + const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); + const btnCloseGoogleError = document.querySelector('#btnCloseNoGooFbk'); + btnCloseGoogleError.addEventListener('click', closeGooFbkError) + + //Crear cuenta + let btnRegister = document.querySelector('#signIn') + btnRegister.addEventListener('click', function (e) { + e.preventDefault() + + //Leer variables del form + const newName = document.querySelector('#newName').value + const newEmail = document.querySelector('#newEmail').value + const newPassword = document.querySelector('#newPassword').value + const registryModal = document.querySelector('#registryModal');// el id lo tiene el overlay + const alreadyExistModal = document.querySelector('#alreadyExistModal'); + /* console.log(newName); + console.log(newEmail); + console.log(newPassword); */ + createUser(newName, newEmail, newPassword, registryModal, alreadyExistModal) + + + }) + //Ocultar Modales + function closeError() { + registryModal.classList.remove('is-active'); + } + function closeErrorExist() { + alreadyExistModal.classList.remove('is-active'); + } + function closeGooFbkError() { + errorGooFbkModal.classList.remove('is-active'); + } + arrowBack(btnBack) + loginGoogle(errorGooFbkModal) + loginFacebook(errorGooFbkModal) + }) + + } + + //Regresar a inicio de sesión + function arrowBack(btnBack) { + btnBack.addEventListener('click', (e) => { + e.preventDefault() + root.innerHTML = login() + viewLogin() + }) + } +} diff --git a/src/pops.js b/src/pops.js new file mode 100644 index 00000000..8ae79bd8 --- /dev/null +++ b/src/pops.js @@ -0,0 +1,175 @@ +const areYouSure = ` + +
+ +` + + +const saveChange = ` + + +` +const divRoot = document.querySelector('#root') +divRoot.innerHTML = saveChange + +// Are you sure that you want to delete the element? +/* const overDelete = document.createElement('div'); +overDelete.className = 'overSmall'; +overDelete.id = 'overDelete'; +overDelete.innerHTML = ` +
+
+
+ +
+
+ +

Estás seguro que quieres eliminar el elemento?

+ + + +
+ +
+
+` +document.body.appendChild(overDelete); + +// Open PopUpDelete +const btnPop = document.querySelector('#pop') +const overlayDelete = document.querySelector('#overDelete');// el id lo tiene el overlay +const popup = document.querySelector('.popSmall'); +const btnClosePopup = document.querySelector('#btn-cerrar-delete'); +btnPop.addEventListener('click', abrirPopup); +btnClosePopup.addEventListener('click', cerrarPopup); + +function abrirPopup() { + overlayDelete.classList.add('active'); + popup.classList.add('active'); +} +function cerrarPopup() { + overlayDelete.classList.remove('active'); + popup.classList.remove('active'); +} + +//Task Completed + +const overComplete = document.createElement('div'); +overComplete.className = 'overSmall'; +overComplete.id = 'overComplete'; +overComplete.innerHTML = ` +
+
+
+ +
+
+ +

Se han guardado tus cambios

+
+ +
+
+` +document.body.appendChild(overComplete); + +// Open PopUp Task Complete +const btnComplete = document.querySelector('#taskCompleted') +const overComp = document.querySelector('#overComplete');// el id lo tiene el overlay +const popuptask = document.querySelector('.popSmall'); +const btnCloseTask = document.querySelector('#btn-cerrar-complete'); +btnComplete.addEventListener('click', openComplete); +btnCloseTask.addEventListener('click', closeComplete); + +function openComplete() { + overComp.classList.add('active'); + popuptask.classList.add('active'); +} +function closeComplete() { + overComp.classList.remove('active'); + popuptask.classList.remove('active'); +} + +//Show Error + +const overError = document.createElement('div'); +overError.className = 'overSmall'; +overError.id = 'overError'; +overError.innerHTML = ` +
+
+
+

ERROR

+ +

Intenta de nuevo, alguno de tus datos no coincide

+
+
+ +
+ +
+
+` +document.body.appendChild(overError); + +// Open PopUp error +const btnError = document.querySelector('#showError') +const overErr = document.querySelector('#overError');// el id lo tiene el overlay +const popupError = document.querySelector('.popSmall'); +const btnCloseError = document.querySelector('#btn-cerrar-error'); +btnError.addEventListener('click', openError); +btnCloseError.addEventListener('click', closeError); + +function openError() { + overErr.classList.add('active'); + popupError.classList.add('active'); +} +function closeError() { + overErr.classList.remove('active'); + popupError.classList.remove('active'); +} + */ + +/* const profileCard = document.createElement('div'); +profileCard.className = 'profileCard'; +profileCard.innerHTML = ` +
+
+
+

Estás seguro que quieres eliminar el elemento?

+ +
+ + +` +profileContainer.appendChild(profileCard); */ + +/* const closeButton = document.createElement('div'); +closeButton.className = 'closeButton'; +profileCard.appendChild(closeButton); */ + +/* const close = document.createElement('a'); +close.className = 'btn-cerrar-popup'; +closeButton.appendChild(close); +const icon = document.createElement('i'); +icon.className = 'far fa-times-circle'; +close.appendChild(icon); */ \ No newline at end of file diff --git a/src/post.html b/src/post.html new file mode 100644 index 00000000..afad0dbf --- /dev/null +++ b/src/post.html @@ -0,0 +1,157 @@ + + + + + + + + Red social Microcuentos + + + + + + + + +
+
+
+ + +
+
+
+ +
+ +
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+

Autor

+
+
+

Tale

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar + felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo + sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+
+
+ + +
+ +
+ + + +
+
+
+
+ +
+ + +
+
+
+
+
+ +
+

Template 4 ${doc.data().user}

+

${doc.data().title}

+

${doc.data().text}

+
+ +
${doc.data().likes}
+
+ + + + +
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+ +
+

Template 4 ${doc.data().user}

+

${doc.data().title}

+

${doc.data().text}

+
+ +
${doc.data().likes}
+
+ + + + +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 00000000..6a303c72 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,99 @@ +#root{ + height: auto; +} +/* body{ + background-color:#131515; + background-color:#232323; + background-repeat: repeat-x; + color: rgb(212, 144, 41) +}*/ +.form-container{ + margin: 50px; + padding: 80px,80px,50px,80px; + justify-content: center; + color:#FAFAFA; +} +.titles{ + font-size: large; +} + +.centerItem{ + margin: 10px, 50px,10px,50px; + display: flex; + justify-content: center; + text-align: center; +} +.container-separate{ + margin-top: 20px; + +} +a{ + text-decoration-color: #A5DED3; + text-decoration:none; + color: #A5DED3; +} + +.btnIcon{ + margin-top: 50px; + margin: 16px; +} + +.registryLink{ + margin-top: 80px; +} +.back{ + padding: 20px; + justify-content:left; + margin-left: 30px; + margin-top: 30px; +} +.rudyIcon{ + justify-content: center; + color: #A5DED3; +} + +.modal-content{ + width: 80px; + display: flex; + justify-content: center; +} +.containerPop{ + background-color: #E5E5E5; + color:#232323; + text-align: center; + margin: 15px; + padding: 15px; + } + +.imagePop{ + font-size: 100px; + color: #000000; + } +.acceptDelete{ + font-size: 25px; + background-color: #47C674; + margin-right: 20px; + border-radius: 10px; + color:#2E2F32; + + } +.cancelDelete{ + font-size: 25px; + background-color: #FF385F; + margin-left: 20px; + border-radius: 12px; + padding-right: 10px; + padding-left: 10px; + color:#2E2F32; + +} +.ocultEditProfile{ + visibility: hidden; +} +.active{ + visibility: visible; +} + +.btnSave{ + display: none; +} diff --git a/src/views/functionsFeed.js b/src/views/functionsFeed.js new file mode 100644 index 00000000..e80a403b --- /dev/null +++ b/src/views/functionsFeed.js @@ -0,0 +1,115 @@ + +export function editPost(e) { + console.log(e.target) + let id = e.target.getAttribute('data-id') + console.log("id del post:", id) + let titleP = document.querySelector(`#${id}-title`) + let textP = document.querySelector(`#${id}-text`) + titleP.style = "display:none" + textP.style = "display:none" + let inputTitle = document.createElement('input') + let inputText = document.createElement("input") + titleP.after(inputTitle) + textP.after(inputText) + inputTitle.value = titleP.innerText + inputText.value = textP.innerText + let btnSave = document.querySelector(`#${id}-save`) + btnSave.addEventListener("click", savePost) + btnSave.style = "display: block" + + function savePost(e) { + alert("prueba del botón guardar") + inputTitle.style = "display:none" + inputText.style = "display:none" + let id = e.target.getAttribute('data-id') + console.log("id del post en el btnSave:", id) + let newTitle = inputTitle.value + let newText = inputText.value + console.log("newTitle:", newTitle) + console.log("newText", newText) + btnSave.style = "display:none" + // const title = { title: newTitle } + // const text = { text: newText } + console.log("este es el objeto post:", post) + updatePost(newTitle, newText) + // .then(res => { + // console.log(res) + // }) + // .catch(err => { + // console.log("No se pudieron guardar los cambios al post", err) + // }) + } + + function updatePost(newTitle, newText) { + firebase.firestore().collection('postsList').doc(id).update({ + title: newTitle, + text: newText + }); + // firebase.firestore().collection('postsList').doc(id).update({ + // title: newTitle + // }); + } + + +} + + +export function clean(node) { + node.innerHTML = ''; +} + + +export function deletePost(e) { + let id = e.target.getAttribute('data-id') + alert("prueba de borrar"); + firebase.firestore().collection('postsList').doc(id).delete(); + +} + + + +//let resultLikes = document.querySelectorAll('.resultCounter') +//let listResultLikes = resultLikes[resultLikes.length - 1] +let countLikes = 0 +export function counter() { + let user = firebase.auth().currentUser; + + console.log(user.displayName); + let whoLike = user.displayName + + let idPost = btnClick.getAttribute('dataid') + console.log(idPost); + countLikes = countLikes + 1 + console.log(countLikes); + + const docPost = firebase.firestore().collection("postsList").doc(idPost) + docPost.get().then(docPost => { + let whosLikePost = docPost.data().whoLike + console.log(whosLikePost); + /* console.log(whosLikePost.includes(whoLike)); + let checkUser = whosLikePost.includes(whoLike) */ + if (whosLikePost === undefined) { + saveLikes(countLikes, idPost, whoLike) + btnClick.classList.add('colorLike') + + } if (whosLikePost != undefined) { + console.log(whosLikePost.includes(whoLike)); + let checkUser = whosLikePost.includes(whoLike) + if (checkUser === false) { + saveLikes(countLikes, idPost, whoLike) + btnClick.classList.add('colorLike') + } + + } + }); +} + + +function saveLikes(countLikes, idPost, whoLike) { + const docPost = firebase.firestore().collection("postsList").doc(idPost) + docPost.update({ + likes: firebase.firestore.FieldValue.increment(countLikes), + whoLike: [whoLike] + }) +} + diff --git a/src/views/home.js b/src/views/home.js new file mode 100644 index 00000000..4975e140 --- /dev/null +++ b/src/views/home.js @@ -0,0 +1,145 @@ +import { root } from "../main.js" +import { showP } from "../main.js" +import { editPost, clean, deletePost, counter } from "./functionsFeed.js" + + +// //Muestra TODOS los posts en tiempo real +export function showPosts() { + + let header = ` +
+
+ + +
+
` + const newHeader = document.createElement("header") + newHeader.innerHTML = header + root.innerHTML = ''; + root.appendChild(newHeader) + //Firebase + firebase.firestore().collection("postsList").orderBy("date", "desc").onSnapshot(snap => { + clean(showP) + snap.forEach(doc => { + // Primer template CON ILUSTRACIÓN + if (doc.data().img != undefined) { + let renderPosts = + `
+
+
+
+
+ +
+
+
+
+
+
+ +
+

Template 1 ${doc.data().user}

+

${doc.data().title}

+

${doc.data().text}

+
+ +
${doc.data().likes}
+
+ + + + +
+
+
+
` + const newNode = document.createElement("div") + newNode.innerHTML = renderPosts + showP.appendChild(newNode) + } else { + //SEGUNDO template SIN ILUSTRACIÓN + let renderPosts = + `
+
+
+
+
+ +
+

Template 2 ${doc.data().user}

+

${doc.data().title}

+

${doc.data().text}

+
+ +
${doc.data().likes}
+
+ + + + +
+
+
+
` + const newNode = document.createElement("div") + newNode.innerHTML = renderPosts + showP.appendChild(newNode) + } + }) + const btnsEditPost = document.querySelectorAll(".btnEdit") + btnsEditPost.forEach(btnEditPost => btnEditPost.addEventListener("click", editPost)) + + const btnsDelete = document.querySelectorAll(".btnDelete") + btnsDelete.forEach(btnDelete => btnDelete.addEventListener("click", deletePost)) + + + + //LIKES + let btnLike = document.querySelectorAll('.btnLike') + //console.log(btnLike); + let btnClick = btnLike[btnLike.length - 1] + //console.log(btnClick); + + btnClick.addEventListener('click', counter) + } + ) + + + + + + // Antes de poner el nuevo post limpia la sectionPost para evitar se dupliquen + + + // HEADER +} \ No newline at end of file diff --git a/src/views/login.js b/src/views/login.js new file mode 100644 index 00000000..2fec35b1 --- /dev/null +++ b/src/views/login.js @@ -0,0 +1,67 @@ +export default () => { + const viewLogin = ` +
+
+
+

Iniciar Sesión

+
+
+ + + + +
+
+ + + + +
+ + +

O accede con:

+ +
+ +
+ +
+ + +
+ + + +
+
+ + + + + ` + return viewLogin +} + + diff --git a/src/views/post.js b/src/views/post.js new file mode 100644 index 00000000..958d46cc --- /dev/null +++ b/src/views/post.js @@ -0,0 +1,148 @@ +import { root } from "../main.js"; +// import {renderHomeView} from "./home.js"; +import { showPosts } from "./home.js"; + +//Esto dibuja la vista donde se puede agregar un post + +//let db = firebase.firestore(); +export const renderPostView = () => { + const posts = + `
+
+

Escribe tu microcuento:

+

Titulo:

+ + +
+ +
+ +
+ +
+ +
+ +
+
` + root.innerHTML = posts + //Nodos Imagen + const fileInput = document.querySelector("#file") + const sectionPosts = document.querySelector("#putPosts") + //Nodos publicación + + const newPost = document.querySelector("#newPost") + newPost.addEventListener('click', readText) + + readFile(fileInput, sectionPosts) + + //showPosts(sectionPosts) +} + +function readFile(fileInput, sectionPosts) { + let url + fileInput.onchange = (e) => { + console.log(e); + let file = e.target.files[0] + console.log(file); + firebase.storage().ref("postsList").child(file.name).put(file) + .then(snap => { + console.log(snap); + return snap.ref.getDownloadURL() + }) + .then(link => { + url = link + console.log(url); + const img = document.createElement('img') + img.src = url + sectionPosts.appendChild(img) + textImage() + }) + .catch(err => { + alert("Error:", err); + }) + } + function textImage() { + const text = document.querySelector('#body').value + const title = document.querySelector("#title").value + firebase.auth().onAuthStateChanged(function (user) { + //console.log(user); + const docRef = db.collection('datausers/').doc(user.uid); + docRef.get().then(function (snapshot) { + let userData = snapshot.data(); + console.log(userData); + let post = { + title: title, + text: text, + user: user.displayName, + photo: user.photoURL, + date: new Date(), + img: url, + uid: userData.uid + } + addNewPost(post) + .then(res => { + console.log(res) + }) + .catch(err => { + console.log("No hay nuevo post", err) + }) + addPostBD(post) + }) + }) + } + + function readText() { + const text = document.querySelector('#body').value + const title = document.querySelector("#title").value + firebase.auth().onAuthStateChanged(function (user) { + //console.log(user); + const docRef = db.collection('datausers/').doc(user.uid); + docRef.get().then(function (snapshot) { + let userData = snapshot.data(); + console.log(userData); + let post = { + title: title, + text: text, + user: user.displayName, + photo: user.photoURL, + date: new Date(), + uid: userData.uid + } + addNewPost(post) + .then(res => { + console.log(res) + }) + .catch(err => { + console.log("No hay nuevo post", err) + }) + addPostBD(post) + showPosts() + }) + }) + }; + + // Se agrega el post a la collección postsList en la BD + function addNewPost(post) { + return firebase.firestore().collection("postsList").add(post) + } + + // Se agregan los post al perfil del usuario + function addPostBD(post) { + let user = firebase.auth().currentUser; + const docRef = firebase.firestore().collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario + docRef.update({ + post: firebase.firestore.FieldValue.arrayUnion(post) + }) + } +} \ No newline at end of file diff --git a/src/views/postDetail.js b/src/views/postDetail.js new file mode 100644 index 00000000..c1d28a25 --- /dev/null +++ b/src/views/postDetail.js @@ -0,0 +1,17 @@ +const postDetail = ` +` \ No newline at end of file diff --git a/src/views/principal.js b/src/views/principal.js new file mode 100644 index 00000000..3a6d3485 --- /dev/null +++ b/src/views/principal.js @@ -0,0 +1,7 @@ +export default () => { + const principal = ` + + + ` + return principal +} \ No newline at end of file diff --git a/src/views/profile.js b/src/views/profile.js new file mode 100644 index 00000000..6192ee3b --- /dev/null +++ b/src/views/profile.js @@ -0,0 +1,155 @@ +import { root } from "../main.js"; +//import { userObserver } from '/index.js' + +const db = firebase.firestore(); + +export function userObserverProfile() { + firebase.auth().onAuthStateChanged(function (user) { + if (user) { + const docRef = db.collection('datausers/').doc(user.uid); + docRef.get().then(function (snapshot) { + let myData = snapshot.data(); + console.log(myData); + root.innerHTML = renderProfileView(myData) + edit() + + }) + } else { + // No user is signed in. + console.log('No user'); + } + + }); + +} + +export function renderProfileView(myData) { + //console.log(myData); + if (myData) { + const profile = + ` + +

Mi perfil

+ + +

${myData.name}

+

${myData.email}

+
+ + + + + + + +` + return profile + } + +} + + + +function edit() { + //Listeners modal + const btnCloseChange = document.querySelector('#btnCloseChange'); + btnCloseChange.addEventListener('click', closeChange); + const saveChange = document.querySelector('#saveChange'); + function closeChange() { + saveChange.classList.remove('is-active'); + } + + //Listeners Editar Perfil + let btnEditProfile = document.querySelector('#editProfile') + let btnSaveProfile = document.querySelector('#saveProfile') + btnEditProfile.addEventListener('click', editProfile) + btnSaveProfile.addEventListener('click', saveProfile) + //console.log(userObserver) + + + function editProfile() { + let nameProfile = document.querySelector('#nameProfile').contentEditable = 'true' + let emailProfile = document.querySelector('#emailProfile').contentEditable = 'true' + let photoProfile = document.querySelector('#photoProfile').contentEditable = 'true' + + //console.log(text.innerHTML) + btnSaveProfile.classList.add('active'); + interestsProfile.classList.add('active'); + + + } + + function saveProfile() { + let divInterest = document.querySelector('#interest') + let nameProfile = document.querySelector('#nameProfile') + let emailProfile = document.querySelector('#emailProfile') + let photoProfile = document.querySelector('#photoProfile') + let textareaInterest = document.querySelector('#interestsProfile') + let interestsProfile = textareaInterest.value + divInterest.innerHTML = interestsProfile + + //console.log(nameProfile.innerHTML) + //console.log(emailProfile.innerHTML) + let newNameProfile = nameProfile.innerHTML + let newEmailProfile = emailProfile.innerHTML + + btnSaveProfile.classList.remove('active'); + textareaInterest.classList.remove('active'); + if (btnSaveProfile.classList != 'active') { + nameProfile.contentEditable = 'false' + emailProfile.contentEditable = 'false' + } + + saveProfileBD(newNameProfile, newEmailProfile, interestsProfile) + + } + /* function profileUpdate(newNameProfile, newEmailProfile) { + + console.log(user); + + user.updateProfile({ + displayName: newNameProfile, + //photoURL: photoProfile, + email: newEmailProfile + + }).then(function () { + console.log('los dtos se actualizaron'); + saveProfileBD(user) + + // Update successful. + }).catch(function (error) { + // An error happened. + console.log(error); + + }); + } */ + function saveProfileBD(newNameProfile, newEmailProfile, interestsProfile) { + let user = firebase.auth().currentUser; + const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario + docRef.set({ + name: newNameProfile, + email: newEmailProfile, + interests: interestsProfile, + //password: newPassword, + uid: user.uid + }) + .then(function () { + saveChange.classList.add('is-active'); + console.log('Los datos se guardaron'); + }) + .catch(function (error) { + console.log('Hubo en error:', error); + }) + } + + +} diff --git a/src/views/signIn.js b/src/views/signIn.js new file mode 100644 index 00000000..0d00fb55 --- /dev/null +++ b/src/views/signIn.js @@ -0,0 +1,80 @@ +export default () => { + const viewSignIn = ` +
+
+
+

Crea una cuenta

+
+
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +

O accede con:

+
+ + +
+ +
+
+ + + + + + + + ` + return viewSignIn +} \ No newline at end of file diff --git a/src/views/viewcontroler.js b/src/views/viewcontroler.js new file mode 100644 index 00000000..9ba37ad8 --- /dev/null +++ b/src/views/viewcontroler.js @@ -0,0 +1,15 @@ +import { components } from '../index.js' +import { root } from "../main.js"; +// Funcion que cambia la vista +// export const changeView = (route) => { +// root.innerHTML = ''; +// switch (route) { +// case '#/Home': { return root.appendChild(components.home); } +// // case '#/Post': { return root.appendChild(components.post); } +// case '#/My_profile': { return root.appendChild(components.profile); } +// case '#/Exit': { return root.appendChild(components.exit); } +// default: +// break; +// } +// console.log(route); +// }; \ No newline at end of file diff --git a/storage.rules b/storage.rules new file mode 100644 index 00000000..d494542e --- /dev/null +++ b/storage.rules @@ -0,0 +1,7 @@ +service firebase.storage { + match /b/{bucket}/o { + match /{allPaths=**} { + allow read, write: if request.auth!=null; + } + } +}