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

add hashtag block

Browse Source
This commit is contained in:
Ren Amamiya
2023-07-17 08:54:17 +07:00
parent 4f41022b30
commit b3b790588a
15 changed files with 203 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@ import { createBlock } from '@libs/storage';
import { CancelIcon, CheckCircleIcon, CommandIcon, LoaderIcon } from '@shared/icons';
import { DEFAULT_AVATAR } from '@stores/constants';
import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
import { ADD_FEEDBLOCK_SHORTCUT } from '@stores/shortcuts';
import { useAccount } from '@utils/hooks/useAccount';
@@ -38,7 +38,7 @@ export function AddFeedBlock() {
useHotkeys(ADD_FEEDBLOCK_SHORTCUT, () => openModal());
const block = useMutation({
mutationFn: (data: any) => {
mutationFn: (data: { kind: number; title: string; content: string }) => {
return createBlock(data.kind, data.title, data.content);
},
onSuccess: () => {
@@ -53,7 +53,7 @@ export function AddFeedBlock() {
formState: { isDirty, isValid },
} = useForm();
const onSubmit = (data: any) => {
const onSubmit = (data: { kind: number; title: string; content: string }) => {
setLoading(true);
selected.forEach((item, index) => {
@@ -64,7 +64,7 @@ export function AddFeedBlock() {
// insert to database
block.mutate({
kind: 1,
kind: BLOCK_KINDS.feed,
title: data.title,
content: JSON.stringify(selected),
});
@@ -205,7 +205,7 @@ export function AddFeedBlock() {
{status === 'loading' ? (
<p>Loading...</p>
) : (
JSON.parse(account.follows).map((follow) => (
JSON.parse(account.follows as string).map((follow) => (
<Combobox.Option
key={follow}
value={follow}

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

@@ -1,5 +1,4 @@
import { Dialog, Transition } from '@headlessui/react';
import { NDKEvent, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { open } from '@tauri-apps/api/dialog';
import { Body, fetch } from '@tauri-apps/api/http';
@@ -7,18 +6,15 @@ import { Fragment, useEffect, useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useHotkeys } from 'react-hotkeys-hook';
import { useNDK } from '@libs/ndk/provider';
import { createBlock } from '@libs/storage';
import { CancelIcon, CommandIcon } from '@shared/icons';
import { Image } from '@shared/image';
import { DEFAULT_AVATAR } from '@stores/constants';
import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
import { ADD_IMAGEBLOCK_SHORTCUT } from '@stores/shortcuts';
import { createBlobFromFile } from '@utils/createBlobFromFile';
import { dateToUnix } from '@utils/date';
import { useAccount } from '@utils/hooks/useAccount';
import { usePublish } from '@utils/hooks/usePublish';
export function AddImageBlock() {
@@ -29,9 +25,6 @@ export function AddImageBlock() {
const [isOpen, setIsOpen] = useState(false);
const [image, setImage] = useState('');
const { ndk } = useNDK();
const { account } = useAccount();
const tags = useRef(null);
const openModal = () => {
@@ -101,7 +94,7 @@ export function AddImageBlock() {
};
const block = useMutation({
mutationFn: (data: any) => {
mutationFn: (data: { kind: number; title: string; content: string }) => {
return createBlock(data.kind, data.title, data.content);
},
onSuccess: () => {
@@ -109,14 +102,14 @@ export function AddImageBlock() {
},
});
const onSubmit = async (data: any) => {
const onSubmit = async (data: { kind: number; title: string; content: string }) => {
setLoading(true);
// publish file metedata
await publish({ content: data.title, kind: 1063, tags: tags.current });
// mutate
block.mutate({ kind: 0, title: data.title, content: data.content });
block.mutate({ kind: BLOCK_KINDS.image, title: data.title, content: data.content });
setLoading(false);
// reset form

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

@@ -9,11 +9,11 @@ import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
import { LumeEvent } from '@utils/types';
import { Block, LumeEvent } from '@utils/types';
const ITEM_PER_PAGE = 10;
export function FeedBlock({ params }: { params: any }) {
export function FeedBlock({ params }: { params: Block }) {
const queryClient = useQueryClient();
const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
useInfiniteQuery({
@@ -24,7 +24,7 @@ export function FeedBlock({ params }: { params: any }) {
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
const notes = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
const parentRef = useRef();
const rowVirtualizer = useVirtualizer({
@@ -161,9 +161,7 @@ export function FeedBlock({ params }: { params: any }) {
}px)`,
}}
>
{rowVirtualizer
.getVirtualItems()
.map((virtualRow) => renderItem(virtualRow.index))}
{itemsVirtualizer.map((virtualRow) => renderItem(virtualRow.index))}
</div>
</div>
)}

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

@@ -36,7 +36,7 @@ export function FollowingBlock() {
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
const notes = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
const parentRef = useRef();
const rowVirtualizer = useVirtualizer({
@@ -198,9 +198,7 @@ export function FollowingBlock() {
}px)`,
}}
>
{rowVirtualizer
.getVirtualItems()
.map((virtualRow) => renderItem(virtualRow.index))}
{itemsVirtualizer.map((virtualRow) => renderItem(virtualRow.index))}
</div>
</div>
)}

102
src/app/space/components/blocks/hashtag.tsx Normal file
View File

@@ -0,0 +1,102 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useRef } from 'react';
import { useNDK } from '@libs/ndk/provider';
import { removeBlock } from '@libs/storage';
import { NoteKind_1, NoteSkeleton } from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { nHoursAgo } from '@utils/date';
import { Block, LumeEvent } from '@utils/types';
export function HashtagBlock({ params }: { params: Block }) {
const queryClient = useQueryClient();
const parentRef = useRef();
const { relayUrls, fetcher } = useNDK();
const { status, data } = useQuery(['hashtag', params.content], async () => {
const events = (await fetcher.fetchAllEvents(
relayUrls,
{ kinds: [1], '#t': [params.content] },
{ since: nHoursAgo(48) }
)) as unknown as LumeEvent[];
return events;
});
const block = useMutation({
mutationFn: (id: string) => {
return removeBlock(id);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['blocks'] });
},
});
const rowVirtualizer = useVirtualizer({
count: data ? data.length : 0,
getScrollElement: () => parentRef.current,
estimateSize: () => 400,
});
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
return (
<div className="w-[400px] shrink-0 border-r border-zinc-900">
<TitleBar
title={params.title + ' in 48 hours ago'}
onClick={() => block.mutate(params.id)}
/>
<div
ref={parentRef}
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
style={{ contain: 'strict' }}
>
{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">
<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="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>
</div>
</div>
</div>
) : (
<div
className="relative w-full"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
}}
>
<div
className="absolute left-0 top-0 w-full"
style={{
transform: `translateY(${
itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
}px)`,
}}
>
{itemsVirtualizer.map((virtualRow) => (
<div
key={virtualRow.key}
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
>
<NoteKind_1 event={data[virtualRow.index]} />
</div>
))}
</div>
</div>
)}
</div>
</div>
);
}

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

@@ -7,7 +7,9 @@ import { Image } from '@shared/image';
import { DEFAULT_AVATAR } from '@stores/constants';
export function ImageBlock({ params }: { params: any }) {
import { Block } from '@utils/types';
export function ImageBlock({ params }: { params: Block }) {
const queryClient = useQueryClient();
const block = useMutation({

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

@@ -5,7 +5,6 @@ import { useLiveThread } from '@app/space/hooks/useLiveThread';
import { getNoteByID, removeBlock } from '@libs/storage';
import { NoteMetadata } from '@shared/notes/metadata';
import { NoteReplyForm } from '@shared/notes/replies/form';
import { RepliesList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton';
@@ -14,8 +13,9 @@ import { User } from '@shared/user';
import { useAccount } from '@utils/hooks/useAccount';
import { parser } from '@utils/parser';
import { Block } from '@utils/types';
export function ThreadBlock({ params }: { params: any }) {
export function ThreadBlock({ params }: { params: Block }) {
useLiveThread(params.content);
const queryClient = useQueryClient();

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

@@ -1,8 +1,10 @@
import { useQuery } from '@tanstack/react-query';
import { useCallback } from 'react';
import { AddBlock } from '@app/space/components/add';
import { FeedBlock } from '@app/space/components/blocks/feed';
import { FollowingBlock } from '@app/space/components/blocks/following';
import { HashtagBlock } from '@app/space/components/blocks/hashtag';
import { ImageBlock } from '@app/space/components/blocks/image';
import { ThreadBlock } from '@app/space/components/blocks/thread';
@@ -10,6 +12,8 @@ import { getBlocks } from '@libs/storage';
import { LoaderIcon } from '@shared/icons';
import { Block } from '@utils/types';
export function SpaceScreen() {
const {
status,
@@ -28,6 +32,24 @@ export function SpaceScreen() {
}
);
const renderBlock = useCallback(
(block: Block) => {
switch (block.kind) {
case 0:
return <ImageBlock key={block.id} params={block} />;
case 1:
return <FeedBlock key={block.id} params={block} />;
case 2:
return <ThreadBlock key={block.id} params={block} />;
case 3:
return <HashtagBlock key={block.id} params={block} />;
default:
break;
}
},
[blocks]
);
return (
<div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
<FollowingBlock />
@@ -43,18 +65,7 @@ export function SpaceScreen() {
</div>
</div>
) : (
blocks.map((block: { kind: number; id: string }) => {
switch (block.kind) {
case 0:
return <ImageBlock key={block.id} params={block} />;
case 1:
return <FeedBlock key={block.id} params={block} />;
case 2:
return <ThreadBlock key={block.id} params={block} />;
default:
break;
}
})
blocks.map((block: Block) => renderBlock(block))
)}
{isFetching && (
<div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">