Desafío 2 - Lista la cantidad precisa de comentarios

Clase 35 de 36 • Curso de React Native 2016

Resumen

En el curso dejamos la cantidad de comentarios con un número fijo.

Recuerda cómo hicimos para listar la cantidad de likes de un artista y has lo mismo para listar la cantidad precisa de comentarios.

¡Comparte en los comentarios de este video tu solución con el resto de los alumnos!

Pablo Rendon Rendón

student•

Finalmente lo implemente, sin embargo, tengo algunas dudas, primero la solucion final es esta:

ArtistBox.js

exportdefault class ArtistBox extends Component {
  
  state = {
    linked : false,
    likeCount: 0,
    commentCount:0
  }

  componentWillMount() {
    this.getArtistRef().on('value', snapshot => {
      const artist = snapshot.val()
      const { uid } = firebaseAuth.currentUser
      if (artist){
        this.setState({
          liked: artist.likes && artist.likes[uid],
          likeCount: artist.likeCount
        })
      }
    })
    this.countComments()
  }

  componentDidMount() {
    this.getArtistCommentsRef().on('child_added', this.countComments)
  }

  countComments = () => {
    let commentCount = 0;
    this.getArtistCommentsRef().once('value', snapshot => {
      snapshot.forEach( comment => {
        commentCount = commentCount + 1
      })
      this.setState({
        commentCount : commentCount
      })
    })  
  }

  handlePress = () => {
    const { id } = this.props.artist
    this.toggleLike(!this.state.liked)
  }

  getArtistRef = () => {
    const { id } = this.props.artist
    return firebaseDatabase.ref(`artist/${id}`)
  }


 getArtistCommentsRef = () => {
    const { id } = this.props.artist
    return firebaseDatabase.ref(`comments/${id}`)
  }

  toggleLike = (liked) => {
    const { uid } = firebaseAuth.currentUser

    this.getArtistRef().transaction(function(artist) {
      if (artist) {
        if (artist.likes && artist.likes[uid]) {
          artist.likeCount--;
          artist.likes[uid] = null;
        } else {
          artist.likeCount++;
          if (!artist.likes) {
            artist.likes = {};
          }
          artist.likes[uid] = true;
        }
      }
      return artist || {
        likeCount : 1,
        likes: {
          [uid]:true
        }
      };
    });
  }

  render() {
    const {image, name, comments} = this.props.artist;
    const { likeCount, commentCount } =  this.state;

    const likeIcon = this.state.liked ? 
      <Iconname="ios-heart"size={30}color="#e74c3c" /> : 
      <Iconname="ios-heart-outline"size={30}color="gray" />;

    return (
    
      <Viewstyle={styles.artistBox}>
        <Imagestyle={styles.image}source={{uri:image}}/>
        <Viewstyle={styles.info}>
          <Textstyle={styles.name}>{name}</Text>
          <Viewstyle={styles.row}>
            <Viewstyle={styles.iconContainer}>
              <TouchableOpacityonPress={this.handlePress}>
                {likeIcon}
              </TouchableOpacity>
              <Textstyle={styles.count}>{likeCount}</Text>
            </View>
            <Viewstyle={styles.iconContainer}>
              <Iconname="ios-chatboxes-outline"size={30}color="gray" />
              <Textstyle={styles.count}>{commentCount}</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

ArtistDetailView.js

exportdefaultclassArtistDetailViewextendsComponent{
  state = {
    comments: []
  }

  handleSend = () => {
    const { text } = this.state
    const {uid, photoURL} = firebaseAuth.currentUser
    const artistCommentsRef = this.getArtistCommentsRef()
    var newCommentRef = artistCommentsRef.push()
    newCommentRef.set({ 
      text,
      userPhoto: photoURL,
      uid
    });
    this.setState({ text: '' })
  }

  getArtistCommentsRef = () => {
    const { id } = this.props.artist
    return firebaseDatabase.ref(`comments/${id}`)
  }

  handleChangeText = (text) => this.setState({text})

  componentDidMount() {
    this.getArtistCommentsRef().on('child_added', this.addComment)
    
    this.getArtistCommentsRef().once('value', snapshot => {
      let comments = {comments:[]}
      snapshot.forEach( comment => {
        comments.comments = comments.comments.concat(comment.val())
      })
      this.setState({
        comments: comments.comments
      })
    })  
  
  }

 

  addComment = (data) => {
    const comment = data.val()
    this.setState({
      comments: this.state.comments.concat(comment)
    })
  }

  componentWillUnmount() {
    this.getArtistCommentsRef().off('child_added', this.addComment)
  }

  render() {
    const artist = this.props.artist
    const { comments } = this.state

    return (
      <View style={styles.container}>
        <ArtistBox artist={artist} />
        <CommentList comments={comments}/>
        <View style={styles.inputContainer}>
          <TextInput
            style={styles.input}
            value={this.state.text}
            placeholder="Opina sobre este artista"
            onChangeText={this.handleChangeText}
          />
          <TouchableOpacity onPress={this.handleSend}>
            <Icon name="ios-send-outline" size={30} color="gray" />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

Pregunta 1:
Ahora cuando entro en el detail view y regreso, al ejecutar cualquier accion que cambio el state como el like o agregar un comentario tengo el warning de “SetState can only update a mounted or mounting component…” funciona bien pero sale ese warning, que estoy haciendo mal?

Pregunta 2:
me gustaria entender por que cuando agrego esto en el ArtistBox.js:

componentDidMount() {
    this.getArtistCommentsRef().on('child_added', this.countComments)
  }

me deja de funcionar esto en el ArtistDetailView.js:

componentDidMount() {
this.getArtistCommentsRef().on(‘child_added’, this.addComment)
}

Razon por la cual tuve que reemplazarlo con esto:

componentDidMount() {
this.getArtistCommentsRef().on(‘child_added’, this.addComment)

this.getArtistCommentsRef().once('value', snapshot => {
  let comments = {comments:[]}
  snapshot.forEach( comment => {
    comments.comments = comments.comments.concat(comment.val())
  })
  this.setState({
    comments: comments.comments
  })
})  
}

Espero se entienda, muchas gracias!

Juan Manuel Ramallo

student•

Perdí la funcionalidad de Real-time-database pero sí se muestra bien la cantidad de comentarios.
En el archivo src/ArtistBox.js hice lo siguiente, dentro de componentWillMount() agregué la siguiente porción de código:

let sum = 0
    this.getArtistCommentsRef().once('value', snapshot => {
      snapshot.forEach( comment => {
        sum = sum + 1
      })

      this.setState({
        commentCount: sum
      })

    })

En la definición del estado le agregué también commentCount: 0, y en la vista usé esa variable de estado.

Una pregunta, así como teníamos que hacer unsubscribe del evento child_add para ver la lista de comentarios, que sucede con el evento value, también deberíamos hacer unsubscribe en el componentWillUnmount() ?

Gracias, saludos!

Gonzalo Aguirre

teacher•

Hola Juan, probablemente al suscribirse a un evento que se ejecutará por única vez como es el caso de once no haga falta. Imagino que al hacerse la llamada, debe desuscribirse automáticamente.

De todas formas, podrías investigarlo con más detalle y comentar al resto si esto es así efectivamente 😉

Pablo Castano

student•

Creo que es mejor crear un contador de comentarios en el artista
asi:

ArtistDetailView.js

handleSend = () => {
    const { text } = this.state
    const { uid, photoURL } = firebaseAuth.currentUser
    const artistCommentsRef = this.getArtistCommentsRef()
    const artistRef = this.getArtistRef()

    var newCommentRef = artistCommentsRef.push()
    newCommentRef.set({
      text,
      userPhoto: photoURL,
      uid
    });
    this.setState({ text: '' })
    this.updateCommentCount()
  }

updateCommentCount = () => {
    this.getArtistRef().transaction(function (artist) {
      if (artist) {
        if (artist.commentCount) {
          artist.commentCount++;
        } else {
          artist.commentCount = 1;
        }
        
      }
      return artist || {
        commentCount: 1
      }
    })
  }

Pablo Castano

student•

y en ArtistBox.js:

state = {
    liked: false,
    likeCount: 0,
    commentCount: 0,
  }
componentWillMount() {
    const { uid } = firebaseAuth.currentUser

    this.getArtistRef().on('value', snapshot => {
      const artist = snapshot.val()
      if (artist) {
        this.setState({
          likeCount: artist.likeCount,
          commentCount: artist.commentCount,
          liked: artist.likes && artist.likes[uid]
        })
      }
    })
  }

render() {
    const {image, name, likes, comments} = this.props.artist
    const likeIcon = this.state.liked ?
      <Icon name="ios-heart" size={30} color="#e74c3c" /> :
      <Icon name="ios-heart-outline" size={30} color="gray" />
    const { likeCount, commentCount } = this.state

    return (
    <View style={styles.artistBox}>
        <Image style={styles.image} source={{ uri: image }} />
        <View style={styles.info}>
        <Text style={styles.name}>{name}</Text>
        <View style={styles.row}>
            <View style={styles.iconContainer}>
              <TouchableOpacity onPress={this.handlePress}>
                {likeIcon}
              </TouchableOpacity>
            <Text style={styles.count}>{likeCount}</Text>
            </View>
            <View style={styles.iconContainer}>
            <Icon name="ios-chatboxes-outline" size={30} color="gray" />
            <Text style={styles.count}>{commentCount}</Text>
            </View>
        </View>
        </View>
    </View>
    );
  }

Juan Tagle

student•

Solo para complementar, hay que agregar en el ArtistDetailView

getArtistRef() {
const artistId =
return firebaseDatabase.ref(artists/${artistId})
}

Jhonathan Calvo

student•

Hola tengo una pregunta alguien me puede ayudar?
estoy creando un nuevo registro en la base de datos que me funciona muy bien por que cada vez que un usuario crea un comentario el actualiza el registro y le suma uno ala cantidad de comentarios del artista, cuando consulto la cantidad de comentarios en el

componentWillMount()

me los trae pero solo cuando se recarga la aplicación supongo que es por que se ejecuta una sola vez, la pregunta es si hay algo en reactnative que este escuchando todo el tiempo para que actualice la cantidad de comentarios en el artixBox gracias.

Adjunto el codigo que esta agregando la cantidad de comentarios ala base de datos en el archivo artistDetail.js.

getArtistCantidadCommentRef =  () => {
        const {id} = this.props.artist
        return firebaseDatabase.ref(`artistCantidadComments/${id}`)
    }

handleSend = () => {
        const { uid, photoURL, displayName } = firebaseAuth.currentUser
        const { text } = this.state
        const idArtist = this.getArtistCantidadCommentRef()
        const artistCommentsReft = this.getArtistCommentsRef()
        var newCommentRef = artistCommentsReft.push()
        newCommentRef.set({ 
            text,
            userPhoto: photoURL,
            uid,
            name: displayName,
        });
        this.setState({ text: '' })

        idArtist.transaction(function (cantidadComentarios) {
            if (cantidadComentarios) {
                cantidadComentarios.total++
            }
            return cantidadComentarios || {
                total: 1
            }
        });
       
    }

en el artixBox.js aca esta el problema solo trae los resultados cuando se carga la pantalla

componentWillMount(){
        this.getArtistCantidadCommentRef().on('child_added', data =>{
            const cantidadComentarios = data.val()
            this.setState({cantidadComentarios: cantidadComentarios})
        })
    }

Gracias de antemano si alguien me puede ayudar…

Cristian Gimenez

student•

Creo que es porque estas “escuchando” cuando se agrega una nueva cantidad de comentarios (‘child_added’) y en realidad tendrías que escuchar cuando se modifica un valor ‘value’ o ‘child_changed’, porque con cada suma que le haces al valor le estas cambiando el valor a “cantidadComentarios”, proba con eso quizá te funcione 😉

Jhonathan Calvo

student•

Listo resuelto ya tengo mi contador de comentarios funcioanando al pelo.

Grover Jesus Trujillo Benites

student•

Ayuda
Copié el método de getArtistCommentsRef en ArtisBox para poder obtener el listado de comentarios en base al id del artist, y así obtener la cantidad, al usarlo dentro del componentWillMount funciona bien, pero ya no me llega a cargar todos los comentarios (solo me trae el último)
Estoy yendo por buen camino o cual sería lo mejor 😃

Ricardo Azpeitia P.

student•

Es dificil saber si no podemos ver tu codigo.

Cristian Gimenez

student•

A mi me pasa lo mismo que a @GroverJTB si obtengo la cantidad desde el ArtistDetailView, todo bien… Me muestra todos los comentarios y la cantidad, pero con el detalle de que si lo hago desde el ArtistDetailView solo se muestran cuando estoy en la pantalla de Detalle… Sigo pensando y buscando alguna manera que ande todo xD

exportdefault class ArtistBox extends Component {
  
  state = {
    linked : false,
    likeCount: 0,
    commentCount:0
  }

  componentWillMount() {
    this.getArtistRef().on('value', snapshot => {
      const artist = snapshot.val()
      const { uid } = firebaseAuth.currentUser
      if (artist){
        this.setState({
          liked: artist.likes && artist.likes[uid],
          likeCount: artist.likeCount
        })
      }
    })
    this.countComments()
  }

  componentDidMount() {
    this.getArtistCommentsRef().on('child_added', this.countComments)
  }

  countComments = () => {
    let commentCount = 0;
    this.getArtistCommentsRef().once('value', snapshot => {
      snapshot.forEach( comment => {
        commentCount = commentCount + 1
      })
      this.setState({
        commentCount : commentCount
      })
    })  
  }

  handlePress = () => {
    const { id } = this.props.artist
    this.toggleLike(!this.state.liked)
  }

  getArtistRef = () => {
    const { id } = this.props.artist
    return firebaseDatabase.ref(`artist/${id}`)
  }


 getArtistCommentsRef = () => {
    const { id } = this.props.artist
    return firebaseDatabase.ref(`comments/${id}`)
  }

  toggleLike = (liked) => {
    const { uid } = firebaseAuth.currentUser

    this.getArtistRef().transaction(function(artist) {
      if (artist) {
        if (artist.likes && artist.likes[uid]) {
          artist.likeCount--;
          artist.likes[uid] = null;
        } else {
          artist.likeCount++;
          if (!artist.likes) {
            artist.likes = {};
          }
          artist.likes[uid] = true;
        }
      }
      return artist || {
        likeCount : 1,
        likes: {
          [uid]:true
        }
      };
    });
  }

  render() {
    const {image, name, comments} = this.props.artist;
    const { likeCount, commentCount } =  this.state;

    const likeIcon = this.state.liked ? 
      <Iconname="ios-heart"size={30}color="#e74c3c" /> : 
      <Iconname="ios-heart-outline"size={30}color="gray" />;

    return (
    
      <Viewstyle={styles.artistBox}>
        <Imagestyle={styles.image}source={{uri:image}}/>
        <Viewstyle={styles.info}>
          <Textstyle={styles.name}>{name}</Text>
          <Viewstyle={styles.row}>
            <Viewstyle={styles.iconContainer}>
              <TouchableOpacityonPress={this.handlePress}>
                {likeIcon}
              </TouchableOpacity>
              <Textstyle={styles.count}>{likeCount}</Text>
            </View>
            <Viewstyle={styles.iconContainer}>
              <Iconname="ios-chatboxes-outline"size={30}color="gray" />
              <Textstyle={styles.count}>{commentCount}</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

exportdefaultclassArtistDetailViewextendsComponent{
  state = {
    comments: []
  }

  handleSend = () => {
    const { text } = this.state
    const {uid, photoURL} = firebaseAuth.currentUser
    const artistCommentsRef = this.getArtistCommentsRef()
    var newCommentRef = artistCommentsRef.push()
    newCommentRef.set({ 
      text,
      userPhoto: photoURL,
      uid
    });
    this.setState({ text: '' })
  }

  getArtistCommentsRef = () => {
    const { id } = this.props.artist
    return firebaseDatabase.ref(`comments/${id}`)
  }

  handleChangeText = (text) => this.setState({text})

  componentDidMount() {
    this.getArtistCommentsRef().on('child_added', this.addComment)
    
    this.getArtistCommentsRef().once('value', snapshot => {
      let comments = {comments:[]}
      snapshot.forEach( comment => {
        comments.comments = comments.comments.concat(comment.val())
      })
      this.setState({
        comments: comments.comments
      })
    })  
  
  }

 

  addComment = (data) => {
    const comment = data.val()
    this.setState({
      comments: this.state.comments.concat(comment)
    })
  }

  componentWillUnmount() {
    this.getArtistCommentsRef().off('child_added', this.addComment)
  }

  render() {
    const artist = this.props.artist
    const { comments } = this.state

    return (
      <View style={styles.container}>
        <ArtistBox artist={artist} />
        <CommentList comments={comments}/>
        <View style={styles.inputContainer}>
          <TextInput
            style={styles.input}
            value={this.state.text}
            placeholder="Opina sobre este artista"
            onChangeText={this.handleChangeText}
          />
          <TouchableOpacity onPress={this.handleSend}>
            <Icon name="ios-send-outline" size={30} color="gray" />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

componentDidMount() {
this.getArtistCommentsRef().on(‘child_added’, this.addComment)

this.getArtistCommentsRef().once('value', snapshot => {
  let comments = {comments:[]}
  snapshot.forEach( comment => {
    comments.comments = comments.comments.concat(comment.val())
  })
  this.setState({
    comments: comments.comments
  })
})  
}

let sum = 0
    this.getArtistCommentsRef().once('value', snapshot => {
      snapshot.forEach( comment => {
        sum = sum + 1
      })

      this.setState({
        commentCount: sum
      })

    })

handleSend = () => {
    const { text } = this.state
    const { uid, photoURL } = firebaseAuth.currentUser
    const artistCommentsRef = this.getArtistCommentsRef()
    const artistRef = this.getArtistRef()

    var newCommentRef = artistCommentsRef.push()
    newCommentRef.set({
      text,
      userPhoto: photoURL,
      uid
    });
    this.setState({ text: '' })
    this.updateCommentCount()
  }

updateCommentCount = () => {
    this.getArtistRef().transaction(function (artist) {
      if (artist) {
        if (artist.commentCount) {
          artist.commentCount++;
        } else {
          artist.commentCount = 1;
        }
        
      }
      return artist || {
        commentCount: 1
      }
    })
  }

state = {
    liked: false,
    likeCount: 0,
    commentCount: 0,
  }
componentWillMount() {
    const { uid } = firebaseAuth.currentUser

    this.getArtistRef().on('value', snapshot => {
      const artist = snapshot.val()
      if (artist) {
        this.setState({
          likeCount: artist.likeCount,
          commentCount: artist.commentCount,
          liked: artist.likes && artist.likes[uid]
        })
      }
    })
  }

render() {
    const {image, name, likes, comments} = this.props.artist
    const likeIcon = this.state.liked ?
      <Icon name="ios-heart" size={30} color="#e74c3c" /> :
      <Icon name="ios-heart-outline" size={30} color="gray" />
    const { likeCount, commentCount } = this.state

    return (
    <View style={styles.artistBox}>
        <Image style={styles.image} source={{ uri: image }} />
        <View style={styles.info}>
        <Text style={styles.name}>{name}</Text>
        <View style={styles.row}>
            <View style={styles.iconContainer}>
              <TouchableOpacity onPress={this.handlePress}>
                {likeIcon}
              </TouchableOpacity>
            <Text style={styles.count}>{likeCount}</Text>
            </View>
            <View style={styles.iconContainer}>
            <Icon name="ios-chatboxes-outline" size={30} color="gray" />
            <Text style={styles.count}>{commentCount}</Text>
            </View>
        </View>
        </View>
    </View>
    );
  }

getArtistCantidadCommentRef =  () => {
        const {id} = this.props.artist
        return firebaseDatabase.ref(`artistCantidadComments/${id}`)
    }

handleSend = () => {
        const { uid, photoURL, displayName } = firebaseAuth.currentUser
        const { text } = this.state
        const idArtist = this.getArtistCantidadCommentRef()
        const artistCommentsReft = this.getArtistCommentsRef()
        var newCommentRef = artistCommentsReft.push()
        newCommentRef.set({ 
            text,
            userPhoto: photoURL,
            uid,
            name: displayName,
        });
        this.setState({ text: '' })

        idArtist.transaction(function (cantidadComentarios) {
            if (cantidadComentarios) {
                cantidadComentarios.total++
            }
            return cantidadComentarios || {
                total: 1
            }
        });
       
    }

componentWillMount(){
        this.getArtistCantidadCommentRef().on('child_added', data =>{
            const cantidadComentarios = data.val()
            this.setState({cantidadComentarios: cantidadComentarios})
        })
    }

Desafío 2 - Lista la cantidad precisa de comentarios

Lanzamiento del Curso

Intro a React Native y a Platzimusic, el proyecto del curso

Requerimientos técnicos del curso

Guía de instalación de React Native

Guía de instalación para desarrollar para Android

Introducción al Desarrollo Mobile

¿De qué se trata este Curso de React Native?

Tres enfoques para desarrollo de aplicaciones móviles

Qué es React Native y sus componentes básicos

Primera App con React Native

Instalación y configuración de entorno

Creando tu primera aplicación

Developer Experience (DX)

Componentes y APIs

Estilos y Layout con Flexbox

PlatziMusic

Armando la ArtistBox

Componentes reutilizables

Contenedores con Scroll

Armando nuestro listado de artistas

Consume datos de la API de last.fm para listar los artistas

Routing y Navegación

Agregando una vista de detalle

Autenticación de usuarios

Agregando login con Facebook para iOS

Agregando botón de login con Facebook para iOS

Agregando botón de login con Facebook para Android

Configurando autenticación con Firebase

Agreguemos las funcionalidades principales a nuestra app: likes y comentarios

Refactor y referencias de Firebase

Agrega la funcionalidad para hacer Like a un artista

Envia comentarios de un artista y almacénalos en Firebase

Lista los comentarios de un artista trayendo los datos desde Firebase

Agrega un avatar de usuario para mostrar en los comentarios

Refinando detalles de la app

Mejorando la UI/UX de PlatziMusic para Android y iOS en cada caso

Agrega recursos de imágenes en la aplicación para la pantalla de login

Agrega un ícono bonito para PlatziMusic

Llevando la app a los Stores

Cómo subir tu aplicación de React Native al Play Store

Cómo subir tu aplicación de React Native al App Store

Conclusiones

Cierre del curso

Desafíos

Desafío 1 - Lista los artistas top de tu país

Desafío 2 - Lista la cantidad precisa de comentarios

Desafío 3 - Comparte un artista en Facebook o Whatsapp