chat scrolls to bottom! and trying to do "since"

Author: futurepaul

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<HackActivityType>();
+    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 (
+        <>
+            <div class="flex flex-col-reverse justify-end gap-4">
+                <For each={props.convo}>
+                    {(combined, index) => (
+                        <>
+                            <Show when={combined.kind === "activity"}>
+                                <div class="rounded-lg bg-m-grey-800 px-4 pt-4">
+                                    <UnifiedActivityItem
+                                        item={combined.content as IActivityItem}
+                                        onClick={openDetailsModal}
+                                    />
+                                </div>
+                            </Show>
+                            <Show when={combined.kind === "message"}>
+                                <SingleMessage
+                                    dm={combined.content as FakeDirectMessage}
+                                    counterPartyNpub={props.contact.npub || ""}
+                                    counterPartyContactId={props.contact.id}
+                                />
+                            </Show>
+                        </>
+                    )}
+                </For>
+            </div>
+            <div ref={(el) => (scrollRef = el)} id="scroll-to-me" />
+            <Show when={detailsId() && detailsKind()}>
+                <ActivityDetailsModal
+                    open={detailsOpen()}
+                    kind={detailsKind()}
+                    id={detailsId()}
+                    setOpen={setDetailsOpen}
+                />
+            </Show>
+        </>
+    );
+}
+
 export function Chat() {
     const params = useParams();
     const [state, actions] = useMegaStore();
@@ -193,24 +255,41 @@ 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 {
                 const activity = await state.mutiny_wallet?.get_label_activity(
                     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<HackActivityType>();
-    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 (
         <Transition
             mode="outin"
@@ -393,10 +437,7 @@ export function Chat() {
         >
             <MutinyWalletGuard>
                 <main class="mx-auto grid h-[100dvh] w-full max-w-[600px] grid-cols-1 grid-rows-[minmax(10px,1fr)_4rem] flex-col overflow-y-hidden safe-top safe-bottom">
-                    <div
-                        class="overflow-y-auto"
-                        ref={(el) => (chatScrollRef = el)}
-                    >
+                    <div class="overflow-y-auto">
                         <div class="fixed top-0 z-50 flex w-full flex-col gap-2 bg-m-grey-975/70 p-4 backdrop-blur-lg">
                             {/* <BackLink href="/" /> */}
                             <BackPop default="/search" />
@@ -411,51 +452,16 @@ export function Chat() {
                         {/* <pre class="whitespace-pre-wrap break-all">
                             {JSON.stringify(convo(), null, 2)}
                         </pre> */}
-                        <div class="flex flex-col gap-4 p-4">
+                        <div class="p-4">
                             <Suspense>
                                 <Show when={contact()}>
                                     <Suspense fallback={<LoadingShimmer />}>
-                                        <For each={convo.latest}>
-                                            {(combined) => (
-                                                <>
-                                                    <Show
-                                                        when={
-                                                            combined.kind ===
-                                                            "activity"
-                                                        }
-                                                    >
-                                                        <div class="rounded-lg bg-m-grey-800 px-4 pt-4">
-                                                            <UnifiedActivityItem
-                                                                item={
-                                                                    combined.content as IActivityItem
-                                                                }
-                                                                onClick={
-                                                                    openDetailsModal
-                                                                }
-                                                            />
-                                                        </div>
-                                                    </Show>
-                                                    <Show
-                                                        when={
-                                                            combined.kind ===
-                                                            "message"
-                                                        }
-                                                    >
-                                                        <SingleMessage
-                                                            dm={
-                                                                combined.content as FakeDirectMessage
-                                                            }
-                                                            counterPartyNpub={
-                                                                contact()!.npub!
-                                                            }
-                                                            counterPartyContactId={
-                                                                params.id
-                                                            }
-                                                        />
-                                                    </Show>
-                                                </>
-                                            )}
-                                        </For>
+                                        <Show when={convo.latest}>
+                                            <MessageList
+                                                convo={convo.latest}
+                                                contact={contact()!}
+                                            />
+                                        </Show>
                                     </Suspense>
                                 </Show>
                             </Suspense>
@@ -511,14 +517,6 @@ export function Chat() {
                         </div>
                     </div>
                 </main>
-                <Show when={detailsId() && detailsKind()}>
-                    <ActivityDetailsModal
-                        open={detailsOpen()}
-                        kind={detailsKind()}
-                        id={detailsId()}
-                        setOpen={setDetailsOpen}
-                    />
-                </Show>
             </MutinyWalletGuard>
         </Transition>
     );