Laboratoria · yaraelzein · Mar 8, 2022 · Mar 8, 2022 · Mar 10, 2022 · Mar 10, 2022
diff --git a/.eslintrc b/.eslintrc
@@ -13,7 +13,8 @@
     "firebase": "readonly"
   },
   "plugins": ["jest"],
-  "parserOptions": {
+    "max-len": [2, 120, 4],
+    "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module"
   },

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "eslint": "eslint --ext .js src/ test/",
     "stylelint": "stylelint --aei src/**/*.css",
     "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
-    "test": "jest --coverage",
+    "test": "jest --env=jsdom --coverage",
     "start": "serve -s src/"
   },
   "devDependencies": {
@@ -34,5 +34,8 @@
   },
   "engines": {
     "node": ">=14"
+  },
+  "dependencies": {
+    "firebase": "^9.6.8"
   }
-}
+}
diff --git a/src/img/Banner.png b/src/img/Banner.png
diff --git a/src/img/Delete.png b/src/img/Delete.png
diff --git a/src/img/Edit.png b/src/img/Edit.png
diff --git a/src/img/Footer.png b/src/img/Footer.png
diff --git a/src/img/Icono_Harry.png b/src/img/Icono_Harry.png
diff --git a/src/img/Icono_puerta.png b/src/img/Icono_puerta.png
diff --git a/src/img/Logo Desktop.png b/src/img/Logo Desktop.png
diff --git a/src/img/background.png b/src/img/background.png
diff --git a/src/img/create_post.png b/src/img/create_post.png
diff --git a/src/img/google-button.png b/src/img/google-button.png
diff --git a/src/img/google.png b/src/img/google.png
diff --git a/src/img/hand.png b/src/img/hand.png
diff --git a/src/img/harryLike.png b/src/img/harryLike.png
diff --git a/src/img/like.png b/src/img/like.png
diff --git a/src/img/save.png b/src/img/save.png
diff --git a/src/img/solo_Harry.png b/src/img/solo_Harry.png
diff --git a/src/img/title.png b/src/img/title.png
diff --git a/src/img/warning.png b/src/img/warning.png
diff --git a/src/img/welcome.png b/src/img/welcome.png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,23 @@
 <!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>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The Daily Prophet</title>
+    <link rel="icon" href="img/solo_Harry.png">
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/3485eef86c.js" crossorigin="anonymous"></script>
 </head>
 <body>
-  <script type="module" src="main.js"></script>
+  <main>
+    <section id="container">  
+    </section>
+  </main>
+  <script type="module" src="./lib/firebaseInit.js"></script>
+  <script type="module" src="./main.js"></script>  
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,13 @@
+import Register from './lib/views/register.js';
+import Login from './lib/views/login.js';
+import Daily from './lib/views/daily.js';
+import Error404 from './lib/views/404.js';
+
+const components = {
+  register: Register,
+  login: Login,
+  daily: Daily,
+  error404: Error404,
+};
+
+export { components };
diff --git a/src/lib/firebaseController.js b/src/lib/firebaseController.js
@@ -0,0 +1,126 @@
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithPopup,
+  signInWithEmailAndPassword,
+  onAuthStateChanged,
+  signOut,
+  db,
+  collection,
+  addDoc,
+  getDocs,
+  getDoc,
+  onSnapshot,
+  doc,
+  query,
+  updateDoc,
+  provider,
+  serverTimestamp,
+  orderBy,
+  deleteDoc,
+  arrayUnion, 
+  arrayRemove,
+} from './firebaseInit.js';
+
+//Crear usuario con correo y contraseña
+export const newRegister = (email, password, name) => {
+  const auth = getAuth();
+  return createUserWithEmailAndPassword(auth, email, password, name)
+};
+
+//Registro/ingreso con usuario y contraseña
+export const loginGoogle = () => {
+  const auth = getAuth();
+  return signInWithPopup(auth, provider)
+};
+
+//Ingresar con correo y contraseña
+export const loginWithEmailAndPassword = (email, password) => {
+  const auth = getAuth();
+  return signInWithEmailAndPassword(auth, email, password)
+};
+
+//Observador
+export const watcher = () => {
+  const auth = getAuth();
+  onAuthStateChanged(auth, (user) => {
+    if (user === null || user === undefined) {
+      window.location.hash = '#/login';
+    } else {
+      window.location.hash = '#/daily';
+    }
+  });
+};
+
+//Captar Informacion de Usuario
+export const currentUser = () => {
+  watcher();
+  const auth = getAuth();
+  const user = auth.currentUser;
+  console.log (user);
+  if (user === null || user === undefined) {
+    window.location.hash = '#/login';
+  } else {
+    window.location.hash = '#/daily';
+  }
+  return user;
+};
+
+//Declaracion db para guardar coleccion
+const dbPublications = collection(db, 'posts');
+
+//Crear post
+export const createPost = (postDescription, uidPost, arraylike) => {
+  console.log(postDescription);
+  return addDoc(dbPublications, { postDescription, uidPost, arraylike, postCreatedAt: serverTimestamp(),
+  });
+};
+
+//Obtener documento de 'Posts'
+export const getPost = () => {
+  return getDocs(dbPublications);
+};
+
+//Consulta de publicaciones de manera ordenada
+const orderPost = query(dbPublications, orderBy('postCreatedAt', 'desc'));
+
+//Obtiene los documentos en tiempo real
+export const readAllPost = (querySnapshot) => {
+  //console.log('muestranos: ', onSnapshot(orderPost, dbPublications, querySnapshot));
+  return onSnapshot(orderPost, dbPublications, querySnapshot);
+};
+
+//Borrar documento de la coleccion
+export const deletePost = (id) => {
+  deleteDoc(doc(dbPublications, id))
+};
+
+//Acceder a un post por ID
+export const giveMethePost = (id) => {
+  const docRef = doc(dbPublications, id);
+  const docSnap = getDoc(docRef);
+  return docSnap;
+};
+
+//Actualizar una publicación
+export const updatePost = (id, postDescriptionUpdate) => {
+  updateDoc(doc(dbPublications, id), postDescriptionUpdate);
+};
+
+//Agregar like
+export const likes = (id, userInfoId) => {
+  updateDoc(doc(dbPublications, id), { arraylike: arrayUnion(userInfoId) });
+};
+
+//Quitar like
+export const dislikes = (id, userInfoId) => {
+  updateDoc(doc(dbPublications, id), { arraylike: arrayRemove(userInfoId) });
+};
+
+//Cerrar Sesion
+export const logout = () => {
+  const auth = getAuth();
+  const logOutUser = signOut(auth);
+  return logOutUser;
+};
+
diff --git a/src/lib/firebaseInit.js b/src/lib/firebaseInit.js
@@ -0,0 +1,75 @@
+// Importamos las funciones del Firebase y FireStore
+
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.8/firebase-app.js';
+
+import { 
+  getAuth, 
+  GoogleAuthProvider,  
+  createUserWithEmailAndPassword,
+  signInWithPopup,
+  signInWithEmailAndPassword, 
+  onAuthStateChanged,
+  signOut,
+} from 'https://www.gstatic.com/firebasejs/9.6.8/firebase-auth.js';
+
+import { 
+  getFirestore,
+  collection, 
+  addDoc,
+  getDocs,
+  getDoc,
+  onSnapshot,
+  doc,
+  query,
+  serverTimestamp,
+  orderBy,
+  deleteDoc,
+  updateDoc,
+  arrayUnion, 
+  arrayRemove,
+  } from 'https://www.gstatic.com/firebasejs/9.6.8/firebase-firestore.js'; 
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyBrYZ67zhwpOS_Hfqv6FKtfRXFMNp5W7bY',
+  authDomain: 'thedailyprophet-prueba.firebaseapp.com',
+  projectId: 'thedailyprophet-prueba',
+  storageBucket: 'thedailyprophet-prueba.appspot.com',
+  messagingSenderId: '861904852247',
+  appId: '1:861904852247:web:e43702a3cbba18134a5352',
+};
+
+const app = initializeApp(firebaseConfig);
+console.log(app);
+
+// export const auth = getAuth();
+// console.log(auth);
+
+export const provider = new GoogleAuthProvider();
+console.log(provider);
+
+export const db = getFirestore();
+console.log(db);
+
+export {
+  getAuth, 
+  GoogleAuthProvider,  
+  createUserWithEmailAndPassword,
+  signInWithPopup,
+  signInWithEmailAndPassword, 
+  onAuthStateChanged,
+  signOut,
+  getFirestore,
+  collection, 
+  addDoc,
+  getDocs,
+  getDoc,
+  onSnapshot,
+  doc,
+  query,
+  serverTimestamp,
+  orderBy,
+  deleteDoc,
+  updateDoc,
+  arrayUnion, 
+  arrayRemove,
+  };
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,19 @@
+// importamos todas las vistas, llamamos los templates y exportamos el cambio de ruta
+// import { components } from '../index.js';
+
+const changeRoute = (hash, components) => {
+  const containerRoot = document.getElementById('container');
+  containerRoot.innerHTML = '';
+
+  switch (hash) {
+    case '':
+    { return containerRoot.appendChild(components.register()); }
+    case '#/login':
+    { return containerRoot.appendChild(components.login()); }
+    case '#/daily':
+    { return containerRoot.appendChild(components.daily()); }
+    default:
+    { return containerRoot.appendChild(components.error404()); }
+  }
+};
+export { changeRoute };
diff --git a/src/lib/views/404.js b/src/lib/views/404.js
@@ -0,0 +1,13 @@
+export default () => {
+  const divError = document.createElement('div');
+  divError.setAttribute('class', 'container-div-404');
+  const viewError = `
+      <main>
+      <div class="main__div--tittle">
+      <p>Ups lo siento!</p>
+      </div>
+      </main>
+      `;
+  divError.innerHTML = viewError;
+  return divError;
+};