function CreatePost(props) {
  const dispatch = useDispatch();
  const name = useSelector(selectName);
  const [text, setText] = useState('');

  const handleClick = (e) => {
    e.preventDefault();
    if(text !== '') {
      dispatch(createPost({
        author: name,
        text: text
      }));
      setText('');
    }
  };

  return (
    <div>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={handleClick}>Post</button>
    </div>
  );
}

function Posts(props) {
  const posts = useSelector(selectPosts);
  return (
    <div>
      {posts.map((item) =>
        <div key={item.id}>
          <p>{item.text}</p>
          <p>{item.author}</p>
        </div>
      )}
    </div>
  );
}

function PostsSection(props) {
  return (
    <div>
      <CreatePost />
      <Posts />
    </div>
  );
}