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

Clase 36 de 36 • Curso de React Native 2016

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!

Juan Manuel Ramallo

student•

No hay examen del curso?

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!

RAMIRO JHONATAN TORREJON CASTRO

student•

Lo hice con esto:

En artistBox agregué esto:

handleShareButtonPress = (name, url) => {
    Share.share({
      message: name + '  -  ' + url,
      url: url,
      title: 'PlatziMusic'
    }, {
      dialogTitle: 'Share Artist Website',
      excludedActivityTypes: [
        'com.apple.UIKit.activity.PostToTwitter'
      ],
      tintColor: 'green'
    })
    .then(this.showShareResult)
    .catch((error) => this.setState({result: 'error: ' + error.message}));
  }

  showShareResult = (result) => {
    if (result.action === Share.sharedAction) {
      if (result.activityType) {
        this.setState({result: 'shared with an activityType: ' + result.activityType});
      } else {
        this.setState({result: 'shared'});
      }
    } else if (result.action === Share.dismissedAction) {
      this.setState({result: 'dismissed'});
    }
  }

y en el render agregué esto:

<View style={styles.iconContainer}>
              <TouchableOpacity onPress={() => {this.handleShareButtonPress(name, url)}}>
                {shareIcon}
              </TouchableOpacity>
            </View>

Enrique Alexis Lopez Araujo

student•

@rajhoca he intentado con el codigo que proporcionas pero no he podido lograr el reto.

Grover Jesus Trujillo Benites

student•

Share.shareSingle(Object.assign(shareOptions, {
       "social": "facebook"
    }));

Fernando Rivas Palomo

student•

Lo he implementado usando la api Share que viene con React Native.

pero me surgen las dudas del uso de las opciones excludedActivityTypes y tintColor que vienen en la api Share, según la documentación de React Native.

¿Alguien sabe qué utilidad tienen? No encuentro información de su uso.

ApiClient.js

function getArtists() {
  return fetch(apiURL)
    .then(response => response.json())
    .then(data => data.topartists.artist)
    .then(artists => artists.map(artist => {
      return {
        id: artist.mbid,
        url: artist.url,
        name: artist.name,
        image: artist.image[3]['#text'],
        likes: 200,
        comments: 140
      }
    }))
}

export { getArtists }

ArtisBox.js

import React, { Component } from 'react';
import {
  Share,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons'

import {firebaseDatabase, firebaseAuth} from '../firebase'

export default class ArtistBox extends Component {

  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 ? artist.likeCount : 0,
          liked: artist.likes && artist.likes[uid],
          commentCount: artist.commentCount
        })
      }
    })
  }

  handlePress = () => {
    this.toggleLike()
  }

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

  toggleLike = () => {
    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,
        commentCount: 0,
        likes: {
          [uid]: true
        }
      };
    });
  }

  shareArtist = () => {

    const { name, url } = this.props.artist

    Share.share({
      message: `Escucha a ${name}`,
      url: url,
      title: {name}
    }, {
      dialogTitle: {name},
      excludedActivityTypes: [
        'com.apple.UIKit.activity.PostToTwitter'
      ],
      tintColor: 'green'
    })
    .catch((error) => console.log(error.message));
  }

  render() {
    const { image, name, 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}>
          <TouchableOpacity style={styles.share} onPress={this.shareArtist}>
            <Icon name="ios-share-outline" size={30} color="gray" />
          </TouchableOpacity>
          <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>
    );
  }
}

const styles = StyleSheet.create({
  artistBox: {
    backgroundColor: 'white',
    elevation: 4,
    flexDirection: 'row',
    margin: 5,
    shadowColor: 'black',
    shadowOpacity: .5,
    shadowOffset: {
      height: 4,
      width: 4
    }
  },
  image: {
    width: 150,
    height: 150,
  },
  info: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  share: {
    alignSelf: 'flex-end',
    marginRight: 10,
  },
  name: {
    fontSize: 20,
    marginTop: 10,
    color: '#333'
  },
  row: {
    flexDirection: 'row',
    marginHorizontal: 30,
    marginTop: 15
  },
  iconContainer: {
    flex: 1,
    alignItems: 'center'
  },
  count: {
    color: 'gray'
  }
});

Gonzalo Aguirre

teacher•

excludedActivityTypes sirve para definir qué tipos de share querés excluir: podés indicar que no querés que se comparta por WhatsApp por ejemplo.

tintColor debe definir el background color del pop-up de sharing o algo por el estilo.

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

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

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

handleShareButtonPress = (name, url) => {
    Share.share({
      message: name + '  -  ' + url,
      url: url,
      title: 'PlatziMusic'
    }, {
      dialogTitle: 'Share Artist Website',
      excludedActivityTypes: [
        'com.apple.UIKit.activity.PostToTwitter'
      ],
      tintColor: 'green'
    })
    .then(this.showShareResult)
    .catch((error) => this.setState({result: 'error: ' + error.message}));
  }

  showShareResult = (result) => {
    if (result.action === Share.sharedAction) {
      if (result.activityType) {
        this.setState({result: 'shared with an activityType: ' + result.activityType});
      } else {
        this.setState({result: 'shared'});
      }
    } else if (result.action === Share.dismissedAction) {
      this.setState({result: 'dismissed'});
    }
  }

<View style={styles.iconContainer}>
              <TouchableOpacity onPress={() => {this.handleShareButtonPress(name, url)}}>
                {shareIcon}
              </TouchableOpacity>
            </View>

function getArtists() {
  return fetch(apiURL)
    .then(response => response.json())
    .then(data => data.topartists.artist)
    .then(artists => artists.map(artist => {
      return {
        id: artist.mbid,
        url: artist.url,
        name: artist.name,
        image: artist.image[3]['#text'],
        likes: 200,
        comments: 140
      }
    }))
}

export { getArtists }

import React, { Component } from 'react';
import {
  Share,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons'

import {firebaseDatabase, firebaseAuth} from '../firebase'

export default class ArtistBox extends Component {

  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 ? artist.likeCount : 0,
          liked: artist.likes && artist.likes[uid],
          commentCount: artist.commentCount
        })
      }
    })
  }

  handlePress = () => {
    this.toggleLike()
  }

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

  toggleLike = () => {
    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,
        commentCount: 0,
        likes: {
          [uid]: true
        }
      };
    });
  }

  shareArtist = () => {

    const { name, url } = this.props.artist

    Share.share({
      message: `Escucha a ${name}`,
      url: url,
      title: {name}
    }, {
      dialogTitle: {name},
      excludedActivityTypes: [
        'com.apple.UIKit.activity.PostToTwitter'
      ],
      tintColor: 'green'
    })
    .catch((error) => console.log(error.message));
  }

  render() {
    const { image, name, 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}>
          <TouchableOpacity style={styles.share} onPress={this.shareArtist}>
            <Icon name="ios-share-outline" size={30} color="gray" />
          </TouchableOpacity>
          <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>
    );
  }
}

const styles = StyleSheet.create({
  artistBox: {
    backgroundColor: 'white',
    elevation: 4,
    flexDirection: 'row',
    margin: 5,
    shadowColor: 'black',
    shadowOpacity: .5,
    shadowOffset: {
      height: 4,
      width: 4
    }
  },
  image: {
    width: 150,
    height: 150,
  },
  info: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  share: {
    alignSelf: 'flex-end',
    marginRight: 10,
  },
  name: {
    fontSize: 20,
    marginTop: 10,
    color: '#333'
  },
  row: {
    flexDirection: 'row',
    marginHorizontal: 30,
    marginTop: 15
  },
  iconContainer: {
    flex: 1,
    alignItems: 'center'
  },
  count: {
    color: 'gray'
  }
});

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