Skip to content

Commit

Permalink
chat scrolls to bottom! and trying to do "since"
Browse files Browse the repository at this point in the history
  • Loading branch information
@futurepaul
futurepaul committed Feb 1, 2024
1 parent e461efa commit 2c8f6c1
Showing 1 changed file with 103 additions and 105 deletions.
208 changes: 103 additions & 105 deletions src/routes/Chat.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,

Check warning on line 7 in src/routes/Chat.tsx

View workflow job for this annotation

GitHub Actions / code_quality 

'createMemo' is defined but never used. Allowed unused vars must match /^_/u
createResource,
createSignal,
For,
Match,
onCleanup,
onMount,
Show,
Suspense,
Switch
Expand All @@ -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 }
Expand Down Expand Up @@ -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) => (

Check warning on line 213 in src/routes/Chat.tsx

View workflow job for this annotation

GitHub Actions / code_quality 

'index' is defined but never used. Allowed unused args must match /^_/u
<>
<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();
Expand All @@ -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[];

Expand Down Expand Up @@ -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
}
);

Expand All @@ -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);
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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" />
Expand All @@ -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}

Check failure on line 461 in src/routes/Chat.tsx

View workflow job for this annotation

GitHub Actions / code_quality 

Type 'unknown' is not assignable to type 'CombinedMessagesAndActivity[]'.

Check failure on line 461 in src/routes/Chat.tsx

View workflow job for this annotation

GitHub Actions / Build APK 

Type 'unknown' is not assignable to type 'CombinedMessagesAndActivity[]'.

Check failure on line 461 in src/routes/Chat.tsx

View workflow job for this annotation

GitHub Actions / Build iOS 

Type 'unknown' is not assignable to type 'CombinedMessagesAndActivity[]'.
contact={contact()!}
/>
</Show>
</Suspense>
</Show>
</Suspense>
Expand Down Expand Up @@ -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>
);
Expand Down

0 comments on commit 2c8f6c1

Please sign in to comment.