import React, { useContext, useEffect } from "react";
import { Link } from "react-router-dom";
import Loader from "../../components/Loader/Loader";
import CounterContext from "../../Context/CounterContext";
import PostContext from "../../Context/PostContext";

const Home = () => {
  // useEffect(() => {
  //   if (posts.length === 0) {
  //     dispatch(fetchPost());
  //   }
  // }, []);

  // console.log(posts);

  const { increment, count, decrement } = useContext(CounterContext);
  const { posts, fetchPost, postLoading } = useContext(PostContext);

  useEffect(() => {
    if (posts.length === 0) {
      fetchPost();
    }
  }, []);
  return (
    <div>
      {count}
      <button className="App" onClick={increment}>
        plus
      </button>
      <button className="App" onClick={decrement}>
        minus
      </button>
      THis is home page
      <ul>
        {postLoading ? (
          <div
            style={{
              display: "flex",
              justiyContent: "center",
              alignItems: "center",
              height: "100vh",
              width: "100%",
            }}
          >
            <Loader loading={postLoading} size={200} color="#FF5A00" />
          </div>
        ) : (
          posts.map((item, index) => {
            return <li key={index}>{item?.title}</li>;
          })
        )}
      </ul>
      <Link to="about">
        <button>About</button>
      </Link>
    </div>
  );
};

export default Home;
