Kieran/snort
5
14
Fork 14
Code Issues 37 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

Fix DM page UI (#250)

Browse Source
This commit is contained in:
Sam Samskies 2023-02-10 10:53:09 -10:00 committed by GitHub
parent 5153f5c90a
commit fb4d7924fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Pages/ChatPage.css
View File

@ -1,7 +1,10 @@
.dm-list { .dm-list {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: calc(100vh - 66px - 50px - 70px); --header-height: 72px;
--profile-container-height: 58px;
--write-dm-input-height: 86px;
height: calc(100vh - var(--header-height) - var(--profile-container-height) - var(--write-dm-input-height));
} }
.dm-list > div { .dm-list > div {

7
src/Pages/ChatPage.tsx
View File

@ -2,7 +2,6 @@ import "./ChatPage.css";
import { KeyboardEvent, useEffect, useMemo, useRef, 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";
import ProfileImage from "Element/ProfileImage"; import ProfileImage from "Element/ProfileImage";
import { bech32ToHex } from "Util"; import { bech32ToHex } from "Util";
@ -25,7 +24,6 @@ export default function ChatPage() {
const pubKey = useSelector((s: RootState) => s.login.publicKey); const pubKey = useSelector((s: RootState) => s.login.publicKey);
const dms = useSelector((s: RootState) => filterDms(s.login.dms)); const dms = useSelector((s: RootState) => filterDms(s.login.dms));
const [content, setContent] = useState<string>(); const [content, setContent] = useState<string>();
const { ref, inView } = useInView();
const dmListRef = useRef<HTMLDivElement>(null); const dmListRef = useRef<HTMLDivElement>(null);
function filterDms(dms: TaggedRawEvent[]) { function filterDms(dms: TaggedRawEvent[]) {
@ -37,10 +35,10 @@ export default function ChatPage() {
}, [dms]); }, [dms]);
useEffect(() => { useEffect(() => {
if (inView && dmListRef.current) { if (dmListRef.current) {
dmListRef.current.scroll(0, dmListRef.current.scrollHeight); dmListRef.current.scroll(0, dmListRef.current.scrollHeight);
} }
}, [inView, dmListRef, sortedDms]); }, [dmListRef.current?.scrollHeight]);
async function sendDm() { async function sendDm() {
if (content) { if (content) {
@ -68,7 +66,6 @@ export default function ChatPage() {
{sortedDms.map(a => ( {sortedDms.map(a => (
<DM data={a as TaggedRawEvent} key={a.id} /> <DM data={a as TaggedRawEvent} key={a.id} />
))} ))}
<div ref={ref} className="mb10"></div>
</div> </div>
</div> </div>
<div className="write-dm"> <div className="write-dm">