├── .gitignore
├── README.md
├── nodegirls-ig.gif
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── img
│ ├── camera.svg
│ ├── heart.svg
│ ├── home.svg
│ ├── left-arrow.svg
│ ├── nodegirls.svg
│ ├── right-arrow.svg
│ └── share.svg
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── components
├── Body.jsx
├── CardFilters.jsx
├── CardPosts.jsx
├── Footer.jsx
└── Header.jsx
├── containers
└── Home.jsx
├── data
├── filters.js
└── userImage.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Taller IG con React NodeGirlsMadrid 29F
2 | Bienvenidas!!!!
3 |
4 | > 👉 Las slides de la primera parte [las puedes ver aquí](https://slides.com/yunevk/taller-react-nodegirls/live#/).
5 |
6 | ## ¿Qué vamos a hacer?
7 | Vamos a hacer una app basada (siempre basada, nunca copiada...) en instagram. Así podremos ver las fotos de nuestras compis de taller y presumir de las cosas molonas que estamos haciendo.
8 |
9 | La pinta que esperamos que tenga es esta:
10 |
11 |
12 |
13 |
14 |
15 | Con las slides como fondo ya os hemos contado los principales aspectos técnicos de React. Como siempre, la mejor forma de quedarnos con ellos es embarrarnos y cacharrear, así que allá vamos.
16 |
17 | ## ¿Qué pasos vamos a serguir?
18 |
19 | 1. Montaremos el proyecto.
20 |
21 | 2. Haremos un poco de __arquitectura__ básica con los componentes fundamentales.
22 |
23 | 3. Añadiremos los estilos e imágenes necesarias para que luzca.
24 |
25 | 4. Les daremos un poco de vidilla sencilla para empezar, ¿cómo?
26 | * seteando nuestra variable de estado
27 |
28 | * modificando esta variable de estado con __funciones de primer orden__ (no asustarse todavía, nos hacen el favor ;P);
29 |
30 | > :warning: A partir de aquí viene la caña, pero os lo vamos a contar suuuuper bien, así que __nonti preocupare__ (o como se diga).
31 |
32 | 5. Mostraremos los post que están almacenados en el super back que nos ha montado Irene. Aquí van a entrar en juego unos cuantos conceptos y técnicas interesantes como:
33 | * Llamada a la API.
34 | * El hook `useEffect`.
35 | * Renderizado condicional.
36 | * Mapeo de arrays para generar elementos html.
37 |
38 | 6. Cargaremos la imagen que queramos subir.
39 |
40 | 7. Mostraremos los filtros aplicados a nuestra imagen para poder elegir el que más nos favorece.
41 |
42 | 8. Con un elemento `textarea` habilitaremos la opción de subir un comentario a lo Paulo Cohello.
43 |
44 | 9. Cuando ya tengamos todos los datos que compongan cada elemento post, lo subiremos a la base de datos.
45 |
46 | 10. Por último, veremos como manejar los likes y dislikes (por si le damos sin querer me gusta a la foto de ese petardo que nos cae fatal).
47 |
48 | ## Inicializar el proyecto y API
49 |
50 | Antes de empezar con nuestra aplicación de React, tenemos que levantar un servidor con una API para poder conectarnos a ella, pero que no cunda el pánico!! Irene se ha currado una API muy fácil de usar para que no nos tengamos que preocupar para nada del back. ;)
51 |
52 | Así que, en otra instancia de la consola, solo tenemos que ejecutar el siguiente comando:
53 |
54 | ```
55 | npx github:IrenePEncinar/express-instagram
56 | ```
57 |
58 | Y así podremos acceder desde `localhost:3000`! Volvamos ahora a nuestra aplicación para conectarnos.
59 |
60 | Ahora sí, vamos a inicializar el proyecto de React:
61 |
62 | 1. Instala `create-react-app` con el comando `npm install -g create-react-app`.
63 | 2. Inicializa el proyecto con el comando: `create-react-app ig-ngm`.
64 | 3. Cambia a la capeta que contiene el código y abre tu IDE.
65 |
66 | ## Arquitectura del proyecto
67 | Como vemos `create-react-app` nos ha creado una estructura básica del proyecto. La magia la vamos a hacer dentro de la capeta `src` y vamos a dividir nuestro código entre los componentes de UI o _dummies_ y los compoenents que se responsabilizan de las
68 | acciones o _containers_.
69 |
70 | En nuestro caso, solo tendremos un componente _container_ que le vamos a llama `Home.jsx` y el resto serán componentes de UI.
71 |
72 | Como primer paso, vamos a crear la estructura de carpetas que necesitaremos:
73 |
74 | ```
75 | src/
76 | components/
77 | Body.jsx
78 | Footer.jsx
79 | Header.jsx
80 | containers/
81 | Home.jsx
82 | ```
83 | ## Añadiendo estilos e imágenes
84 |
85 | Antes de empezar con la caña, vamos a añadir primero los archivos necesarios para que nuestra aplicación luzca bien.
86 |
87 | Hemos preparado este CSS para que lo insertes en `index.css`, con las clases que utilizaremos a continuación. Por eso, solo tienes que acceder a [este enlace](https://raw.githubusercontent.com/Maritxis/ig-ngm-pruebas/master/src/index.css), copiar el código y pegarlo en tu archivo `index.css`.
88 |
89 | No solo vamos a añadir estilos, también tendremos algunos iconos. Recuerda que los archivos estáticos de la aplicación (como las imágenes) las tienes que añadir dentro la carpeta `public` que se ha generado con `create-react-app`. Por eso, necesitamos una estrcutura así:
90 |
91 | ```
92 | public/
93 | img/
94 | ```
95 |
96 | Es decir, vamos a crear una carpeta `img` dentro de `public`. Dentro de esta carpeta añadiremos los siguientes iconos (abre cada enlace para copiar su contenido):
97 |
98 | - [`camera.svg`](https://raw.githubusercontent.com/Maritxis/ig-ngm-pruebas/master/public/img/camera.svg)
99 | - [`heart.svg`](https://raw.githubusercontent.com/Maritxis/ig-ngm-pruebas/master/public/img/heart.svg)
100 | - [`home.svg`](https://raw.githubusercontent.com/Maritxis/ig-ngm-pruebas/master/public/img/home.svg)
101 | - [`left-arrow.svg`](https://raw.githubusercontent.com/Maritxis/ig-ngm-pruebas/master/public/img/left-arrow.svg)
102 | - [`nodegirls.svg`](https://raw.githubusercontent.com/Maritxis/ig-ngm-pruebas/master/public/img/nodegirls.svg)
103 | - [`right-arrow.svg`](https://raw.githubusercontent.com/Maritxis/ig-ngm-pruebas/master/public/img/right-arrow.svg)
104 | - [`share.svg`](https://raw.githubusercontent.com/Maritxis/ig-ngm-pruebas/master/public/img/share.svg)
105 |
106 | > ⚠️ Para no extender más el taller, vamos a tener todo el código CSS en un archivo, pero lo ideal es que el código CSS relativo a cada componente esté en archivos diferentes, y sea cada componente el que importe su archivo CSS. Esta refactorización la puedes hacer después. 😉
107 |
108 | Por último, tendremos que añadir los estilos para poder mostrar los filtros, y para eso vamos a usar [CSSGram](https://una.im/CSSgram/). Es muy fácil añadirlo! Solo tienes que incluir la siguiente línea en tu archivo `/public/index.html`, más concretamente dentro de la etiqueta ``.
109 |
110 | ```
111 |
112 | ```
113 |
114 | Ya tenemos nuestro _setup_, así que continuamos con los componentes.
115 |
116 | ## Montando los componentes básicos: Header, Body y Footer
117 |
118 | Vamos a tener tres componentes básicos en nuestra página (a parte de dos más que nos permitirán tener el código separado por responsabilidades independientes). Estos son:
119 | * **Header**
120 | * **Body** (que va a ser la parte principal de la aplicación)
121 | * **Footer**
122 |
123 | Vamos a crear la estructura básica de un componente en React:
124 |
125 | ```js
126 | import React from 'react';
127 |
128 | const Component = () => ({});
129 |
130 | export default Component;
131 | ```
132 | Este paso lo repetiremos para cada uno de los componentes con sus correspondientes nombres.
133 |
134 | Como inicialmente queremos saber que están ahí, podéis darle un poco de contenido, un `button` un `header` o cualquier cosa que os apetezca. __Any way__, si levantamos la aplicación (por si alguien ha olvidado el comando __menos utilizado__ en la historia: ```npm start```), todavía no vamos a ver nada, __niente__, __nothing de nothing__... y ¿porqueéééééé? pues sencillamente, porque no hay nadie que haga uso de estos componentes. Creemos pues `Home` el elemento __Body__ e incluyamos nuestros __dummies__ pero __loved__, components.
135 |
136 | ```js
137 | import React from 'react';
138 | import Header from '../components/Header';
139 | import Body from '../components/Body';
140 | import Footer from '../components/Footer';
141 |
142 | const Home = () => {
143 | return (
144 | <>
145 |
146 |
147 |
148 |
149 | )
150 | }
151 |
152 | export default Home;
153 | ```
154 | A su vez, este tendremos que llamarlo desde App para que sea visible:
155 |
156 |
157 | ```js
158 | import React from 'react';
159 | import Home from './containers/Home';
160 | import './App.css';
161 |
162 | function App() {
163 | return (
164 |
165 |
166 |
167 | );
168 | }
169 |
170 | export default App;
171 | ```
172 |
173 | Ahora sí, ahora levantaremos nuestra aplicación y podremos ver esas __preciosidades__ de componentes en pantalla.
174 |
175 | ## Dando contenido a nuestros _dummy components_
176 | Vamos a ver qué va a hacer cada uno de nuestros componentes y a añadirles el código que necesitan.
177 |
178 | ### Header
179 | Este componente debe permitirnos navegar entre pantallas cuando estemos cargando la imagen y deberá permitirnos cancelar el post. Para ello vamos a incluir condicionalmente cuatro botones que estarán o no estarán dependiendo del paso en el que estemos.
180 |
181 | Y nuestro componente `Header` quedaría así:
182 |
183 | ```js
184 | import React from 'react';
185 |
186 | const Header = ({ step}) => {
187 | return (
188 |
189 | {step ===1 && }
190 | {(step === 2 || step === 3) && }
191 | {(step ===1 || step === 2) && }
192 | {step === 3 && }
193 |
194 | );
195 | };
196 |
197 | export default Header;
198 | ```
199 | Donde `step` es el paso del flujo de carga de imágenes.
200 |
201 | ### Footer
202 |
203 | Este es el componente que nos va a permitir subir las imágenes. Para ello, incluiremos un botón que permita navegar a la pantalla de inicio y un input para seleccionar el archivo que queremos subir.
204 |
205 | ```js
206 | import React from 'react';
207 |
208 | const Footer = ({ step }) => {
209 | return (
210 |
222 | );
223 | };
224 |
225 | export default Footer;
226 | ```
227 | Igual que en componente anterior, `step` nos permite conocer el paso en el que estamos en el flujo de subir la imagen.
228 |
229 | ### Body
230 | De momento, inicializaremos este componente de una forma muy básica, simplemente vamos a hacer que nos muestre el paso en el que nos encotramos. Así, `Body` nos queda tal que:
231 |
232 | ```js
233 | import React from 'react';
234 |
235 | const Body = ({ step }) => {
236 | return (
237 |
238 |
Body in step {step}
239 |
240 | );
241 | };
242 |
243 | export default Body;
244 | ```
245 | ## Step, nuestra primera variable de estado, nuestro primer hook
246 |
247 | Vemos que nuestros tres componentes dependen de la variable step que les pasamos como propiedad. Esta propiedad, `step` debe venir y ser manejada en el componente `Home`, pero ¿cómo? ¿como variable de estado? ¿porquéééeéééé motivooooo? :scream:
248 |
249 | Bueno, el motivo no es especialmente sencillo, vamos a intentar explicarlo aquí, aunque seguramente, si estás haciendo el taller en vivo la explicación sea mejor. Cuando pasamos una propiedad a un componente hijo, este solo se va a actualizar si forma parte o bien de las propiedades o bien del estado del padre. Cualquier otro tipo de variable dentro del scope del componente padre que mute su valor, no se vería reflejada en el hijo.
250 |
251 | Dicho lo cual, veamos cómo se traduce esto en código: necesitamos utilizar el método `useState` de React. Este método nos devuelve un array con dos valores, el primero, el de nuestra variable de estado y el segundo, el de la función que hemos de invocar cada vez que necesitemos mutar dicha variable, en otras palabras:
252 |
253 | ```js
254 | import React, { useState } from 'react';
255 | import Header from '../components/Header';
256 | import Body from '../components/Body';
257 | import Footer from '../components/Footer';
258 |
259 | const Home = () => {
260 | const [step, setStep] = useState(1);
261 | return (
262 | <>
263 |
266 |
269 |
272 |
273 | )
274 | }
275 |
276 | export default Home;
277 | ```
278 |
279 | ## Funciones como ciudadanos de primera: pasando lógica entre componentes
280 | Hasta el momento, nuestros componentes `Header` y `Footer`, contienen unos botones estupendísimos y preciosísimos que no hacen ná de ná. Necesitamos darles un poco de vida, pero, sobre todo de lógica.
281 |
282 | > :hand: One minute!!!!! ¿No habíais dicho que `Header`, `Footer` y `Body` eran componentes UI si ninguna lógica? Bingoooo!!!!! :tada: Así es, premio para tí, pequeña padawan por estar atenta. Entonces... ¿Cómo hago para darles ese soplo de vida y espíritu y que esos botones e input sirvan para algo más que para mostrar una interfaz bonita?
283 |
284 | Para esos menesteres, vamos a hacer uso de una de las características más molonas de JavaScript que es que las funciones son ciudadanos de primera categoría, oiga, nada que envidiarles a sus primos los objetos, strings, numbers ni ningún otro. Y si estos últimos, pueden venir como parámetros de una función otra función no va a ser menos. Así, nuestros _dummy components_ quedarían:
285 |
286 | ```js
287 | const Header = ({ step, handleGoHome, handleShare, handleNext }) => {
288 | return (
289 |
290 | {step ===1 && }
291 | {(step === 2 || step === 3) && }
292 | {(step ===1 || step === 2) && }
293 | {step === 3 && }
294 |
295 | );
296 | };
297 | ```
298 |
299 | Donde:
300 |
301 | * `step`: es el paso del flujo de carga de imágenes.
302 | * `hadleGoHome`: es la función que nos va a permitir navegar hasta la primera pantalla.
303 | * `handleNextStep`: es la función que nos permitirá navegar hasta a siguiente pantalla.
304 | * `handleSharePost`: es una función que navegará a home y lanzará la petición post con los datos.
305 |
306 | ```js
307 | const Footer = ({ step, handleGoHome, handleUploadImage }) => {
308 | return (
309 |
322 | );
323 | };
324 | ```
325 |
326 | Donde `step` y `handleGoHome` son los mismos elementos definidos para el componente `Header`, `handleUploadImage` va ser la función que suba imágenes y el `input` va a estar deshabilitado en cualquier pantalla que no sea la inicial.
327 |
328 | Por supuesto, estas funciones habrán de venir definidas en algún lado. La lógica la definimos dentro de los _containers_. Nosotras, hoy solo tenemos un _container_, `Home`, en el que definiremos lo que queremos que haga cada una de estas funciones:
329 |
330 | ```js
331 | import React, { useState } from 'react';
332 | import Header from '../components/Header';
333 | import Body from '../components/Body';
334 | import Footer from '../components/Footer';
335 |
336 | const Home = () => {
337 | const [step, setStep] = useState(1);
338 | const handleGoHome = () => setStep(1);
339 | const handleNext = () => setStep(step + 1);
340 | const handleShare = () => {};
341 | const handleUploadImage = () => {};
342 | return (
343 | <>
344 |
350 |
353 |
358 |
359 | )
360 | }
361 |
362 | export default Home;
363 | ```
364 |
365 | Hasta el momento, tenemos una app que nos permite navegar entre pantallas, y cambiar la variable de estado `step`. Hemos aprendido varias cositas interesantes, hemos hecho nuestros primero pinitos con _jsx_, con el _state_ de un componente, con los hooks, con sus propiedades... Hemos hecho un montón de cosas pero sinceramente, esa app, hasta aquí no es muy divertida. _Stay with us_, ahora vamos a entrar en la parte con más enjundia del taller!!! :mag:
366 |
367 | ## Carga inicial de los posts
368 |
369 | > :warning: **Warning!!!!** La carga inicial de los posts es un poco compleja!!!! Keep your eyes :eyes: and ears :ear: open!!!
370 |
371 | El componente `Body` será el que nos muestre el contenido de los post de nuestro IG. Por ello, como medida inicial lo primero que haremos, será la carga de los mismos.
372 |
373 | Posts es una variable que pasaremos como propiedad al componente Body. Puesto que nos interesa que cada vez que `posts` varíe su valor, `Body` se actualice, hemos de establecerla como parte del estado de` Home`. Esto lo hacemos de manera análoga a como hacíamos con `step`.
374 | ```js
375 | const [posts, setPosts] = useState([]);
376 | ```
377 |
378 | Por otra parte hemos de incluir la petición a back. Vamos a separar este proceso en varios pasos:
379 | 1. **instalación del módulo de node axios** que nos va a facilitar realizar y procesar las peticiones:
380 | ``` npm i -S axios ```
381 | 2. **Importaremos el módulo** axios en `Home`:
382 | ``` import axios from 'axios' ```
383 | 3. Queremos que la petición se realice la primera vez que se "monta" nuestro componente, para ello usaremos el _hook_ `useEffect`, al que le pasaremos como dependencia un array vacío. El hecho de que no tenga dependencias, evita que entremos en un bucle infinito:
384 | ```js
385 | const getPosts = async () => {
386 | const res = await axios.get('http://localhost:3000/api/posts');
387 | setPosts(res.data);
388 | }
389 | useEffect(() => {
390 | getPosts();
391 | }, []);
392 | ```
393 | Una vez obtenidos los datos, estos se pasarán a `Body` (componente encargado de mostrarlos) como propiedades.
394 |
395 | Este es el código de `Home` y de `Body` en este punto del taller:
396 |
397 | * **Home**:
398 |
399 | ```js
400 | import React, { useState } from 'react';
401 | import axios from 'axios';
402 | import Header from '../components/Header';
403 | import Body from '../components/Body';
404 | import Footer from '../components/Footer';
405 |
406 | const Home = () => {
407 | const [step, setStep] = useState(1);
408 | const [posts, setPosts] = useState([]);
409 | const handleGoHome = () => setState(1);
410 | const handleNext = () => setState(step + 1);
411 | const handleShare = () => {};
412 | const handleUploadImage = () => {};
413 | const getPosts = async () => {
414 | const res = await axios.get('http://localhost:3000/api/posts');
415 | setPosts(res.data);
416 | }
417 | useEffect(() => {
418 | getPosts();
419 | }, []);
420 | return (
421 | <>
422 |
428 |
452 |
453 | );
454 | };
455 |
456 | export default Body;
457 | ```
458 |
459 | Vamos a hacer un componente específico para la visualización de los posts. Cada uno de los post que nos viene de back, tiene esta estructura:
460 |
461 | ```
462 | {
463 | username,
464 | userImage,
465 | postImage,
466 | filter,
467 | caption,
468 | hasBeenLiked,
469 | likes
470 | }
471 | ```
472 |
473 | así que contando con la info que queremos mostrar, nuestro compoente CardPost, tendrá esta pinta en código:
474 |
475 | ```js
476 | import React from 'react';
477 |
478 | const CardPost = ({post}) => {
479 | return (
480 |
481 |
482 |
483 |
{post.username}
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
494 |
{post.likes}
495 |
496 |
{post.caption}
497 |
498 |
499 |
500 | )
501 | }
502 | ```
503 | Ahora vamos a ver un poquito de la magia de react (bueno, después de los hooks, que los hooks molan mucho): por una parte vamos a hacer un renderizado condicional, ya que solo queremos mostrar los posts en caso de estar en el step uno y además vamos a hacer una cosa muy fncional y molona: generar html a partir del mapeo de un array de javascript. Esta maravilla de la naturaleza y del código, se hace introduciendo estas líneas en nuestro componente body
504 |
505 | ```js
506 | { step === 1
507 | &&
posts.map((post, index) => )
}
508 | ```
509 | No olvidéis que:
510 | 1. `Body` debe importar `CardPost` o no podrá utilizarlo.
511 | 2. El _array_ de posts, le tiene que ser pasado a `Body` como _prop_.
512 |
513 | ## Subida del post: recogiendo la info
514 | A continuación vamos a darle duro a la subida del post. Elegiremos una foto, un filtro, escribiremos un comentario inspiracional y lo guardaremos en la BBDD para la posteridad o hasta que reiniciemos back ;P.
515 |
516 | ### Subida de la imagen
517 | Recordemos (que con todo lo que hemos hecho hasta el momento, igual ya ni nos acordamos de qué había en el footer), que en caso de estar en el step 1, habíamos habilitado un input de tipo file. Vamos a manejar la subida de archivos, enlazando el método `handleUpload` (en `Home`) con el evento `onChange` del `input`. Este `hanldeUpload` será el encargado de leer el archivo de la imagen, seter `image` como variable de estado y navegar al siguiente step.
518 |
519 | ```js
520 | const handleUpload = (ev) => {
521 | const files = ev.target.files
522 | if (files.length){
523 | const reader = new FileReader();
524 | reader.readAsDataURL(files[0]);
525 | reader.onload = (ev) => {
526 | setImage(ev.target.result);
527 | setStep(2);
528 | }
529 | }
530 | }
531 | ```
532 |
533 | No olvidéis que este método hay que enlazarlo con `Footer` como una propiedad del mismo.
534 |
535 | ### Eliginedo el mejor filtro: CardFilter y setFilter
536 | Vamos a tener una serie de filtros disponibles, para que nuestras fotos sean lo más aparentes posibles y el resto de la humanidad se muera de envidia con esa foto tan original de nuestro pie frente al mar (sí, vamos necesitando y soñando con unas merecidas vacatas ;P).
537 |
538 | Además de `components` y `containers`, dentro de `src`, crearemos una carpeta `data`que incluya algo de info necesaria. El primer archivo que incluiremos dentro de las misma será una lista de los filtros que tenemos disponibles. Es el archivo `filter.js` y los filtros son:
539 |
540 | ```js
541 | export default [
542 | { name: 'normal' },
543 | { name: 'clarendon' },
544 | { name: 'gingham' },
545 | { name: 'moon' },
546 | { name: 'lark' },
547 | { name: 'reyes' },
548 | { name: 'juno' },
549 | { name: 'slumber' },
550 | { name: 'aden' },
551 | { name: 'perpetua' },
552 | { name: 'mayfair' },
553 | { name: 'rise' },
554 | { name: 'hudson' },
555 | { name: 'valencia' },
556 | { name: 'xpro2' },
557 | { name: 'willow' },
558 | { name: 'lofi' },
559 | { name: 'inkwell' },
560 | { name: 'nashville' }
561 | ]
562 | ```
563 |
564 | En el step 2, mostraremos un listado de estos, aplicados sobre nuestra imagen. Vamos a crear un componente específico que nos permita hacer esto, se llamará ``CardFilter` y lo vamos a hacer, dentro de la carpeta `components`.
565 |
566 | ```js
567 | import React from 'react';
568 |
569 | const CardFilter = ({filter, image, setFilter}) => {
570 | return (
571 |
572 |
{filter.name}
573 |
setFilter(filter.name)}>
577 |
578 |
579 |
580 | )
581 | }
582 | ```
583 | Al igual que en los CardPosts, el renderizado de los componetes de filtros, será condicional, ya que solo lo vamos a hacer después de haber elegido una imagen (step 2) y se hará desde `Body` através de un `map` de los distintos filtros, estas líneas en nuestro `Body`, serán las responsables de dicho comportamiento:
584 |
585 | ```js
586 | import CardFilter from './CardFilter';
587 | import filters from '../data/filters';
588 | ```
589 |
590 | ```js
591 | {step === 2
592 | &&
{filters.map((filter => ))}
}
593 | ```
594 |
595 | Desde `Home`, filter debe setar establecida como variable de stado, y por tanto, también debemos haber definido setFilter para poder modificar su valor. No vamos a poner aquí el código porque hemos dado ya un montón la turra con las variables de stado y los hooks, os dejamos que le deis un poco al coco... y si a estar altura tenéis fitras las neuronas, podéis encontrar cómo hacerlo, en el código.
596 |
597 | ### ¿Cómo ser Paulo Coelho y dejar comentarios filosóficos? Solo necesitas un textArea y un setCaption.
598 |
599 | Vengaaaa, chicas, que ya no nos queda ná de ná. Después de haber elegido el filtro más molón, navegaremos a la siguiente pantalla, clickando en el botón `Next` del `Header`, haciendo uso del método `handleNext` que setea el step a su valor más uno.
600 |
601 | La última pantalla antes de guardar el post, mostrará la imagen con su filtro aplicado y nos permitirá dejar un comentario filosófico sobre lo hermosa que es la vida (recordemos que esto es IG, no tuiter, así que aquí no caben los haters, somos todo amor, salud y vacatas molonas). De nuevo, vamos a echar mano de un renderizado condicional denro de `Body`:
602 |
603 | ```js
604 | {
605 | step === 3
606 | &&
607 | <>
608 |
609 |
610 |
611 |
612 |
613 |
614 |
622 |
623 |
624 | }
625 | ```
626 |
627 | ### Guardando la info: llamada a la API.
628 | Y yaaaaaaa casiiiii lo tenemos. Solo nos falta implementar el método `handleShare` que haga la petición de guardado de los datos, vuelva al step 1 y actualice los posts:
629 |
630 | ```js
631 | const savePost = async () => {
632 | const url = 'localhost:3000/api/posts';
633 | const post = {
634 | username: 'ngm',
635 | userImage: userImage, //imagen guardada dentro de la carpta data
636 | hasBeenLiked: false,
637 | likes: 0
638 | caption,
639 | filter,
640 | postImage: image,
641 | }
642 | const config = {
643 | method: 'post',
644 | url,
645 | data: post,
646 | }
647 | const res = await axios(config);
648 | }
649 |
650 | const handleShare = () => {
651 | savePost();
652 | setStep(1);
653 | setTimeout(() => getPosts());
654 | }
655 | ```
656 |
657 | ## Likes y dislikes: interaccionando con los post de tus compis.
658 |
659 | Bueno, bueno, bueno... esto ya... mola!!!! Solo una última cosita y es manejar las interacciones con los posts de nuestras coleguis!!! La variable `hasBeenLiked` es una variable `boolean` que indica si ya le hemos dado `me gusta` a una imagen o no. Así que cuando clickamos en los likes, lo que tenemos que hacer, es comprobar si ya le habíamos dado a me gusta o no, si ya le habíamos dado a me gusta, estaremos haciendo un `dislike` y debemos restarle un like, en caso contrario, debemos sumarselo. Y por supuesto, actualizar nuestros posts en base de datos. Con estas pautas... ¿Os atrevéis a hacer este ejercicio vosotras solas? Recordad que si os atascáis en algo simepre podéis acudir al código final del repo.
660 |
661 | ## ¡Enhorabuena! ¡Has completado el taller! :tada:
662 |
663 | Esperamos que hayas aprendido mucho y te hayas quedado con ganas de seguir trasteando. :wink: ¡Eso es lo importante!
664 |
665 |
666 |
667 |
668 |
669 | Ahora tienes un mundo abierto de posibilidades: puedes tratar de mejorar tu aplicación, añadir nuevas funcionalidades, seguir estudiando, practicando, ¡lo que tú quieras!
670 |
671 | Si quieres seguir ampliando información, recuerda que tienes varios enlaces en las slides para seguir aprendiendo. ¡Pero tómatelo con calma! ¡Ahora toca celebrarlo! :beers:
672 |
673 | ## ¡Pero esto no termina aquí!
674 |
675 | ¡No ha hecho más que empezar!
676 |
677 | Si tienes cualquier duda o sugerencia, puedes dejarla en un `issue` de este repo, o incluso hacer una `pull request` encuentras algún error o quieres añadir algo. 🤗
678 |
679 |
13 | 
483 | 
488 | 
667 | 
681 |