2023-01-12 09:48:39 +00:00
|
|
|
import "./ChatPage.css";
|
2023-01-14 11:50:06 +00:00
|
|
|
import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
|
2023-01-12 09:48:39 +00:00
|
|
|
import { useParams } from "react-router-dom";
|
2023-04-14 11:33:19 +00:00
|
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
import { RawEvent, TaggedRawEvent } from "@snort/nostr";
|
2023-01-12 09:48:39 +00:00
|
|
|
|
2023-01-20 11:11:50 +00:00
|
|
|
import ProfileImage from "Element/ProfileImage";
|
|
|
|
import { bech32ToHex } from "Util";
|
|
|
|
import useEventPublisher from "Feed/EventPublisher";
|
|
|
|
import DM from "Element/DM";
|
|
|
|
import { dmsInChat, isToSelf } from "Pages/MessagesPage";
|
|
|
|
import NoteToSelf from "Element/NoteToSelf";
|
2023-03-29 12:10:22 +00:00
|
|
|
import { useDmCache } from "Hooks/useDmsCache";
|
2023-04-14 11:33:19 +00:00
|
|
|
import useLogin from "Hooks/useLogin";
|
2023-01-12 09:48:39 +00:00
|
|
|
|
|
|
|
type RouterParams = {
|
2023-02-07 20:04:50 +00:00
|
|
|
id: string;
|
|
|
|
};
|
2023-01-12 09:48:39 +00:00
|
|
|
|
|
|
|
export default function ChatPage() {
|
2023-02-07 20:04:50 +00:00
|
|
|
const params = useParams<RouterParams>();
|
|
|
|
const publisher = useEventPublisher();
|
|
|
|
const id = bech32ToHex(params.id ?? "");
|
2023-04-14 11:33:19 +00:00
|
|
|
const pubKey = useLogin().publicKey;
|
2023-02-07 20:04:50 +00:00
|
|
|
const [content, setContent] = useState<string>();
|
|
|
|
const dmListRef = useRef<HTMLDivElement>(null);
|
2023-03-29 12:10:22 +00:00
|
|
|
const dms = filterDms(useDmCache());
|
2023-01-12 09:48:39 +00:00
|
|
|
|
2023-03-29 12:10:22 +00:00
|
|
|
function filterDms(dms: readonly RawEvent[]) {
|
2023-02-09 12:26:54 +00:00
|
|
|
return dmsInChat(id === pubKey ? dms.filter(d => isToSelf(d, pubKey)) : dms, id);
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
2023-01-12 09:48:39 +00:00
|
|
|
|
2023-02-09 12:26:54 +00:00
|
|
|
const sortedDms = useMemo(() => {
|
2023-02-07 20:04:50 +00:00
|
|
|
return [...dms].sort((a, b) => a.created_at - b.created_at);
|
|
|
|
}, [dms]);
|
2023-01-12 09:48:39 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
useEffect(() => {
|
2023-02-10 20:53:09 +00:00
|
|
|
if (dmListRef.current) {
|
2023-02-07 20:04:50 +00:00
|
|
|
dmListRef.current.scroll(0, dmListRef.current.scrollHeight);
|
|
|
|
}
|
2023-02-10 20:53:09 +00:00
|
|
|
}, [dmListRef.current?.scrollHeight]);
|
2023-01-14 11:50:06 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
async function sendDm() {
|
2023-04-14 15:02:15 +00:00
|
|
|
if (content && publisher) {
|
2023-02-07 19:47:57 +00:00
|
|
|
const ev = await publisher.sendDm(content, id);
|
2023-02-07 20:04:50 +00:00
|
|
|
publisher.broadcast(ev);
|
|
|
|
setContent("");
|
2023-01-14 11:50:06 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
2023-01-14 11:50:06 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
async function onEnter(e: KeyboardEvent) {
|
2023-02-07 19:47:57 +00:00
|
|
|
const isEnter = e.code === "Enter";
|
2023-02-07 20:04:50 +00:00
|
|
|
if (isEnter && !e.shiftKey) {
|
|
|
|
await sendDm();
|
2023-01-12 09:48:39 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
2023-01-12 09:48:39 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
|
|
|
<>
|
2023-02-09 12:26:54 +00:00
|
|
|
{(id === pubKey && <NoteToSelf className="f-grow mb-10" pubkey={id} />) || (
|
|
|
|
<ProfileImage pubkey={id} className="f-grow mb10" />
|
|
|
|
)}
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="dm-list" ref={dmListRef}>
|
|
|
|
<div>
|
2023-02-09 12:26:54 +00:00
|
|
|
{sortedDms.map(a => (
|
2023-02-07 19:47:57 +00:00
|
|
|
<DM data={a as TaggedRawEvent} key={a.id} />
|
2023-02-07 20:04:50 +00:00
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="write-dm">
|
|
|
|
<div className="inner">
|
|
|
|
<textarea
|
|
|
|
className="f-grow mr10"
|
|
|
|
value={content}
|
2023-02-09 12:26:54 +00:00
|
|
|
onChange={e => setContent(e.target.value)}
|
|
|
|
onKeyDown={e => onEnter(e)}></textarea>
|
2023-02-07 20:04:50 +00:00
|
|
|
<button type="button" onClick={() => sendDm()}>
|
2023-02-11 18:26:51 +00:00
|
|
|
<FormattedMessage defaultMessage="Send" description="Send DM button" />
|
2023-02-07 20:04:50 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
2023-01-25 18:08:53 +00:00
|
|
|
}
|