polish
This commit is contained in:
@@ -37,7 +37,8 @@ import './index.css';
|
||||
|
||||
const appLoader = async () => {
|
||||
const account = await getActiveAccount();
|
||||
const privkey = sessionStorage.getItem('stronghold');
|
||||
const stronghold = sessionStorage.getItem('stronghold');
|
||||
const privkey = JSON.parse(stronghold).state.privkey || null;
|
||||
|
||||
if (!account) {
|
||||
return redirect('/auth/welcome');
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
@@ -13,6 +14,7 @@ import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
export function ImportStep3Screen() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -29,6 +31,8 @@ export function ImportStep3Screen() {
|
||||
await fetchChats();
|
||||
await updateLastLogin(now);
|
||||
|
||||
queryClient.invalidateQueries(['currentAccount']);
|
||||
|
||||
navigate('/', { replace: true });
|
||||
} catch (e) {
|
||||
console.log('error: ', e);
|
||||
|
||||
@@ -23,7 +23,7 @@ export function ChatsList() {
|
||||
|
||||
const renderItem = useCallback(
|
||||
(item: Chats) => {
|
||||
if (account.pubkey !== item.sender_pubkey) {
|
||||
if (account?.pubkey !== item.sender_pubkey) {
|
||||
return <ChatsListItem key={item.sender_pubkey} data={item} />;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -34,6 +34,7 @@ export function FeedBlock({ params }: { params: Block }) {
|
||||
});
|
||||
|
||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||
const totalSize = rowVirtualizer.getTotalSize();
|
||||
|
||||
useEffect(() => {
|
||||
const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
|
||||
@@ -113,12 +114,9 @@ export function FeedBlock({ params }: { params: Block }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
|
||||
>
|
||||
<div className="relative w-[400px] shrink-0 bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="h-full">
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-3">
|
||||
@@ -139,7 +137,7 @@ export function FeedBlock({ params }: { params: Block }) {
|
||||
<div
|
||||
className="relative w-full"
|
||||
style={{
|
||||
height: `${rowVirtualizer.getTotalSize()}px`,
|
||||
height: `${totalSize}px`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -16,7 +16,7 @@ export function HashtagBlock({ params }: { params: Block }) {
|
||||
const events = (await fetcher.fetchAllEvents(
|
||||
relayUrls,
|
||||
{ kinds: [1], '#t': [params.content] },
|
||||
{ since: nHoursAgo(48) }
|
||||
{ since: nHoursAgo(24) }
|
||||
)) as unknown as LumeEvent[];
|
||||
return events;
|
||||
});
|
||||
@@ -29,17 +29,15 @@ export function HashtagBlock({ params }: { params: Block }) {
|
||||
});
|
||||
|
||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||
const totalSize = rowVirtualizer.getTotalSize();
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
|
||||
>
|
||||
<TitleBar id={params.id} title={params.title + ' in 48 hours ago'} />
|
||||
<div className="h-full">
|
||||
<div className="relative w-[400px] shrink-0 bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-3">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,8 +45,8 @@ export function HashtagBlock({ params }: { params: Block }) {
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm text-white">
|
||||
No new posts about this hashtag in 48 hours ago
|
||||
<p className="text-center text-sm font-medium text-white">
|
||||
No new posts about this hashtag in 24 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,7 +55,7 @@ export function HashtagBlock({ params }: { params: Block }) {
|
||||
<div
|
||||
className="relative w-full"
|
||||
style={{
|
||||
height: `${rowVirtualizer.getTotalSize()}px`,
|
||||
height: `${totalSize}px`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { CancelIcon } from '@shared/icons';
|
||||
import { Image } from '@shared/image';
|
||||
|
||||
import { useBlocks } from '@stores/blocks';
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
|
||||
import { useBlock } from '@utils/hooks/useBlock';
|
||||
import { Block } from '@utils/types';
|
||||
|
||||
export function ImageBlock({ params }: { params: Block }) {
|
||||
const { remove } = useBlock();
|
||||
const removeBlock = useBlocks((state) => state.removeBlock);
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-[400px] shrink-0 flex-col justify-between">
|
||||
@@ -17,7 +17,7 @@ export function ImageBlock({ params }: { params: Block }) {
|
||||
<h3 className="font-medium text-white drop-shadow-lg">{params.title}</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove.mutate(params.id)}
|
||||
onClick={() => removeBlock(params.id)}
|
||||
className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/30 backdrop-blur-lg"
|
||||
>
|
||||
<CancelIcon width={16} height={16} className="text-white" />
|
||||
|
||||
@@ -126,12 +126,9 @@ export function NetworkBlock() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
|
||||
>
|
||||
<div className="relative w-[400px] shrink-0 bg-white/10">
|
||||
<TitleBar title="Network" />
|
||||
<div className="h-full">
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-3">
|
||||
|
||||
@@ -46,7 +46,7 @@ export function ThreadBlock({ params }: { params: Block }) {
|
||||
</div>
|
||||
)}
|
||||
<div className="px-3">
|
||||
<NoteReplyForm id={params.content} pubkey={account.pubkey} />
|
||||
{account && <NoteReplyForm id={params.content} pubkey={account.pubkey} />}
|
||||
<RepliesList id={params.content} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,12 +35,9 @@ export function UserBlock({ params }: { params: Block }) {
|
||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
|
||||
>
|
||||
<div className="relative w-[400px] shrink-0 bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="h-full">
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
<div className="px-3 pt-1.5">
|
||||
<UserProfile pubkey={params.content} />
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback } from 'react';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
|
||||
import { FeedBlock } from '@app/space/components/blocks/feed';
|
||||
import { HashtagBlock } from '@app/space/components/blocks/hashtag';
|
||||
@@ -11,25 +10,14 @@ import { FeedModal } from '@app/space/components/modals/feed';
|
||||
import { HashtagModal } from '@app/space/components/modals/hashtag';
|
||||
import { ImageModal } from '@app/space/components/modals/image';
|
||||
|
||||
import { getBlocks } from '@libs/storage';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { useBlocks } from '@stores/blocks';
|
||||
|
||||
import { Block } from '@utils/types';
|
||||
|
||||
export function SpaceScreen() {
|
||||
const { status, data: blocks } = useQuery(
|
||||
['blocks'],
|
||||
async () => {
|
||||
return await getBlocks();
|
||||
},
|
||||
{
|
||||
staleTime: Infinity,
|
||||
refetchOnMount: false,
|
||||
refetchOnReconnect: false,
|
||||
refetchOnWindowFocus: false,
|
||||
}
|
||||
);
|
||||
const [blocks, fetchBlocks] = useBlocks((state) => [state.blocks, state.fetchBlocks]);
|
||||
|
||||
const renderBlock = useCallback(
|
||||
(block: Block) => {
|
||||
@@ -51,10 +39,14 @@ export function SpaceScreen() {
|
||||
[blocks]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchBlocks();
|
||||
}, [fetchBlocks]);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
|
||||
<NetworkBlock />
|
||||
{status === 'loading' ? (
|
||||
{!blocks ? (
|
||||
<div className="flex w-[350px] shrink-0 flex-col">
|
||||
<div className="flex w-full flex-1 items-center justify-center p-3">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white/10" />
|
||||
|
||||
@@ -52,7 +52,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-56 w-full bg-zinc-100">
|
||||
<div className="h-56 w-full bg-white">
|
||||
<Image
|
||||
src={user?.banner}
|
||||
fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
|
||||
@@ -65,7 +65,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
src={user?.picture || user?.image}
|
||||
fallback={DEFAULT_AVATAR}
|
||||
alt={pubkey}
|
||||
className="h-14 w-14 rounded-md ring-2 ring-black"
|
||||
className="h-14 w-14 rounded-md ring-2 ring-white/50"
|
||||
/>
|
||||
<div className="mt-2 flex flex-1 flex-col gap-4">
|
||||
<div className="flex items-center gap-16">
|
||||
@@ -81,7 +81,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
{status === 'loading' ? (
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||
>
|
||||
Loading...
|
||||
</button>
|
||||
@@ -89,7 +89,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => unfollowUser(pubkey)}
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||
>
|
||||
Unfollow
|
||||
</button>
|
||||
@@ -97,18 +97,18 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => followUser(pubkey)}
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||
>
|
||||
Follow
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
to={`/chats/${pubkey}`}
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||
>
|
||||
Message
|
||||
</Link>
|
||||
<span className="mx-2 inline-flex h-4 w-px bg-zinc-900" />
|
||||
<span className="mx-2 inline-flex h-4 w-px bg-white/10" />
|
||||
{account && account.pubkey === pubkey && <EditProfileModal />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,30 +36,30 @@ export function UserScreen() {
|
||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||
|
||||
return (
|
||||
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="flex h-11 w-full items-center border-b border-zinc-900 px-3"
|
||||
/>
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10"
|
||||
>
|
||||
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
|
||||
<UserProfile pubkey={pubkey} />
|
||||
<div className="mt-8 h-full w-full border-t border-zinc-900">
|
||||
<div className="mt-8 h-full w-full border-t border-white/5 px-1.5">
|
||||
<div className="flex flex-col justify-start gap-1 px-3 pt-4 text-start">
|
||||
<p className="text-lg font-semibold leading-none text-zinc-200">Latest posts</p>
|
||||
<p className="text-lg font-semibold leading-none text-white">Latest posts</p>
|
||||
<span className="text-sm leading-none text-white/50">48 hours ago</span>
|
||||
</div>
|
||||
<div className="flex h-full max-w-[400px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
|
||||
<div className="shadow-input rounded-xl bg-white/10">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
) : itemsVirtualizer.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm text-zinc-300">
|
||||
No new posts about this hashtag in 48 hours ago
|
||||
<p className="text-center text-sm font-medium text-zinc-300">
|
||||
No new posts in 48 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -47,8 +47,11 @@ export default class TauriAdapter implements NDKCacheAdapter {
|
||||
Promise.all([
|
||||
this.store.set(event.id, JSON.stringify(nostrEvent)),
|
||||
this.store.set(key, event.id),
|
||||
this.store.save(),
|
||||
]).then(() => resolve());
|
||||
});
|
||||
}
|
||||
|
||||
public save() {
|
||||
return this.store.save();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// source: https://github.com/nostr-dev-kit/ndk-react/
|
||||
import NDK from '@nostr-dev-kit/ndk';
|
||||
import NDK, { NDKCacheAdapter } from '@nostr-dev-kit/ndk';
|
||||
import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
|
||||
import { NostrFetcher, normalizeRelayUrlSet } from 'nostr-fetch';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -16,11 +16,15 @@ export const NDKInstance = () => {
|
||||
const [fetcher, setFetcher] = useState<NostrFetcher>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
loadNdk(relays);
|
||||
}, []);
|
||||
|
||||
async function loadNdk(explicitRelayUrls: string[]) {
|
||||
const cacheAdapter = new TauriAdapter();
|
||||
loadNdk(relays, cacheAdapter);
|
||||
|
||||
return () => {
|
||||
cacheAdapter.save();
|
||||
};
|
||||
}, [relays]);
|
||||
|
||||
async function loadNdk(explicitRelayUrls: string[], cacheAdapter: NDKCacheAdapter) {
|
||||
const ndkInstance = new NDK({ explicitRelayUrls, cacheAdapter });
|
||||
|
||||
try {
|
||||
|
||||
@@ -24,8 +24,12 @@ export async function getActiveAccount() {
|
||||
'SELECT * FROM accounts WHERE is_active = 1;'
|
||||
);
|
||||
if (result.length > 0) {
|
||||
result[0].follows = destr(result[0].follows);
|
||||
result[0].network = destr(result[0].network);
|
||||
result[0]['follows'] = result[0].follows
|
||||
? JSON.parse(result[0].follows as unknown as string)
|
||||
: [];
|
||||
result[0]['network'] = result[0].network
|
||||
? JSON.parse(result[0].network as unknown as string)
|
||||
: [];
|
||||
return result[0];
|
||||
} else {
|
||||
return null;
|
||||
@@ -423,10 +427,19 @@ export async function createBlock(
|
||||
) {
|
||||
const db = await connect();
|
||||
const activeAccount = await getActiveAccount();
|
||||
return await db.execute(
|
||||
const insert = await db.execute(
|
||||
'INSERT OR IGNORE INTO blocks (account_id, kind, title, content) VALUES (?, ?, ?, ?);',
|
||||
[activeAccount.id, kind, title, content]
|
||||
);
|
||||
|
||||
if (insert) {
|
||||
const record: Block = await db.select(
|
||||
'SELECT * FROM blocks ORDER BY id DESC LIMIT 1;'
|
||||
);
|
||||
return record[0];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// remove block
|
||||
|
||||
@@ -146,7 +146,7 @@ export function EditProfileModal() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openModal()}
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||
>
|
||||
Edit profile
|
||||
</button>
|
||||
|
||||
@@ -7,10 +7,10 @@ import { NoteReply } from '@shared/notes/actions/reply';
|
||||
import { NoteRepost } from '@shared/notes/actions/repost';
|
||||
import { NoteZap } from '@shared/notes/actions/zap';
|
||||
|
||||
import { useBlocks } from '@stores/blocks';
|
||||
import { BLOCK_KINDS } from '@stores/constants';
|
||||
|
||||
import { useAccount } from '@utils/hooks/useAccount';
|
||||
import { useBlock } from '@utils/hooks/useBlock';
|
||||
|
||||
export function NoteActions({
|
||||
id,
|
||||
@@ -23,8 +23,8 @@ export function NoteActions({
|
||||
noOpenThread?: boolean;
|
||||
root?: string;
|
||||
}) {
|
||||
const { add } = useBlock();
|
||||
const { account } = useAccount();
|
||||
const setBlock = useBlocks((state) => state.setBlock);
|
||||
|
||||
return (
|
||||
<Tooltip.Provider>
|
||||
@@ -43,7 +43,7 @@ export function NoteActions({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
add.mutate({
|
||||
setBlock({
|
||||
kind: BLOCK_KINDS.thread,
|
||||
title: 'Thread',
|
||||
content: id,
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import { useBlocks } from '@stores/blocks';
|
||||
import { BLOCK_KINDS } from '@stores/constants';
|
||||
|
||||
import { useBlock } from '@utils/hooks/useBlock';
|
||||
|
||||
export function Hashtag({ tag }: { tag: string }) {
|
||||
const { add } = useBlock();
|
||||
const setBlock = useBlocks((state) => state.setBlock);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
add.mutate({
|
||||
setBlock({
|
||||
kind: BLOCK_KINDS.hashtag,
|
||||
title: tag,
|
||||
content: tag.replace('#', ''),
|
||||
|
||||
@@ -13,7 +13,7 @@ import { LumeEvent } from '@utils/types';
|
||||
|
||||
export function Repost({ event }: { event: LumeEvent }) {
|
||||
const repostID = getRepostID(event.tags);
|
||||
const { status, data } = useEvent(repostID, event.content);
|
||||
const { status, data } = useEvent(repostID, event.content as unknown as string);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
@@ -34,7 +34,7 @@ export function Repost({ event }: { event: LumeEvent }) {
|
||||
return (
|
||||
<div className="h-min w-full px-3 py-1.5">
|
||||
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
|
||||
<div className="flex flex-col">
|
||||
<div className="relative flex flex-col">
|
||||
<div className="isolate flex flex-col -space-y-4 overflow-hidden">
|
||||
<RepostUser pubkey={event.pubkey} />
|
||||
<User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
|
||||
|
||||
@@ -8,7 +8,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 py-3">
|
||||
<div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -5,19 +5,19 @@ import remarkGfm from 'remark-gfm';
|
||||
import { MentionUser, NoteSkeleton } from '@shared/notes';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { useBlocks } from '@stores/blocks';
|
||||
import { BLOCK_KINDS } from '@stores/constants';
|
||||
|
||||
import { useBlock } from '@utils/hooks/useBlock';
|
||||
import { useEvent } from '@utils/hooks/useEvent';
|
||||
|
||||
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
||||
const { add } = useBlock();
|
||||
const { status, data } = useEvent(id);
|
||||
const setBlock = useBlocks((state) => state.setBlock);
|
||||
|
||||
const openThread = (event, thread: string) => {
|
||||
const selection = window.getSelection();
|
||||
if (selection.toString().length === 0) {
|
||||
add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
|
||||
setBlock({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
|
||||
} else {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { useBlocks } from '@stores/blocks';
|
||||
import { BLOCK_KINDS } from '@stores/constants';
|
||||
|
||||
import { useBlock } from '@utils/hooks/useBlock';
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
export function MentionUser({ pubkey }: { pubkey: string }) {
|
||||
const { add } = useBlock();
|
||||
const { user } = useProfile(pubkey);
|
||||
const setBlock = useBlocks((state) => state.setBlock);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
add.mutate({
|
||||
setBlock({
|
||||
kind: BLOCK_KINDS.user,
|
||||
title: user?.nip05 || user?.name || user?.displayNam,
|
||||
content: pubkey,
|
||||
|
||||
@@ -8,13 +8,14 @@ import { createReplyNote } from '@libs/storage';
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
import { MiniUser } from '@shared/notes/users/mini';
|
||||
|
||||
import { useBlocks } from '@stores/blocks';
|
||||
import { BLOCK_KINDS } from '@stores/constants';
|
||||
|
||||
import { useBlock } from '@utils/hooks/useBlock';
|
||||
import { compactNumber } from '@utils/number';
|
||||
|
||||
export function NoteMetadata({ id }: { id: string }) {
|
||||
const { add } = useBlock();
|
||||
const setBlock = useBlocks((state) => state.setBlock);
|
||||
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery(
|
||||
['note-metadata', id],
|
||||
@@ -95,7 +96,7 @@ export function NoteMetadata({ id }: { id: string }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id })
|
||||
setBlock({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id })
|
||||
}
|
||||
className="text-white/50"
|
||||
>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { CancelIcon } from '@shared/icons';
|
||||
|
||||
import { useBlock } from '@utils/hooks/useBlock';
|
||||
import { useBlocks } from '@stores/blocks';
|
||||
|
||||
export function TitleBar({ id, title }: { id?: string; title: string }) {
|
||||
const { remove } = useBlock();
|
||||
const removeBlock = useBlocks((state) => state.removeBlock);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -15,7 +15,7 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
|
||||
{id ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove.mutate(id)}
|
||||
onClick={() => removeBlock(id)}
|
||||
className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded transition-transform duration-150 ease-in-out hover:bg-white/10 group-hover:translate-y-0"
|
||||
>
|
||||
<CancelIcon className="h-3 w-3 text-white" />
|
||||
|
||||
@@ -52,7 +52,7 @@ export function User({
|
||||
<Popover.Root>
|
||||
<div
|
||||
className={twMerge(
|
||||
'relative flex',
|
||||
'relative z-10 flex',
|
||||
size === 'small' ? 'items-center gap-2' : 'items-start gap-3'
|
||||
)}
|
||||
>
|
||||
|
||||
37
src/stores/blocks.tsx
Normal file
37
src/stores/blocks.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { create } from 'zustand';
|
||||
import { createJSONStorage, persist } from 'zustand/middleware';
|
||||
|
||||
import { createBlock, getBlocks, removeBlock } from '@libs/storage';
|
||||
|
||||
import { Block } from '@utils/types';
|
||||
|
||||
interface BlockState {
|
||||
blocks: null | Array<Block>;
|
||||
fetchBlocks: () => void;
|
||||
setBlock: ({ kind, title, content }: Block) => void;
|
||||
removeBlock: (id: string) => void;
|
||||
}
|
||||
|
||||
export const useBlocks = create<BlockState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
blocks: null,
|
||||
fetchBlocks: async () => {
|
||||
const blocks = await getBlocks();
|
||||
set({ blocks: blocks });
|
||||
},
|
||||
setBlock: async ({ kind, title, content }: Block) => {
|
||||
const block: Block = await createBlock(kind, title, content);
|
||||
set((state) => ({ blocks: [...state.blocks, block] }));
|
||||
},
|
||||
removeBlock: async (id: string) => {
|
||||
await removeBlock(id);
|
||||
set((state) => ({ blocks: state.blocks.filter((block) => block.id !== id) }));
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'blocks',
|
||||
storage: createJSONStorage(() => localStorage),
|
||||
}
|
||||
)
|
||||
);
|
||||
@@ -20,7 +20,7 @@ export function useAccount() {
|
||||
staleTime: Infinity,
|
||||
refetchOnMount: false,
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: true,
|
||||
refetchOnReconnect: false,
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { createBlock, removeBlock } from '@libs/storage';
|
||||
|
||||
interface BlockData {
|
||||
kind: number;
|
||||
title: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export function useBlock() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const add = useMutation({
|
||||
mutationFn: (data: BlockData) => {
|
||||
return createBlock(data.kind, data.title, data.content);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
||||
},
|
||||
});
|
||||
|
||||
const remove = useMutation({
|
||||
mutationFn: (id: string) => {
|
||||
return removeBlock(id);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
||||
},
|
||||
});
|
||||
|
||||
return { add, remove };
|
||||
}
|
||||
@@ -17,6 +17,7 @@ export function useEvent(id: string, fallback?: string) {
|
||||
} else {
|
||||
if (fallback) {
|
||||
const embed: LumeEvent = JSON.parse(fallback);
|
||||
if (embed.kind === 1) embed['content'] = parser(embed);
|
||||
embed['event_id'] = embed.id;
|
||||
await createNote(
|
||||
embed.id,
|
||||
@@ -28,22 +29,18 @@ export function useEvent(id: string, fallback?: string) {
|
||||
);
|
||||
return embed;
|
||||
} else {
|
||||
const event = await ndk.fetchEvent(id);
|
||||
const event = (await ndk.fetchEvent(id)) as unknown as LumeEvent;
|
||||
if (event) {
|
||||
await createNote(
|
||||
event.id,
|
||||
event.pubkey,
|
||||
event.kind,
|
||||
event.tags,
|
||||
event.content,
|
||||
event.content as unknown as string,
|
||||
event.created_at
|
||||
);
|
||||
event['event_id'] = event.id;
|
||||
if (event.kind === 1) {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
event['content'] = parser(event);
|
||||
}
|
||||
if (event.kind === 1) event['content'] = parser(event);
|
||||
return event as unknown as LumeEvent;
|
||||
} else {
|
||||
throw new Error('Event not found');
|
||||
|
||||
@@ -47,7 +47,7 @@ export function useNostr() {
|
||||
});
|
||||
});
|
||||
|
||||
network = [...network.values()] as string[];
|
||||
network = [...lruNetwork.values()] as string[];
|
||||
} else {
|
||||
network = account.network;
|
||||
}
|
||||
@@ -69,7 +69,7 @@ export function useNostr() {
|
||||
if (network.length > 0) {
|
||||
let since: number;
|
||||
if (totalNotes === 0 || lastLogin === 0) {
|
||||
since = nHoursAgo(6);
|
||||
since = nHoursAgo(24);
|
||||
} else {
|
||||
since = lastLogin;
|
||||
}
|
||||
|
||||
4
src/utils/types.d.ts
vendored
4
src/utils/types.d.ts
vendored
@@ -32,8 +32,8 @@ export interface Profile extends NDKUserProfile {
|
||||
}
|
||||
|
||||
export interface Block {
|
||||
id: string;
|
||||
account_id: number;
|
||||
id?: string;
|
||||
account_id?: number;
|
||||
kind: number;
|
||||
title: string;
|
||||
content: string;
|
||||
|
||||
Reference in New Issue
Block a user