AddPostForm.jsx

import React, { useState } from "react";

import { addPost, addProposal } from "actions/posts";
import Button from "components/Button";
import { useActionLoading } from "hooks";

const AddPostForm = ({ className }) => {
  const [text, setText] = useState("");
  const addingPost = useActionLoading(addPost, { content: text });
  const addingProposal = useActionLoading(addPost, { content: text });

  const onTextInput = (evt) => {
    setText(evt.target.value);
  };

  const onAddPost = async (evt) => {
    if (!!text) {
      const result = await addPost.run({ content: text });

      if (!result.error) {
        setText("");
      }
    }
  };

  const onAddProposal = async (evt) => {
    evt.stopPropagation();

    if (!!text) {
      const result = await addProposal.run({ content: text });

      if (!result.error) {
        setText("");
      }
    }
  };

  const buttonDropdownActionList = (
    <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
      <li className="dropdown-button__choice hover:bg-grey-125">
        <span className="block px-4 py-3" onClick={onAddProposal}>
          Navrhnout postup
        </span>
      </li>
    </ul>
  );

  return (
    <div className={className}>
      <div className="form-field">
        <div className="form-field__wrapper form-field__wrapper--shadowed">
          <textarea
            className="text-input form-field__control "
            value={text}
            rows="5"
            cols="40"
            placeholder="Vyplňte text vašeho příspěvku"
            onChange={onTextInput}
          ></textarea>
        </div>
      </div>

      <div className="space-x-4">
        <Button
          onClick={onAddPost}
          disabled={!text || addingPost || addingProposal}
          loading={addingPost || addingProposal}
          hoverActive
          icon="ico--chevron-down"
          iconWrapperClassName="dropdown-button"
          iconChildren={buttonDropdownActionList}
        >
          Přidat příspěvek
        </Button>

        <span className="text-sm text-grey-200 hidden lg:inline">
          Pro pokročilejší formátování můžete používat{" "}
          <a
            href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
            className="underline"
            target="_blank"
            rel="noreferrer noopener"
          >
            Markdown
          </a>
          .
        </span>
      </div>
    </div>
  );
};

export default AddPostForm;