import React, {Component} from 'react';
import { CardList } from './components/card-list/card-list.component';
import { SearchBox } from './components/search-box/search-box.component';
import { NavigationBtn } from './components/page-navigation/back-to-top';
import './App.css';

class App extends Component{
  constructor(){
    super();

    this.state = {
      pokemons: [],
      search:''
    };
  }

  componentDidMount(){
    fetch('https://pokeapi.co/api/v2/pokemon?limit=500')
    .then(response => response.json())
    .then(name => this.setState({pokemons:name.results}));
  }

  handleChange=(e) => {
    this.setState({search: e.target.value});
  };

  render(){

    const {pokemons, search } = this.state;
    const fileteredPokemons = pokemons.filter(pokemon => pokemon.name.toLowerCase().includes(search.toLowerCase()));

    return(
      <div className="App">
        <h4><a href="https://www.linkedin.com/in/surojit-manna" target="_blank" noreferrer>Author</a></h4>
        <h1>Pokemon Database</h1>
        <SearchBox
          placeholder='Search Pokemon' 
          handleChange= {this.handleChange}
        />
        <NavigationBtn/>
        <CardList pokemons={fileteredPokemons}></CardList>

      </div>
    );
  }
}

export default App;

import React from 'react';

import { Card } from '../card/card.component';

import './card-list.style.css';


export const CardList = props => (
    <div className='card-list'>
        {props.pokemons.map(pokemon =>(
        <Card key={pokemon.name} pokemon={pokemon}></Card>
        ))}
    </div>
);

import React from 'react';
import './search-box.styles.css';

export const SearchBox = ({placeholder, handleChange}) =>(
    <input 
        className='search'
        type='search' 
        placeholder={placeholder} 
        onChange={handleChange}
    />
);

import React from 'react';

import './card.styles.css';

export const Card = props =>(
    <div className="card-continer">
        <a href={`https://www.pokemon.com/us/pokedex/${props.pokemon.name}`} target="_blank" rel="noreferrer">
            <img alt="pokemon" src={`https://img.pokemondb.net/artwork/large/${props.pokemon.name}.jpg`}/>
            <h2>{props.pokemon.name[0].toUpperCase()+props.pokemon.name.slice(1)}</h2>
        </a>
    </div>
);