text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  import api from '../../services/api';
  
  import {
    Container,
    Header,
    Avatar,
    Name,
    Bio,
    Stars,
    Starred,
    OwnerAvatar,
    Info,
    Title,
    Author,
  } from './styles';
  
  export default class User extends Component {
    static navigationOptions = ({ navigation }) => ({
      title: navigation.getParam('user').name,
    });
  
    state = {
      stars: [],
      page: 1,
      refreshing: false,
    };
  
    async componentDidMount() {
      this.loadStars();
    }
  
    refreshStars = async () => {
      await this.setState({ stars: [], page: 1 });
  
      this.loadStars();
    };
  
    loadStars = async () => {
      const { navigation } = this.props;
      const { stars, page } = this.state;
      const user = navigation.getParam('user');
  
      this.setState({ refreshing: true });
  
      const response = await api.get(`/users/${user.login}/starred?page=${page}`);
  
      this.setState({
        stars: [...stars, ...response.data],
        page: page + 1,
        refreshing: false,
      });
    };
  
    handleNavigate = star => {
      const { navigation } = this.props;
  
      navigation.navigate('StarredView', { star });
    };
  
    render() {
      const { navigation } = this.props;
      const { stars, refreshing } = this.state;
  
      const user = navigation.getParam('user');
  
      return (
        <Container>
          <Header>
            <Avatar source={{ uri: user.avatar }} />
            <Name>{user.name}</Name>
            <Bio>{user.bio}</Bio>
          </Header>
          <Stars
            data={stars}
            keyExtractor={star => String(star.id)}
            renderItem={({ item }) => (
              <Starred onPress={() => this.handleNavigate(item)}>
                <OwnerAvatar source={{ uri: item.owner.avatar_url }} />
                <Info>
                  <Title>{item.name}</Title>
                  <Author>{item.owner.login}</Author>
                </Info>
              </Starred>
            )}
            onEndReachedThreshold={0.2}
            onEndReached={this.loadStars}
            onRefresh={this.refreshStars}
            refreshing={refreshing}
          />
        </Container>
      );
    }
  }
  
  User.propTypes = {
    navigation: PropTypes.shape({
      getParam: PropTypes.func,
      navigate: PropTypes.func,
    }).isRequired,
  };
  