import Input from "./Input";
import PostDisplay from "./PostDisplay";

function Home() {
  const [postList, setPostList] = useState([]);
  const [titleInput, setTitleInput] = useState('');
  const [descInput, setDescInput] = useState('');

  const createPost = useCallback(() => {
    if (titleInput && descInput) {
      setPostList(prev => [...prev, {title: titleInput, desc: descInput}]);
      setTitleInput('');
      setDescInput('');
    }
  }, [titleInput, descInput]);

  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input titleInput={titleInput} setTitleInput={setTitleInput} descInput={descInput} setDescInput={setDescInput} />
        <button data-testid="create-button" className="mt-10" onClick={createPost}>
          Create Post
        </button>
      </div>
      <div className="posts-section">
        <PostDisplay postList={postList} setPostList={setPostList} />
      </div>
    </div>
  );
}

export default Home;

import React from "react";

function Input({setTitleInput, titleInput, descInput, setDescInput}) {

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

export default Input;

import React, { useCallback } from "react";

function PostDisplay({postList, setPostList}) {
  const deletePost = useCallback((idx) => {
    setPostList(prev => prev.filter((_, i) => i !== idx));
  }, []);
  return (
    <div data-testid="posts-container" className="flex wrap gap-10">
      { postList && postList.map((post, idx) => (
        <div className="post-box" key={idx}>
          <h3>{post.title}</h3>
          <p>{post.desc}</p>
          <button onClick={() => deletePost(idx)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default PostDisplay;