Modificando respuesta de url

1. Creo una variable que será un arreglo de objetos con todo lo que me trae respuesta.data y le agrego a cada publicación dos atributos mas. Y las mando al arreglo de publicaciones_actualizadas (ese arreglo tiene las publicaciones)

2. Publicaciones/index.js creo un función llamada mostrarInfo() que es lo que va a retornar ponerPublicaciones() Es una función que retorna todas las publicaciones del usuario en especifico (recibimos por parámetro todas las publicaciones que le corresponden a este usuario y la casilla de donde están las publicaciones de este usuario)

3. Creamos un **actionsCreator **en PublicacionesActions que cuando le den click al div llame al actions, que recibe por parámetro la casilla de donde están las publicaciones de este usuario y a cual publicación en especifico fue a la que le di click (sacamos el índice de la publicación del map)

Conclusión: a cada publicación le agrego dos atributos, después creo una función en Publicaciones/index.js llamada mostrarInfo() y Creamos un actionsCreator en PublicacionesActions que cuando le den click al div llame al actions y este recibe por parámetro la casilla de donde están las publicaciones de este usuario y a cual publicación en especifico fue a la que le di click

El contenido esta excelente pero creo que el código se torna bastante confuso, siendo react se pudo estructurar de una manera mas declarativa y son detalles pero hasta el nombrado de las variables como pub_key, com_key, lo entiendes ahora pero si se lo entregas a otro programador no sabrá de que tratan esto o incluso tu mismo si lo ves en unos meses después

Si llegaste hasta aquí y crees que esto ya es codigo espagueti, proponte optimizarlo al final del curso en vez de quejarte (A menos de que ya lo este haciendo), porque afuera hay proyectos mucho mas enredados que este (Porque este esta tranqui ) que posiblemente vas a tener que optimizar 😉

No se si alterar la respuesta y formar otra estructura de datos como agregarle campos, sea buena práctica. En una aplicación real esto sería un quiebre de cabeza para su mantenimiento, si solo alguien remueve esa propiedad porque no sabia que se agrego, romperia el funcionamiento, ya que se esta utilizando hasta para validar, que, se renderiza. Creo que se debe formar contratos como las interfaces de TypeScript, porque dejarlas estas alteraciones por ahi causaría problemas.

Se enreda mas el código pero seguimos

Aun no se arregla el problema,
por ejemplo estoy en las publicaciones todo normal, pero si regreso a usuarios y quiero ver otras publicaciones de otros usuarios me sale un error, pero si recargo la pagina sale todo normal.

¿Por qué se hizo ese cambio en el código, qué se busca mostrar?

1. Queremos hacer que el store maneje el estado de las publicaciones. Esto quiere decir que dentro del store global vamos a tener las publicaciones (título y párrafo) para ser mostradas dinámicamente,
2. lo que también expresa que el onClick va a traer únicamente el comentario por título.

·
El profesor cambia la estructura del ćodigo para hacer lo siguente:

• ponerPublicaciones: va traer el estado del store y por medio de la función mostrarInformacion va a pasar publicaciones & publicacionesKey (que son las publicaciones actualizadas).

setPublications = () => {
    const {
      usersReducer,
      publicationsReducer,
      usersReducer: { users },
      publicationsReducer: { publications },
      match: { params: { key } }
    } = this.props;
    // Se revisa info del usuario
    if (!users.length) return; // la información del usuario no existe
    if (usersReducer.error) return; // la información del usuario tiene error
    // Se revisa info de las publicaciones
    if (publicationsReducer.loading) // info publicaciones cargando
      return <Spinner />;
    if (publicationsReducer.error) // la información de publicaciones tiene error
      return <Fatal message={publicationsReducer.error} />;
    // Se revisan que las publicaciones se encuentren
    if (!publications.length) return; // la información de publicaciones no existe
    if (!('publicationsKey' in users[key])) return;  // la información de publicaciones por user no existe

    const { publicationsKey } = users[key];

    return this.showInformation(
      publications[publicationsKey],
      publicationsKey,
    );
  }

// **ponerPublicaciones** realiza las validaciones de que por usuario exista publicaciones, si existe, le va a pasar esa información a otra función que se haga cargo de mostrar lo que ya se trajo del **store**: mostrarInformacion()

• mostrarInformacion: va a recibir las publicaciones & publicacionesKey para que por medio del onClick se muestren dinámicamente una por una.

showInformation = (publications, publicationsKey) => {

    return publications.map((publication, commentKey) => (
      <div
        key={`${publication.userId}_${publication.id}`}
        className="publications_body"
        onClick={() => this.props.openAndClosePublications(publicationsKey, commentKey)}
      >
        <h4> {publication.title}
        </h4>
        <span>{publication.body}</span>
      </div>
    ));
  };

• openAndClosePublications: En las acciones de publicaciones, definimos una función (action) para cuando ocurra ese onClick() de mostrarInformacion. Esto lo que hará es anunciar si la publicación seleccionada fue clickeada, para enviar únicamente esa información (que hasta ahora estamos mostrando con un console.log). Esta acción nos anuncia si la publicación seleccionada debería estar abierta (trayendo y viendo comentarios) o cerrada (solo viendo el título de la publicación).

export const openAndClosePublications = (publicationsKey, commentKey) => {
  return async (dispatch) => {
    console.log(publicationsKey, commentKey);
  };
};

Excelente clase. 🙂 Que montón de cosas las que se necesitan para lograr ese resultado relativamente pequeño jeje.

Muy bien por toda esta información paso a paso

Buena explicacion

Por el momento lo hice en una función del componente

  handleOnclick = (PublicationsIndex, CommentsIndex) => {
    return console.log(PublicationsIndex, CommentsIndex);```

huy huy pero esto cada vez se pone mas complejo y lo mejor es que se entiende

Se puso muy enredado el código, si fuera un proyecto real y se lo pasamos a otro dev así como está le agarra una garrotera, pero bueno