diff --git a/components/bounty/comments/input-comment/controller.tsx b/components/bounty/comments/input-comment/controller.tsx index d1d1f51a76..bb04a291db 100644 --- a/components/bounty/comments/input-comment/controller.tsx +++ b/components/bounty/comments/input-comment/controller.tsx @@ -1,14 +1,17 @@ import {ChangeEvent, useState} from "react"; +import { AxiosError } from "axios"; import {useTranslation} from "next-i18next"; import InputCommentView from "components/bounty/comments/input-comment/view"; +import { COMMENT_MAX_LENGTH } from "helpers/constants"; import {QueryKeys} from "helpers/query-keys"; import {IdsComment, TypeComment} from "interfaces/comments"; import {CreateComment} from "x-hooks/api/comments"; +import { useToastStore } from "x-hooks/stores/toasts/toasts.store"; import useReactQueryMutation from "x-hooks/use-react-query-mutation"; import { useTaskSubscription } from "x-hooks/use-task-subscription"; @@ -34,7 +37,10 @@ export default function InputComment({ deliverable: QueryKeys.deliverable(ids?.deliverableId?.toString()), proposal: QueryKeys.proposalComments(ids?.proposalId?.toString()) }[type]; + const commentLength = comment?.length || 0; + const error = commentLength > COMMENT_MAX_LENGTH ? "max-length" : null; + const { addError, addSuccess } = useToastStore(); const { refresh: refreshSubscriptions } = useTaskSubscription(); const { mutate: addComment } = useReactQueryMutation({ queryKey: queryKey, @@ -43,9 +49,12 @@ export default function InputComment({ ...ids, type }), - toastSuccess: t("bounty:actions.comment.success"), - toastError: t("bounty:actions.comment.error"), - onSuccess: () => { + onSettled: (data, error: AxiosError<{ message: string }>) => { + if (error) { + addError(t("actions.failed"), `${error?.response?.data?.message}`); + return; + } + addSuccess(t("actions.success"), t("bounty:actions.comment.success")); setComment(""); refreshSubscriptions(); } @@ -61,6 +70,9 @@ export default function InputComment({ userAddress={userAddress} avatarHash={avatar} comment={comment} + commentLength={commentLength} + maxLength={COMMENT_MAX_LENGTH} + error={error} onCommentChange={onCommentChange} onCommentSubmit={addComment} /> diff --git a/components/bounty/comments/input-comment/view.tsx b/components/bounty/comments/input-comment/view.tsx index fa8b13f9f6..7a5ee54198 100644 --- a/components/bounty/comments/input-comment/view.tsx +++ b/components/bounty/comments/input-comment/view.tsx @@ -4,6 +4,7 @@ import {useTranslation} from "next-i18next"; import AvatarOrIdenticon from "components/avatar-or-identicon"; import Button from "components/button"; +import If from "components/If"; import {truncateAddress} from "helpers/truncate-address"; @@ -12,6 +13,9 @@ export default function InputCommentView({ userAddress, avatarHash, comment, + commentLength, + maxLength, + error = null, onCommentSubmit, onCommentChange , }: { @@ -19,48 +23,66 @@ export default function InputCommentView({ userAddress: string; avatarHash: string; comment: string; + commentLength: number; + maxLength: number; + error: "max-length" | null; onCommentSubmit: (...props) => void; onCommentChange : (e: ChangeEvent) => void }) { const { t } = useTranslation("common"); + const borderColor = error ? "danger" : "gray-700"; + const errorMessage = { + "max-length": t("errors.comment.max-length", { max: maxLength }), + }[error]; + return ( -
-
-
- - - {handle ? `@${handle}` : truncateAddress(userAddress)}{" "} - + <> +
+
+
+ + + {handle ? `@${handle}` : truncateAddress(userAddress)}{" "} + +
+ +
+ {commentLength}/{maxLength} +
-
-