DM improvements
This commit is contained in:
parent
5116ecd817
commit
1c0eaf4844
@ -7,6 +7,8 @@
|
|||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
min-height: 40px;
|
||||||
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dm > div:first-child {
|
.dm > div:first-child {
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import "./DM.css";
|
import "./DM.css";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
import { useInView } from 'react-intersection-observer';
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import useEventPublisher from "../feed/EventPublisher";
|
import useEventPublisher from "../feed/EventPublisher";
|
||||||
@ -19,6 +20,8 @@ export default function DM(props: DMProps) {
|
|||||||
const pubKey = useSelector<any>(s => s.login.publicKey);
|
const pubKey = useSelector<any>(s => s.login.publicKey);
|
||||||
const publisher = useEventPublisher();
|
const publisher = useEventPublisher();
|
||||||
const [content, setContent] = useState("Loading...");
|
const [content, setContent] = useState("Loading...");
|
||||||
|
const [decrypted, setDecrypted] = useState(false);
|
||||||
|
const { ref, inView, entry } = useInView();
|
||||||
|
|
||||||
async function decrypt() {
|
async function decrypt() {
|
||||||
let e = Event.FromObject(props.data);
|
let e = Event.FromObject(props.data);
|
||||||
@ -27,11 +30,14 @@ export default function DM(props: DMProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
decrypt().catch(console.error);
|
if (!decrypted && inView) {
|
||||||
}, [props.data]);
|
setDecrypted(true);
|
||||||
|
decrypt().catch(console.error);
|
||||||
|
}
|
||||||
|
}, [inView, props.data]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`flex dm f-col${props.data.pubkey === pubKey ? " me" : ""}`}>
|
<div className={`flex dm f-col${props.data.pubkey === pubKey ? " me" : ""}`} ref={ref}>
|
||||||
<div><NoteTime from={props.data.created_at * 1000} /></div>
|
<div><NoteTime from={props.data.created_at * 1000} /></div>
|
||||||
<div className="w-max">
|
<div className="w-max">
|
||||||
<Text content={content} />
|
<Text content={content} />
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
scroll-padding-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.write-dm {
|
.write-dm {
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import "./ChatPage.css";
|
import "./ChatPage.css";
|
||||||
import { useMemo, useState } from "react";
|
import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
|
import { useInView } from 'react-intersection-observer';
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import ProfileImage from "../element/ProfileImage";
|
import ProfileImage from "../element/ProfileImage";
|
||||||
@ -23,6 +24,8 @@ export default function ChatPage() {
|
|||||||
const id = bech32ToHex(params.id);
|
const id = bech32ToHex(params.id);
|
||||||
const dms = useSelector<any, RawEvent[]>(s => filterDms(s.login.dms, s.login.publicKey));
|
const dms = useSelector<any, RawEvent[]>(s => filterDms(s.login.dms, s.login.publicKey));
|
||||||
const [content, setContent] = useState<string>();
|
const [content, setContent] = useState<string>();
|
||||||
|
const { ref, inView, entry } = useInView();
|
||||||
|
const dmListRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
function filterDms(dms: RawEvent[], myPubkey: string) {
|
function filterDms(dms: RawEvent[], myPubkey: string) {
|
||||||
return dms.filter(a => {
|
return dms.filter(a => {
|
||||||
@ -39,24 +42,38 @@ export default function ChatPage() {
|
|||||||
return [...dms].sort((a, b) => a.created_at - b.created_at)
|
return [...dms].sort((a, b) => a.created_at - b.created_at)
|
||||||
}, [dms]);
|
}, [dms]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (inView && dmListRef.current) {
|
||||||
|
dmListRef.current.scroll(0, dmListRef.current.scrollHeight);
|
||||||
|
}
|
||||||
|
}, [inView, dmListRef, sortedDms]);
|
||||||
|
|
||||||
async function sendDm() {
|
async function sendDm() {
|
||||||
let ev = await publisher.sendDm(content, id);
|
let ev = await publisher.sendDm(content, id);
|
||||||
console.debug(ev);
|
console.debug(ev);
|
||||||
publisher.broadcast(ev);
|
publisher.broadcast(ev);
|
||||||
setContent(undefined);
|
setContent("");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onEnter(e: KeyboardEvent) {
|
||||||
|
let isEnter = e.code === "Enter";
|
||||||
|
if(isEnter && !e.shiftKey) {
|
||||||
|
await sendDm();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProfileImage pubkey={id} className="f-grow mb10" />
|
<ProfileImage pubkey={id} className="f-grow mb10" />
|
||||||
<div className="dm-list">
|
<div className="dm-list" ref={dmListRef}>
|
||||||
<div>
|
<div>
|
||||||
{sortedDms.slice(-10).map(a => <DM data={a} key={a.id} />)}
|
{sortedDms.map(a => <DM data={a} key={a.id} />)}
|
||||||
|
<div ref={ref} className="mb10"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="write-dm">
|
<div className="write-dm">
|
||||||
<div className="inner">
|
<div className="inner">
|
||||||
<textarea className="f-grow mr10" value={content} onChange={(e) => setContent(e.target.value)}></textarea>
|
<textarea className="f-grow mr10" value={content} onChange={(e) => setContent(e.target.value)} onKeyDown={(e) => onEnter(e)}></textarea>
|
||||||
<div className="btn" onClick={() => sendDm()}>Send</div>
|
<div className="btn" onClick={() => sendDm()}>Send</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -160,6 +160,7 @@ const LoginSlice = createSlice({
|
|||||||
state.notifications = [];
|
state.notifications = [];
|
||||||
state.loggedOut = true;
|
state.loggedOut = true;
|
||||||
state.readNotifications = 0;
|
state.readNotifications = 0;
|
||||||
|
state.dms = [];
|
||||||
},
|
},
|
||||||
markNotificationsRead: (state) => {
|
markNotificationsRead: (state) => {
|
||||||
state.readNotifications = new Date().getTime();
|
state.readNotifications = new Date().getTime();
|
||||||
|
Loading…
Reference in New Issue
Block a user