import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'

function App() {
    const planets = useSelector(state => state.planets)
    const dispatch = useDispatch()
    const [planetId, setPlanetId] = useState(5);
    const [name, setName] = useState('');
    
     const handleSubmit = (event) => {
        // build out handleSubmit function:
        // 1 - prevent the page from refreshing when we receive input
        // 2 - give the new planet from our user a unique id
        // 3 - dispatch our ADD_PLANET action with the appropriate payload
    }
    
    return (
        <>
            <div className="planet-image"></div>
            <h1>Let's learn about the planets!</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={name}
                    onChange={event => setName(event.target.value)}
                />
                <input type="submit" value="Add a planet" />
            </form>
            <ul>
                {planets.map(planet => (
                    <li key={planet.id}>{planet.name}</li>
                ))}
            </ul>
        </>
    )
}

export default App