DM improvements

src/element/DM.css

@@ -7,6 +7,8 @@
     min-width: 100px;
     max-width: 90%;
     overflow: hidden;
+    min-height: 40px;
+    white-space: pre-wrap;
 }
 
 .dm > div:first-child {

src/element/DM.tsx

@@ -1,6 +1,7 @@
 import "./DM.css";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import { useInView } from 'react-intersection-observer';
 
 // @ts-ignore
 import useEventPublisher from "../feed/EventPublisher";
@@ -19,6 +20,8 @@ export default function DM(props: DMProps) {
     const pubKey = useSelector<any>(s => s.login.publicKey);
     const publisher = useEventPublisher();
     const [content, setContent] = useState("Loading...");
+    const [decrypted, setDecrypted] = useState(false);
+    const { ref, inView, entry } = useInView();
 
     async function decrypt() {
         let e = Event.FromObject(props.data);
@@ -27,11 +30,14 @@ export default function DM(props: DMProps) {
     }
 
     useEffect(() => {
-        decrypt().catch(console.error);
-    }, [props.data]);
+        if (!decrypted && inView) {
+            setDecrypted(true);
+            decrypt().catch(console.error);
+        }
+    }, [inView, props.data]);
 
     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 className="w-max">
                 <Text content={content} />

src/pages/ChatPage.css

@@ -8,6 +8,7 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 10px;
+    scroll-padding-bottom: 40px;
 }
 
 .write-dm {

src/pages/ChatPage.tsx

@@ -1,7 +1,8 @@
 import "./ChatPage.css";
-import { useMemo, useState } from "react";
+import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import { useInView } from 'react-intersection-observer';
 
 // @ts-ignore
 import ProfileImage from "../element/ProfileImage";
@@ -23,6 +24,8 @@ export default function ChatPage() {
     const id = bech32ToHex(params.id);
     const dms = useSelector<any, RawEvent[]>(s => filterDms(s.login.dms, s.login.publicKey));
     const [content, setContent] = useState<string>();
+    const { ref, inView, entry } = useInView();
+    const dmListRef = useRef<HTMLDivElement>(null);
 
     function filterDms(dms: RawEvent[], myPubkey: string) {
         return dms.filter(a => {
@@ -39,24 +42,38 @@ export default function ChatPage() {
         return [...dms].sort((a, b) => a.created_at - b.created_at)
     }, [dms]);
 
+    useEffect(() => {
+        if (inView && dmListRef.current) {
+            dmListRef.current.scroll(0, dmListRef.current.scrollHeight);
+        }
+    }, [inView, dmListRef, sortedDms]);
+
     async function sendDm() {
         let ev = await publisher.sendDm(content, id);
         console.debug(ev);
         publisher.broadcast(ev);
-        setContent(undefined);
+        setContent("");
+    }
+
+    async function onEnter(e: KeyboardEvent) {
+        let isEnter = e.code === "Enter";
+        if(isEnter && !e.shiftKey) {
+            await sendDm();
+        }
     }
 
     return (
         <>
             <ProfileImage pubkey={id} className="f-grow mb10" />
-            <div className="dm-list">
+            <div className="dm-list" ref={dmListRef}>
                 <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 className="write-dm">
                 <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>
             </div>

src/state/Login.js

@@ -160,6 +160,7 @@ const LoginSlice = createSlice({
             state.notifications = [];
             state.loggedOut = true;
             state.readNotifications = 0;
+            state.dms = [];
         },
         markNotificationsRead: (state) => {
             state.readNotifications = new Date().getTime();