Tristan Yang
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import { useEffect, useState, FC, ReactElement } from "react";
|
|
import renderContent from "./renderContent";
|
|
import Avatar from "../Avatar";
|
|
import IconForward from "@/assets/icons/forward.svg";
|
|
import useNormalizeMessage from "@/hooks/useNormalizeMessage";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ChatContext } from "@/types/common";
|
|
|
|
type Props = {
|
|
context: ChatContext;
|
|
to: number;
|
|
from_uid: number;
|
|
id: string;
|
|
};
|
|
const ForwardedMessage: FC<Props> = ({ context, to, from_uid, id }) => {
|
|
const { t } = useTranslation();
|
|
const { messages, isLoading } = useNormalizeMessage(id);
|
|
const [forwards, setForwards] = useState<ReactElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (messages) {
|
|
const forward_mids = messages.map(({ from_mid }) => from_mid) || [];
|
|
// console.log("fff", messages);
|
|
setForwards(
|
|
<div data-forwarded-mids={forward_mids.join(",")} className="flex flex-col text-left rounded-lg bg-gray-200 dark:bg-gray-900">
|
|
<h4 className="p-2 pb-0 flex items-center gap-1 text-gray-500 text-xs">
|
|
<IconForward className="w-4 h-4 fill-gray-500" />
|
|
{t("action.forward")}
|
|
</h4>
|
|
<div className="list">
|
|
{messages.map((msg, idx) => {
|
|
const { user = {}, download, content, content_type, properties, thumbnail } = msg;
|
|
return (
|
|
<div className="w-full relative flex items-start gap-4 px-2 py-1 my-2 rounded-lg" key={idx}>
|
|
{user && (
|
|
<div className="w-6 h-6 rounded-full flex shrink-0 overflow-hidden">
|
|
<Avatar width={24} height={24} src={user.avatar} name={user.name} />
|
|
</div>
|
|
)}
|
|
<div className="w-full flex flex-col">
|
|
<div className="flex items-center gap-2 font-semibold">
|
|
<span className="text-gray-500 text-sm">{user?.name || "Deleted User"}</span>
|
|
</div>
|
|
<div className="select-text text-gray-500 text-sm break-all whitespace-pre-wrap dark:text-white">
|
|
{renderContent({
|
|
download,
|
|
context,
|
|
to,
|
|
from_uid,
|
|
content,
|
|
content_type,
|
|
properties,
|
|
thumbnail
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}, [messages, context, to, from_uid]);
|
|
if (!id) return null;
|
|
if (isLoading) return <span className="text-sm dark:text-white">Loading</span>;
|
|
|
|
return forwards;
|
|
};
|
|
|
|
export default ForwardedMessage;
|