Readme

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

package.json

@@ -41,5 +41,8 @@
     "createdAt": "2023-06-06T21:37:46.504Z",
     "version": "6.3.0",
     "commit": "a942adeb868f1fe54b86e34cc4fc4ddb0601700d"
+  },
+  "dependencies": {
+    "firebase": "^10.1.0"
   }
-}
+}

src/components/firebase.js

@@ -0,0 +1,48 @@
+import { initializeApp } from 'firebase/app';
+import {
+  getFirestore,
+  collection,
+  addDoc,
+  getDocs,
+  deleteDoc,
+  doc,
+  getDoc,
+  // signOut,
+} from 'firebase/firestore';
+import {
+  getAuth,
+  signInWithPopup,
+  GoogleAuthProvider,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+} from 'firebase/auth';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyDhmNVMP2orY3iOmOT6DdaVABzLyzydVLY',
+  authDomain: 'redis-ccc00.firebaseapp.com',
+  projectId: 'redis-ccc00',
+  storageBucket: 'redis-ccc00.appspot.com',
+  messagingSenderId: '718676390172',
+  appId: '1:718676390172:web:516edc445106e832a98ad9',
+  measurementId: 'G-JQF50P4QXX',
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+const provider = new GoogleAuthProvider();
+const auth = getAuth(app);
+
+export const createCountEmailPassword = (email, password) =>
+  createUserWithEmailAndPassword(auth, email, password);
+
+export const googleLogin = () => signInWithPopup(auth, provider);
+export const savePosts = (post, correo) => addDoc(collection(db, 'posts'), { post, correo });
+export const getPosts = () => getDocs(collection(db, 'posts'));
+export const getCurrentUser = () => auth.currentUser;
+export const deletePost = (id) => deleteDoc(doc(db, 'posts', id));
+
+export const singInEmailPass = (email, password) =>
+  signInWithEmailAndPassword(auth, email, password);
+
+export const getPost = (id) => getDoc(doc(db, 'posts', id));

src/components/signIn.js

@@ -0,0 +1,108 @@
+import { googleLogin, singInEmailPass } from './firebase';
+
+export const signIn = (onNavigate) => {
+  // Se crean los elementos de HTML
+
+  const signInDiv = document.createElement('div');
+  signInDiv.classList.add('signInDiv');
+  const imgContainer = document.createElement('div');
+  imgContainer.classList.add('imgContainer');
+  const imageSignIn = document.createElement('img');
+  imageSignIn.classList.add('imageSignIn');
+  imageSignIn.src = '../image/imagesignIn.jpg';
+  const imageGoogle = document.createElement('img');
+  imageGoogle.classList.add('imageGoogle');
+  imageGoogle.src = '../image/btn-jpeg.jpg';
+
+  // se crea un select para almacenar el formulario
+  const formSignIn = document.createElement('form');
+  formSignIn.classList.add('formSignIn');
+  const description = document.createElement('h1');
+  description.classList.add('description');
+  const sentence = document.createElement('p');
+  sentence.classList.add('sentence');
+
+  const email = document.createElement('input');
+  email.classList.add('email');
+  const password = document.createElement('input');
+  password.classList.add('password');
+  password.setAttribute('type', 'password');
+  const signInButton = document.createElement('button');
+  signInButton.classList.add('signInButton');
+  const googleButton = document.createElement('button');
+  googleButton.classList.add('googleButton');
+  const dontYouHaveAnAccount = document.createElement('p');
+  dontYouHaveAnAccount.classList.add('dontYouHaveAnAccount');
+  const signUpButton = document.createElement('button');
+  signUpButton.classList.add('signUpButtonInicio');
+
+  // Se inserta el nombre a los elementos creados
+  description.textContent =
+    '¡Únete a nuestra red de apoyo y reduce el derroche alimentario!';
+  sentence.textContent =
+    'Somos una comunidad donde encontrarás personas con quien podrás intercambiar alimentos desde canasta básica a totalmente elaborados para evitar el desperdicio.';
+  email.placeholder = 'Correo Electrónico';
+  password.placeholder = 'Contraseña';
+  signInButton.textContent = 'Inicia sesión';
+  googleButton.textContent = 'Google';
+  dontYouHaveAnAccount.textContent = '¿No tienes una cuenta?';
+  signUpButton.textContent = 'Registrate';
+
+  formSignIn.addEventListener('submit', (e) => {
+    e.preventDefault();
+  });
+
+  signInButton.addEventListener('click', () => {
+    singInEmailPass(email.value, password.value)
+      .then(() => {
+        onNavigate('/wall');
+        console.log(singInEmailPass);
+      })
+      .catch((error) => {
+        if (error.code === 'auth/wrong-password') {
+          alert('La contraseña es invalida');
+        } else if (error.code === 'auth/user-not-found') {
+          alert('El usario es invalido');
+        } else {
+          alert(error.message);
+        }
+      });
+  });
+
+  googleButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    googleLogin()
+      .then((result) => {
+        onNavigate('/wall');
+        const user = result.user;
+        console.log(user);
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        alert(error.message);
+        console.log(errorMessage);
+        console.log(errorCode);
+      });
+  });
+  signUpButton.addEventListener('click', () => {
+    onNavigate('/signup');
+  });
+
+  // Se insertan los hijos
+
+  formSignIn.appendChild(email);
+  formSignIn.appendChild(password);
+  formSignIn.appendChild(signInButton);
+  formSignIn.appendChild(googleButton);
+  googleButton.appendChild(imageGoogle);
+  formSignIn.appendChild(dontYouHaveAnAccount);
+  formSignIn.appendChild(signUpButton);
+  imgContainer.appendChild(imageSignIn);
+  signInDiv.appendChild(imgContainer);
+  signInDiv.appendChild(description);
+  signInDiv.appendChild(sentence);
+  signInDiv.appendChild(formSignIn);
+  console.log(formSignIn);
+  return signInDiv;
+};

src/components/signUp.js

@@ -0,0 +1,75 @@
+import { createCountEmailPassword } from './firebase';
+
+export const signUp = (onNavigate) => {
+  const singUpDiv = document.createElement('div');
+  singUpDiv.classList.add('signUpDiv');
+  const signUpButton = document.createElement('button');
+  signUpButton.classList.add('signUpButton');
+  const backToLogin = document.createElement('button');
+  backToLogin.classList.add('backToLogin');
+  const signUpText = document.createElement('h3');
+  signUpText.classList.add('signUpText');
+  const usersName = document.createElement('input');
+  usersName.classList.add('usersName');
+  const usersEmail = document.createElement('input');
+  usersEmail.classList.add('usersEmail');
+  const usersPassword = document.createElement('input');
+  usersPassword.classList.add('usersPassword');
+  const termsCheckbox = document.createElement('input');
+  termsCheckbox.classList.add('termsCheckbox');
+  const termsText = document.createElement('p');
+  termsText.classList.add('termsText');
+  const doYouHaveAnAccount = document.createElement('p');
+  doYouHaveAnAccount.classList.add('doYouHaveAnAccount');
+  const imageSignUp = document.createElement('img');
+  imageSignUp.classList.add('imageSignUp');
+  imageSignUp.src = ('../image/imageninicio.jpg');
+
+  doYouHaveAnAccount.textContent = '¿Ya tienes una cuenta?';
+  termsText.textContent =
+    'Acepto Términos, Condiciones y política de Privacidad';
+  termsCheckbox.type = 'checkbox';
+  signUpText.textContent = '¡Regístrate!';
+  usersName.placeholder = 'Nombre y Apellidos';
+  usersEmail.placeholder = 'Correo Electrónico';
+  usersPassword.placeholder = 'Contraseña';
+  signUpButton.textContent = 'Crear cuenta';
+  backToLogin.textContent = 'Inicia sesión';
+
+  backToLogin.addEventListener('click', () => {
+    onNavigate('/');
+  });
+  signUpButton.addEventListener('click', () => {
+    createCountEmailPassword(usersEmail.value, usersPassword.value)
+      .then(() => {
+        onNavigate('/wall');
+        console.log(usersEmail.value);
+        console.log(usersPassword.value);
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        // const errorMessage = error.message;
+        if (errorCode === 'auth/email-already-in-use') {
+          alert('Ya existe una cuenta con ese correo');
+        } else if (errorCode === 'auth/invalid-email') {
+          alert('Ingresa un correo electrónico válido');
+        } else if (errorCode === 'auth/weak-password') {
+          alert('Ingresa una constraseña de al menos 6 caracteres');
+        } else if (errorCode) {
+          alert('Algo salió mal');
+        }
+      });
+  });
+  singUpDiv.appendChild(imageSignUp);
+  singUpDiv.appendChild(signUpText);
+  singUpDiv.appendChild(usersName);
+  singUpDiv.appendChild(usersEmail);
+  singUpDiv.appendChild(usersPassword);
+  singUpDiv.appendChild(termsText);
+  termsText.appendChild(termsCheckbox);
+
+  singUpDiv.appendChild(signUpButton);
+  singUpDiv.appendChild(doYouHaveAnAccount);
+  singUpDiv.appendChild(backToLogin);
+  return singUpDiv;
+};

src/components/wall.js

@@ -0,0 +1,106 @@
+import {
+  savePosts,
+  getPosts,
+  getCurrentUser,
+  deletePost,
+  getPost,
+} from './firebase.js';
+
+export const wall = (onNavigate) => {
+  const wallDiv = document.createElement('div');
+  const allPosts = document.createElement('form');
+  const containerPosts = document.createElement('div');
+  containerPosts.classList.add('containerPosts');
+  const signOutButton = document.createElement('button');
+  signOutButton.classList.add('signOutButton');
+  const postButton = document.createElement('button');
+  postButton.classList.add('postButton');
+  const post = document.createElement('textarea');
+  post.classList.add('post');
+  allPosts.classList.add('allPosts');
+  const header = document.createElement('header');
+  header.classList.add('header');
+  const logo = document.createElement('img');
+  logo.classList.add('logo');
+  logo.src = '../image/unnamed.png';
+
+  post.placeholder = '¿Qué vas hay de comer hoy?';
+  post.rows = '4';
+  postButton.textContent = 'Publicar';
+  signOutButton.textContent = 'Cerrar sesión';
+
+  allPosts.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const user = getCurrentUser();
+    savePosts(post.value, user.email).then(() => {
+      allPosts.reset();
+      window.location.reload();
+      console.log(allPosts);
+    });
+  });
+  getPosts().then((posts) => {
+    posts.forEach((doc) => {
+      const data = doc.data();
+      const user = getCurrentUser();
+
+      if (data.correo === user.email) {
+        containerPosts.innerHTML += `
+        <div class = 'card1'>
+        ${data.correo}   </div>
+
+        <div class = 'card'>
+        <p>${data.post}<p>
+        <button class = 'btn-delete' data-id='${doc.id}'> Eliminar </button>
+
+        </div>
+        `;
+      } else {
+        containerPosts.innerHTML += `
+        <div class = 'card1'>
+        ${data.correo} </div>
+
+        <div class = 'card'>
+        <p>${data.post}<p>
+        </div>
+        `;
+        console.log(user.email);
+      }
+
+      const btnsDelete = containerPosts.querySelectorAll('.btn-delete');
+
+      btnsDelete.forEach((btn) => {
+        btn.addEventListener('click', ({ target: { dataset } }) => {
+          deletePost(dataset.id).then(() => {
+            window.location.reload();
+          });
+        });
+      });
+      const btnEdit = containerPosts.querySelectorAll('.btn-edit');
+      btnEdit.forEach((btn) => {
+        btn.addEventListener('click', ({ target: { dataset } }) => {
+          getPost(dataset.id).then(() => {
+            post.value = data.post;
+            console.log(data);
+          });
+        });
+      });
+      // console.log(btnsDelete);
+      // console.log(data);
+    });
+    // console.log(posts);
+  });
+
+  signOutButton.addEventListener('click', () => {
+    onNavigate('/');
+  });
+
+  header.appendChild(logo);
+  wallDiv.appendChild(header);
+
+  allPosts.append(post, postButton);
+  wallDiv.appendChild(allPosts);
+  wallDiv.appendChild(containerPosts);
+  wallDiv.appendChild(signOutButton);
+
+  return wallDiv;
+};

src/index.html

@@ -4,9 +4,16 @@
   <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>Social Network</title>
+  <link rel="stylesheet" href="style.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=Della+Respira&family=Poppins&display=swap" rel="stylesheet">
 </head>
 <body>
+
   <script type="module" src="main.js"></script>
+
+  <div id="root"></div>
 </body>
 </html>

src/lib/index.js → src/lib/firebase.js

@@ -1,4 +1,4 @@
-// aqui exportaras las funciones que necesites
+// aqui exportaras las funciones o metodos que interactuan y tienen un proposito
 
 export const myFunction = () => {
   // aqui tu codigo