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 { useSelector } from "react-redux";
|
|
|
|
import { useParams } from "react-router-dom";
|
2023-01-14 11:50:06 +00:00
|
|
|
import { useInView } from 'react-intersection-observer';
|
2023-01-12 09:48:39 +00:00
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
import ProfileImage from "../element/ProfileImage";
|
|
|
|
// @ts-ignore
|
|
|
|
import { bech32ToHex } from "../Util";
|
|
|
|
// @ts-ignore
|
|
|
|
import useEventPublisher from "../feed/EventPublisher";
|
|
|
|
|
|
|
|
import DM from "../element/DM";
|
|
|
|
import { RawEvent } from "../nostr";
|
|
|
|
|
|
|
|
type RouterParams = {
|
|
|
|
id: string
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function ChatPage() {
|
|
|
|
const params = useParams<RouterParams>();
|
|
|
|
const publisher = useEventPublisher();
|
|
|
|
const id = bech32ToHex(params.id);
|
|
|
|
const dms = useSelector<any, RawEvent[]>(s => filterDms(s.login.dms, s.login.publicKey));
|
|
|
|
const [content, setContent] = useState<string>();
|
2023-01-14 11:50:06 +00:00
|
|
|
const { ref, inView, entry } = useInView();
|
|
|
|
const dmListRef = useRef<HTMLDivElement>(null);
|
2023-01-12 09:48:39 +00:00
|
|
|
|
|
|
|
function filterDms(dms: RawEvent[], myPubkey: string) {
|
|
|
|
return dms.filter(a => {
|
|
|
|
if (a.pubkey === myPubkey && a.tags.some(b => b[0] === "p" && b[1] === id)) {
|
|
|
|
return true;
|
|
|
|
} else if (a.pubkey === id && a.tags.some(b => b[0] === "p" && b[1] === myPubkey)) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const sortedDms = useMemo<any[]>(() => {
|
|
|
|
return [...dms].sort((a, b) => a.created_at - b.created_at)
|
|
|
|
}, [dms]);
|
|
|
|
|
2023-01-14 11:50:06 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (inView && dmListRef.current) {
|
|
|
|
dmListRef.current.scroll(0, dmListRef.current.scrollHeight);
|
|
|
|
}
|
|
|
|
}, [inView, dmListRef, sortedDms]);
|
|
|
|
|
2023-01-12 09:48:39 +00:00
|
|
|
async function sendDm() {
|
|
|
|
let ev = await publisher.sendDm(content, id);
|
|
|
|
console.debug(ev);
|
|
|
|
publisher.broadcast(ev);
|
2023-01-14 11:50:06 +00:00
|
|
|
setContent("");
|
|
|
|
}
|
|
|
|
|
|
|
|
async function onEnter(e: KeyboardEvent) {
|
|
|
|
let isEnter = e.code === "Enter";
|
|
|
|
if(isEnter && !e.shiftKey) {
|
|
|
|
await sendDm();
|
|
|
|
}
|
2023-01-12 09:48:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ProfileImage pubkey={id} className="f-grow mb10" />
|
2023-01-14 11:50:06 +00:00
|
|
|
<div className="dm-list" ref={dmListRef}>
|
2023-01-12 09:48:39 +00:00
|
|
|
<div>
|
2023-01-14 11:50:06 +00:00
|
|
|
{sortedDms.map(a => <DM data={a} key={a.id} />)}
|
|
|
|
<div ref={ref} className="mb10"></div>
|
2023-01-12 09:48:39 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="write-dm">
|
|
|
|
<div className="inner">
|
2023-01-14 11:50:06 +00:00
|
|
|
<textarea className="f-grow mr10" value={content} onChange={(e) => setContent(e.target.value)} onKeyDown={(e) => onEnter(e)}></textarea>
|
2023-01-12 09:48:39 +00:00
|
|
|
<div className="btn" onClick={() => sendDm()}>Send</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|