import React, { useEffect } from 'react';
import './App.css';
import { connect } from 'react-redux';
import { fetchCat } from  './ducks/cat/actions';
import { getCatUrl, getCatLoading } from './ducks/cat/selectors';

const App = ({ loading, onLoadCat, src }) => {
  useEffect(() => {
    if (!src) {
      onLoadCat();
    }
  }, [onLoadCat, src]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={src} className="App-logo" alt="logo" />
        <p>
          {loading ? 'Loading cat...' : 'Cat loaded'}
        </p>
        <button onClick={onLoadCat}>Load Cat</button>
      </header>
    </div>
  );
}

export default connect(
  (state) => ({ loading: getCatLoading(state), src: getCatUrl(state) }),
  { onLoadCat: fetchCat }
)(App);