import React, { useEffect } from 'react';
import logo from './logo.svg';
import { useSelector, useDispatch } from 'react-redux';
import { fetchCat } from  './ducks/cat/actions';
import { getCatUrl, getCatLoading } from './ducks/cat/selectors';

const App = () => {
  const loading = useSelector(getCatLoading);
  const src = useSelector(getCatUrl);

  const dispatch = useDispatch();
  const requestCat = () => dispatch(fetchCat());

  useEffect(() => {
    if (!src) {
      requestCat();
    }
  }, [requestCat, 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={requestCat}>Load Cat</button>
      </header>
    </div>
  );
}

export default App;