Files
lume/src/shared/accounts/active.tsx
Ren Amamiya 3fe601cfc6 polish
2023-06-27 20:53:52 +07:00

106 lines
2.6 KiB
TypeScript

import { createChat, getLastLogin } from "@libs/storage";
import { Image } from "@shared/image";
import { NetworkStatusIndicator } from "@shared/networkStatusIndicator";
import { RelayContext } from "@shared/relayProvider";
import { DEFAULT_AVATAR } from "@stores/constants";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useProfile } from "@utils/hooks/useProfile";
import { sendNativeNotification } from "@utils/notification";
import { produce } from "immer";
import { useContext, useEffect } from "react";
const lastLogin = await getLastLogin();
export function ActiveAccount({ data }: { data: any }) {
const ndk = useContext(RelayContext);
const queryClient = useQueryClient();
const { status, user } = useProfile(data.pubkey);
const chat = useMutation({
mutationFn: (data: any) => {
return createChat(
data.id,
data.receiver_pubkey,
data.sender_pubkey,
data.content,
data.tags,
data.created_at,
);
},
onSuccess: (data: any) => {
const prev = queryClient.getQueryData(["chats"]);
const next = produce(prev, (draft: any) => {
const target = draft.findIndex(
(m: { sender_pubkey: string }) => m.sender_pubkey === data,
);
if (target !== -1) {
draft[target]["new_messages"] =
draft[target]["new_messages"] + 1 || 1;
} else {
draft.push({ sender_pubkey: data, new_messages: 1 });
}
});
queryClient.setQueryData(["chats"], next);
},
});
useEffect(() => {
const since = lastLogin > 0 ? lastLogin : Math.floor(Date.now() / 1000);
const sub = ndk.subscribe(
{
kinds: [1, 4],
"#p": [data.pubkey],
since: since,
},
{
closeOnEose: false,
},
);
sub.addListener("event", (event) => {
switch (event.kind) {
case 1:
// send native notifiation
sendNativeNotification("Someone mention you");
break;
case 4:
// update state
chat.mutate({
id: event.id,
receiver_pubkey: data.pubkey,
sender_pubkey: event.pubkey,
content: event.content,
tags: event.tags,
created_at: event.created_at,
});
// send native notifiation
sendNativeNotification("You've received new message");
break;
default:
break;
}
});
return () => {
sub.stop();
};
}, []);
if (status === "loading") {
return <div className="w-9 h-9 rounded-md bg-zinc-800 animate-pulse" />;
}
return (
<div className="relative inline-block h-9 w-9">
<Image
src={user.image}
fallback={DEFAULT_AVATAR}
alt={data.npub}
className="h-9 w-9 rounded-md object-cover"
/>
<NetworkStatusIndicator />
</div>
);
}