@ieltsrealtest/ui
Version:
Reusable UI components for IELTS Real Test platform, built with React and TypeScript.
64 lines (63 loc) • 3.63 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Image from 'next/image';
import { Send } from 'lucide-react';
import { useMemo, useState } from 'react';
export default function CommentInput({ userId, threadId, parentId, onSuccess, page, variant, isDev, }) {
const [content, setContent] = useState('');
const [loading, setLoading] = useState(false);
const { BASE_URL } = useMemo(() => {
return {
BASE_URL: isDev ? 'https://devapi.youready.net/ielts/comment/api' : 'https://api.youready.net/ielts/comment/api',
};
}, [isDev]);
const isReply = useMemo(() => {
if (variant)
return variant === 'reply';
return Boolean(parentId);
}, [variant, parentId]);
const avatarSize = isReply ? 40 : 48;
const avt = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/user/avatar/avatar.jpg";
const handleSubmit = async () => {
const trimmed = content.trim();
if (!trimmed || loading)
return;
setLoading(true);
try {
const res = await fetch(`${BASE_URL}/discussion/`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
user_id: userId,
content: trimmed,
thread_id: threadId,
parent_id: parentId,
page,
}),
});
const json = await res.json();
if (json.success) {
setContent('');
onSuccess();
}
else {
// console.error('Failed to send comment:', json.message);
}
}
catch (error) {
// console.error('Failed to send comment:', error);
}
finally {
setLoading(false);
}
};
const handleKeyDown = (event) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
handleSubmit();
}
};
return (_jsxs("div", { className: `flex items-start gap-3 ${isReply ? '' : 'sm:gap-4'}`, children: [_jsx("div", { className: "flex-shrink-0 overflow-hidden rounded-full bg-gray-200", style: { width: avatarSize, height: avatarSize }, children: _jsx(Image, { src: avt, alt: "User avatar", width: avatarSize, height: avatarSize, className: "h-full w-full object-cover" }) }), _jsx("div", { className: "flex-1", children: _jsxs("div", { className: `flex items-center gap-3 border border-[#E5E7EB] bg-white ${isReply ? 'rounded-xl px-3 py-2' : 'rounded-full px-5 py-3'}`, children: [_jsx("textarea", { value: content, onChange: (event) => setContent(event.target.value), onKeyDown: handleKeyDown, rows: isReply ? 2 : 1, placeholder: "Write a comment...", className: "flex-1 resize-none border-none bg-transparent text-sm text-gray-700 placeholder:text-gray-400 focus:outline-none" }), _jsxs("button", { type: "button", onClick: handleSubmit, disabled: loading || !content.trim(), className: `${isReply
? 'flex h-10 w-10 items-center justify-center rounded-full bg-[#DA1E37] text-white disabled:opacity-50'
: 'rounded-full bg-[#DA1E37] px-6 py-2 text-sm font-semibold text-white disabled:opacity-50'}`, children: [loading && isReply && _jsx("span", { className: "text-xs", children: "..." }), loading && !isReply && '...', !loading && isReply && _jsx(Send, { className: "h-4 w-4 -rotate-45", strokeWidth: 2.5 }), !loading && !isReply && 'Post'] })] }) })] }));
}