From 2c8f6c148d7ee84b2d8af6b49bc4212cc7378616 Mon Sep 17 00:00:00 2001 From: Paul Miller Date: Thu, 1 Feb 2024 12:27:58 +0000 Subject: [PATCH] chat scrolls to bottom! and trying to do "since" --- src/routes/Chat.tsx | 208 ++++++++++++++++++++++---------------------- 1 file changed, 103 insertions(+), 105 deletions(-) diff --git a/src/routes/Chat.tsx b/src/routes/Chat.tsx index 8f50a0188..ef6433b7c 100644 --- a/src/routes/Chat.tsx +++ b/src/routes/Chat.tsx @@ -1,20 +1,16 @@ /* refresh skip */ import { TagItem } from "@mutinywallet/mutiny-wasm"; -import { - cache, - createAsync, - revalidate, - useNavigate, - useParams -} from "@solidjs/router"; +import { createAsync, useNavigate, useParams } from "@solidjs/router"; import { createEffect, + createMemo, createResource, createSignal, For, Match, onCleanup, + onMount, Show, Suspense, Switch @@ -40,7 +36,7 @@ import { } from "~/components"; import { ParsedParams, toParsedParams } from "~/logic/waila"; import { useMegaStore } from "~/state/megaStore"; -import { timeAgo } from "~/utils"; +import { createDeepSignal, timeAgo } from "~/utils"; type CombinedMessagesAndActivity = | { kind: "message"; content: FakeDirectMessage } @@ -182,6 +178,72 @@ function SingleMessage(props: { ); } +function MessageList(props: { + convo: CombinedMessagesAndActivity[]; + contact: TagItem; +}) { + let scrollRef: HTMLDivElement; + + onMount(() => { + scrollRef.scrollIntoView(); + }); + + // Details modal stuff + const [detailsOpen, setDetailsOpen] = createSignal(false); + const [detailsKind, setDetailsKind] = createSignal(); + const [detailsId, setDetailsId] = createSignal(""); + + function openDetailsModal(id: string, kind: HackActivityType) { + console.log("Opening details modal: ", id, kind); + + if (!id) { + console.warn("No id provided to openDetailsModal"); + return; + } + + setDetailsId(id); + setDetailsKind(kind); + setDetailsOpen(true); + } + + return ( + <> +
+ + {(combined, index) => ( + <> + +
+ +
+ + + + + + )} + +
+
(scrollRef = el)} id="scroll-to-me" /> + + + + + ); +} + export function Chat() { const params = useParams(); const [state, actions] = useMegaStore(); @@ -193,9 +255,11 @@ export function Chat() { return state.mutiny_wallet?.get_tag_item(params.id); }); + const [lastFetch, setLastFetch] = createSignal(0n); + const [convo, { refetch }] = createResource( contact, - async (contact: TagItem) => { + async (contact: TagItem, info) => { // if (!contact() || !contact()?.npub) return undefined; if (!contact.npub) return []; try { @@ -203,14 +267,29 @@ export function Chat() { params.id ); console.log("activity", activity); + const refetchingTimestamp = info.refetching as bigint; + console.log("refetching since", refetchingTimestamp); const convo = await state.mutiny_wallet?.get_dm_conversation( // Mutinynet npub, for testing // "npub1qf8e8cvfp60ywrah984zgsn8veggcrsv2cvttdr47tgz05ypf5yszwx308", contact.npub, 20n, - undefined + refetchingTimestamp ? refetchingTimestamp : undefined ); + const lastConvo = info.value as CombinedMessagesAndActivity[]; + if ( + lastConvo && + lastConvo.length === convo.length + activity.length + ) { + console.log("no new messages or activity"); + return lastConvo; + } + + console.log("dms", convo); + + setLastFetch(BigInt(Math.floor(Date.now() / 1000))); + const dms = convo as FakeDirectMessage[]; const acts = activity as IActivityItem[]; @@ -248,14 +327,14 @@ export function Chat() { return b_time - a_time; }); - return combined.reverse() as CombinedMessagesAndActivity[]; - - // return combined as FakeDirectMessage[]; - return []; + return combined as CombinedMessagesAndActivity[]; } catch (e) { console.error("error getting convo:", e); return []; } + }, + { + storage: createDeepSignal } ); @@ -270,33 +349,16 @@ export function Chat() { ); console.log("dmResult:", dmResult); setMessageValue(""); - refetch(); - chatScrollRef?.scrollTo({ - top: chatScrollRef.scrollHeight - }); + refetch(lastFetch()); } catch (e) { console.error("error sending dm:", e); } setSending(false); } - let chatScrollRef: HTMLDivElement | null = null; - - // For some reason I can't do scrolling here, but it works in send message - - // createEffect(() => { - // if (convo.latest?.length && chatScrollRef) { - // console.log("scrolling"); - - // chatScrollRef?.scrollTo({ - // top: chatScrollRef.scrollHeight - // }); - // } - // }); - createEffect(() => { const interval = setInterval(() => { - refetch(); + refetch(lastFetch()); }, 5000); // Poll every 5 seconds onCleanup(() => { clearInterval(interval); @@ -344,24 +406,6 @@ export function Chat() { }); } - // Details modal stuff - const [detailsOpen, setDetailsOpen] = createSignal(false); - const [detailsKind, setDetailsKind] = createSignal(); - const [detailsId, setDetailsId] = createSignal(""); - - function openDetailsModal(id: string, kind: HackActivityType) { - console.log("Opening details modal: ", id, kind); - - if (!id) { - console.warn("No id provided to openDetailsModal"); - return; - } - - setDetailsId(id); - setDetailsKind(kind); - setDetailsOpen(true); - } - return (
-
(chatScrollRef = el)} - > +
{/* */} @@ -411,51 +452,16 @@ export function Chat() { {/* 
                             {JSON.stringify(convo(), null, 2)}
*/} -
+
}> - - {(combined) => ( - <> - -
- -
- - - - - - )} - + + + @@ -511,14 +517,6 @@ export function Chat() {
- - - );