nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 20:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve comments.

Browse Source
This commit is contained in:
nyne
2025-07-04 17:21:25 +08:00
parent d57a9b6967
commit 2dfa2e3e02
4 changed files with 233 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/comment_input.tsx
View File

@@ -173,7 +173,7 @@ export function CommentInput({
<MdOutlineImage size={18} />
)}
</button>
<Badge className="badge-ghost">
<Badge className="badge-ghost hidden sm:inline-flex">
<MdOutlineInfo size={18} />
<span>{t("Use markdown format")}</span>
</Badge>

192
frontend/src/components/comment_tile.tsx
View File

@@ -1,22 +1,15 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router";
import {
MdOutlineComment,
MdOutlineDelete,
MdOutlineEdit,
} from "react-icons/md";
import { TextArea } from "./input";
import { Comment } from "../network/models";
import { network } from "../network/network";
import Badge from "./badge";
import { app } from "../app";
import showToast from "./toast";
import Markdown from "react-markdown";
export function CommentTile({
comment,
onUpdated,
elevation,
}: {
comment: Comment;
@@ -79,196 +72,11 @@ export function CommentTile({
{comment.reply_count}
</Badge>
)}
{app.user?.id === comment.user.id && (
<>
<EditCommentDialog comment={comment} onUpdated={onUpdated} />
<DeleteCommentDialog commentId={comment.id} onUpdated={onUpdated} />
</>
)}
</div>
</a>
);
}
function EditCommentDialog({
comment,
onUpdated,
}: {
comment: Comment;
onUpdated?: () => void;
}) {
const [isLoading, setLoading] = useState(false);
const [content, setContent] = useState(comment.content);
const { t } = useTranslation();
const handleUpdate = async () => {
if (isLoading) {
return;
}
setLoading(true);
const res = await network.updateComment(comment.id, content);
const dialog = document.getElementById(
`edit_comment_dialog_${comment.id}`,
) as HTMLDialogElement;
dialog.close();
if (res.success) {
showToast({
message: t("Comment updated successfully"),
type: "success",
});
if (onUpdated) {
onUpdated();
}
} else {
showToast({
message: res.message,
type: "error",
parent: document.getElementById(`dialog_box`),
});
}
setLoading(false);
};
return (
<>
<button
className={"btn btn-sm btn-ghost ml-1"}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
const dialog = document.getElementById(
`edit_comment_dialog_${comment.id}`,
) as HTMLDialogElement;
dialog.showModal();
}}
>
<MdOutlineEdit size={16} className={"inline-block"} />
{t("Edit")}
</button>
<dialog
id={`edit_comment_dialog_${comment.id}`}
className="modal"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<div className="modal-box" id={"dialog_box"}>
<h3 className="font-bold text-lg">{t("Edit Comment")}</h3>
<TextArea
label={t("Content")}
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<div className="modal-action">
<button
className="btn btn-ghost"
onClick={() => {
const dialog = document.getElementById(
`edit_comment_dialog_${comment.id}`,
) as HTMLDialogElement;
dialog.close();
}}
>
{t("Close")}
</button>
<button className="btn btn-primary" onClick={handleUpdate}>
{isLoading ? (
<span className={"loading loading-spinner loading-sm"}></span>
) : null}
{t("Submit")}
</button>
</div>
</div>
</dialog>
</>
);
}
function DeleteCommentDialog({
commentId,
onUpdated,
}: {
commentId: number;
onUpdated?: () => void;
}) {
const [isLoading, setLoading] = useState(false);
const { t } = useTranslation();
const id = `delete_comment_dialog_${commentId}`;
const handleDelete = async () => {
if (isLoading) return;
setLoading(true);
const res = await network.deleteComment(commentId);
const dialog = document.getElementById(id) as HTMLDialogElement;
dialog.close();
if (res.success) {
showToast({
message: t("Comment deleted successfully"),
type: "success",
});
if (onUpdated) {
onUpdated();
}
} else {
showToast({ message: res.message, type: "error" });
}
setLoading(false);
};
return (
<>
<button
className={"btn btn-error btn-sm btn-ghost ml-1"}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
const dialog = document.getElementById(id) as HTMLDialogElement;
dialog.showModal();
}}
>
<MdOutlineDelete size={16} className={"inline-block"} />
{t("Delete")}
</button>
<dialog
id={id}
className="modal"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<div className="modal-box">
<h3 className="font-bold text-lg">{t("Delete Comment")}</h3>
<p className="py-4">
{t(
"Are you sure you want to delete this comment? This action cannot be undone.",
)}
</p>
<div className="modal-action">
<button
className="btn btn-ghost"
onClick={() => {
const dialog = document.getElementById(id) as HTMLDialogElement;
dialog.close();
}}
>
{t("Close")}
</button>
<button className="btn btn-error" onClick={handleDelete}>
{isLoading ? (
<span className={"loading loading-spinner loading-sm"}></span>
) : null}
{t("Delete")}
</button>
</div>
</div>
</dialog>
</>
);
}
export function CommentContent({ content }: { content: string }) {
const lines = content.split("\n");
for (let i = 0; i < lines.length; i++) {