Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
"use client"
import { Post, Prisma } from "@prisma/client";
import { useRouter } from "next/navigation";
import { startTransition, useEffect, useState } from "react";
type commentType = Prisma.CommentUncheckedCreateInput
export default function PostCommentForm(props: { postid: string }) {
const [formData, setFormData] = useState<commentType>({ message: "" } as commentType);
const router = useRouter();
const postid = props.postid
async function postComment(e: any) {
e.preventDefault()
formData.postId = postid;
const response = await fetch('http://localhost:3000/api/comments', {
method: 'POST',
body: JSON.stringify(formData)
})
startTransition(() => {
// Refresh the current route and fetch new data from the server without
// losing client-side browser or React state.
router.refresh();
});
return await response.json()
}
const characterCount = formData.message.length;
const isOverLimit = characterCount >= 1000;
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const { value } = e.target;
setFormData({ ...formData, message: value });
};
return (
<div className="p-4 pb-20">
<form onSubmit={postComment}>
<textarea
placeholder="Write something..."
name="message"
value={formData.message}
onChange={handleInputChange}
className="w-full p-2 border border-gray-600 rounded-xl resize-none"
rows={5}
maxLength={1000}
></textarea>
<div className="flex justify-end mt-2">
<span className={`${isOverLimit ? "text-red-500" : "text-gray-500"} text-sm`}>
{characterCount}/{1000}
</span>
</div>
<button type="submit" className="mt-2 bg-gray-300 text-gray-800 px-4 py-2 rounded float-right">
Post
</button>
</form>
</div>
)
}