En ésta tercera y última parte vamos a editar el componente Post para mostrar los campos personalizados ISBN y Editorial que hemos creado anteriormente para nuestros libros de ejemplo. Al final del texto tienes los archivos del proyecto que hemos modificado por si quieres descargarlos y comprobarlos con los tuyos.
El «estado» de Frontity
Durante los anteriores vídeos me he estado refiriendo en muchas ocasiones al «estado» de Frontity como el lugar donde el framework almacena todos los datos que consulta a través de la API de nuestro WordPress para así poder facilitar la información que necesitemos sin tener que volver a pedir todos estos datos al servidor.
Pero hasta el momento, este estado ha sido como una caja negra para nosotros. Pero podemos saber qué información tiene el estado de nuestra aplicación gracias al objeto frontity que tenemos disponible a través de la consola de nuestro navegador, a la cual puedes acceder con la opción de «Inspeccionar elemento» y seleccionando la pestaña de Consola.
Con poner frontity.state.source en la consola de nuestro navegador podemos acceder al estado de la aplicación y lo que es más importante, podemos ver la estructura que tiene y por tanto consultar cualquier valor que necesitemos de él para que sea mostrado en nuestra aplicación.
Si navegas por el árbol del estado podrás ver el array «libros» en cuyo interior se encuentran los libros que hemos creado y toda la información de la cual dispone Frontity. También podrás observar el array de nuestra taxonomía personalizada «género».
Dentro del array de libros, si observas cualquier de los objetos libro que tiene el estado, podrás ver un objeto llamado «acf». Éste objeto se ha creado y transmitido a través de la API gracias al plugin ACF REST API que instalamos anteriormente y que hacía visibles los custom fields creados con el plugin ACF.
Pues bien, accediendo a ese objeto podremos acceder a los valores que tienen nuestros libros para «isbn» y «editorial».
Nota importante: para acceder a cada libro en el array de libros necesitamos conocer el id del libro.
Editando el componente post.js
En este caso en concreto estamos utilizando el tema Mars Theme para nuestra aplicación. Este tema tiene un componente que se encarga de renderizar todos los elementos de tipo single de nuestro WordPress. Un elemento de tipo single es un post, un libro, etc.
Como vamos a querer mostrar el ISBN y la editorial, pero esos campos son exclusivos de los libros, lo primero que debemos hacer es escribir un condicional donde esos campos vayan a ser mostrados siempre y cuando el objeto que vaya a ser renderizado sea un libro. Ya sabes, un post no tiene editorial. Para ello necesitamos saber cómo identificar el tipo de post.
Este componente post.js está accediendo al estado de la siguiente forma:
const data = state.source.get(state.router.link);
Si desde dentro de un post o un custom post type, accedemos al estado a través de su URL podemos consultar que tipo de post es a través del atributo type. Por tanto podemos crear una constante de este tipo:
const postType = data.type;
Y en el JSX de nuestro componente podemos añadir nuestro condicional ternario:
{ postType == "libro" && (
<div>
<p>Esto es un libro con id: {post.id}</p>
</div>
)}
En este caso sólo si el post es de tipo libro se renderizará ese contenedor con el párrafo indicado. Aprovechamos también para acceder al post.id. Valor que vamos a necesitar para consumir todos los datos que necesitamos del libro y que mostraremos al usuario.
Para acceder de forma rápida a nuestro libro podemos almacenarlo en una constante:
const libro = state.source["libro"][data.id];
Y para recuperar cualquier valor de nuestro libro, por ejemplo el isbn, solo tenemos que escribir: const isbn = libro.acf.isbn;
Aquí te dejo múltiples formas de acceder a los valores de nuestro libro, ya que realmente en el componente ya tenemos el post almacenado en una variable post:
const libro = state.source["libro"][data.id]; const isbn = libro.acf.isbn; const editorial = post.acf.editorial; const genero = state.source.genero[post.genero].name;
Ahora ya podemos actualizar nuestro componente y mostrar para los libros todos los datos que nos interesan:
{ postType == "libro" && (
<div>
<p>Esto es un libro con id: {post.id}</p>
<p>Dado de alta: <b>{date.toDateString()}</b></p>
Por: <b>{author.name}</b>
<p>Con ISBN: {isbn}</p>
<p>Publicado por: {editorial}</p>
<p>Género: {genero}</p>
</div>
)}
Como ves ya estamos mostrando todos los datos que necesitamos de nuestro componente en nuestra aplicación.
Con este tercer y último vídeo damos por finalizado es pequeño curso cuyo objetivo era mostrarte cómo pueden crearse aplicaciones web reales con WordPress y React gracias a Frontity. Si tienes cualquier pregunta no dudes en usar el formulario de contacto y te responderé encantado.
Si hay algún tema que te interese tratar, por favor recuerda que además del formulario de contacto puedes encontrar en Twitter donde soy @fran__gallardo