4 |
5 | */
6 |
7 | .hljs {
8 | display: block;
9 | overflow-x: auto;
10 | padding: 0.5em;
11 | color: #333;
12 | background: #f8f8f8;
13 | -webkit-text-size-adjust: none;
14 | }
15 |
16 | .hljs-comment,
17 | .diff .hljs-header,
18 | .hljs-javadoc {
19 | color: #998;
20 | font-style: italic;
21 | }
22 |
23 | .hljs-keyword,
24 | .css .rule .hljs-keyword,
25 | .hljs-winutils,
26 | .nginx .hljs-title,
27 | .hljs-subst,
28 | .hljs-request,
29 | .hljs-status {
30 | color: #1184CE;
31 | }
32 |
33 | .hljs-number,
34 | .hljs-hexcolor,
35 | .ruby .hljs-constant {
36 | color: #ed225d;
37 | }
38 |
39 | .hljs-string,
40 | .hljs-tag .hljs-value,
41 | .hljs-phpdoc,
42 | .hljs-dartdoc,
43 | .tex .hljs-formula {
44 | color: #ed225d;
45 | }
46 |
47 | .hljs-title,
48 | .hljs-id,
49 | .scss .hljs-preprocessor {
50 | color: #900;
51 | font-weight: bold;
52 | }
53 |
54 | .hljs-list .hljs-keyword,
55 | .hljs-subst {
56 | font-weight: normal;
57 | }
58 |
59 | .hljs-class .hljs-title,
60 | .hljs-type,
61 | .vhdl .hljs-literal,
62 | .tex .hljs-command {
63 | color: #458;
64 | font-weight: bold;
65 | }
66 |
67 | .hljs-tag,
68 | .hljs-tag .hljs-title,
69 | .hljs-rules .hljs-property,
70 | .django .hljs-tag .hljs-keyword {
71 | color: #000080;
72 | font-weight: normal;
73 | }
74 |
75 | .hljs-attribute,
76 | .hljs-variable,
77 | .lisp .hljs-body {
78 | color: #008080;
79 | }
80 |
81 | .hljs-regexp {
82 | color: #009926;
83 | }
84 |
85 | .hljs-symbol,
86 | .ruby .hljs-symbol .hljs-string,
87 | .lisp .hljs-keyword,
88 | .clojure .hljs-keyword,
89 | .scheme .hljs-keyword,
90 | .tex .hljs-special,
91 | .hljs-prompt {
92 | color: #990073;
93 | }
94 |
95 | .hljs-built_in {
96 | color: #0086b3;
97 | }
98 |
99 | .hljs-preprocessor,
100 | .hljs-pragma,
101 | .hljs-pi,
102 | .hljs-doctype,
103 | .hljs-shebang,
104 | .hljs-cdata {
105 | color: #999;
106 | font-weight: bold;
107 | }
108 |
109 | .hljs-deletion {
110 | background: #fdd;
111 | }
112 |
113 | .hljs-addition {
114 | background: #dfd;
115 | }
116 |
117 | .diff .hljs-change {
118 | background: #0086b3;
119 | }
120 |
121 | .hljs-chunk {
122 | color: #aaa;
123 | }
124 |
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/docs/assets/split.css:
--------------------------------------------------------------------------------
1 | .gutter {
2 | background-color: #f5f5f5;
3 | background-repeat: no-repeat;
4 | background-position: 50%;
5 | }
6 |
7 | .gutter.gutter-vertical {
8 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
9 | cursor: ns-resize;
10 | }
11 |
12 | .gutter.gutter-horizontal {
13 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
14 | cursor: ew-resize;
15 | }
16 |
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/docs/assets/style.css:
--------------------------------------------------------------------------------
1 | .documentation {
2 | font-family: Helvetica, sans-serif;
3 | color: #666;
4 | line-height: 1.5;
5 | background: #f5f5f5;
6 | }
7 |
8 | .black {
9 | color: #666;
10 | }
11 |
12 | .bg-white {
13 | background-color: #fff;
14 | }
15 |
16 | h4 {
17 | margin: 20px 0 10px 0;
18 | }
19 |
20 | .documentation h3 {
21 | color: #000;
22 | }
23 |
24 | .border-bottom {
25 | border-color: #ddd;
26 | }
27 |
28 | a {
29 | color: #1184ce;
30 | text-decoration: none;
31 | }
32 |
33 | .documentation a[href]:hover {
34 | text-decoration: underline;
35 | }
36 |
37 | a:hover {
38 | cursor: pointer;
39 | }
40 |
41 | .py1-ul li {
42 | padding: 5px 0;
43 | }
44 |
45 | .max-height-100 {
46 | max-height: 100%;
47 | }
48 |
49 | .height-viewport-100 {
50 | height: 100vh;
51 | }
52 |
53 | section:target h3 {
54 | font-weight: 700;
55 | }
56 |
57 | .documentation td,
58 | .documentation th {
59 | padding: 0.25rem 0.25rem;
60 | }
61 |
62 | h1:hover .anchorjs-link,
63 | h2:hover .anchorjs-link,
64 | h3:hover .anchorjs-link,
65 | h4:hover .anchorjs-link {
66 | opacity: 1;
67 | }
68 |
69 | .fix-3 {
70 | width: 25%;
71 | max-width: 244px;
72 | }
73 |
74 | .fix-3 {
75 | width: 25%;
76 | max-width: 244px;
77 | }
78 |
79 | @media (min-width: 52em) {
80 | .fix-margin-3 {
81 | margin-left: 25%;
82 | }
83 | }
84 |
85 | .pre,
86 | pre,
87 | code,
88 | .code {
89 | font-family: Source Code Pro, Menlo, Consolas, Liberation Mono, monospace;
90 | font-size: 14px;
91 | }
92 |
93 | .fill-light {
94 | background: #f9f9f9;
95 | }
96 |
97 | .width2 {
98 | width: 1rem;
99 | }
100 |
101 | .input {
102 | font-family: inherit;
103 | display: block;
104 | width: 100%;
105 | height: 2rem;
106 | padding: 0.5rem;
107 | margin-bottom: 1rem;
108 | border: 1px solid #ccc;
109 | font-size: 0.875rem;
110 | border-radius: 3px;
111 | box-sizing: border-box;
112 | }
113 |
114 | table {
115 | border-collapse: collapse;
116 | }
117 |
118 | .prose table th,
119 | .prose table td {
120 | text-align: left;
121 | padding: 8px;
122 | border: 1px solid #ddd;
123 | }
124 |
125 | .prose table th:nth-child(1) {
126 | border-right: none;
127 | }
128 | .prose table th:nth-child(2) {
129 | border-left: none;
130 | }
131 |
132 | .prose table {
133 | border: 1px solid #ddd;
134 | }
135 |
136 | .prose-big {
137 | font-size: 18px;
138 | line-height: 30px;
139 | }
140 |
141 | .quiet {
142 | opacity: 0.7;
143 | }
144 |
145 | .minishadow {
146 | box-shadow: 2px 2px 10px #f3f3f3;
147 | }
148 |
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | transform: {
3 | "^.+\\.jsx?$": "babel-jest"
4 | },
5 | testEnvironment: "jsdom"
6 | }
7 |
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "proyecto-final",
3 | "version": "1.0.0",
4 | "description": "Proyecto final curso React JS",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "jest --watchAll",
8 | "lint": "eslint ./src",
9 | "lint:fix": "eslint --fix ./src",
10 | "deploy:dev": "webpack-dev-server --mode development --hot --open --static",
11 | "docs:build": "documentation build src/** -f html -o docs",
12 | "build": "webpack --mode development",
13 | "build:prod": "webpack --mode production",
14 | "deploy:prod": "netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --prod"
15 | },
16 | "keywords": [
17 | "react"
18 | ],
19 | "author": "masajo",
20 | "license": "ISC",
21 | "devDependencies": {
22 | "@babel/cli": "^7.16.0",
23 | "@babel/core": "^7.16.0",
24 | "@babel/plugin-transform-modules-commonjs": "^7.16.0",
25 | "@babel/plugin-transform-runtime": "^7.16.0",
26 | "@babel/preset-env": "^7.16.5",
27 | "@babel/preset-react": "^7.16.0",
28 | "@testing-library/dom": "^8.11.1",
29 | "@testing-library/react": "^12.1.2",
30 | "babel-jest": "^27.4.5",
31 | "babel-loader": "^8.2.3",
32 | "css-loader": "^6.5.0",
33 | "documentation": "^13.2.5",
34 | "eslint": "^7.32.0",
35 | "eslint-config-airbnb": "^18.2.1",
36 | "eslint-loader": "^4.0.2",
37 | "eslint-plugin-import": "^2.25.2",
38 | "eslint-plugin-jsx-a11y": "^6.4.1",
39 | "eslint-plugin-react": "^7.26.1",
40 | "eslint-plugin-react-hooks": "^4.2.0",
41 | "file-loader": "^6.2.0",
42 | "html-webpack-plugin": "^5.5.0",
43 | "jest": "^27.4.5",
44 | "mini-css-extract-plugin": "^2.4.3",
45 | "netlify-cli": "^6.14.16",
46 | "node-sass": "^6.0.1",
47 | "sass-loader": "^12.3.0",
48 | "source-map-loader": "^3.0.0",
49 | "webpack": "^5.61.0",
50 | "webpack-cli": "^4.9.1",
51 | "webpack-dev-server": "^4.4.0"
52 | },
53 | "dependencies": {
54 | "axios": "^0.24.0",
55 | "bootstrap": "^5.1.3",
56 | "react": "^17.0.2",
57 | "react-dom": "^17.0.2",
58 | "react-redux": "^7.2.6",
59 | "react-router-dom": "^5.3.0",
60 | "redux": "^4.1.2",
61 | "redux-saga": "^1.1.3"
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/public/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Open-Bootcamp/React-JS-Avanzado/f421d55bd336e4c9f5efec942a4708b6a918353b/08-13-15-proyecto-final/public/images/favicon.ico
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Proyecto React JS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/src/components/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useEffect } from "react";
3 | import Tasklist from "./lists/TaskList";
4 | import Settings from "./settings/Settings";
5 |
6 | /**
7 | * Función Anónima para crear un Componente principal
8 | * @returns {React.Component} Componente principal de nuestra aplicación
9 | */
10 | const App = () => {
11 | const [dark, setDark] = React.useState(false);
12 |
13 | /**
14 | * Documentación del useEffect
15 | * Se crea una variable de estado donde se almacena el valor de la configuración en localStorage
16 | */
17 |
18 | useEffect(() => {
19 | const config = JSON.parse(localStorage.getItem("config"));
20 | setDark(config.theme);
21 | }, []);
22 |
23 | /**
24 | * Función para intercambiar la variable de estado light <-> dark
25 | */
26 |
27 | const toggleDark = () => setDark(!dark);
28 | return (
29 |
30 |
31 |
32 |
33 |
34 | );
35 | };
36 |
37 | export default App;
38 |
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/src/components/lists/TaskList.backup.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import useList from "../../hooks/useList";
3 |
4 | const TaskList = () => {
5 | return Task List
;
6 | };
7 | // const tasks = useList([]);
8 | // const [newTask, setNewTask] = useState("");
9 |
10 | // const addNewTask = () => {
11 | // tasks.push(newTask);
12 | // setNewTask("");
13 | // };
14 |
15 | // return (
16 | //
17 | //
Task List
18 | //
19 | // setNewTask(e.target.value)}
22 | // placeholder="New Task"
23 | // type="text"
24 | // />
25 | //
26 | //
27 | // {tasks.isEmpty() ? (
28 | //
Task List is Empty
29 | // ) : (
30 | //
42 | // )}
43 | //
Task List
67 |
68 |
76 |
79 |
80 | {isTasksEmpty() ? (
81 | Task List is Empty
82 | ) : (
83 |
97 | )}
98 |
99 | );
100 | };
101 |
102 | export default TaskList;
103 |
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/src/components/lists/TaskList.test.js:
--------------------------------------------------------------------------------
1 | import { render } from "@testing-library/react"
2 | import TaskList from "./TaskList"
3 | import React from "react"
4 |
5 | // 0 - Renderiza el componente
6 | test('0 - Renderiza el componente', () => {
7 | const r = render();
8 | expect(r).toBeDefined();
9 | })
--------------------------------------------------------------------------------
/08-13-15-proyecto-final/src/components/settings/Settings.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import useLocalStorage from "../../hooks/useLocalStorage";
3 |
4 | const defaultConfig = {
5 | theme: "dark",
6 | lang: "es",
7 | };
8 |
9 | export default function Settings({ toggleDark }) {
10 | const [config, setConfig] = useLocalStorage("config", defaultConfig);
11 |
12 | /**
13 | * Función para intercambiar light <-> dark tanto en localStorage como en estado de la aplicación
14 | * @param {*} event - Evento de click proveniente de React
15 | */
16 |
17 | const toggleMode = (event) => {
18 | event.preventDefault();
19 | setConfig((oldConfig) => ({
20 | ...oldConfig,
21 | theme: oldConfig.theme === "light" ? "dark" : "light",
22 | }));
23 | toggleDark();
24 | };
25 |
26 | return (
27 |
28 |
APP SETTINGS
29 |
Actual Config: {config.theme}
30 |
33 |
15 |
Bienvenid@ a la sesión número 11
16 | Esto va a ser una (otra) aplicación de notas
17 |
18 |
19 |
20 | );
21 | }
22 |
23 | export default App;
24 |
--------------------------------------------------------------------------------
/10-11-testing/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, fireEvent } from "@testing-library/react"
2 | import App from "./App";
3 | import InputNuevaNota from "./components/InputNuevaNota";
4 | import ListadoNotas from './components/ListadoNotas'
5 |
6 | describe('REACT - Testeamos los componentes', () => {
7 | test('El listado se renderiza correctamente', () => {
8 | const r = render();
9 | expect(r).toBeDefined();
10 | })
11 | test('El listado renderiza un listado correctamente', () => {
12 | const notas = ["bajar la basura", "Comprar huevos"];
13 | const r = render();
14 | expect(r).toBeDefined();
15 | })
16 | test('El listado renderiza sólo las notas que debe renderizar', () => {
17 | const notas = ["bajar la basura", "Comprar huevos"];
18 | const r = render();
19 | const div = r.getByLabelText('listado-notas');
20 | expect(div.childElementCount).toBe(2);
21 | })
22 | })
23 |
24 | describe('REACT - Hacemos un test de integración', () => {
25 | test('Renderizamos la app', () => {
26 | const r = render()
27 | expect(r).toBeDefined();
28 | })
29 | test('Se renderiza el input', () => {
30 | const placeholdertext = "Introduce una nueva nota";
31 | const r = render()
32 | const input = r.getByPlaceholderText(placeholdertext);
33 | expect(input).toBeDefined();
34 | })
35 | test('Cuando hacemos clic en el botón Añadir, se lanza el evento', () => {
36 | const funcionMock = jest.fn();
37 | const r = render();
38 | const button = r.getByText("Añadir");
39 | fireEvent.click(button);
40 | expect(funcionMock).toHaveBeenCalledTimes(1);
41 | })
42 | test('Añadimos una nueva nota', () => {
43 | const placeholdertext = "Introduce una nueva nota";
44 | const r = render()
45 | const input = r.getByPlaceholderText(placeholdertext);
46 | const button = r.getByText("Añadir");
47 | const div = r.getByLabelText('listado-notas');
48 | const hijosInicial = div.childElementCount;
49 | fireEvent.change(input, { target: { value: 'Poner gasolina' } });
50 | fireEvent.click(button);
51 | const hijosFinal = div.childElementCount;
52 | expect(hijosFinal).toBeGreaterThan(hijosInicial);
53 | expect(hijosInicial).toBeLessThan(hijosFinal);
54 | expect(hijosInicial).not.toBe(hijosFinal);
55 | })
56 | })
--------------------------------------------------------------------------------
/10-11-testing/src/components/InputNuevaNota.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 |
3 | const InputNuevaNota = ({ addNuevaNota }) => {
4 | const [nuevaNota, setNuevaNota] = useState("");
5 | return (
6 |
7 | e.key === "Enter" && addNuevaNota(nuevaNota)}
12 | onChange={(e) => setNuevaNota(e.target.value)}
13 | />
14 |
15 |
16 | );
17 | };
18 |
19 | export default InputNuevaNota;
20 |
--------------------------------------------------------------------------------
/10-11-testing/src/components/ListadoNotas.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const ListadoNotas = ({ notas = [] }) => {
4 | return (
5 |
6 | {notas.map((nota, i) => (
7 |
{nota}
8 | ))}
9 |
24 |
Bienvenid@ a la aplicación OpenRadioCamp
25 |
setBusqueda(e.target.value)} />
26 |
27 | {listado.length > 0 &&
}
28 |
29 | {listado.map((emisora, i) => {emisora.name} playRadio(emisora)} />
)}
30 |
31 |
35 |
38 |
42 |
null}
46 | >
47 | {showSettings && (
48 |
53 |
54 |
55 | )}
56 |
57 |
58 |
28 |
29 |
APP SETTINGS
30 |
Actual Config: {config.theme}
31 |
34 |
19 |
{payload.notification.title}
20 |
{payload.notification.body}
21 |
33 |
34 |
35 |
36 | {route === "home" && }
37 | {route === "login" && }
38 | {route === "register" && }
39 | {route === "shopping" && }
40 | {route === "tasklist" && }
41 | {user && Usuario logueado: {user.email}
}
42 |
43 |
44 |
setRoute("home")}
25 | >
26 |
27 |
28 | FireShopping
29 |
30 |
31 |
32 | {user ? (
33 | <>
34 |
35 |
36 | ) : (
37 | <>
38 |
44 |
47 |
48 | )}
49 |
50 |
51 | );
52 | };
53 |
54 | export default Header;
55 |
--------------------------------------------------------------------------------
/19-20-21-22-23-27-28-firebase-shopping/src/firebase/index.js:
--------------------------------------------------------------------------------
1 | // Import the functions you need from the SDKs you need
2 | import { initializeApp } from "firebase/app";
3 | // TODO: Add SDKs for Firebase products that you want to use
4 | // https://firebase.google.com/docs/web/setup#available-libraries
5 | import { getMessaging, getToken } from "firebase/messaging"
6 | import { getFirestore } from "firebase/firestore";
7 |
8 | const vapidKey = "BCvoTGdzUG6EqGo8w5LJksrzlAgbfFkDrCIEAt6KRzize45m6wmVCL6KVF-xSBx_1dFIjOaDRYvU3FF26dmP_60"
9 |
10 | // Your web app's Firebase configuration
11 | const firebaseConfig = {
12 | apiKey: "AIzaSyD4w_NN9PlyMNGJSWxRvLEXhKPqt4sLPQQ",
13 | authDomain: "fir-shopping-d850e.firebaseapp.com",
14 | projectId: "fir-shopping-d850e",
15 | storageBucket: "fir-shopping-d850e.appspot.com",
16 | messagingSenderId: "941636314377",
17 | appId: "1:941636314377:web:2e6f89ca7f6860b1075fd8"
18 | };
19 |
20 | // currentToken = "dzHLgtB6zWC7EXiRwhK5_5:APA91bHT4n3l0iEMye2pUuN4k2Hm0V3zIft-Pq1E9e0aavUNScNZ--Cb9uAGmTr5KS6OgXBv_j2b69AWvuCF93dhwZoEcwomdkVVOAEw1LzDXppm7SENLaCYBNYIChOZPOg5nGvu-O1e";
21 |
22 | // Initialize Firebase
23 | export const app = initializeApp(firebaseConfig);
24 | export const messaging = getMessaging();
25 | getToken(messaging, { vapidKey })
26 | .then(currentToken => {
27 | if (currentToken) {
28 | // Send the token to your server and update the UI if necessary
29 | // ...
30 | // console.log('currentToken', currentToken);
31 | sendTokenToServer(currentToken);
32 | } else {
33 | // Show permission request UI
34 | console.log('No registration token available. Request permission to generate one.');
35 | // ...
36 | }
37 | }).catch((err) => {
38 | console.log('An error occurred while retrieving token. ', err);
39 | // ...
40 | });
41 |
42 | const sendTokenToServer = token => {
43 | if (localStorage.getItem('tokenSentToServer')) return;
44 | // TO-DO: Implementar la lógica de que en el servidor se almacene el token
45 | localStorage.setItem('tokenSentToServer', '1');
46 | }
47 |
48 | export const db = getFirestore();
49 |
--------------------------------------------------------------------------------
/19-20-21-22-23-27-28-firebase-shopping/src/firebase/taskController.js:
--------------------------------------------------------------------------------
1 | // En este fichero crearemos toda la lógica de base de datos para las tasks
2 | import { db } from "./index";
3 | import { doc, collection, addDoc, setDoc, getDocs, deleteDoc } from "firebase/firestore";
4 |
5 | // CRUD - Create, Read, Update, Delete
6 |
7 | export const addNewTask = async task => {
8 | await addDoc(collection(db, 'tasks'), task);
9 | }
10 |
11 | export const getTasks = async () => {
12 | const querySnapshot = await getDocs(collection(db, 'tasks'));
13 | // console.log(querySnapshot);
14 | // querySnapshot.forEach(doc => {
15 | // console.log(doc.id, ' => ', doc.data())
16 | // })
17 |
18 | const tasks = querySnapshot.docs.map(doc => {
19 | return { ...doc.data(), id: doc.id }
20 | })
21 | // console.log(tasks);
22 | return tasks;
23 | }
24 |
25 | export const updateTask = async (task) => {
26 | // console.log(task);
27 | await setDoc(doc(db, 'tasks', task.id), {
28 | title: task.title,
29 | description: task.description
30 | })
31 | }
32 |
33 | export const deleteTask = async (id) => {
34 | await deleteDoc(doc(db, 'tasks', id));
35 | }
--------------------------------------------------------------------------------
/19-20-21-22-23-27-28-firebase-shopping/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/19-20-21-22-23-27-28-firebase-shopping/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
--------------------------------------------------------------------------------
/19-20-21-22-23-27-28-firebase-shopping/src/routes/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Home = () => {
4 | return (
5 |
6 |
Esta es la home
7 |
8 | )
9 | }
10 |
11 | export default Home
12 |
--------------------------------------------------------------------------------
/19-20-21-22-23-27-28-firebase-shopping/src/routes/Login.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from "react";
2 | import {
3 | GoogleAuthProvider,
4 | getAuth,
5 | signInWithPopup,
6 | signInWithEmailAndPassword,
7 | } from "firebase/auth";
8 | import toast from "react-hot-toast";
9 | import { AppContext } from "../App";
10 |
11 | const provider = new GoogleAuthProvider();
12 | const auth = getAuth();
13 |
14 | const Login = () => {
15 | const [email, setEmail] = useState("");
16 | const [password, setPassword] = useState("");
17 | const { setUser } = useContext(AppContext);
18 | const hazLoginGoogle = () => {
19 | signInWithPopup(auth, provider)
20 | .then((result) => {
21 | // This gives you a Google Access Token. You can use it to access the Google API.
22 | const credential = GoogleAuthProvider.credentialFromResult(result);
23 | const token = credential.accessToken;
24 | // The signed-in user info.
25 | const user = result.user;
26 | // ...
27 | console.log("token", token);
28 | console.log("user", user);
29 | toast("Inicio de sesión válido");
30 | setUser(user);
31 | })
32 | .catch((error) => {
33 | // Handle Errors here.
34 | const errorCode = error.code;
35 | const errorMessage = error.message;
36 | // The email of the user's account used.
37 | const email = error.email;
38 | // The AuthCredential type that was used.
39 | const credential = GoogleAuthProvider.credentialFromError(error);
40 | // ...
41 | });
42 | };
43 | const hazLoginConEmail = (e) => {
44 | e.preventDefault();
45 | signInWithEmailAndPassword(auth, email, password)
46 | .then((userCredential) => {
47 | // Signed in
48 | const user = userCredential.user;
49 | // ...
50 | toast("Inicio de sesión válido");
51 | setUser(user);
52 | })
53 | .catch((error) => {
54 | const errorCode = error.code;
55 | const errorMessage = error.message;
56 | });
57 | };
58 | return (
59 |
60 |
61 | Este es el login
62 |
63 |
64 |
84 |
85 |
86 |
37 |
¡Regístrate para obtener acceso a la mejor app del mundo!
38 |
43 |
44 | );
45 | };
46 |
47 | export default Register;
48 |
--------------------------------------------------------------------------------
/19-20-21-22-23-27-28-firebase-shopping/src/routes/Shopping.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Shopping = () => {
4 | return (
5 |
6 | Bienvenid@ a la tienda online FireShopping 🔥
7 |
8 | )
9 | }
10 |
11 | export default Shopping
12 |
--------------------------------------------------------------------------------
/19-20-21-22-23-27-28-firebase-shopping/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ["./src/**/*.{js,jsx,ts,tsx}"],
3 | theme: {
4 | extend: {},
5 | },
6 | plugins: [],
7 | }
8 |
--------------------------------------------------------------------------------
/25-metodologias/README.md:
--------------------------------------------------------------------------------
1 | # Metodologías de desarrollo de Software
2 |
3 | En la lección 25 analizamos las metodologías más utilizadas a la hora de desarrollar aplicaciones, o software especializado.
4 |
5 | ## Arquitectura Hexagonal
6 |
7 | 1. ¿Qué es?
8 | 2. ¿En qué consiste?
9 | 3. Ejemplos
10 |
11 | ## Arquitectura Limpia en React
12 |
13 | 1. ¿Qué es?
14 | 2. ¿En qué consiste?
15 | 3. Ejemplos
16 |
17 | ## Atomic Design
18 |
19 | 1. ¿Qué es?
20 | 2. Ejemplos
21 | 3. Desarrollo de un proyecto basándonos en BDD utilizando Atomic Design
22 |
23 | ### Tarea Lección 25
24 |
25 | Termina de crear una plantilla para nuestra aplicación, **utilizando sólo los componentes dentro de la carpeta organismos**
26 |
--------------------------------------------------------------------------------
/25-metodologias/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "leccion-25",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.1",
7 | "@testing-library/react": "^12.1.2",
8 | "@testing-library/user-event": "^13.5.0",
9 | "firebase": "^9.6.1",
10 | "react": "^17.0.2",
11 | "react-dom": "^17.0.2",
12 | "react-scripts": "5.0.0",
13 | "web-vitals": "^2.1.2"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": [
23 | "react-app",
24 | "react-app/jest"
25 | ]
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/25-metodologias/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Open-Bootcamp/React-JS-Avanzado/f421d55bd336e4c9f5efec942a4708b6a918353b/25-metodologias/public/favicon.ico
--------------------------------------------------------------------------------
/25-metodologias/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/25-metodologias/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Open-Bootcamp/React-JS-Avanzado/f421d55bd336e4c9f5efec942a4708b6a918353b/25-metodologias/public/logo192.png
--------------------------------------------------------------------------------
/25-metodologias/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Open-Bootcamp/React-JS-Avanzado/f421d55bd336e4c9f5efec942a4708b6a918353b/25-metodologias/public/logo512.png
--------------------------------------------------------------------------------
/25-metodologias/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/25-metodologias/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/25-metodologias/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/25-metodologias/src/App.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import './App.css';
3 | import { getNotes } from './controllers/frontController';
4 | import AtomicDesign from './front/AtomicDesign';
5 | import Notes from './front/Notes';
6 |
7 | function App() {
8 | const [notes, setNotes] = useState([])
9 | useEffect(() => {
10 | getNotes()
11 | .then(n => setNotes(n))
12 | .catch(e => console.error(e))
13 | }, [])
14 | return (
15 |
16 |
Bienvenid@ a la aplicación de notas
17 | {/*
*/}
18 |
19 |
7 | {children}
8 |
9 | )
10 | }
11 |
12 | export default Container
13 |
--------------------------------------------------------------------------------
/25-metodologias/src/components/01_atomos/Input.css:
--------------------------------------------------------------------------------
1 | .input {
2 | outline: none;
3 | padding: 10px 20px;
4 | font-size: 14pt;
5 | border-radius: 5px;
6 | border: none;
7 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
8 | }
--------------------------------------------------------------------------------
/25-metodologias/src/components/01_atomos/Input.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './Input.css'
3 |
4 | const Input = () => {
5 | return (
6 |
7 | )
8 | }
9 |
10 | export default Input
11 |
--------------------------------------------------------------------------------
/25-metodologias/src/components/02_moleculas/FormAzul.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Button from "../01_atomos/Button"
3 | import Container from "../01_atomos/Container"
4 | import Input from "../01_atomos/Input"
5 |
6 | const FormAzul = () => {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
16 |
17 | export default FormAzul
18 |
--------------------------------------------------------------------------------
/25-metodologias/src/components/02_moleculas/FormRojo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Button from "../01_atomos/Button"
3 | import Container from "../01_atomos/Container"
4 | import Input from "../01_atomos/Input"
5 |
6 | const FormRojo = () => {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
16 |
17 | export default FormRojo
18 |
--------------------------------------------------------------------------------
/25-metodologias/src/components/02_moleculas/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Container from "../01_atomos/Container";
3 | import Button from "../01_atomos/Button";
4 |
5 | const Header = ({ children }) => {
6 | return (
7 |
8 |
9 | {children}
10 |
11 | );
12 | };
13 |
14 | export default Header;
15 |
--------------------------------------------------------------------------------
/25-metodologias/src/components/03_organismos/Formulario.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FormRojo from '../02_moleculas/FormRojo'
3 | import FormAzul from '../02_moleculas/FormAzul'
4 |
5 | const Formulario = () => {
6 | return (
7 |
8 |
9 |
10 |
11 | )
12 | }
13 |
14 | export default Formulario
15 |
--------------------------------------------------------------------------------
/25-metodologias/src/components/03_organismos/OrgHeader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FormRojo from '../02_moleculas/FormRojo'
3 | import Header from '../02_moleculas/Header'
4 |
5 | const OrgHeader = () => {
6 | return (
7 |
10 | )
11 | }
12 |
13 | export default OrgHeader
14 |
--------------------------------------------------------------------------------
/25-metodologias/src/components/04_plantillas/Plantilla.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Formulario from '../03_organismos/Formulario'
3 |
4 | const Plantilla = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
12 | export default Plantilla
13 |
--------------------------------------------------------------------------------
/25-metodologias/src/controllers/dbController.js:
--------------------------------------------------------------------------------
1 | // Base de datos en Firestore
2 | // Import the functions you need from the SDKs you need
3 | import { initializeApp } from "firebase/app";
4 | // TODO: Add SDKs for Firebase products that you want to use
5 | // https://firebase.google.com/docs/web/setup#available-libraries
6 | import { getFirestore, getDocs, collection } from "firebase/firestore"
7 |
8 | // Your web app's Firebase configuration
9 | const firebaseConfig = {
10 | apiKey: "AIzaSyD4Uo1iIzVhVZ9F3PFD0kkLfOgx71uocVY",
11 | authDomain: "ob-tasklist-firebase.firebaseapp.com",
12 | projectId: "ob-tasklist-firebase",
13 | storageBucket: "ob-tasklist-firebase.appspot.com",
14 | messagingSenderId: "45362721152",
15 | appId: "1:45362721152:web:eb9a450e4b347e5fcf1165"
16 | };
17 |
18 | // Initialize Firebase
19 | export const app = initializeApp(firebaseConfig);
20 | export const db = getFirestore();
21 |
22 | export const getNotesFromDB = async () => {
23 | const querySnapshot = await getDocs(collection(db, 'notes'));
24 | const notes = querySnapshot.docs.map(doc => {
25 | return { ...doc.data(), id: doc.id }
26 | })
27 | return notes;
28 | }
--------------------------------------------------------------------------------
/25-metodologias/src/controllers/dbMockController.js:
--------------------------------------------------------------------------------
1 | export const getNotesFromDB = () => {
2 | const notes = [
3 | { note: "Primera nota de mock" },
4 | { note: "Segunda nota de mock" },
5 | { note: "Tercera nota de mock" },
6 | { note: "Cuarta nota de mock" },
7 | ]
8 | return notes;
9 | }
--------------------------------------------------------------------------------
/25-metodologias/src/controllers/frontController.js:
--------------------------------------------------------------------------------
1 | import { getNotesFromDB } from './dbController';
2 | // import { getNotesFromDB } from './dbMockController';
3 |
4 |
5 |
6 | export const getNotes = async () => {
7 | const notes = await getNotesFromDB();
8 | return notes;
9 | }
--------------------------------------------------------------------------------
/25-metodologias/src/front/AtomicDesign.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Button from '../components/01_atomos/Button'
3 | import Input from '../components/01_atomos/Input'
4 | import Container from '../components/01_atomos/Container'
5 | import FormAzul from '../components/02_moleculas/FormAzul'
6 | import FormRojo from '../components/02_moleculas/FormRojo'
7 | import Formulario from '../components/03_organismos/Formulario'
8 | import Header from '../components/02_moleculas/Header'
9 | import OrgHeader from '../components/03_organismos/OrgHeader'
10 |
11 | const AtomicDesign = () => {
12 | return (
13 |
14 |
Vamos a diseñar nuestros átomos
15 |
Átomos
16 |
17 |
18 |
19 |
20 |
21 |
22 |
Moléculas
23 |
24 |
25 |
26 |
27 |
28 |
Organismos
29 |
30 |
31 |
32 |
33 |
Plantillas
34 |
35 |
36 |
37 |
Páginas
38 |
39 |
40 |
41 |
6 | Esta es la lista de notas pendientes
7 |
8 | {notes.map((note, i) => (
9 | - {note.note}
10 | ))}
11 |
12 |
11 |
12 |
13 | {name}
14 |
15 |
16 |
17 | );
18 | };
19 |
20 | export default Header;
21 |
--------------------------------------------------------------------------------
/26-react-ts/src/components/Product.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface ProductProps {
4 | image: string;
5 | title: string;
6 | price: number;
7 | }
8 |
9 | const Product = ({ image, title, price }: ProductProps): JSX.Element => {
10 | return (
11 |
12 |
13 |
{title}
14 |
{price} €
15 |
30 | {productList.map(
31 | (product: ProductInterface, i: number): JSX.Element => (
32 |
38 | )
39 | )}
40 |
{title}
;
5 | };
6 |
7 | export default Title;
8 |
--------------------------------------------------------------------------------
/26-react-ts/src/controllers/productController.ts:
--------------------------------------------------------------------------------
1 | import axios, { AxiosResponse } from "axios";
2 |
3 | export const getProducts = async () => {
4 | const res: AxiosResponse = await axios.get(
5 | "https://fakestoreapi.com/products"
6 | );
7 | return res;
8 | };
9 |
--------------------------------------------------------------------------------
/26-react-ts/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/26-react-ts/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/26-react-ts/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/26-react-ts/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/26-react-ts/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/26-react-ts/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/26-react-ts/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ["./src/**/*.{js,jsx,ts,tsx}"],
3 | theme: {
4 | extend: {},
5 | },
6 | plugins: [],
7 | }
8 |
--------------------------------------------------------------------------------
/26-react-ts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
10 |