- - * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) - * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -
- - * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) - * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -
- - * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) - * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) - * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) -
- - * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - * [Flexbox Froggy](https://flexboxfroggy.com/#es) - * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -
- - * [A Complete Guide to Grid - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) - * [Grids - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) -
- - * [CSS media queries - MDN](https://developer.mozilla.org/es/docs/CSS/Media_queries) -
- - * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) - * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) - * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) - * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -
- - * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -
- - * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) - * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals) -
- - * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) - * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) - * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) - * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) -
- - * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) -
- - * [Tests de código asincrónico con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/asynchronous) -
- - * [Manual Mocks con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/manual-mocks) -
- - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -
- - * [Primeros pasos con Firebase Authentication en sitios web - Documentación oficial](https://firebase.google.com/docs/auth/web/start?hl=es) - * [Administra usuarios en Firebase (onAuthStateChanged)](https://firebase.google.com/docs/auth/web/manage-users?hl=es#get_the_currently_signed-in_user) -
- - * [Firestore - Documentación oficial](https://firebase.google.com/docs/firestore?hl=es) - * [Reglas de seguridad de Firestore - Documentación oficial](https://firebase.google.com/docs/rules?hl=es) - * [Obtén actualizaciones en tiempo real con Cloud Firestore - Documentación oficial](https://firebase.google.com/docs/firestore/query-data/listen?hl=es) -
- - * [Presentando JSX - Documentación oficial](https://es.reactjs.org/docs/introducing-jsx.html) -
- - * [Componentes y propiedades - Documentación oficial](https://es.reactjs.org/docs/components-and-props.html) -
- - * [Manejando eventos - Documentación oficial](https://es.reactjs.org/docs/handling-events.html) -
- - * [Listas y keys - Documentación oficial](https://es.reactjs.org/docs/lists-and-keys.html) -
- - * [Renderizado condicional - Documentación oficial](https://es.reactjs.org/docs/conditional-rendering.html) -
- - * [Levantando el estado - Documentación oficial](https://es.reactjs.org/docs/lifting-state-up.html) -
- - * [Presentando Hooks - Documentación oficial](https://es.reactjs.org/docs/hooks-intro.html) -
- - * [Adding a CSS Modules Stylesheet - Documentación de Create React App (en inglés)](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/) -
- - * [Quick Start - Documentación oficial (en inglés)](https://reactrouter.com/web/guides/quick-start) -
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 0% | +0/5 | +0% | +0/2 | +0% | +0/1 | +0% | +0/5 | +
| src/Vistas | +
+
+ |
+ 0% | +0/29 | +100% | +0/0 | +0% | +0/9 | +0% | +0/29 | +
| src/components | +
+
+ |
+ 50% | +2/4 | +100% | +0/0 | +50% | +1/2 | +50% | +2/4 | +
| src/firebase | +
+
+ |
+ 44% | +11/25 | +0% | +0/2 | +0% | +0/6 | +55% | +11/20 | +
| src/routes | +
+
+ |
+ 27.27% | +3/11 | +100% | +0/0 | +25% | +1/4 | +27.27% | +3/11 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| wall.jsx | +
+
+ |
+ 0% | +0/17 | +100% | +0/0 | +0% | +0/6 | +0% | +0/17 | +
| wallForm.jsx | +
+
+ |
+ 0% | +0/12 | +100% | +0/0 | +0% | +0/3 | +0% | +0/12 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import Header from "../components/header";
+import Buttonclose from "../components/buttonclose";
+import Wallform from "./wallForm";
+import './wall.css';
+import { db } from "../firebase/firebaseConfig";
+import { addDoc, collection, getDocs } from "firebase/firestore";
+import React, { useEffect, useState } from "react";
+
+
+export default function Wall() {
+
+ // useState es un Hook que te permite añadir el estado de React a un componente de función.
+
+
+
+ const saveNote = async (title, description) => {
+ //el metodo adddoc() agrega un identificador, quiero guardar un objeto documento en la collecion
+ await addDoc(collection(db, 'notes'), title, description);
+ console.log("guardado");
+ }
+
+
+ const [listNote, setListNote] = useState([])
+
+ const getList = async() => {
+ try {
+ const querySnapshot = await getDocs(collection(db, 'notes'))
+ const docs = [];
+ querySnapshot.forEach((doc)=> {
+ docs.push({...doc.data(), id:doc.id})
+ })
+ setListNote(docs)
+ }catch (error){
+ console.log(error)
+ }
+ };
+
+// funcion renderizar contenido de nota y titulo
+ useEffect(()=>{
+ getList()
+ console.log('veamos')
+ },[]);
+
+ return (
+ <div id="wall">
+ <Header />
+ <Buttonclose />
+ <div id="wallinwall">
+ <Wallform saveNote={saveNote} />
+ <div className="divWall" id="divWall">
+ </div></div>
+
+ <div className="notessaved">
+ <div className="note-body">
+ {
+ listNote.map(list => (
+ <div className="notita"
+ key= {`div${list.id}`}>
+ <h2 className="title">{list.title}</h2>
+ <p className="description">{list.description}</p>
+ {/* <div className="buttons">
+ <button className="buttonDelete">Eliminar</button>
+ <button className="buttonEdit">Editar</button>
+ </div> */}
+ </div>
+ ))
+ }
+ </div>
+
+ </div>
+ </div>
+ )
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, {useEffect, useState} from "react";
+import './wall.css';
+export default function Wallform(props) {
+
+ const initialNote = {
+ title: '',
+ description: ''
+ }
+// variables de estado
+ const [values, setValues] = useState(initialNote)
+
+
+
+ //actualiza el form
+ const handleSubmit = e => {
+ e.preventDefault();
+ props.saveNote(values);
+ setValues({ ...initialNote })
+ }
+
+ //recoge los datos de los imputs
+ const handleInputChange = e => {
+ e.preventDefault();
+ const { name, value } = e.target;
+ //copia los valores ingresados, reconoce el name y coloca el valor
+ setValues({ ...values, [name]: value });
+ }
+
+
+ const Wallform = {
+
+ };
+
+ return (
+ <>
+ <form id="wallform" onSubmit={handleSubmit}>
+ <label>Titulo:</label>
+ <input type="text" className="noteTitle" name="title" placeholder="titulo" onChange={handleInputChange} value={values.title}></input>
+ <textarea className="noteDescription" name="description" rows="10" placeholder="deja tu nota" onChange={handleInputChange} value={values.description}></textarea>
+ <button className="buttonSave">Guardar</button>
+ </form>
+ </>
+ );
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 | + + + + + + + + | import "./buttonclose.css" +export default function Buttonclose() { + const buttonclose= { + }; + + return ( + <button className="buttonclose">Cerrar sesion</button> + ) + } |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 | + +2x + +2x + + + + + | import "./header.css"
+export default function Header() {
+ const header= {
+ };
+ return (
+ <div id="header">
+ <h1>Notes-blog</h1>
+ </div>
+ )
+ } |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| buttonclose.jsx | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
| header.jsx | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | + + + + + + + + + + + + + + + | import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+ const error = useRouteError();
+ console.error(error);
+
+ return (
+ <div id="error-page">
+ <h1>Oops!</h1>
+ <p>Sorry</p>
+ <p>
+ <i>{error.statusText || error.message}</i>
+ </p>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 | + + + + + + + +1x + + + + + + + +1x +1x +1x +1x +1x + + + + + + + + + + + + + +1x + + + + + + + + + +1x + + +1x +1x + + +1x + + + + + + + + + + + + + + | // Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
+import {
+ getFirestore, collection, addDoc,
+ onSnapshot, deleteDoc, doc, getDoc, updateDoc,
+} from 'firebase/firestore';
+
+const firebaseConfig = {
+ apiKey: "AIzaSyCuz7-FN58Pn8dasCs058aGhGATI00c0nA",
+ authDomain: "notesblog.firebaseapp.com",
+ projectId: "notesblog",
+ storageBucket: "notesblog.appspot.com",
+ messagingSenderId: "1084781009327",
+ appId: "1:1084781009327:web:f89db1fefbac1cc0ecb75a"
+ };
+ export const app = initializeApp(firebaseConfig);
+ export const auth = getAuth (app);
+ export const provider = new GoogleAuthProvider();
+ export const googlePopUp = () => signInWithPopup(auth, provider);
+ export const loginWithGoogle = () => {
+
+ const auth = getAuth();
+ const user = auth.currentUser;
+if (user !== null) {
+ const displayNameUser = user.displayName;
+ const emailUser = user.email;
+ const uid = user.uid;
+ console.log("usuario ingresado: ", emailUser)
+ console.log("usuario display: ", displayNameUser)
+}
+ return googlePopUp();
+};
+
+export const db = getFirestore(app);
+ // datos strings
+// se envia la funcion de guardar tarea
+// el metodo adddoc() agrega un identificador,
+// quiero guardar un objeto documento en la collecion tarea
+
+
+
+//export const saveNote = (title, description) => addDoc(collection(db, 'notes'), { title, description });
+// onsnapshot va escuchando, cuando ocurra un cambio como traerlo
+export const onGetNote = (callback) => onSnapshot(collection(db, 'notes'), callback);
+// el metodo deletedoc elimina el documento
+// delete recibe dos parametros la conexion de la base de datos y el id
+export const deleteNote = (id) => deleteDoc(doc(db, 'notes', id));
+export const getNote = (id) => getDoc(doc(db, 'notes', id));
+// actualiza los datos del documento nuevos campos
+// el metodo uodateDoc sobreescribe parte del documento
+export const updateNote = (id, newFields) => updateDoc(doc(db, 'notes', id), newFields);
+
+ // Initialize Firebase
+
+ // signOut(auth).then(() => { esto es para signOut (colocar en el import de auth)
+ // Sign-out successful.
+ // }).catch((error) => {
+ // An error happened.
+ // });
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| firebaseConfig.js | +
+
+ |
+ 44% | +11/25 | +0% | +0/2 | +0% | +0/6 | +55% | +11/20 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| error-page.jsx | +
+
+ |
+ 0% | +0/3 | +0% | +0/2 | +0% | +0/1 | +0% | +0/3 | +
| main.jsx | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +100% | +0/0 | +0% | +0/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'
+import ReactDOM from 'react-dom/client'
+import Root from "./routes/root";
+import {
+ createBrowserRouter,
+ RouterProvider,
+} from "react-router-dom";
+import './main.css'
+import ErrorPage from "./error-page";
+import Wall from "./Vistas/wall"
+
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: <Root />,
+ errorElement: <ErrorPage />,
+ },
+ {
+ path:'wall/:wallId',
+ element: <Wall/>
+
+ }
+]);
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+ <React.StrictMode>
+ <RouterProvider router={router} />
+ </React.StrictMode>
+); |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| root.jsx | +
+
+ |
+ 27.27% | +3/11 | +100% | +0/0 | +25% | +1/4 | +27.27% | +3/11 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 | + + + + + +2x + +2x + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + | import { useNavigate } from "react-router-dom";
+import { loginWithGoogle } from "../firebase/firebaseConfig";
+import Header from "../components/header";
+import "./root.css"
+
+export default function Root() {
+ const navigate = useNavigate();
+
+ const signInWithGoogle = (e) => {
+ e.preventDefault ()
+ loginWithGoogle().then((res) => {
+
+ const displayNameUser = res.user.displayName;
+ const emailUser = res.user.email;
+ //actualiza un valor si la clave ya existe
+ localStorage.setItem("name", displayNameUser);
+ localStorage.setItem("email", emailUser);
+ navigate("/wall/:wallId");
+ })
+ .catch( console.error )
+ };
+
+ return (
+ <>
+ <Header />
+ <form>
+ <div id="sidebar">
+ <div className="segment">
+ </div>
+ {/* <label> */}
+ <h2>¡No olvides dejar tus notas!</h2>
+ <h2>Ingresa con:</h2>
+ <button className="google" type="submit" onClick={(e)=>signInWithGoogle(e)}>Google</button>
+ {/* </label> */}
+ </div>
+ </form>
+ </>
+ );
+};
+
+
+
+
+
+ |
{list.description}
+Sorry
++ {error.statusText || error.message} +
+