import React, { useState, useCallback } from "react";
import Input from "./Input";
import PostDisplay from "./PostDisplay";


function Home() {
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")

  const handleDeletePost = useCallback((postId) => {
    setPosts(prev => prev.filter(post => post.id != postId));
  }, [posts])

  const handleAddPost = useCallback(() => {
    if (title.trim() && description.trim()) {
      setPosts([...posts, { id: parseInt(Math.random() * 10000), title, description }]);
      setTitle("");
      setDescription("");
    }
  }, [title, description]);


  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input title={title} setTitle={setTitle} description={description} setDescription={setDescription} />
        <button data-testid="create-button" className="mt-10" onClick={handleAddPost}>
          Create Post
        </button>
      </div>
      <div className="posts-section grid-layout">
          {posts.map(post => <PostDisplay key={post.id} post={post} deleteHandler={() => handleDeletePost(post.id)} />)}
      </div>
    </div>
  );
	
import React from "react";

function Input({ title, setTitle, description, setDescription }) {

  return (
    <div className="layout-column justify-content-center align-items-center">
      <input className="w-100" type="text" placeholder="Enter Title" name="title" value={title} onChange={(evt) => setTitle(evt.target.value)} data-testid="title-input" />
      <textarea className="mt-10 w-100" placeholder="Enter Description" name="description" value={description} onChange={(evt) => setDescription(evt.target.value)} data-testid="description-input" />
    </div>
  );
}



import React from "react";

function PostDisplay({post, deleteHandler}) {
  return (
    <div data-testid="posts-container" className="flex wrap gap-10">
      <div className="post-box">
        <h3>{post?.title}</h3>
        <p>{post?.description}</p>
        <button onClick={deleteHandler}>Delete</button>
      </div>
    </div>
  );
}

export default PostDisplay;

Home
import React, { useState } from "react";
import Input from "./Input";
import PostDisplay from "./PostDisplay";


function Home() {
  const [blogData, setBlogData] = useState([])
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  console.log("blogData", blogData)

  const saveBlog = () => {
    let num = Math.random();
    if (title?.trim() && description?.trim()) {
      setBlogData((prev) => [...prev, { id: num, title, description }])
      setTitle("")
      setDescription("")
    }
  }

   const handleDelete = (id) => {
    const filtedData = blogData?.filter((blog) => blog?.id !== id)
    setBlogData(filtedData)
  }

  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input title={title} description={description} setTitle={setTitle} setDescription={setDescription} />
        <button data-testid="create-button" className="mt-10" onClick={saveBlog}>
          Create Post
        </button>
      </div>
       <div className="posts-section">
        <div data-testid="posts-container" className="flex wrap gap-10">
        <PostDisplay blogData={blogData} handleDelete={handleDelete} />
        </div>
      </div>
    </div>
  );
}
export default Home

Input Component:
import React, { useState } from "react";

function Input({title, description, setTitle, setDescription}) {

  const handleChange = (e) => {
   if(e.target.name === "title"){
    setTitle(e.target.value)
   }else{
    setDescription(e.target.value)
   }

  }

  return (
    <div className="layout-column justify-content-center align-items-center">
      <input className="w-100" type="text" name="title" placeholder="Enter Title" value={title} onChange={handleChange} data-testid="title-input" />
      <textarea className="mt-10 w-100" name="description" placeholder="Enter Description" value={description} onChange={handleChange} data-testid="description-input" />
    </div>
  );
}

export default Input;

Post Display Component:
import React from "react";

function PostDisplay({ blogData, handleDelete }) {

  return (
    <>
      {blogData?.length !== 0 && blogData?.map((blog) => {
        return <div className="post-box" key={blog?.id}>
          <h3>{blog?.title}</h3>
          <p>{blog?.description}</p>
          <button onClick={() => { handleDelete(blog?.id) }}>Delete</button>
        </div>
      })}
    </>
  );
}

export default PostDisplay;

;

import React,{useState} from "react";
import Input from "./Input";
import PostDisplay from "./PostDisplay";

function Home() {
  const [blogTitle, setBlogTitle] = useState("");
  const [blogText, setBlogText]= useState("");
  const [postes, setPostes]= useState([]);
  const [countId, setCountId] = useState(1);

  const handleCreate=()=>{
    if(!blogTitle || !blogText) return;
    const newPost={id:countId,title:blogTitle,text:blogText}
    setPostes([...postes, newPost]);
   setBlogTitle("");
   setBlogText("");
   setCountId(countId +1);
  }

  const handleDelete=(id)=>{
    setPostes((prev)=>prev.filter((post)=>post.id !== id));
  }
  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input blogTitle={blogTitle} blogText={blogText} setBlogTitle={setBlogTitle} setBlogText={setBlogText}/>
        <button data-testid="create-button" className="mt-10" onClick={handleCreate}>
          Create Post
        </button>
      </div>
      <div className="posts-section">
        <PostDisplay postes={postes} handleDelete={handleDelete}/>
      </div>
    </div>
  );
}

export default Home;