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

wip

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-25 15:50:34 +07:00
parent 85b30f770c
commit fe25dbaed0
43 changed files with 933 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/auth/create/step-1.tsx
View File

@@ -1,4 +1,4 @@
import { createAccount } from "@libs/storage";
import { createAccount, createBlock } from "@libs/storage";
import { Button } from "@shared/button";
import { EyeOffIcon, EyeOnIcon } from "@shared/icons";
import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -30,6 +30,11 @@ export function CreateStep1Screen() {
mutationFn: (data: any) =>
createAccount(data.npub, data.pubkey, data.privkey, null, 1),
onSuccess: () => {
createBlock(
0,
"Preserve your freedom",
"https://void.cat/d/949GNg7ZjSLHm2eTR3jZqv",
);
queryClient.invalidateQueries({ queryKey: ["currentAccount"] });
// redirect to next step
navigate("/auth/create/step-2", { replace: true });

4
src/app/auth/create/step-3.tsx
View File

@@ -6,10 +6,13 @@ import { useOnboarding } from "@stores/onboarding";
import { Body, fetch } from "@tauri-apps/api/http";
import { useAccount } from "@utils/hooks/useAccount";
import { useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
export function CreateStep3Screen() {
const ndk = useContext(RelayContext);
const profile = useOnboarding((state: any) => state.profile);
const navigate = useNavigate();
const { account } = useAccount();
const [username, setUsername] = useState("");
@@ -48,6 +51,7 @@ export function CreateStep3Screen() {
event.publish();
// redirect to step 4
navigate("/auth/create/step-4", { replace: true });
}
} catch (error) {
setLoading(false);

5
src/app/auth/create/step-4.tsx
View File

@@ -131,8 +131,6 @@ export function CreateStep4Screen() {
updateAccount("follows", follows, account.pubkey),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["currentAccount"] });
// redirect to next step
navigate("/auth/onboarding", { replace: true });
},
});
@@ -156,6 +154,9 @@ export function CreateStep4Screen() {
// update
update.mutate(follows);
// redirect to next step
setTimeout(() => navigate("/auth/onboarding", { replace: true }), 1200);
} catch {
console.log("error");
}

7
src/app/auth/import/step-1.tsx
View File

@@ -1,4 +1,4 @@
import { createAccount } from "@libs/storage";
import { createAccount, createBlock } from "@libs/storage";
import { LoaderIcon } from "@shared/icons";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { getPublicKey, nip19 } from "nostr-tools";
@@ -31,6 +31,11 @@ export function ImportStep1Screen() {
mutationFn: (data: any) =>
createAccount(data.npub, data.pubkey, data.privkey, null, 1),
onSuccess: () => {
createBlock(
0,
"Preserve your freedom",
"https://void.cat/d/949GNg7ZjSLHm2eTR3jZqv",
);
queryClient.invalidateQueries({ queryKey: ["currentAccount"] });
// redirect to next step
navigate("/auth/import/step-2", { replace: true });

20
src/app/auth/onboarding.tsx
View File

@@ -1,10 +1,11 @@
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { LoaderIcon } from "@shared/icons";
import { ArrowRightCircleIcon } from "@shared/icons/arrowRightCircle";
import { RelayContext } from "@shared/relayProvider";
import { User } from "@shared/user";
import { dateToUnix } from "@utils/date";
import { useAccount } from "@utils/hooks/useAccount";
import { useContext } from "react";
import { useContext, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
export function OnboardingScreen() {
@@ -12,9 +13,12 @@ export function OnboardingScreen() {
const navigate = useNavigate();
const { status, account } = useAccount();
const [loading, setLoading] = useState(false);
const publish = async () => {
try {
setLoading(true);
const event = new NDKEvent(ndk);
const signer = new NDKPrivateKeySigner(account.privkey);
ndk.signer = signer;
@@ -30,7 +34,7 @@ export function OnboardingScreen() {
event.publish();
// redirect to home
navigate("/", { replace: true });
setTimeout(() => navigate("/", { replace: true }), 1200);
} catch (error) {
console.log(error);
}
@@ -80,9 +84,15 @@ export function OnboardingScreen() {
onClick={() => publish()}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg px-6 font-medium text-zinc-100 bg-fuchsia-500 hover:bg-fuchsia-600"
>
<span className="w-5" />
<span>Publish</span>
<ArrowRightCircleIcon className="w-5 h-5" />
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
) : (
<>
<span className="w-5" />
<span>Publish</span>
<ArrowRightCircleIcon className="w-5 h-5" />
</>
)}
</button>
<Link
to="/"

2
src/app/channel/components/createModal.tsx
View File

@@ -167,7 +167,7 @@ export function ChannelCreateModal() {
<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"
className="flex h-full w-full flex-col gap-4 mb-0"
>
<input
type={"hidden"}

1
src/app/channel/components/item.tsx
View File

@@ -7,6 +7,7 @@ export function ChannelsListItem({ data }: { data: any }) {
return (
<NavLink
to={`/app/channel/${data.event_id}`}
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",

5
src/app/channel/components/messages/hideButton.tsx
View File

@@ -3,18 +3,19 @@ import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { CancelIcon, HideIcon } from "@shared/icons";
import { RelayContext } from "@shared/relayProvider";
import { Tooltip } from "@shared/tooltip";
import { useActiveAccount } from "@stores/accounts";
import { useChannelMessages } from "@stores/channels";
import { dateToUnix } from "@utils/date";
import { useAccount } from "@utils/hooks/useAccount";
import { Fragment, useContext, useState } from "react";
export function MessageHideButton({ id }: { id: string }) {
const ndk = useContext(RelayContext);
const account = useActiveAccount((state: any) => state.account);
const hide = useChannelMessages((state: any) => state.hideMessage);
const [isOpen, setIsOpen] = useState(false);
const { account } = useAccount();
const closeModal = () => {
setIsOpen(false);
};

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

@@ -15,7 +15,7 @@ export function ChannelMessageItem({ data }: { data: LumeEvent }) {
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">
<User pubkey={data.pubkey} time={data.created_at} />
<User pubkey={data.pubkey} time={data.created_at} isChat={true} />
<div className="-mt-[20px] pl-[49px]">
<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
{content.parsed}

5
src/app/channel/components/messages/muteButton.tsx
View File

@@ -3,18 +3,19 @@ import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { CancelIcon, MuteIcon } from "@shared/icons";
import { RelayContext } from "@shared/relayProvider";
import { Tooltip } from "@shared/tooltip";
import { useActiveAccount } from "@stores/accounts";
import { useChannelMessages } from "@stores/channels";
import { dateToUnix } from "@utils/date";
import { useAccount } from "@utils/hooks/useAccount";
import { Fragment, useContext, useState } from "react";
export function MessageMuteButton({ pubkey }: { pubkey: string }) {
const ndk = useContext(RelayContext);
const account = useActiveAccount((state: any) => state.account);
const mute = useChannelMessages((state: any) => state.muteUser);
const [isOpen, setIsOpen] = useState(false);
const { account } = useAccount();
const closeModal = () => {
setIsOpen(false);
};

48
src/app/channel/index.tsx
View File

@@ -109,29 +109,31 @@ export function ChannelScreen() {
>
<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">
{!messages ? (
<p>Loading...</p>
) : (
<Virtuoso
ref={virtuosoRef}
data={messages}
itemContent={itemContent}
computeItemKey={computeItemKey}
initialTopMostItemIndex={messages.length - 1}
alignToBottom={true}
followOutput={true}
overscan={50}
increaseViewportBy={{ top: 200, bottom: 200 }}
className="scrollbar-hide overflow-y-auto h-full w-full"
components={{
Header: () => Header,
EmptyPlaceholder: () => Empty,
}}
/>
)}
<div className="w-full inline-flex shrink-0 px-5 py-3 border-t border-zinc-800">
<div className="w-full h-full flex-1 p-3">
<div className="h-full flex flex-col justify-between rounded-xl border-t border-zinc-800/50 bg-zinc-900 overflow-hidden">
<div className="flex-1 w-full h-full">
{!messages ? (
<p>Loading...</p>
) : (
<Virtuoso
ref={virtuosoRef}
data={messages}
itemContent={itemContent}
computeItemKey={computeItemKey}
initialTopMostItemIndex={messages.length - 1}
alignToBottom={true}
followOutput={true}
overscan={50}
increaseViewportBy={{ top: 200, bottom: 200 }}
className="scrollbar-hide overflow-y-auto"
components={{
Header: () => Header,
EmptyPlaceholder: () => Empty,
}}
/>
)}
</div>
<div className="shrink-0 px-5 p-3 rounded-b-xl border-t border-zinc-800 bg-zinc-900 z-50">
<ChannelMessageForm channelID={id} />
</div>
</div>

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

@@ -20,6 +20,7 @@ export function ChatsListItem({ data }: { data: any }) {
) : (
<NavLink
to={`/app/chat/${data.sender_pubkey}`}
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",

6
src/app/chat/components/messages/item.tsx
View File

@@ -26,7 +26,11 @@ export function ChatMessageItem({
return (
<div className="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">
<User pubkey={data.sender_pubkey} time={data.created_at} />
<User
pubkey={data.sender_pubkey}
time={data.created_at}
isChat={true}
/>
<div className="-mt-[20px] pl-[49px]">
<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
{content.parsed}

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

@@ -94,7 +94,7 @@ export function NewMessageModal() {
</Dialog.Description>
</div>
</div>
<div className="h-[500px] flex flex-col pb-5 overflow-y-auto">
<div className="h-[500px] flex flex-col pb-5 overflow-x-hidden overflow-y-auto">
{status === "loading" || isFetching ? (
<p>Loading...</p>
) : (

1
src/app/chat/components/self.tsx
View File

@@ -20,6 +20,7 @@ export function ChatsListSelfItem({ data }: { data: any }) {
) : (
<NavLink
to={`/app/chat/${data.pubkey}`}
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",

64
src/app/chat/index.tsx
View File

@@ -52,39 +52,37 @@ export function ChatScreen() {
>
<h3 className="font-semibold text-zinc-100">Encrypted Chat</h3>
</div>
<div className="w-full flex-1 p-3">
{account && (
<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900">
<div className="w-full h-full flex-1 p-3">
<div className="h-full flex flex-col justify-between rounded-xl border-t border-zinc-800/50 bg-zinc-900 overflow-hidden">
<div className="flex-1 w-full h-full">
{status === "loading" ? (
<p>Loading...</p>
) : (
<div className="h-full w-full">
<Virtuoso
ref={virtuosoRef}
data={data}
itemContent={itemContent}
computeItemKey={computeItemKey}
initialTopMostItemIndex={data.length - 1}
alignToBottom={true}
followOutput={true}
overscan={50}
increaseViewportBy={{ top: 200, bottom: 200 }}
className="scrollbar-hide h-full w-full overflow-y-auto"
components={{
EmptyPlaceholder: () => Empty,
}}
/>
</div>
)}
<div className="shrink-0 px-5 p-3 border-t border-zinc-800">
<ChatMessageForm
receiverPubkey={pubkey}
userPubkey={account.pubkey}
userPrivkey={account.privkey}
<Virtuoso
ref={virtuosoRef}
data={data}
itemContent={itemContent}
computeItemKey={computeItemKey}
initialTopMostItemIndex={data.length - 1}
alignToBottom={true}
followOutput={true}
overscan={50}
increaseViewportBy={{ top: 200, bottom: 200 }}
className="relative scrollbar-hide overflow-y-auto"
components={{
EmptyPlaceholder: () => Empty,
}}
/>
</div>
)}
</div>
)}
<div className="shrink-0 px-5 p-3 rounded-b-xl border-t border-zinc-800 bg-zinc-900 z-50">
<ChatMessageForm
receiverPubkey={pubkey}
userPubkey={account.pubkey}
userPrivkey={account.privkey}
/>
</div>
</div>
</div>
</div>
<div className="col-span-1">
@@ -92,18 +90,16 @@ export function ChatScreen() {
data-tauri-drag-region
className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
/>
{pubkey && <ChatSidebar pubkey={pubkey} />}
<ChatSidebar pubkey={pubkey} />
</div>
</div>
);
}
const Empty = (
<div className="flex flex-col gap-1 text-center">
<h3 className="text-base font-semibold leading-none text-white">
Nothing to see here yet
</h3>
<p className="text-base leading-none text-zinc-400">
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full flex flex-col gap-1 text-center">
<h3 className="mb-2 text-4xl">🙌</h3>
<p className="leading-none text-zinc-400">
You two didn't talk yet, let's send first message
</p>
</div>

24
src/app/root.tsx
View File

@@ -8,7 +8,7 @@ import {
getLastLogin,
} from "@libs/storage";
import { NDKFilter } from "@nostr-dev-kit/ndk";
import { LumeIcon } from "@shared/icons";
import { LoaderIcon, LumeIcon } from "@shared/icons";
import { RelayContext } from "@shared/relayProvider";
import { dateToUnix, getHourAgo } from "@utils/date";
import { useAccount } from "@utils/hooks/useAccount";
@@ -177,27 +177,7 @@ export function Root() {
</div>
</div>
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
<svg
className="h-5 w-5 animate-spin text-black dark:text-zinc-100"
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>
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
</div>
</div>
</div>

22
src/app/space/components/addFeed.tsx
View File

@@ -1,12 +1,15 @@
import { Dialog, Transition } from "@headlessui/react";
import { createBlock } from "@libs/storage";
import { CancelIcon } from "@shared/icons";
import { useActiveAccount } from "@stores/accounts";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useAccount } from "@utils/hooks/useAccount";
import { nip19 } from "nostr-tools";
import { Fragment, useState } from "react";
import { useForm } from "react-hook-form";
export function AddFeedBlock({ parentState }: { parentState: any }) {
const addBlock = useActiveAccount((state: any) => state.addBlock);
const queryClient = useQueryClient();
const { account } = useAccount();
const [loading, setLoading] = useState(false);
const [isOpen, setIsOpen] = useState(true);
@@ -18,6 +21,13 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
parentState(false);
};
const block = useMutation({
mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["blocks"] });
},
});
const {
register,
handleSubmit,
@@ -35,7 +45,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
}
// insert to database
addBlock(1, data.title, pubkey);
block.mutate({ kind: 1, title: data.title, content: pubkey });
setTimeout(() => {
setLoading(false);
@@ -43,7 +53,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
reset();
// close modal
closeModal();
}, 1000);
}, 1200);
};
return (
@@ -70,7 +80,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
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">
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-xl border-t border-zinc-800/50 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">
@@ -102,7 +112,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
<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"
className="flex h-full w-full flex-col gap-4 mb-0"
>
<div className="flex flex-col gap-1">
<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">

28
src/app/space/components/addImage.tsx
View File

@@ -1,28 +1,29 @@
import { Dialog, Transition } from "@headlessui/react";
import { createBlock } from "@libs/storage";
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { CancelIcon } 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 { useMutation, useQueryClient } from "@tanstack/react-query";
import { open } from "@tauri-apps/api/dialog";
import { Body, fetch } from "@tauri-apps/api/http";
import { createBlobFromFile } from "@utils/createBlobFromFile";
import { dateToUnix } from "@utils/date";
import { useAccount } from "@utils/hooks/useAccount";
import { Fragment, useContext, useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
export function AddImageBlock({ parentState }: { parentState: any }) {
const ndk = useContext(RelayContext);
const queryClient = useQueryClient();
const [account, addBlock] = useActiveAccount((state: any) => [
state.account,
state.addBlock,
]);
const [loading, setLoading] = useState(false);
const [isOpen, setIsOpen] = useState(true);
const [image, setImage] = useState("");
const { account } = useAccount();
const tags = useRef(null);
const closeModal = () => {
@@ -88,6 +89,13 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
}
};
const block = useMutation({
mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["blocks"] });
},
});
const onSubmit = (data: any) => {
setLoading(true);
@@ -105,8 +113,8 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
// publish event
event.publish();
// insert to database
addBlock(0, data.title, data.content);
// mutate
block.mutate({ kind: 0, title: data.title, content: data.content });
setTimeout(() => {
setLoading(false);
@@ -114,7 +122,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
reset();
// close modal
closeModal();
}, 1000);
}, 1200);
};
useEffect(() => {
@@ -145,7 +153,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
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">
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-xl border-t border-zinc-800/50 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">
@@ -177,7 +185,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
<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"
className="flex h-full w-full flex-col gap-4 mb-0"
>
<input
type={"hidden"}

25
src/app/space/components/blocks/feed.tsx
View File

@@ -1,9 +1,12 @@
import { getNotesByAuthor } from "@libs/storage";
import { getNotesByAuthor, removeBlock } from "@libs/storage";
import { Note } from "@shared/notes/note";
import { NoteSkeleton } from "@shared/notes/skeleton";
import { TitleBar } from "@shared/titleBar";
import { useActiveAccount } from "@stores/accounts";
import { useInfiniteQuery } from "@tanstack/react-query";
import {
useInfiniteQuery,
useMutation,
useQueryClient,
} from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useEffect, useRef } from "react";
@@ -11,12 +14,7 @@ const ITEM_PER_PAGE = 10;
const TIME = Math.floor(Date.now() / 1000);
export function FeedBlock({ params }: { params: any }) {
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
const close = () => {
removeBlock(params.id, true);
};
const queryClient = useQueryClient();
const {
status,
data,
@@ -65,6 +63,13 @@ export function FeedBlock({ params }: { params: any }) {
}
}, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
const block = useMutation({
mutationFn: (id: string) => removeBlock(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["blocks"] });
},
});
const renderItem = (index: string | number) => {
const note = notes[index];
@@ -78,7 +83,7 @@ export function FeedBlock({ params }: { params: any }) {
return (
<div className="shrink-0 w-[400px] border-r border-zinc-900">
<TitleBar title={params.title} onClick={() => close()} />
<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
<div
ref={parentRef}
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto"

22
src/app/space/components/blocks/following.tsx
View File

@@ -4,7 +4,6 @@ import { Note } from "@shared/notes/note";
import { NoteSkeleton } from "@shared/notes/skeleton";
import { RelayContext } from "@shared/relayProvider";
import { TitleBar } from "@shared/titleBar";
import { useActiveAccount } from "@stores/accounts";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
import { dateToUnix } from "@utils/date";
@@ -63,17 +62,16 @@ export function FollowingBlock({ block }: { block: number }) {
}, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
useEffect(() => {
let sub: NDKSubscription;
const follows = account ? JSON.parse(account.follows) : [];
if (account) {
const follows = JSON.parse(account.follows);
const filter: NDKFilter = {
kinds: [1, 6],
authors: follows,
since: dateToUnix(),
};
const filter: NDKFilter = {
kinds: [1, 6],
authors: follows,
since: dateToUnix(),
};
sub = ndk.subscribe(filter);
const sub = account ? ndk.subscribe(filter) : null;
if (sub) {
sub.addListener("event", (event: NDKEvent) => {
createNote(
event.id,
@@ -87,7 +85,9 @@ export function FollowingBlock({ block }: { block: number }) {
}
return () => {
sub.stop();
if (sub) {
sub.stop();
}
};
}, [account]);

33
src/app/space/components/blocks/image.tsx
View File

@@ -1,25 +1,30 @@
import { removeBlock } from "@libs/storage";
import { Image } from "@shared/image";
import { TitleBar } from "@shared/titleBar";
import { useActiveAccount } from "@stores/accounts";
import { DEFAULT_AVATAR } from "@stores/constants";
import { useMutation, useQueryClient } from "@tanstack/react-query";
export function ImageBlock({ params }: { params: any }) {
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
const queryClient = useQueryClient();
const close = () => {
removeBlock(params.id, true);
};
const block = useMutation({
mutationFn: (id: string) => removeBlock(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["blocks"] });
},
});
return (
<div className="shrink-0 w-[350px] flex-col flex border-r border-zinc-900">
<TitleBar title={params.title} onClick={() => close()} />
<div className="w-full flex-1 p-3">
<Image
src={params.content}
fallback={DEFAULT_AVATAR}
alt={params.title}
className="w-full h-full object-cover rounded-md"
/>
<div className="shrink-0 w-[350px] h-full flex flex-col justify-between border-r border-zinc-900">
<div className="flex-1 w-full h-full overflow-hidden p-3">
<div className="w-full h-full">
<Image
src={params.content}
fallback={DEFAULT_AVATAR}
alt={params.title}
className="w-full h-full object-cover rounded-xl border-t border-zinc-800/50"
/>
</div>
</div>
</div>
);

21
src/app/space/components/blocks/thread.tsx
View File

@@ -1,4 +1,4 @@
import { getNoteByID } from "@libs/storage";
import { getNoteByID, removeBlock } from "@libs/storage";
import { Kind1 } from "@shared/notes/contents/kind1";
import { Kind1063 } from "@shared/notes/contents/kind1063";
import { NoteMetadata } from "@shared/notes/metadata";
@@ -7,11 +7,12 @@ import { RepliesList } from "@shared/notes/replies/list";
import { NoteSkeleton } from "@shared/notes/skeleton";
import { TitleBar } from "@shared/titleBar";
import { User } from "@shared/user";
import { useActiveAccount } from "@stores/accounts";
import { useQuery } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { parser } from "@utils/parser";
export function ThreadBlock({ params }: { params: any }) {
const queryClient = useQueryClient();
const { status, data, isFetching } = useQuery(
["thread", params.content],
async () => {
@@ -19,16 +20,18 @@ export function ThreadBlock({ params }: { params: any }) {
},
);
const content = data ? parser(data) : null;
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
const block = useMutation({
mutationFn: (id: string) => removeBlock(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["blocks"] });
},
});
const close = () => {
removeBlock(params.id, false);
};
const content = data ? parser(data) : null;
return (
<div className="shrink-0 w-[400px] border-r border-zinc-900">
<TitleBar title={params.title} onClick={() => close()} />
<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
<div className="scrollbar-hide flex w-full h-full flex-col gap-1.5 pt-1.5 pb-20 overflow-y-auto">
{status === "loading" || isFetching ? (
<div className="px-3 py-1.5">

46
src/app/space/index.tsx
View File

@@ -4,15 +4,41 @@ import { FollowingBlock } from "@app/space/components/blocks/following";
import { ImageBlock } from "@app/space/components/blocks/image";
import { ThreadBlock } from "@app/space/components/blocks/thread";
import { getBlocks } from "@libs/storage";
const blocks = await getBlocks();
import { LoaderIcon } from "@shared/icons";
import { useQuery } from "@tanstack/react-query";
export function SpaceScreen() {
const {
status,
data: blocks,
isFetching,
} = useQuery(
["blocks"],
async () => {
return await getBlocks();
},
{
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
},
);
return (
<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden scrollbar-hide">
<FollowingBlock block={1} />
{!blocks ? (
<p>Loading...</p>
{status === "loading" ? (
<div className="shrink-0 w-[350px] flex-col flex border-r border-zinc-900">
<div
data-tauri-drag-region
className="group overflow-hidden h-11 w-full flex items-center justify-between px-3 border-b border-zinc-900"
/>
<div className="w-full flex-1 flex items-center justify-center p-3">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
</div>
</div>
) : (
blocks.map((block: any) => {
switch (block.kind) {
@@ -27,6 +53,18 @@ export function SpaceScreen() {
}
})
)}
{isFetching && (
<div className="shrink-0 w-[350px] flex-col flex border-r border-zinc-900">
<div
data-tauri-drag-region
className="group overflow-hidden h-11 w-full flex items-center justify-between px-3 border-b border-zinc-900"
/>
<div className="w-full flex-1 flex items-center justify-center p-3">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
</div>
</div>
)}
<div className="shrink-0 w-[90px]">
<div className="w-full h-full inline-flex items-center justify-center">
<AddBlock />

4
src/app/user/index.tsx
View File

@@ -1,10 +1,10 @@
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { Image } from "@shared/image";
import { RelayContext } from "@shared/relayProvider";
import { useActiveAccount } from "@stores/accounts";
import { DEFAULT_AVATAR } from "@stores/constants";
import { useQuery } from "@tanstack/react-query";
import { dateToUnix } from "@utils/date";
import { useAccount } from "@utils/hooks/useAccount";
import { usePageContext } from "@utils/hooks/usePageContext";
import { useProfile } from "@utils/hooks/useProfile";
import { compactNumber } from "@utils/number";
@@ -18,6 +18,7 @@ export function UserScreen() {
const searchParams: any = pageContext.urlParsed.search;
const pubkey = searchParams.pubkey || "";
const { account } = useAccount();
const { user } = useProfile(pubkey);
const { data: userStats, error } = useQuery(["user", pubkey], async () => {
const res = await fetch(
@@ -28,7 +29,6 @@ export function UserScreen() {
}
});
const account = useActiveAccount((state: any) => state.account);
const follows = account ? JSON.parse(account.follows) : [];
const follow = (pubkey: string) => {