86 lines
2.5 KiB
JavaScript
86 lines
2.5 KiB
JavaScript
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import React from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { CommentSchema } from "./collectionSchema";
|
|
import { useAddComment } from "../../hooks/useCollections";
|
|
import Avatar from "../common/Avatar";
|
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
import moment from "moment";
|
|
|
|
const Comment = ({ invoice }) => {
|
|
const {
|
|
register,
|
|
reset,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: zodResolver(CommentSchema),
|
|
defaultValues: { comment: "" },
|
|
});
|
|
|
|
const { mutate: AddComment, isPending } = useAddComment(() => {
|
|
reset();
|
|
});
|
|
|
|
const onSubmit = (formData) => {
|
|
const payload = { ...formData, invoiceId: invoice?.id };
|
|
AddComment(payload);
|
|
};
|
|
return (
|
|
<div className="row pt-1 px-2">
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="col-12">
|
|
<textarea
|
|
className="form-control "
|
|
rows={3}
|
|
{...register("comment")}
|
|
/>
|
|
{errors.comment && (
|
|
<small className="danger-text">{errors.comment.message}</small>
|
|
)}
|
|
</div>
|
|
<div className="d-flex justify-content-end p-2">
|
|
<button
|
|
className="btn btn-sm btn-primary"
|
|
type="submit"
|
|
disabled={isPending}
|
|
>
|
|
{isPending ? "Please wait..." : "Submit"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{invoice?.comments?.length > 0 ? (
|
|
invoice.comments.map((comment, index) => (
|
|
<div
|
|
className="border-start border-primary ps-1 py-2 mb-3"
|
|
key={comment.id || index}
|
|
>
|
|
<div className="d-flex justify-content-between align-items-center mb-1">
|
|
<div className="d-flex align-items-center">
|
|
<Avatar
|
|
size="xs"
|
|
firstName={comment?.createdBy?.firstName}
|
|
lastName={comment?.createdBy?.lastName}
|
|
/>
|
|
<span className="ms-1 fw-semibold">
|
|
{comment?.createdBy?.firstName} {comment?.createdBy?.lastName}
|
|
</span>
|
|
</div>
|
|
|
|
<small className="text-secondary">
|
|
{moment.utc(comment?.createdAt).local().fromNow()}
|
|
</small>
|
|
</div>
|
|
|
|
<div className="ms-9"> <p className="mb-1">{comment?.comment}</p></div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-muted">No comments yet.</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Comment;
|