import { useEffect, useState } from "react"
import axios from "axios"

export default function LifeCycleFunc() {

    const [color, setColor] = useState("Red");
    const [count, setCount] = useState(0);
    const [posts, setPosts] = useState([]);
    const [isLoading, setLoading] = useState(true);


    useEffect(
        () => {
            console.log("I've been called")
            document.title = `I've been called ${count} times `;
            setTimeout(() => {
                setColor("Blue");
            }, 2000);

            return {
                //used for cleanup effect
            }
        }, [count])

    useEffect(() => {
        axios.get("https://jsonplaceholder.typicode.com/posts")
            .then(response => {
                setPosts(response.data)
                setLoading(false);
            })
            .catch(err => {
                console.error(err)
                setLoading(false);
            })
    }, []);

    const increment = () => setCount(count + 1);
    return (
        <>
            <h1>My favorite color is {color}</h1>
            <button onClick={increment}>The count is : {count}</button>
            {isLoading ? (<h3>Loading...</h3>) : posts.map(post => (
                <>
                    <h4>{post.title}</h4>
                    <p>{post.body}</p>
                </>
            ))}
        </>
    )
}