mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
update channel
This commit is contained in:
parent
f8de44fe9f
commit
0a6865431d
@ -80,15 +80,13 @@ export function ChannelCreateModal() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openModal()}
|
||||
className="group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900"
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
|
||||
>
|
||||
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
|
||||
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
|
||||
<PlusIcon width={12} height={12} className="text-zinc-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-semibold text-zinc-400 group-hover:text-zinc-200">
|
||||
Add a new channel
|
||||
</h5>
|
||||
<h5 className="font-medium text-zinc-400">Add a new channel</h5>
|
||||
</div>
|
||||
</button>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
|
@ -3,7 +3,7 @@ import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function ChannelsListItem({ data }: { data: any }) {
|
||||
const channel: any = useChannelProfile(data.event_id, data.pubkey);
|
||||
const channel: any = useChannelProfile(data.event_id);
|
||||
const pageContext = usePageContext();
|
||||
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
@ -11,20 +11,16 @@ export function ChannelsListItem({ data }: { data: any }) {
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/app/channel?id=${data.event_id}&channelpub=${data.pubkey}`}
|
||||
href={`/app/channel?id=${data.event_id}`}
|
||||
className={twMerge(
|
||||
"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
|
||||
pageID === data.event_id
|
||||
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
||||
: "",
|
||||
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
|
||||
pageID === data.event_id ? "bg-zinc-900 text-white" : "",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"inline-flex shrink-0 h-5 w-5 items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800",
|
||||
pageID === data.event_id
|
||||
? "dark:bg-zinc-800 group-hover:dark:bg-zinc-700"
|
||||
: "",
|
||||
"inline-flex shrink-0 h-5 w-5 items-center justify-center rounded bg-zinc-900",
|
||||
pageID === data.event_id ? "bg-zinc-800" : "",
|
||||
)}
|
||||
>
|
||||
<span className="text-xs text-zinc-100">#</span>
|
||||
|
@ -12,14 +12,14 @@ export function ChannelsList() {
|
||||
}, [fetchChannels]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{!channels ? (
|
||||
<>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||
</div>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||
</div>
|
||||
|
@ -28,7 +28,7 @@ export function ChannelMessageList() {
|
||||
<div className="h-full w-full">
|
||||
<Virtuoso
|
||||
ref={virtuosoRef}
|
||||
data={messages}
|
||||
data={[]}
|
||||
itemContent={itemContent}
|
||||
components={{
|
||||
Header: () => (
|
||||
|
@ -2,65 +2,40 @@ 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 { ChannelMessageUserMute } from "@app/channel/components/messages/userMute";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import { MentionNote } from "@shared/notes/mentions/note";
|
||||
import { ImagePreview } from "@shared/notes/preview/image";
|
||||
import { VideoPreview } from "@shared/notes/preview/video";
|
||||
import { parser } from "@utils/parser";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMemo } from "react";
|
||||
|
||||
export function ChannelMessageItem({ data }: { data: any }) {
|
||||
export function ChannelMessageItem({ data }: { data: NDKEvent }) {
|
||||
const content = useMemo(() => parser(data), [data]);
|
||||
const [hide, setHide] = useState(data.hide);
|
||||
|
||||
const toggleHide = () => {
|
||||
setHide((prev) => !prev);
|
||||
};
|
||||
|
||||
if (data.mute)
|
||||
return (
|
||||
<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
|
||||
<ChannelMessageUserMute pubkey={data.pubkey} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<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-[20px] pl-[49px]">
|
||||
{hide ? (
|
||||
<>
|
||||
<p className="leading-tight italic text-zinc-400">
|
||||
[hided message]
|
||||
</p>
|
||||
<button type="button" onClick={() => toggleHide()}>
|
||||
show
|
||||
</button>
|
||||
</>
|
||||
<p className="whitespace-pre-line break-words text-base leading-tight">
|
||||
{content.parsed}
|
||||
</p>
|
||||
{Array.isArray(content.images) && content.images.length ? (
|
||||
<ImagePreview urls={content.images} />
|
||||
) : (
|
||||
<>
|
||||
<p className="whitespace-pre-line break-words text-base leading-tight">
|
||||
{content.parsed}
|
||||
</p>
|
||||
{Array.isArray(content.images) && content.images.length ? (
|
||||
<ImagePreview urls={content.images} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{Array.isArray(content.videos) && content.videos.length ? (
|
||||
<VideoPreview urls={content.videos} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{Array.isArray(content.notes) && content.notes.length ? (
|
||||
content.notes.map((note: string) => (
|
||||
<MentionNote key={note} id={note} />
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
<></>
|
||||
)}
|
||||
{Array.isArray(content.videos) && content.videos.length ? (
|
||||
<VideoPreview urls={content.videos} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{Array.isArray(content.notes) && content.notes.length ? (
|
||||
content.notes.map((note: string) => (
|
||||
<MentionNote key={note} id={note} />
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -4,11 +4,8 @@ import { Image } from "@shared/image";
|
||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||
import { nip19 } from "nostr-tools";
|
||||
|
||||
export function ChannelMetadata({
|
||||
id,
|
||||
pubkey,
|
||||
}: { id: string; pubkey: string }) {
|
||||
const metadata = useChannelProfile(id, pubkey);
|
||||
export function ChannelMetadata({ id }: { id: string }) {
|
||||
const metadata = useChannelProfile(id);
|
||||
const noteID = id ? nip19.noteEncode(id) : null;
|
||||
|
||||
const copyNoteID = async () => {
|
||||
@ -22,7 +19,7 @@ export function ChannelMetadata({
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="relative shrink-0 rounded-md h-11 w-11">
|
||||
<Image
|
||||
src={metadata?.image || DEFAULT_AVATAR}
|
||||
src={metadata?.picture || DEFAULT_AVATAR}
|
||||
alt={id}
|
||||
className="h-11 w-11 rounded-md object-contain bg-zinc-900"
|
||||
/>
|
||||
|
@ -1,267 +0,0 @@
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { getChannel } from "@libs/storage";
|
||||
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
|
||||
import { AvatarUploader } from "@shared/avatarUploader";
|
||||
import { CancelIcon, EditIcon } from "@shared/icons";
|
||||
import { Image } from "@shared/image";
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
import { useActiveAccount } from "@stores/accounts";
|
||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||
import { dateToUnix } from "@utils/date";
|
||||
import { Fragment, useContext, useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
export function ChannelUpdateModal({ id }: { id: string }) {
|
||||
const ndk = useContext(RelayContext);
|
||||
const account = useActiveAccount((state: any) => state.account);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [image, setImage] = useState(DEFAULT_AVATAR);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const closeModal = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { isDirty, isValid },
|
||||
} = useForm({
|
||||
defaultValues: async () => {
|
||||
const channel = await getChannel(id);
|
||||
const metadata = JSON.parse(channel.metadata);
|
||||
// update image state
|
||||
setImage(metadata.image);
|
||||
// set default values
|
||||
return metadata;
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: any) => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const signer = new NDKPrivateKeySigner(account.privkey);
|
||||
ndk.signer = signer;
|
||||
|
||||
const event = new NDKEvent(ndk);
|
||||
// build event
|
||||
event.content = JSON.stringify(data);
|
||||
event.kind = 41;
|
||||
event.created_at = dateToUnix();
|
||||
event.pubkey = account.pubkey;
|
||||
event.tags = [["e", id]];
|
||||
|
||||
// publish event
|
||||
event.publish();
|
||||
|
||||
// reset form
|
||||
reset();
|
||||
|
||||
// close modal
|
||||
setIsOpen(false);
|
||||
} catch (e) {
|
||||
console.log("error: ", e);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setValue("picture", image);
|
||||
}, [setValue, image]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openModal()}
|
||||
className="group inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800 focus:outline-none"
|
||||
>
|
||||
<EditIcon
|
||||
width={16}
|
||||
height={16}
|
||||
className="text-zinc-400 group-hover:text-white"
|
||||
/>
|
||||
</button>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
|
||||
</Transition.Child>
|
||||
<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900">
|
||||
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-semibold leading-none text-white"
|
||||
>
|
||||
Update channel
|
||||
</Dialog.Title>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
||||
>
|
||||
<CancelIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-zinc-300"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<Dialog.Description className="text-sm leading-tight text-zinc-400">
|
||||
New metadata will be published on all relays, and will be
|
||||
immediately available to all users, so please carefully.
|
||||
</Dialog.Description>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="flex h-full w-full flex-col gap-4"
|
||||
>
|
||||
<input
|
||||
type={"hidden"}
|
||||
{...register("picture")}
|
||||
value={image}
|
||||
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
|
||||
Picture
|
||||
</label>
|
||||
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
|
||||
<Image
|
||||
src={image}
|
||||
alt="channel picture"
|
||||
className="relative z-10 h-11 w-11 rounded-md"
|
||||
/>
|
||||
<div className="absolute bottom-3 right-3 z-10">
|
||||
<AvatarUploader valueState={setImage} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
|
||||
Channel name *
|
||||
</label>
|
||||
<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||
<input
|
||||
type={"text"}
|
||||
{...register("name", {
|
||||
required: true,
|
||||
minLength: 4,
|
||||
})}
|
||||
spellCheck={false}
|
||||
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
|
||||
Description
|
||||
</label>
|
||||
<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||
<textarea
|
||||
{...register("about")}
|
||||
spellCheck={false}
|
||||
className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-14 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<span className="text-base font-bold leading-none text-white">
|
||||
Make Private
|
||||
</span>
|
||||
<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-base font-medium ring-1 ring-inset ring-zinc-400/20">
|
||||
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
|
||||
Coming soon
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-base leading-none text-zinc-400">
|
||||
Private channels can only be viewed by member
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-zinc-900 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
|
||||
role="switch"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span className="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-zinc-600 shadow ring-0 transition duration-200 ease-in-out" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isDirty || !isValid}
|
||||
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
|
||||
>
|
||||
{loading ? (
|
||||
<svg
|
||||
className="h-4 w-4 animate-spin text-black dark:text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<title id="loading">Loading</title>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
"Update channel"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,7 +1,7 @@
|
||||
import { getChannel, updateChannelMetadata } from "@libs/storage";
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
import { useContext } from "react";
|
||||
import useSWR, { useSWRConfig } from "swr";
|
||||
import useSWR from "swr";
|
||||
import useSWRSubscription from "swr/subscription";
|
||||
|
||||
const fetcher = async ([, id]) => {
|
||||
@ -13,39 +13,33 @@ const fetcher = async ([, id]) => {
|
||||
}
|
||||
};
|
||||
|
||||
export function useChannelProfile(id: string, channelPubkey: string) {
|
||||
export function useChannelProfile(id: string) {
|
||||
const ndk = useContext(RelayContext);
|
||||
const { data, mutate } = useSWR(["channel-metadata", id], fetcher);
|
||||
|
||||
const { mutate } = useSWRConfig();
|
||||
const { data, isLoading } = useSWR(["channel-metadata", id], fetcher);
|
||||
useSWRSubscription(data ? ["channel-metadata", id] : null, () => {
|
||||
// subscribe to channel
|
||||
const sub = ndk.subscribe(
|
||||
{
|
||||
"#e": [id],
|
||||
kinds: [41],
|
||||
},
|
||||
{
|
||||
closeOnEose: true,
|
||||
},
|
||||
);
|
||||
|
||||
useSWRSubscription(
|
||||
!isLoading && data ? ["channel-metadata", id] : null,
|
||||
([, key]) => {
|
||||
// subscribe to channel
|
||||
const sub = ndk.subscribe(
|
||||
{
|
||||
"#e": [key],
|
||||
authors: [channelPubkey],
|
||||
kinds: [41],
|
||||
},
|
||||
{
|
||||
closeOnEose: true,
|
||||
},
|
||||
);
|
||||
sub.addListener("event", (event: { content: string }) => {
|
||||
// update in local database
|
||||
updateChannelMetadata(id, event.content);
|
||||
// revaildate
|
||||
mutate();
|
||||
});
|
||||
|
||||
sub.addListener("event", (event: { content: string }) => {
|
||||
// update in local database
|
||||
updateChannelMetadata(key, event.content);
|
||||
// revaildate
|
||||
mutate(["channel-metadata", key]);
|
||||
});
|
||||
|
||||
return () => {
|
||||
sub.stop();
|
||||
};
|
||||
},
|
||||
);
|
||||
return () => {
|
||||
sub.stop();
|
||||
};
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
@ -1,98 +1,98 @@
|
||||
import { ChannelBlackList } from "@app/channel/components/blacklist";
|
||||
import { ChannelMessageItem } from "../components/messages/item";
|
||||
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 { getActiveBlacklist, getBlacklist } from "@libs/storage";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
import { useActiveAccount } from "@stores/accounts";
|
||||
import { useChannelMessages } from "@stores/channels";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { dateToUnix, getHourAgo } from "@utils/date";
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
import { arrayObjToPureArr } from "@utils/transform";
|
||||
import { useContext, useRef } from "react";
|
||||
import useSWR from "swr";
|
||||
import { useCallback, useContext, useEffect, useRef } from "react";
|
||||
import useSWRSubscription from "swr/subscription";
|
||||
|
||||
const fetchMuted = async ([, id]) => {
|
||||
const res = await getBlacklist(id, 44);
|
||||
const array = arrayObjToPureArr(res);
|
||||
return { original: res, array: array };
|
||||
};
|
||||
|
||||
const fetchHided = async ([, id]) => {
|
||||
const res = await getActiveBlacklist(id, 43);
|
||||
const array = arrayObjToPureArr(res);
|
||||
return array;
|
||||
};
|
||||
const now = new Date();
|
||||
const since = dateToUnix(getHourAgo(24, now));
|
||||
|
||||
export function Page() {
|
||||
const ndk = useContext(RelayContext);
|
||||
|
||||
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, clear] = useChannelMessages((state: any) => [
|
||||
state.add,
|
||||
state.clear,
|
||||
]);
|
||||
const [messages, addMessage, fetchMessages, clearMessages]: any =
|
||||
useChannelMessages((state: any) => [
|
||||
state.messages,
|
||||
state.addMessage,
|
||||
state.fetch,
|
||||
state.clear,
|
||||
]);
|
||||
|
||||
const { data: muted } = useSWR(
|
||||
account ? ["muted", account.id] : null,
|
||||
fetchMuted,
|
||||
);
|
||||
const { data: hided } = useSWR(
|
||||
account ? ["hided", account.id] : null,
|
||||
fetchHided,
|
||||
);
|
||||
useSWRSubscription(["channelMessagesSubscribe", channelID], () => {
|
||||
// subscribe to channel
|
||||
const sub = ndk.subscribe({
|
||||
"#e": [channelID],
|
||||
kinds: [42],
|
||||
since: dateToUnix(),
|
||||
});
|
||||
|
||||
const now = useRef(new Date());
|
||||
sub.addListener("event", (event) => {
|
||||
addMessage(event);
|
||||
});
|
||||
|
||||
useSWRSubscription(
|
||||
account && channelID && muted && hided ? ["channel", channelID] : null,
|
||||
() => {
|
||||
// subscribe to channel
|
||||
const sub = ndk.subscribe({
|
||||
"#e": [channelID],
|
||||
kinds: [42],
|
||||
since: dateToUnix(getHourAgo(24, now.current)),
|
||||
limit: 20,
|
||||
});
|
||||
return () => {
|
||||
sub.stop();
|
||||
};
|
||||
});
|
||||
|
||||
sub.addListener("event", (event: NDKEvent) => {
|
||||
const message: NDKEvent = event;
|
||||
useEffect(() => {
|
||||
fetchMessages(ndk, channelID, since);
|
||||
return () => {
|
||||
clearMessages();
|
||||
};
|
||||
}, [fetchMessages]);
|
||||
|
||||
// handle hide message
|
||||
if (hided.includes(event.id)) {
|
||||
message["hide"] = true;
|
||||
} else {
|
||||
message["hide"] = false;
|
||||
}
|
||||
const count = messages.length;
|
||||
const reverseIndex = useCallback((index) => count - 1 - index, [count]);
|
||||
const parentRef = useRef();
|
||||
const virtualizerRef = useRef(null);
|
||||
|
||||
// handle mute user
|
||||
if (muted.array.includes(event.pubkey)) {
|
||||
message["mute"] = true;
|
||||
} else {
|
||||
message["mute"] = false;
|
||||
}
|
||||
if (
|
||||
virtualizerRef.current &&
|
||||
count !== virtualizerRef.current.options.count
|
||||
) {
|
||||
const delta = count - virtualizerRef.current.options.count;
|
||||
const nextOffset = virtualizerRef.current.scrollOffset + delta * 200;
|
||||
|
||||
// add to store
|
||||
addMessage(message);
|
||||
});
|
||||
virtualizerRef.current.scrollOffset = nextOffset;
|
||||
virtualizerRef.current.scrollToOffset(nextOffset, { align: "start" });
|
||||
}
|
||||
|
||||
return () => {
|
||||
sub.stop();
|
||||
clear();
|
||||
};
|
||||
},
|
||||
);
|
||||
const virtualizer = useVirtualizer({
|
||||
count,
|
||||
getScrollElement: () => parentRef.current,
|
||||
estimateSize: () => 200,
|
||||
getItemKey: useCallback(
|
||||
(index) => messages[reverseIndex(index)].id,
|
||||
[messages, reverseIndex],
|
||||
),
|
||||
overscan: 5,
|
||||
scrollMargin: 50,
|
||||
});
|
||||
|
||||
if (!account) return <div>Fuck SSR</div>;
|
||||
useEffect(() => {
|
||||
virtualizerRef.current = virtualizer;
|
||||
}, []);
|
||||
|
||||
const items = virtualizer.getVirtualItems();
|
||||
|
||||
const [paddingTop, paddingBottom] =
|
||||
items.length > 0
|
||||
? [
|
||||
Math.max(0, items[0].start - virtualizer.options.scrollMargin),
|
||||
Math.max(0, virtualizer.getTotalSize() - items[items.length - 1].end),
|
||||
]
|
||||
: [0, 0];
|
||||
|
||||
return (
|
||||
<div className="h-full w-full grid grid-cols-3">
|
||||
@ -104,9 +104,41 @@ export function Page() {
|
||||
<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">
|
||||
<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900">
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="scrollbar-hide overflow-y-auto h-full w-full"
|
||||
style={{ contain: "strict" }}
|
||||
>
|
||||
{!messages ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
overflowAnchor: "none",
|
||||
paddingTop,
|
||||
paddingBottom,
|
||||
}}
|
||||
>
|
||||
{items.map((item) => {
|
||||
const index = reverseIndex(item.index);
|
||||
const message = messages[index];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.key}
|
||||
data-index={item.index}
|
||||
data-reverse-index={index}
|
||||
ref={virtualizer.measureElement}
|
||||
>
|
||||
<ChannelMessageItem data={message} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full inline-flex shrink-0 border-t border-zinc-800">
|
||||
<ChannelMessageForm channelID={channelID} />
|
||||
</div>
|
||||
</div>
|
||||
@ -118,12 +150,8 @@ export function Page() {
|
||||
className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
|
||||
/>
|
||||
<div className="p-3 flex flex-col gap-3">
|
||||
<ChannelMetadata id={channelID} pubkey={channelPubkey} />
|
||||
<ChannelMetadata id={channelID} />
|
||||
<ChannelMembers />
|
||||
{muted && <ChannelBlackList blacklist={muted.original} />}
|
||||
{account && account.pubkey === channelPubkey && (
|
||||
<ChannelUpdateModal id={channelID} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -16,7 +16,7 @@ export function ChatsListItem({ data }: { data: any }) {
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !user ? (
|
||||
<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div>
|
||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
|
||||
@ -26,10 +26,8 @@ export function ChatsListItem({ data }: { data: any }) {
|
||||
<a
|
||||
href={`/app/chat?pubkey=${data.sender_pubkey}`}
|
||||
className={twMerge(
|
||||
"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
|
||||
pagePubkey === data.sender_pubkey
|
||||
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
||||
: "",
|
||||
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
|
||||
pagePubkey === data.sender_pubkey ? "bg-zinc-900 text-white" : "",
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
@ -41,7 +39,7 @@ export function ChatsListItem({ data }: { data: any }) {
|
||||
</div>
|
||||
<div className="w-full inline-flex items-center justify-between">
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
|
||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
|
||||
{user?.nip05 ||
|
||||
user?.displayName ||
|
||||
shortenKey(data.sender_pubkey)}
|
||||
|
@ -16,12 +16,12 @@ export function ChatsList() {
|
||||
|
||||
if (!account)
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
|
||||
</div>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
|
||||
</div>
|
||||
@ -29,15 +29,15 @@ export function ChatsList() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<ChatsListSelfItem data={account} />
|
||||
{!chats ? (
|
||||
<>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
|
||||
</div>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
|
||||
</div>
|
||||
|
@ -10,13 +10,12 @@ export function ChatsListSelfItem({ data }: { data: any }) {
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
|
||||
const { user, isError, isLoading } = useProfile(data.pubkey);
|
||||
const { user, isLoading } = useProfile(data.pubkey);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !user ? (
|
||||
<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div>
|
||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
|
||||
@ -26,10 +25,8 @@ export function ChatsListSelfItem({ data }: { data: any }) {
|
||||
<a
|
||||
href={`/app/chat?pubkey=${data.pubkey}`}
|
||||
className={twMerge(
|
||||
"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
|
||||
pagePubkey === data.pubkey
|
||||
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
||||
: "",
|
||||
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
|
||||
pagePubkey === data.pubkey ? "bg-zinc-900 text-white" : "",
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
@ -40,7 +37,7 @@ export function ChatsListSelfItem({ data }: { data: any }) {
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
|
||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
|
||||
{user?.nip05 || user?.name || shortenKey(data.pubkey)}
|
||||
</h5>
|
||||
<span className="text-zinc-500">(you)</span>
|
||||
|
@ -61,7 +61,7 @@ export function Page() {
|
||||
<h3 className="font-semibold text-zinc-100">Encrypted Chat</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">
|
||||
<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900">
|
||||
<ChatMessageList />
|
||||
<div className="shrink-0 px-5 p-3 border-t border-zinc-800">
|
||||
<ChatMessageForm
|
||||
|
@ -18,7 +18,7 @@ export function FeedBlock({ params }: { params: any }) {
|
||||
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
|
||||
|
||||
const close = () => {
|
||||
removeBlock(params.id);
|
||||
removeBlock(params.id, true);
|
||||
};
|
||||
|
||||
const getKey = (pageIndex, previousPageData) => {
|
||||
|
@ -6,7 +6,7 @@ export function ImageBlock({ params }: { params: any }) {
|
||||
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
|
||||
|
||||
const close = () => {
|
||||
removeBlock(params.id);
|
||||
removeBlock(params.id, true);
|
||||
};
|
||||
|
||||
return (
|
||||
|
1
src/app/user/_default.page.tsx
Normal file
1
src/app/user/_default.page.tsx
Normal file
@ -0,0 +1 @@
|
||||
export { LayoutUser as Layout } from "./layout";
|
14
src/app/user/layout.tsx
Normal file
14
src/app/user/layout.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { MultiAccounts } from "@shared/multiAccounts";
|
||||
import { Navigation } from "@shared/navigation";
|
||||
|
||||
export function LayoutUser({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex w-screen h-screen">
|
||||
<div className="relative flex flex-row shrink-0">
|
||||
<MultiAccounts />
|
||||
<Navigation />
|
||||
</div>
|
||||
<div className="w-full h-full">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
13
src/app/user/pages/index.page.tsx
Normal file
13
src/app/user/pages/index.page.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
|
||||
export function Page() {
|
||||
const pageContext = usePageContext();
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pubkey = searchParams.pubkey;
|
||||
|
||||
return (
|
||||
<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden scrollbar-hide">
|
||||
<p>{pubkey}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -299,7 +299,7 @@ export async function updateChannelMetadata(event_id: string, value: string) {
|
||||
|
||||
return await db.execute(
|
||||
"UPDATE channels SET name = ?, picture = ?, about = ? WHERE event_id = ?;",
|
||||
[data.name, data.image, data.about, event_id],
|
||||
[data.name, data.picture, data.about, event_id],
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -29,8 +29,8 @@ export function Navigation() {
|
||||
<div className="flex flex-col gap-1">
|
||||
<ActiveLink
|
||||
href="/app/space"
|
||||
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-zinc-200 hover:text-white"
|
||||
activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
|
||||
className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
|
||||
activeClassName="bg-zinc-900/50"
|
||||
>
|
||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
|
||||
<SpaceIcon width={12} height={12} className="text-white" />
|
||||
@ -39,8 +39,8 @@ export function Navigation() {
|
||||
</ActiveLink>
|
||||
<ActiveLink
|
||||
href="/app/trending"
|
||||
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-zinc-200 hover:text-white"
|
||||
activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
|
||||
className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
|
||||
activeClassName="bg-zinc-900/50"
|
||||
>
|
||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
|
||||
<TrendingIcon width={12} height={12} className="text-white" />
|
||||
|
@ -11,7 +11,7 @@ import { useMemo } from "react";
|
||||
export function NoteBase({
|
||||
event,
|
||||
block,
|
||||
metadata,
|
||||
metadata = true,
|
||||
}: { event: LumeEvent; block?: number; metadata?: boolean }) {
|
||||
const content = useMemo(() => parser(event), [event]);
|
||||
const checkParentID = isTagsIncludeID(event.parent_id, event.tags);
|
||||
|
@ -22,7 +22,7 @@ export function NoteReply({
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => openThread(e, id)}
|
||||
className="w-14 group inline-flex items-center gap-1.5"
|
||||
className="w-20 group inline-flex items-center gap-1.5"
|
||||
>
|
||||
<ReplyIcon
|
||||
width={16}
|
||||
|
@ -44,7 +44,7 @@ export function NoteRepost({
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => submitEvent(e)}
|
||||
className="w-14 group inline-flex items-center gap-1.5"
|
||||
className="w-20 group inline-flex items-center gap-1.5"
|
||||
>
|
||||
<RepostIcon
|
||||
width={16}
|
||||
|
@ -5,7 +5,7 @@ export function NoteZap({ zaps }: { zaps: number }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="w-14 group inline-flex items-center gap-1.5"
|
||||
className="w-20 group inline-flex items-center gap-1.5"
|
||||
>
|
||||
<ZapIcon
|
||||
width={16}
|
||||
|
@ -10,7 +10,7 @@ export function Reply({ data }: { data: any }) {
|
||||
<div className="flex h-min min-h-min w-full select-text flex-col px-3 pt-5 mb-3 rounded-md bg-zinc-900">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="-mt-[20px] pl-[47px]">
|
||||
<div className="-mt-[20px] pl-[50px]">
|
||||
<Kind1 content={content} />
|
||||
<NoteMetadata id={data.id} eventPubkey={data.pubkey} />
|
||||
</div>
|
||||
|
@ -56,11 +56,7 @@ export function User({
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute left-0 top-8 z-10 mt-3 w-screen max-w-sm px-4 sm:px-0 lg:max-w-3xl">
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
className="w-full max-w-xs overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input ring-1 ring-black ring-opacity-5"
|
||||
>
|
||||
<div className="w-full max-w-xs overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input ring-1 ring-black ring-opacity-5">
|
||||
<div className="flex items-start gap-2.5 border-b border-zinc-800 px-3 py-3">
|
||||
<Image
|
||||
src={user?.image || DEFAULT_AVATAR}
|
||||
@ -90,7 +86,7 @@ export function User({
|
||||
href={`/app/user?pubkey=${pubkey}`}
|
||||
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-base font-medium"
|
||||
>
|
||||
View full profile
|
||||
View profile
|
||||
</a>
|
||||
<a
|
||||
href={`/app/chat?pubkey=${pubkey}`}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { getChannels } from "@libs/storage";
|
||||
import NDK, { NDKFilter } from "@nostr-dev-kit/ndk";
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
@ -37,8 +38,20 @@ export const useChannelMessages = create(
|
||||
immer((set) => ({
|
||||
messages: [],
|
||||
replyTo: { id: null, pubkey: null, content: null },
|
||||
fetch: async (ndk: NDK, id: string, since: number) => {
|
||||
const filter: NDKFilter = {
|
||||
"#e": [id],
|
||||
kinds: [42],
|
||||
since: since,
|
||||
};
|
||||
const events = await ndk.fetchEvents(filter);
|
||||
const array = [...events];
|
||||
set({ messages: array });
|
||||
},
|
||||
add: (message: any) => {
|
||||
set((state: any) => ({ messages: [message, ...state.messages] }));
|
||||
set((state: any) => {
|
||||
state.messages.push(message);
|
||||
});
|
||||
},
|
||||
openReply: (id: string, pubkey: string, content: string) => {
|
||||
set(() => ({ replyTo: { id, pubkey, content } }));
|
||||
|
@ -58,9 +58,7 @@ export function parser(event: any) {
|
||||
const event = item.event;
|
||||
if (event) {
|
||||
content.notes.push(event.id);
|
||||
content.parsed = reactStringReplace(content.parsed, item.text, () => (
|
||||
<></>
|
||||
));
|
||||
content.parsed = content.parsed.replace(item.text, "");
|
||||
}
|
||||
if (profile) {
|
||||
content.parsed = reactStringReplace(
|
||||
|
Loading…
Reference in New Issue
Block a user