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

wip: refactor

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-16 11:43:04 +07:00
parent 2d53019c10
commit c05bb54976
33 changed files with 600 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/space/components/modals/feed.tsx
View File

@@ -3,30 +3,25 @@ import * as Dialog from '@radix-ui/react-dialog';
import { nip19 } from 'nostr-tools';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useHotkeys } from 'react-hotkeys-hook';
import { User } from '@app/auth/components/user';
import { useStorage } from '@libs/storage/provider';
import { CancelIcon, CheckCircleIcon, CommandIcon, LoaderIcon } from '@shared/icons';
import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
import { ADD_FEEDBLOCK_SHORTCUT } from '@stores/shortcuts';
import { useWidgets } from '@stores/widgets';
import { useAccount } from '@utils/hooks/useAccount';
export function FeedModal() {
const setWidget = useWidgets((state) => state.setWidget);
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [selected, setSelected] = useState([]);
const [query, setQuery] = useState('');
const { status, account } = useAccount();
const setWidget = useWidgets((state) => state.setWidget);
useHotkeys(ADD_FEEDBLOCK_SHORTCUT, () => setOpen(true));
const { db } = useStorage();
const {
register,
handleSubmit,
@@ -43,8 +38,8 @@ export function FeedModal() {
}
});
// insert to database
setWidget({
// update state
setWidget(db, {
kind: BLOCK_KINDS.feed,
title: data.title,
content: JSON.stringify(selected),
@@ -155,26 +150,22 @@ export function FeedModal() {
)}
</Combobox.Option>
)}
{status === 'loading' ? (
<p>Loading...</p>
) : (
account?.follows?.map((follow) => (
<Combobox.Option
key={follow}
value={follow}
className="group flex w-full items-center justify-between rounded-md px-2 py-2 hover:bg-white/10"
>
{({ selected }) => (
<>
<User pubkey={follow} />
{selected && (
<CheckCircleIcon className="h-4 w-4 text-green-500" />
)}
</>
)}
</Combobox.Option>
))
)}
{db.account?.follows?.map((follow) => (
<Combobox.Option
key={follow}
value={follow}
className="group flex w-full items-center justify-between rounded-md px-2 py-2 hover:bg-white/10"
>
{({ selected }) => (
<>
<User pubkey={follow} />
{selected && (
<CheckCircleIcon className="h-4 w-4 text-green-500" />
)}
</>
)}
</Combobox.Option>
))}
</Combobox.Options>
</Combobox>
</div>

15
src/app/space/components/modals/hashtag.tsx
View File

@@ -1,22 +1,21 @@
import * as Dialog from '@radix-ui/react-dialog';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useHotkeys } from 'react-hotkeys-hook';
import { useStorage } from '@libs/storage/provider';
import { CancelIcon, CommandIcon, LoaderIcon } from '@shared/icons';
import { BLOCK_KINDS } from '@stores/constants';
import { ADD_HASHTAGBLOCK_SHORTCUT } from '@stores/shortcuts';
import { useWidgets } from '@stores/widgets';
export function HashtagModal() {
const setWidget = useWidgets((state) => state.setWidget);
const [loading, setLoading] = useState(false);
const [open, setOpen] = useState(false);
const setWidget = useWidgets((state) => state.setWidget);
useHotkeys(ADD_HASHTAGBLOCK_SHORTCUT, () => setOpen(false));
const { db } = useStorage();
const {
register,
handleSubmit,
@@ -27,8 +26,8 @@ export function HashtagModal() {
const onSubmit = async (data: { hashtag: string }) => {
setLoading(true);
// mutate
setWidget({
// update state
setWidget(db, {
kind: BLOCK_KINDS.hashtag,
title: data.hashtag,
content: data.hashtag.replace('#', ''),

9
src/app/space/components/modals/image.tsx
View File

@@ -1,13 +1,13 @@
import * as Dialog from '@radix-ui/react-dialog';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useHotkeys } from 'react-hotkeys-hook';
import { useStorage } from '@libs/storage/provider';
import { CancelIcon, CommandIcon, LoaderIcon } from '@shared/icons';
import { Image } from '@shared/image';
import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
import { ADD_IMAGEBLOCK_SHORTCUT } from '@stores/shortcuts';
import { useWidgets } from '@stores/widgets';
import { useImageUploader } from '@utils/hooks/useUploader';
@@ -20,8 +20,7 @@ export function ImageModal() {
const [loading, setLoading] = useState(false);
const [image, setImage] = useState('');
useHotkeys(ADD_IMAGEBLOCK_SHORTCUT, () => setOpen(false));
const { db } = useStorage();
const {
register,
handleSubmit,
@@ -41,7 +40,7 @@ export function ImageModal() {
setLoading(true);
// mutate
setWidget({ kind: BLOCK_KINDS.image, title: data.title, content: data.content });
setWidget(db, { kind: BLOCK_KINDS.image, title: data.title, content: data.content });
setLoading(false);
// reset form

36
src/app/space/components/widgets/feed.tsx
View File

@@ -58,21 +58,13 @@ export function FeedBlock({ params }: { params: Widget }) {
const reply = note.tags.find((el) => el[3] === 'reply')?.[1];
if (root || reply) {
return (
<div
key={note.event_id || note.id}
data-index={index}
ref={rowVirtualizer.measureElement}
>
<div key={note.id} data-index={index} ref={rowVirtualizer.measureElement}>
<NoteThread event={note} root={root} reply={reply} />
</div>
);
} else {
return (
<div
key={note.event_id || note.id}
data-index={index}
ref={rowVirtualizer.measureElement}
>
<div key={note.id} data-index={index} ref={rowVirtualizer.measureElement}>
<NoteKind_1 event={note} skipMetadata={false} />
</div>
);
@@ -80,32 +72,20 @@ export function FeedBlock({ params }: { params: Widget }) {
}
case 6:
return (
<div
key={note.event_id || note.id}
data-index={index}
ref={rowVirtualizer.measureElement}
>
<Repost key={note.event_id} event={note} />
<div key={note.id} data-index={index} ref={rowVirtualizer.measureElement}>
<Repost key={note.id} event={note} />
</div>
);
case 1063:
return (
<div
key={note.event_id || note.id}
data-index={index}
ref={rowVirtualizer.measureElement}
>
<NoteKind_1063 key={note.event_id} event={note} />
<div key={note.id} data-index={index} ref={rowVirtualizer.measureElement}>
<NoteKind_1063 key={note.id} event={note} />
</div>
);
default:
return (
<div
key={note.event_id || note.id}
data-index={index}
ref={rowVirtualizer.measureElement}
>
<NoteKindUnsupport key={note.event_id} event={note} />
<div key={note.id} data-index={index} ref={rowVirtualizer.measureElement}>
<NoteKindUnsupport key={note.id} event={note} />
</div>
);
}

47
src/app/space/components/widgets/network.tsx
View File

@@ -1,7 +1,7 @@
import { useInfiniteQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { NostrEvent } from 'nostr-fetch';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { useCallback, useMemo, useRef } from 'react';
import { Link } from 'react-router-dom';
import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
@@ -14,14 +14,15 @@ import { LumeEvent } from '@utils/types';
export function NetworkBlock() {
const { fetchNotes } = useNostr();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['network-widget'],
queryFn: async ({ pageParam = 24 }) => {
return await fetchNotes(pageParam);
},
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
const { status, data, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
queryKey: ['network-widget'],
queryFn: async ({ pageParam = 24 }) => {
return await fetchNotes(pageParam);
},
getNextPageParam: (lastPage) => lastPage.nextCursor,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
});
const parentRef = useRef();
const notes = useMemo(
@@ -40,18 +41,6 @@ export function NetworkBlock() {
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
const totalSize = rowVirtualizer.getTotalSize();
useEffect(() => {
const [lastItem] = [...itemsVirtualizer].reverse();
if (!lastItem) {
return;
}
if (lastItem.index >= notes.length - 1 && hasNextPage && !isFetchingNextPage) {
fetchNextPage();
}
}, [notes.length, fetchNextPage, itemsVirtualizer]);
const renderItem = useCallback(
(index: string | number) => {
const note: LumeEvent = notes[index];
@@ -69,7 +58,7 @@ export function NetworkBlock() {
if (root || reply) {
return (
<div
key={(root || reply) + (note.event_id || note.id) + index}
key={(root || reply) + note.id + index}
data-index={index}
ref={rowVirtualizer.measureElement}
>
@@ -79,7 +68,7 @@ export function NetworkBlock() {
} else {
return (
<div
key={(note.event_id || note.id) + index}
key={note.id + index}
data-index={index}
ref={rowVirtualizer.measureElement}
>
@@ -91,31 +80,31 @@ export function NetworkBlock() {
case 6:
return (
<div
key={(note.event_id || note.id) + index}
key={note.id + index}
data-index={index}
ref={rowVirtualizer.measureElement}
>
<Repost key={note.event_id} event={note} />
<Repost key={note.id} event={note} />
</div>
);
case 1063:
return (
<div
key={(note.event_id || note.id) + index}
key={note.id + index}
data-index={index}
ref={rowVirtualizer.measureElement}
>
<NoteKind_1063 key={note.event_id} event={note} />
<NoteKind_1063 key={note.id} event={note} />
</div>
);
default:
return (
<div
key={(note.event_id || note.id) + index}
key={note.id + index}
data-index={index}
ref={rowVirtualizer.measureElement}
>
<NoteKindUnsupport key={note.event_id} event={note} />
<NoteKindUnsupport key={note.id} event={note} />
</div>
);
}

11
src/app/space/components/widgets/thread.tsx
View File

@@ -1,4 +1,5 @@
// import { useLiveThread } from '@app/space/hooks/useLiveThread';
import { useStorage } from '@libs/storage/provider';
import {
NoteActions,
NoteContent,
@@ -10,16 +11,12 @@ import { RepliesList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
import { useAccount } from '@utils/hooks/useAccount';
import { useEvent } from '@utils/hooks/useEvent';
import { Widget } from '@utils/types';
export function ThreadBlock({ params }: { params: Widget }) {
const { status, data } = useEvent(params.content);
const { account } = useAccount();
// subscribe to live reply
// useLiveThread(params.content);
const { db } = useStorage();
return (
<div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
@@ -50,7 +47,7 @@ export function ThreadBlock({ params }: { params: Widget }) {
</div>
)}
<div className="px-3">
{account && <NoteReplyForm id={params.content} pubkey={account.pubkey} />}
<NoteReplyForm id={params.content} pubkey={db.account.pubkey} />
<RepliesList id={params.content} />
</div>
</div>

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

@@ -10,6 +10,8 @@ import { NetworkBlock } from '@app/space/components/widgets/network';
import { ThreadBlock } from '@app/space/components/widgets/thread';
import { UserBlock } from '@app/space/components/widgets/user';
import { useStorage } from '@libs/storage/provider';
import { LoaderIcon } from '@shared/icons';
import { useWidgets } from '@stores/widgets';
@@ -22,6 +24,8 @@ export function SpaceScreen() {
state.fetchWidgets,
]);
const { db } = useStorage();
const renderItem = useCallback(
(widget: Widget) => {
switch (widget.kind) {
@@ -43,7 +47,7 @@ export function SpaceScreen() {
);
useEffect(() => {
fetchWidgets();
fetchWidgets(db);
}, [fetchWidgets]);
return (