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

Clase 36 de 36 • Curso de React Native 2016

Contenido del curso

Lanzamiento del Curso

1
Intro a React Native y a Platzimusic, el proyecto del curso
14:14 min

Requerimientos técnicos del curso

Introducción al Desarrollo Mobile

Primera App con React Native

PlatziMusic

Autenticación de usuarios

Agreguemos las funcionalidades principales a nuestra app: likes y comentarios

Refinando detalles de la app

Llevando la app a los Stores

Conclusiones

33
Cierre del curso
00:36 min

Desafíos

Tomar examen

Resumen

Tenemos botones para hacer like y para agregar un comentario a un artista.

En este desafío, te reto a que agregues un botón para compartir por Facebook o Whatsapp el nombre del artista y un enlace a su página en Last.fm.

Para hacerlo, vas a tener que modificar un poco api-client.js. Utiliza la librería react-native-share que te ayudará a agregar esta funcionalidad.

¡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

export default 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 ? 
      <Icon name="ios-heart" size={30} color="#e74c3c" /> : 
      <Icon name="ios-heart-outline" size={30} color="gray" />;

    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>
    );
  }
}

ArtistDetailView.js

export default class ArtistDetailView extends Component {
  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>
    );
  }
}

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 1)

Ahora la pregunta 2:
me gustaria entender por que cuando agrego

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

en ArtistBox.js me deja de funcionar:

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

en ArtistDetailView.js, Razon por la cual tuve que reemplazarlo con

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!

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

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