Function CommentInputForm

src/components/comment/CommentInputForm.tsx:10–123

({
  contentId,
  parentId = undefined,
}: {
  contentId: number;
  parentId?: number | undefined;
})

import { usePathname } from 'next/navigation';

const CommentInputForm = ({
  contentId,
  parentId = undefined,
}: {
  contentId: number;
  parentId?: number | undefined;
}) => {
  const currentPath = usePathname();
  const [isButtonDisabled, setButtonDisabled] = useState(true);
  const [commentText, setCommentText] = useState('');
  const formRef = React.useRef<HTMLFormElement>(null);
  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
  const { execute, isLoading, fieldErrors } = useAction(createMessage, {
    onSuccess: () => {
      toast.success(`${parentId ? 'Replied' : 'Commented'}`);
      formRef.current?.reset();
    },
    onError: (error) => {
      toast.error(error);
    },
  });
  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const content = formData.get('content') as string;

    execute({
      content,
      contentId,
      parentId,
      currentPath,
    });
    setCommentText('');
  };
  
  const isAllSpaces = (str: string): boolean => (/^\s*$/).test(str);

  const isCommentValid = () => {
    return !isAllSpaces(commentText);
  };

  // Function to adjust the height of the textarea
  const adjustTextareaHeight = () => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'; // Reset the height
      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; // Set the height based on scroll height
    }
  };

  useEffect(() => {
    if (!isCommentValid() || isLoading) {
      setButtonDisabled(true);
    } else {
      setButtonDisabled(false);
    }
  }, [commentText]);

  // Effect to handle the initial and dynamic height adjustment