Laboratoria · MartaHung · Jun 18, 2022 · Jun 20, 2022 · Jun 20, 2022 · Jun 20, 2022
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@
 coverage/
 node_modules/
 .yarn.lock
-package-lock.json
+package-lock.json
+src/firebase/config.js
diff --git a/README.md b/README.md
diff --git a/src/images/deformitoLlorando.png b/src/images/deformitoLlorando.png
diff --git a/src/images/deformitoTierno.png b/src/images/deformitoTierno.png
diff --git a/src/images/deformitoTip.png b/src/images/deformitoTip.png
diff --git a/src/images/deformitoTriste.png b/src/images/deformitoTriste.png
diff --git a/src/images/error.jpg b/src/images/error.jpg
diff --git a/src/images/fondo.jpg b/src/images/fondo.jpg
diff --git a/src/images/home.png b/src/images/home.png
diff --git a/src/images/user.png b/src/images/user.png
diff --git a/src/index.html b/src/index.html
@@ -4,9 +4,13 @@
   <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>
+  <title>Tips para el Adulto Independiente</title>
+  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+  <div id="root"></div>
+  <div id="rootPost"></div>
+
   <script type="module" src="main.js"></script>
 </body>
-</html>
+</html>
diff --git a/src/lib/firebase/auth.js b/src/lib/firebase/auth.js
@@ -0,0 +1,76 @@
+import {
+  auth,
+  provider,
+  signInWithPopup,
+  doc, db,
+  setDoc, getDoc, signOut
+} from "./init.js";
+
+
+export const loginGoogle = () => {
+
+	const btnGoogle = document.querySelector('.logIn');
+	btnGoogle.addEventListener('click', (event) => {
+		event.preventDefault();
+
+    loginWithGoogle();
+	});
+};
+
+
+
+export const loginWithGoogle = () => {
+  signInWithPopup(auth, provider)
+  .then((result) => {
+    // This gives you a Google Access Token. You can use it to access the Google API.
+    //const credential = GoogleAuthProvider.credentialFromResult(result);
+    //const token = credential.accessToken;
+    // The signed-in user info.
+    const user = result.user;
+    const userFirestore = setDoc(doc(db, "users", user.uid),{ 
+    name : user.displayName,
+    email: user.email
+  });
+    console.log(user);
+    console.log(userFirestore);
+    window.location.href = "#/feed"; 
+  })
+  .catch((error) => {
+    // Handle Errors here.
+    const errorCode = error.code; 
+    const errorMessage = error.message;
+    // The email of the user's account used.
+    //const email = error.customData.email;
+    // The AuthCredential type that was used.
+    //const credential = GoogleAuthProvider.credentialFromError(error);
+    // ...
+    console.log()
+  });
+
+
+}
+
+
+
+export const logOut = () => {
+  signOut(auth).then(() => {
+    // Sign-out successful.
+    console.log('log out')
+     console.log(currentUser());
+  }).catch((error) => {
+    console.log(error);
+    // An error happened.
+  });
+};
+
+//console.log(logOut(auth));
+
+// export const getUser = async (id) => {
+//   try {
+//     const data = doc(db, 'users', id);
+//     const userData = await getDoc(data);
+//     return userData.data(); 
+//   } catch (err) {
+//     console.log(err);
+//   }
+// };
diff --git a/src/lib/firebase/config.js b/src/lib/firebase/config.js
@@ -0,0 +1,9 @@
+// Your web app's Firebase configuration
+export const firebaseConfig = {
+  apiKey: "AIzaSyBBsF0xI43K_mjmI_NUtb01CE4BApx7u2A",
+  authDomain: "adultoindependiente-4f40c.firebaseapp.com",
+  projectId: "adultoindependiente-4f40c",
+  storageBucket: "adultoindependiente-4f40c.appspot.com",
+  messagingSenderId: "525789460084",
+  appId: "1:525789460084:web:69113ad92df61afaef8321"
+};
diff --git a/src/lib/firebase/firestore.js b/src/lib/firebase/firestore.js
@@ -0,0 +1,32 @@
+//funciones firestore
+import { db, collection, addDoc, onSnapshot, doc, getDoc, deleteDoc, updateDoc } from "./init.js";
+
+
+//Función que guarda los datos del formulario del post en firebase
+export const savePost = ( title, text) => {
+
+    //Agrega un doc a una colección en formato de objeto
+    addDoc(collection(db,'posts'),{title:title, text:text});
+    //console.log(collection(db,'posts'),{autor:autor, title:title, text:text});
+};
+
+
+//obtiene los docs en tiempo real
+export const onGetPost = (callback) => onSnapshot(collection(db, "posts"), callback);
+//console.log(onGetPost());
+
+
+
+export const editPost = (id) => {
+   const postRef = getDoc(doc(db,'posts',id));
+    return postRef;
+}; 
+
+export const deletePost = (id) => {
+    const delDocRef = deleteDoc(doc(db,'posts',id))
+    return delDocRef;
+};
+
+export const updatePost = (id, {title:title, text:text}) => {
+     updateDoc(doc(db,'posts',id), {title:title, text:text});
+}; 
diff --git a/src/lib/firebase/init.js b/src/lib/firebase/init.js
@@ -0,0 +1,30 @@
+
+//Conexión con Firebase
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js'
+//configuracion firebase
+import { firebaseConfig } from './config.js';
+//Importando funciones firebase auth
+import { getAuth, signInWithEmailAndPassword,  signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signOut  } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-auth.js';
+//Importando funciones relacionadas a firestore
+import { getFirestore, collection, getDocs, addDoc,onSnapshot, query, doc, getDoc, deleteDoc, updateDoc, setDoc } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-firestore.js';
+
+
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+//Autenticación
+const auth = getAuth();
+
+//Provider
+const provider = new GoogleAuthProvider();
+
+// Get firestore
+const db = getFirestore(app);
+
+
+
+
+//Exportar funciones firebase-firestore
+export { initializeApp, signInWithEmailAndPassword, auth, signInWithPopup, provider, GoogleAuthProvider, collection, getDocs, addDoc,onSnapshot, query, doc, db, deleteDoc, getDoc, onAuthStateChanged, updateDoc, setDoc, signOut };
+
diff --git a/src/lib/index.js b/src/lib/index.js
diff --git a/src/lib/router.js b/src/lib/router.js
@@ -0,0 +1,25 @@
+import { menuLogin } from './views/templateMenu.js';
+import { feed } from './views/templateFeed.js';
+import { loginGoogle } from './firebase/auth.js';
+
+
+export const changeRoutes = (hash) => {
+   const containerRoot = document.getElementById('root');
+   //containerRoot.innerHTML = "";
+   switch (hash){
+      case '#/menuLogin':
+               containerRoot.appendChild(menuLogin());
+               loginGoogle();
+
+            break;  
+      case '#/feed':
+               containerRoot.appendChild(feed());
+
+            break;
+      default:
+         containerRoot.innerHTML= `<h2> Error (╯°□°）╯︵ ┻━┻ </h2>`
+   };
+};
+
+
+
diff --git a/src/lib/views/templateFeed.js b/src/lib/views/templateFeed.js
@@ -0,0 +1,134 @@
+import { logOut } from "../firebase/auth.js";
+import {
+  savePost,
+  deletePost,
+  editPost,
+  onGetPost,
+  updatePost,
+} from "../firebase/firestore.js";
+import { auth } from "../firebase/init.js";
+
+//Muro de la red
+export const feed = () => {
+
+  const divFeed = document.createElement("div");
+  const viewFeed = `<section class="containerForm">
+    <div class="textUser">
+    <img src="./images/user.png" alt="imagenPerfil">
+    <h2> Usuario</h2>
+    <button id="logOutBtn" class="logOutBtn">Cerrar Cesión</button>
+    </div>
+    </section>
+    <section class="containerForm">
+    <form id="postform" class="postform">
+    <label for="postTitle" class="containerForm">
+    <input type="text" name="postTitle" id="postTitle" class="postTitle" placeholder="Tips">
+    </label>
+    <label for="postText" class="containerForm">
+    <textarea type="text" name="postText" id="postText" class="postText" rows="5" placeholder="Comparte tus tips aquí..."></textarea>
+    </label>
+    <div class="containerForm">
+    <button id="postBtn" class="postBtn">Publicar</button>
+    </div>
+    </form>
+    </section>`;
+
+  divFeed.innerHTML = viewFeed;
+
+
+  const userOut = divFeed.querySelector('.logOutBtn');
+  userOut.addEventListener('click', (e) => {
+		e.preventDefault();
+		logOut();
+		window.location.href = '#/';
+	});
+
+
+  let statusPost = '';
+  let idPost ='';
+
+  //Formulario enviado a DOM
+  const postForm = divFeed.querySelector("#postform");
+  postForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+    //llama al input y textarea
+    const title = divFeed.querySelector("#postTitle");
+    const postText = divFeed.querySelector("#postText");
+
+    console.log(title.value);
+
+  statusPost !== true ?  savePost(title.value, postText.value) : updatePost(idPost, {title: title.value, text: postText.value}); 
+
+
+    //Resetea el formulario, lo limpia
+    postForm.reset();
+  });
+
+
+  //crea el post en tiempo real
+  const createPost = async () => {
+    onGetPost((snapShot) => {
+      let card = "";
+
+      const divPost = document.getElementById("rootPost");
+
+      //recorre el array de docs de firebase
+      snapShot.forEach((doc) => {
+        //console.log(doc.data())
+        const docData = doc.data(); //el .data() convierte los objetos firebase a obj JS
+
+        card += `<div class="containerForm"> 
+                 <div class="titlePost">
+
+                 <h3>${docData.title}</h3>
+                 </div>
+                 <div class="textPost">
+                 <p>${docData.text}</p>
+                 </div>
+                 <div>
+                 <button class="btnEdit" data-id="${doc.id}">Editar</button>
+                 <button class="btnDelete" data-id="${doc.id}">Eliminar</button>
+                 </div>
+                 </div>`;
+                 });
+
+        divPost.innerHTML = card;
+
+      const btnsDelete = divPost.querySelectorAll(".btnDelete");
+      btnsDelete.forEach((btn) => {
+        btn.addEventListener("click", (event) => {
+          deletePost(event.target.dataset.id);
+        });
+      });
+
+      const btnsEdit = divPost.querySelectorAll(".btnEdit");
+      btnsEdit.forEach((btn) => {
+        btn.addEventListener("click", async (event) => {
+          const doc = await editPost(event.target.dataset.id);
+
+          const docData = doc.data();
+
+          const title = divFeed.querySelector("#postTitle");
+          const postText = divFeed.querySelector("#postText");
+
+          title.value = docData.title;
+          postText.value = docData.text;
+
+          statusPost = true;
+          idPost = doc.id;
+
+
+
+        });
+      });
+    });
+  };
+
+  //console.log(createPost());
+  createPost();
+
+
+
+
+  return divFeed;
+};
diff --git a/src/lib/views/templateMenu.js b/src/lib/views/templateMenu.js
@@ -0,0 +1,29 @@
+
+//Función que contiene vista del Menu
+export const menuLogin = () => {
+    const divMenuLogin = document.createElement("div");
+    const viewMenuLogin =  `<div class="containerIndex">
+      <div class="tips">
+      <img src="images/deformitoTip.png" width="200px" height="200px">
+      Tips Adulto Independiente
+      </div>
+      <div class="comunity">
+      Únete a la comunidad y 
+      conoce todos los secretos
+      para vivir sol@ antes de los 30
+      </div>
+      <button class="logIn"> 
+     Inicia sesión con google
+      </button>
+      <section class="signUp">
+      <p>
+      ¿No tienes cuenta aún? Regístrate <a href= 3\SCL020-social-network\src\images\error.jpg>aquí.</a>  
+      </p>
+      <img src="images/deformitoTierno.png" width="160px" height="160px"></section>
+      </div>`
+    divMenuLogin.innerHTML = viewMenuLogin;
+    return divMenuLogin;
+
+
+};
+