text: import React, { Component } from 'react';
  import { FaGithubAlt, FaPlus, FaSpinner } from 'react-icons/fa';
  import { Link } from 'react-router-dom';
  
  import Container from '../../components/Container';
  import { Form, SubmitButton, List } from './styles';
  
  import api from '../../services/api';
  
  export default class Main extends Component {
    // eslint-disable-next-line react/state-in-constructor
    state = {
      newRepo: '',
      repositories: [],
      loading: false,
      notFound: false,
    };
  
    componentDidMount() {
      const repositories = localStorage.getItem('repositories');
  
      if (repositories) {
        this.setState({ repositories: JSON.parse(repositories) });
      }
    }
    // para carregar o localstorage
  
    componentDidUpdate(_, prevState) {
      const { repositories } = this.state;
      if (prevState.repositories !== repositories) {
        localStorage.setItem('repositories', JSON.stringify(repositories));
      }
    }
    // para salvar dados localstorage
  
    handleInputChange = e => {
      this.setState({ newRepo: e.target.value });
    };
  
    handleSubmit = async e => {
      e.preventDefault();
  
      this.setState({ loading: true, notFound: false });
  
      try {
        const { newRepo, repositories } = this.state;
  
        const response = await api.get(`/repos/${newRepo}`);
        // response e a variavel com a url para requisicao
  
        if (newRepo === '')
          throw new Error(alert('You need to add a repository'));
  
        const hasRepo = repositories.find(r => r.name === newRepo);
  
        if (hasRepo) throw alert('You already have this repository');
  
        const data = {
          name: response.data.full_name,
        };
  
        this.setState({
          repositories: [...repositories, data],
          newRepo: '',
        });
      } catch (error) {
        this.setState({ notFound: true });
      } finally {
        this.setState({ loading: false });
      }
    };
  
    render() {
      const { newRepo, loading, repositories, notFound } = this.state;
  
      return (
        <Container>
          <h1>
            <FaGithubAlt />
            Repositories
          </h1>
  
          <Form onSubmit={this.handleSubmit} notFound={notFound ? 1 : 0}>
            <input
              type="text"
              placeholder="Add repositorie"
              value={newRepo}
              onChange={this.handleInputChange}
            />
  
            <SubmitButton loading={loading ? 1 : 0}>
              {loading ? (
                <FaSpinner color="#fff" size={14} />
              ) : (
                <FaPlus color="#fff" size={14} />
              )}
            </SubmitButton>
          </Form>
  
          <List>
            {repositories.map(repository => (
              <li key={repository.name}>
                <span>{repository.name}</span>
                <Link to={`/repository/${encodeURIComponent(repository.name)}`}>
                  Details
                </Link>
              </li>
            ))}
          </List>
        </Container>
      );
    }
  }
  