reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: migrate channel to zustand

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-29 07:52:03 +07:00
parent ff6d494b49
commit 0492729e7e
11 changed files with 113 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/channel/components/messageList.tsx
View File

@@ -1,37 +1,34 @@
import ChannelMessageItem from "@app/channel/components/messages/item";
import { sortedChannelMessagesAtom } from "@stores/channel";
import { ChannelMessageItem } from "@app/channel/components/messages/item";
import { useChannelMessages } from "@stores/channels";
import { getHourAgo } from "@utils/date";
import { useAtomValue } from "jotai";
import { useCallback, useRef } from "react";
import { Virtuoso } from "react-virtuoso";
export default function ChannelMessageList() {
export function ChannelMessageList() {
const now = useRef(new Date());
const virtuosoRef = useRef(null);
const data = useAtomValue(sortedChannelMessagesAtom);
const messages = useChannelMessages((state: any) => state.messages);
const itemContent: any = useCallback(
(index: string | number) => {
return <ChannelMessageItem data={data[index]} />;
return <ChannelMessageItem data={messages[index]} />;
},
[data],
[messages],
);
const computeItemKey = useCallback(
(index: string | number) => {
return data[index].id;
return messages[index].id;
},
[data],
[messages],
);
return (
<div className="h-full w-full">
<Virtuoso
ref={virtuosoRef}
data={data}
data={messages}
itemContent={itemContent}
components={{
Header: () => (
@@ -66,7 +63,7 @@ export default function ChannelMessageList() {
),
}}
computeItemKey={computeItemKey}
initialTopMostItemIndex={data.length - 1}
initialTopMostItemIndex={messages.length - 1}
alignToBottom={true}
followOutput={true}
overscan={50}

24
src/app/channel/components/messages/item.tsx
View File

@@ -1,28 +1,24 @@
import MessageHideButton from "@app/channel/components/messages/hideButton";
import MessageMuteButton from "@app/channel/components/messages/muteButton";
import MessageReplyButton from "@app/channel/components/messages/replyButton";
import ChannelMessageUser from "@app/channel/components/messages/user";
import { ChannelMessageUser } from "@app/channel/components/messages/user";
import { noteParser } from "@utils/parser";
import { useMemo } from "react";
export default function ChannelMessageItem({ data }: { data: any }) {
export function ChannelMessageItem({ data }: { data: any }) {
const content = useMemo(() => noteParser(data), [data]);
return (
<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
<div className="flex flex-col">
<ChannelMessageUser pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-[17px] pl-[48px]">
<div className="flex flex-col gap-2">
<div className="whitespace-pre-line break-words text-base leading-tight">
{data.hide ? (
<span className="italic text-zinc-400">[hided message]</span>
) : (
content.parsed
)}
</div>
<div className="-mt-[20px] pl-[49px]">
<div className="whitespace-pre-line break-words text-base leading-tight">
{data.hide ? (
<span className="italic text-zinc-400">[hided message]</span>
) : (
content.parsed
)}
</div>
</div>
</div>

10
src/app/channel/components/messages/user.tsx
View File

@@ -7,7 +7,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
export default function ChannelMessageUser({
export function ChannelMessageUser({
pubkey,
time,
}: { pubkey: string; time: number }) {
@@ -17,7 +17,7 @@ export default function ChannelMessageUser({
<div className="group flex items-start gap-3">
{isError || isLoading ? (
<>
<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-base">
<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
@@ -26,17 +26,17 @@ export default function ChannelMessageUser({
</>
) : (
<>
<div className="relative h-9 w-9 shrink rounded-md">
<div className="relative h-11 w-11 shrink rounded-md">
<Image
src={user?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-9 w-9 rounded-md object-cover"
className="h-11 w-11 rounded-md object-cover"
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-base">
<span className="font-semibold leading-none text-white group-hover:underline">
{user?.display_name || user?.name || shortenKey(pubkey)}
{user?.nip05 || user?.name || shortenKey(pubkey)}
</span>
<span className="leading-none text-zinc-500">·</span>
<span className="leading-none text-zinc-500">

69
src/app/channel/pages/index.page.tsx
View File

@@ -1,19 +1,18 @@
import ChannelBlackList from "@app/channel/components/blacklist";
import ChannelMembers from "@app/channel/components/members";
import { ChannelMessageList } from "@app/channel/components/messageList";
import ChannelMessageForm from "@app/channel/components/messages/form";
import ChannelMetadata from "@app/channel/components/metadata";
import ChannelUpdateModal from "@app/channel/components/updateModal";
import { RelayContext } from "@shared/relayProvider";
import { useActiveAccount } from "@stores/accounts";
import { channelMessagesAtom, channelReplyAtom } from "@stores/channel";
import { useChannelMessages } from "@stores/channels";
import { READONLY_RELAYS } from "@stores/constants";
import { dateToUnix, getHourAgo } from "@utils/date";
import { usePageContext } from "@utils/hooks/usePageContext";
import { getActiveBlacklist, getBlacklist } from "@utils/storage";
import { arrayObjToPureArr } from "@utils/transform";
import { useSetAtom } from "jotai";
import { useResetAtom } from "jotai/utils";
import { Suspense, lazy, useContext, useEffect, useRef } from "react";
import { useContext, useRef } from "react";
import useSWR from "swr";
import useSWRSubscription from "swr/subscription";
@@ -29,20 +28,17 @@ const fetchHided = async ([, id]) => {
return array;
};
const ChannelMessageList = lazy(
() => import("@app/channel/components/messageList"),
);
export function Page() {
const pool: any = useContext(RelayContext);
const account: any = useActiveAccount((state: any) => state.account);
const pageContext = usePageContext();
const searchParams: any = pageContext.urlParsed.search;
const channelID = searchParams.id;
const channelPubkey = searchParams.channelpub;
const account: any = useActiveAccount((state: any) => state.account);
const addMessage = useChannelMessages((state: any) => state.add);
const { data: muted } = useSWR(
account ? ["muted", account.id] : null,
fetchMuted,
@@ -52,10 +48,6 @@ export function Page() {
fetchHided,
);
const setChannelMessages = useSetAtom(channelMessagesAtom);
const resetChannelMessages = useResetAtom(channelMessagesAtom);
const resetChannelReply = useResetAtom(channelReplyAtom);
const now = useRef(new Date());
useSWRSubscription(
@@ -80,7 +72,7 @@ export function Page() {
message["hide"] = false;
}
if (!muted.array.includes(event.pubkey)) {
setChannelMessages((prev) => [...prev, message]);
addMessage(message);
}
},
);
@@ -91,24 +83,29 @@ export function Page() {
},
);
useEffect(() => {
let ignore = false;
if (!ignore) {
// reset channel reply
resetChannelReply();
// reset channel messages
resetChannelMessages();
}
return () => {
ignore = true;
};
});
return (
<div className="flex h-full flex-col justify-between gap-2">
<div className="flex h-11 w-full shrink-0 items-center justify-between">
<div className="h-full w-full grid grid-cols-3">
<div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">
<div
data-tauri-drag-region
className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
>
<h3 className="font-semibold text-zinc-100">Public Channel</h3>
</div>
<div className="w-full flex-1 p-3">
<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900 shadow-input shadow-black/20">
<ChannelMessageList />
<div className="inline-flex shrink-0 p-3">
<ChannelMessageForm channelID={channelID} />
</div>
</div>
</div>
</div>
<div className="col-span-1">
<div
data-tauri-drag-region
className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
/>
<div>
<ChannelMetadata id={channelID} pubkey={channelPubkey} />
</div>
@@ -124,14 +121,6 @@ export function Page() {
)}
</div>
</div>
<div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<Suspense fallback={<p>Loading...</p>}>
<ChannelMessageList />
</Suspense>
<div className="inline-flex shrink-0 p-3">
<ChannelMessageForm channelID={channelID} />
</div>
</div>
</div>
);
}

2
src/app/chat/components/item.tsx
View File

@@ -44,7 +44,7 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
</div>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
{user?.nip05 || user.name || shortenKey(pubkey)}
{user?.nip05 || user?.name || shortenKey(pubkey)}
</h5>
{account?.pubkey === pubkey && (
<span className="text-zinc-500">(you)</span>