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-15 21:13:58 +07:00
parent 6e28bcdb96
commit 2d53019c10
36 changed files with 603 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,6 @@ import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
import { useOnboarding } from '@stores/onboarding';
import { useAccount } from '@utils/hooks/useAccount';
import { useNostr } from '@utils/hooks/useNostr';
export function ImportStep3Screen() {
@@ -21,7 +20,6 @@ export function ImportStep3Screen() {
const [loading, setLoading] = useState(false);
const { db } = useStorage();
const { status, account } = useAccount();
const { fetchUserData } = useNostr();
const submit = async () => {
@@ -72,7 +70,7 @@ export function ImportStep3Screen() {
</div>
) : (
<div className="flex flex-col gap-3">
<User pubkey={account.pubkey} />
<User pubkey={db.account.pubkey} />
<button
type="button"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"

5
src/app/auth/migrate.tsx
View File

@@ -40,7 +40,6 @@ export function MigrateScreen() {
const [passwordInput, setPasswordInput] = useState('password');
const [loading, setLoading] = useState(false);
const { account } = useAccount();
const { db } = useStorage();
// toggle private key
@@ -69,10 +68,10 @@ export function MigrateScreen() {
const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
if (!db.secureDB) db.secureDB = stronghold;
await db.secureSave(account.pubkey, account.privkey);
await db.secureSave(db.account.pubkey, db.account.privkey);
// add privkey to state
setPrivkey(account.privkey);
setPrivkey(db.account.privkey);
// remove privkey in db
await removePrivkey();
// clear cache

4
src/app/auth/onboarding/step-1.tsx
View File

@@ -10,7 +10,6 @@ import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons
import { useOnboarding } from '@stores/onboarding';
import { useAccount } from '@utils/hooks/useAccount';
import { useNostr } from '@utils/hooks/useNostr';
import { arrayToNIP02 } from '@utils/transform';
@@ -21,7 +20,6 @@ export function OnboardStep1Screen() {
const { db } = useStorage();
const { publish, fetchUserData } = useNostr();
const { account } = useAccount();
const { status, data } = useQuery(['trending-profiles'], async () => {
const res = await fetch('https://api.nostr.band/v0/trending/profiles');
if (!res.ok) {
@@ -45,7 +43,7 @@ export function OnboardStep1Screen() {
try {
setLoading(true);
const tags = arrayToNIP02([...follows, account.pubkey]);
const tags = arrayToNIP02([...follows, db.account.pubkey]);
const event = await publish({ content: '', kind: 3, tags: tags });
await db.updateAccount('follows', follows);

12
src/app/auth/onboarding/step-3.tsx
View File

@@ -12,7 +12,6 @@ import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons
import { FULL_RELAYS } from '@stores/constants';
import { useOnboarding } from '@stores/onboarding';
import { useAccount } from '@utils/hooks/useAccount';
import { useNostr } from '@utils/hooks/useNostr';
export function OnboardStep3Screen() {
@@ -22,15 +21,17 @@ export function OnboardStep3Screen() {
const [loading, setLoading] = useState(false);
const [relays, setRelays] = useState(new Set<string>());
const { db } = useStorage();
const { publish } = useNostr();
const { account } = useAccount();
const { db } = useStorage();
const { ndk } = useNDK();
const { status, data } = useQuery(
['relays'],
async () => {
const tmp = new Map<string, string>();
const events = await ndk.fetchEvents({ kinds: [10002], authors: account.follows });
const events = await ndk.fetchEvents({
kinds: [10002],
authors: db.account.follows,
});
if (events) {
events.forEach((event) => {
@@ -43,7 +44,8 @@ export function OnboardStep3Screen() {
return tmp;
},
{
enabled: account ? true : false,
enabled: db.account ? true : false,
refetchOnWindowFocus: false,
}
);

7
src/app/auth/reset.tsx
View File

@@ -39,7 +39,6 @@ export function ResetScreen() {
const [passwordInput, setPasswordInput] = useState('password');
const [loading, setLoading] = useState(false);
const { account } = useAccount();
const { db } = useStorage();
// toggle private key
@@ -69,7 +68,7 @@ export function ResetScreen() {
const tmpPubkey = getPublicKey(privkey);
if (tmpPubkey !== account.pubkey) {
if (tmpPubkey !== db.account.pubkey) {
setLoading(false);
setError('password', {
type: 'custom',
@@ -88,10 +87,10 @@ export function ResetScreen() {
);
if (!db.secureDB) db.secureDB = stronghold;
await db.secureSave(account.pubkey, account.privkey);
await db.secureSave(db.account.pubkey, db.account.privkey);
// add privkey to state
setPrivkey(account.privkey);
setPrivkey(db.account.privkey);
// redirect to home
navigate('/auth/unlock', { replace: true });
}

5
src/app/auth/unlock.tsx
View File

@@ -10,8 +10,6 @@ import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
import { useStronghold } from '@stores/stronghold';
import { useAccount } from '@utils/hooks/useAccount';
type FormValues = {
password: string;
};
@@ -37,7 +35,6 @@ export function UnlockScreen() {
const [showPassword, setShowPassword] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const { account } = useAccount();
const { db } = useStorage();
const {
@@ -56,7 +53,7 @@ export function UnlockScreen() {
if (!db.secureDB) db.secureDB = stronghold;
const privkey = await db.secureLoad(account.pubkey);
const privkey = await db.secureLoad(db.account.pubkey);
setPrivkey(privkey);
// redirect to home

29
src/app/chats/components/list.tsx
View File

@@ -6,24 +6,22 @@ import { NewMessageModal } from '@app/chats/components/modal';
import { ChatsListSelfItem } from '@app/chats/components/self';
import { UnknownsModal } from '@app/chats/components/unknowns';
import { useNDK } from '@libs/ndk/provider';
import { getChats } from '@libs/storage';
import { useStorage } from '@libs/storage/provider';
import { useAccount } from '@utils/hooks/useAccount';
import { Chats } from '@utils/types';
export function ChatsList() {
const { account } = useAccount();
const {
status,
data: chats,
isFetching,
} = useQuery(['chats'], async () => {
const { db } = useStorage();
const { ndk } = useNDK();
const { status, data: chats } = useQuery(['chats'], async () => {
return await getChats();
});
const renderItem = useCallback(
(item: Chats) => {
if (account?.pubkey !== item.sender_pubkey) {
if (db.account.pubkey !== item.sender_pubkey) {
return <ChatsListItem key={item.sender_pubkey} data={item} />;
}
},
@@ -47,21 +45,8 @@ export function ChatsList() {
return (
<div className="flex flex-col">
{account ? (
<ChatsListSelfItem data={account} />
) : (
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
</div>
)}
<ChatsListSelfItem pubkey={db.account.pubkey} />
{chats.follows.map((item) => renderItem(item))}
{isFetching && (
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
</div>
)}
{chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
<NewMessageModal />
</div>

8
src/app/chats/components/modal.tsx
View File

@@ -4,15 +4,15 @@ import { useNavigate } from 'react-router-dom';
import { User } from '@app/auth/components/user';
import { CancelIcon, LoaderIcon, PlusIcon } from '@shared/icons';
import { useStorage } from '@libs/storage/provider';
import { useAccount } from '@utils/hooks/useAccount';
import { CancelIcon, LoaderIcon, PlusIcon } from '@shared/icons';
export function NewMessageModal() {
const navigate = useNavigate();
const [open, setOpen] = useState(false);
const { status, account } = useAccount();
const { db } = useStorage();
const openChat = (pubkey: string) => {
setOpen(false);
@@ -59,7 +59,7 @@ export function NewMessageModal() {
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
</div>
) : (
account?.follows?.map((follow) => (
db.account?.follows?.map((follow) => (
<div
key={follow}
className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"

10
src/app/chats/components/self.tsx
View File

@@ -8,8 +8,8 @@ import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
const { status, user } = useProfile(data.pubkey);
export function ChatsListSelfItem({ pubkey }: { pubkey: string }) {
const { status, user } = useProfile(pubkey);
if (status === 'loading') {
return (
@@ -22,7 +22,7 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
return (
<NavLink
to={`/chats/${data.pubkey}`}
to={`/chats/${pubkey}`}
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
@@ -34,12 +34,12 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={data.pubkey}
alt={pubkey}
className="h-6 w-6 shrink-0 rounded bg-white object-cover"
/>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[10rem] truncate">
{user?.nip05 || user?.name || displayNpub(data.pubkey, 16)}
{user?.nip05 || user?.name || displayNpub(pubkey, 16)}
</h5>
<span className="text-white/50">(you)</span>
</div>

22
src/app/chats/index.tsx
View File

@@ -10,10 +10,10 @@ import { ChatSidebar } from '@app/chats/components/sidebar';
import { useNDK } from '@libs/ndk/provider';
import { createChat, getChatMessages } from '@libs/storage';
import { useStorage } from '@libs/storage/provider';
import { useStronghold } from '@stores/stronghold';
import { useAccount } from '@utils/hooks/useAccount';
import { Chats } from '@utils/types';
export function ChatScreen() {
@@ -21,17 +21,11 @@ export function ChatScreen() {
const virtuosoRef = useRef(null);
const { ndk } = useNDK();
const { db } = useStorage();
const { pubkey } = useParams();
const { account } = useAccount();
const { status, data } = useQuery(
['chat', pubkey],
async () => {
return await getChatMessages(account.pubkey, pubkey);
},
{
enabled: account ? true : false,
}
);
const { status, data } = useQuery(['chat', pubkey], async () => {
return await getChatMessages(db.account.pubkey, pubkey);
});
const userPrivkey = useStronghold((state) => state.privkey);
@@ -40,7 +34,7 @@ export function ChatScreen() {
return (
<ChatMessageItem
data={data[index]}
userPubkey={account.pubkey}
userPubkey={db.account.pubkey}
userPrivkey={userPrivkey}
/>
);
@@ -75,7 +69,7 @@ export function ChatScreen() {
const sub: NDKSubscription = ndk.subscribe(
{
kinds: [4],
authors: [account.pubkey],
authors: [db.account.pubkey],
'#p': [pubkey],
since: Math.floor(Date.now() / 1000),
},
@@ -129,7 +123,7 @@ export function ChatScreen() {
<div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5">
<ChatMessageForm
receiverPubkey={pubkey}
userPubkey={account.pubkey}
userPubkey={db.account.pubkey}
userPrivkey={userPrivkey}
/>
</div>

74
src/app/error.tsx
View File

@@ -1,21 +1,79 @@
import { useRouteError } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { useLocation, useRouteError } from 'react-router-dom';
interface IRouteError {
statusText: string;
message: string;
}
interface IDebugInfo {
os: null | string;
version: null | string;
}
export function ErrorScreen() {
const error = useRouteError() as IRouteError;
const location = useLocation();
const [debugInfo, setDebugInfo] = useState<IDebugInfo>({ os: null, version: null });
useEffect(() => {
async function getInformation() {
const { platform, version } = await import('@tauri-apps/plugin-os');
const { getVersion } = await import('@tauri-apps/plugin-app');
const platformName = await platform();
const osVersion = await version();
const appVersion = await getVersion();
setDebugInfo({ os: platformName + ' ' + osVersion, version: appVersion });
}
getInformation();
}, []);
return (
<div className="flex h-full w-full items-center justify-center">
<div>
<h1>Oops!</h1>
<p>Sorry, an unexpected error has occurred.</p>
<p>
<i>{error.statusText || error.message}</i>
</p>
<div className="flex h-full w-full items-center justify-center bg-black/90">
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<h1 className="mb-1 text-2xl font-semibold text-white">
Sorry, an unexpected error has occurred.
</h1>
<div className="mt-4 inline-flex h-16 items-center justify-center rounded-xl border border-dashed border-red-400 bg-red-200/10 px-5">
<p className="text-sm font-medium text-red-400">
{error.statusText || error.message}
</p>
</div>
<div className="mt-4">
<p className="font-medium text-white/50">
Current location: {location.pathname}
</p>
<p className="font-medium text-white/50">App version: {debugInfo.version}</p>
<p className="font-medium text-white/50">Platform: {debugInfo.os}</p>
</div>
</div>
<div className="flex flex-col gap-2">
<a
href="https://github.com/luminous-devs/lume/issues/new"
target="_blank"
rel="noreferrer"
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
>
Click here to report the issue on GitHub
</a>
<button
type="button"
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
>
Reload app
</button>
<button
type="button"
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
>
Reset app
</button>
</div>
</div>
</div>
);

7
src/app/events/index.tsx
View File

@@ -1,5 +1,7 @@
import { useParams } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import {
NoteActions,
NoteContent,
@@ -10,12 +12,11 @@ import {
import { RepliesList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { useAccount } from '@utils/hooks/useAccount';
import { useEvent } from '@utils/hooks/useEvent';
export function EventScreen() {
const { id } = useParams();
const { account } = useAccount();
const { db } = useStorage();
const { status, data } = useEvent(id);
return (
@@ -42,7 +43,7 @@ export function EventScreen() {
</div>
)}
<div className="px-3">
<NoteReplyForm id={id} pubkey={account.pubkey} />
<NoteReplyForm id={id} pubkey={db.account.pubkey} />
<RepliesList id={id} />
</div>
</div>

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

@@ -1,36 +1,34 @@
import { useInfiniteQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useCallback, useEffect, useRef } from 'react';
import { NostrEvent } from 'nostr-fetch';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { Link } from 'react-router-dom';
import { useNewsfeed } from '@app/space/hooks/useNewsfeed';
import { getNotes } from '@libs/storage';
import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
import { useNostr } from '@utils/hooks/useNostr';
import { LumeEvent } from '@utils/types';
const ITEM_PER_PAGE = 10;
export function NetworkBlock() {
// subscribe for live update
// useNewsfeed();
const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
const { fetchNotes } = useNostr();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['network-widget'],
queryFn: async ({ pageParam = 0 }) => {
return await getNotes(ITEM_PER_PAGE, pageParam);
queryFn: async ({ pageParam = 24 }) => {
return await fetchNotes(pageParam);
},
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
const parentRef = useRef();
const notes = useMemo(
// @ts-expect-error, todo
() => (data ? data.pages.flatMap((d: { data: NostrEvent[] }) => d.data) : []),
[data]
);
const rowVirtualizer = useVirtualizer({
count: hasNextPage ? notes.length + 1 : notes.length,
@@ -140,7 +138,7 @@ export function NetworkBlock() {
<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">
You not have any posts to see yet
You not have any postrs to see yet
<br />
Follow more people to have more fun.
</p>
@@ -148,7 +146,7 @@ export function NetworkBlock() {
to="/trending"
className="inline-flex w-max rounded bg-fuchsia-500 px-2.5 py-1.5 text-sm hover:bg-fuchsia-600"
>
Trending
Trending users
</Link>
</div>
</div>

8
src/app/splash.tsx
View File

@@ -6,13 +6,11 @@ import { useStorage } from '@libs/storage/provider';
import { LoaderIcon } from '@shared/icons';
import { useAccount } from '@utils/hooks/useAccount';
import { useNostr } from '@utils/hooks/useNostr';
export function SplashScreen() {
const { db } = useStorage();
const { ndk, relayUrls } = useNDK();
const { status, account } = useAccount();
const { fetchUserData } = useNostr();
const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -46,15 +44,15 @@ export function SplashScreen() {
};
useEffect(() => {
if (status === 'success' && !account) {
if (!db.account) {
invoke('close_splashscreen');
}
if (ndk && account) {
if (ndk && db.account) {
console.log('prefetching...');
prefetch();
}
}, [ndk, account]);
}, [ndk, db.account]);
return (
<div className="relative flex h-screen w-screen items-center justify-center bg-black">

1
src/app/trending/components/profile.tsx
View File

@@ -1,5 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { fetch } from '@tauri-apps/plugin-http';
import { useEffect, useState } from 'react';
import { FollowIcon, LoaderIcon, UnfollowIcon } from '@shared/icons';

1
src/app/trending/components/trendingNotes.tsx
View File

@@ -1,5 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { fetch } from '@tauri-apps/plugin-http';
import { NoteKind_1 } from '@shared/notes';
import { NoteSkeleton } from '@shared/notes/skeleton';

1
src/app/trending/components/trendingProfiles.tsx
View File

@@ -1,5 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { fetch } from '@tauri-apps/plugin-http';
import { Profile } from '@app/trending/components/profile';