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

refactor active account and clean up

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-31 16:06:40 +07:00
parent c7e2b9430a
commit 5b88b335a1
15 changed files with 101 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/form/base.tsx
View File

@@ -15,7 +15,7 @@ import { useContext } from 'react';
export default function FormBase() {
const [pool, relays]: any = useContext(RelayContext);
const activeAccount = useAtomValue(activeAccountAtom);
const activeAccount: any = useAtomValue(activeAccountAtom);
const [value, setValue] = useAtom(noteContentAtom);
const resetValue = useResetAtom(noteContentAtom);

2
src/components/form/comment.tsx
View File

@@ -13,7 +13,7 @@ import { useContext, useState } from 'react';
export default function FormComment({ eventID }: { eventID: any }) {
const [pool, relays]: any = useContext(RelayContext);
const activeAccount = useAtomValue(activeAccountAtom);
const activeAccount: any = useAtomValue(activeAccountAtom);
const [value, setValue] = useState('');
const profile = destr(activeAccount.metadata);

2
src/components/note/connector.tsx
View File

@@ -16,7 +16,7 @@ export default function NoteConnector() {
const [pool, relays]: any = useContext(RelayContext);
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
const activeAccount = useAtomValue(activeAccountAtom);
const activeAccount: any = useAtomValue(activeAccountAtom);
const [isOnline] = useState(true);
const now = useRef(new Date());

2
src/components/note/meta/comment.tsx
View File

@@ -33,7 +33,7 @@ export const NoteComment = memo(function NoteComment({
const router = useRouter();
const [pool, relays]: any = useContext(RelayContext);
const activeAccount = useAtomValue(activeAccountAtom);
const activeAccount: any = useAtomValue(activeAccountAtom);
const [open, setOpen] = useState(false);
const [value, setValue] = useState('');

2
src/components/note/meta/reaction.tsx
View File

@@ -22,7 +22,7 @@ export const NoteReaction = memo(function NoteReaction({
}) {
const [pool, relays]: any = useContext(RelayContext);
const activeAccount = useAtomValue(activeAccountAtom);
const activeAccount: any = useAtomValue(activeAccountAtom);
const [isReact, setIsReact] = useState(false);
const [like, setLike] = useState(0);

11
src/components/user/base.tsx
View File

@@ -1,5 +1,7 @@
import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { createCacheProfile } from '@utils/storage';
import { truncate } from '@utils/truncate';
@@ -30,9 +32,12 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
return (
<div className="flex items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
{profile?.picture && (
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
)}
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
fill={true}
className="rounded-full object-cover"
/>
</div>
<div className="flex w-full flex-1 flex-col items-start text-start">
<span className="truncate font-medium leading-tight text-zinc-200">

25
src/components/user/extend.tsx
View File

@@ -1,11 +1,12 @@
import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { createCacheProfile, getCacheProfile } from '@utils/storage';
import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import { fetch } from '@tauri-apps/api/http';
import Avatar from 'boring-avatars';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import destr from 'destr';
@@ -52,22 +53,12 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
onClick={(e) => openUserPage(e)}
className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1"
>
{profile?.picture ? (
<ImageWithFallback
src={profile.picture}
alt={pubkey}
fill={true}
className="rounded-md border border-white/10 object-cover"
/>
) : (
<Avatar
size={44}
name={pubkey}
variant="beam"
square={true}
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
/>
)}
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
fill={true}
className="rounded-md border border-white/10 object-cover"
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex w-full justify-between">

11
src/components/user/follow.tsx
View File

@@ -1,5 +1,7 @@
import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { createCacheProfile } from '@utils/storage';
import { truncate } from '@utils/truncate';
@@ -30,9 +32,12 @@ export const UserFollow = memo(function UserFollow({ pubkey }: { pubkey: string
return (
<div className="flex items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
{profile?.picture && (
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
)}
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
fill={true}
className="rounded-full object-cover"
/>
</div>
<div className="flex w-full flex-1 flex-col items-start text-start">
<span className="truncate font-medium leading-tight text-zinc-200">

24
src/components/user/large.tsx
View File

@@ -1,5 +1,7 @@
import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { createCacheProfile, getCacheProfile } from '@utils/storage';
import { truncate } from '@utils/truncate';
@@ -42,22 +44,12 @@ export const UserLarge = memo(function UserLarge({ pubkey, time }: { pubkey: str
return (
<div className="flex items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
{profile?.picture ? (
<ImageWithFallback
src={profile.picture}
alt={pubkey}
fill={true}
className="rounded-md border border-white/10 object-cover"
/>
) : (
<Avatar
size={44}
name={pubkey}
variant="beam"
square={true}
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
/>
)}
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
fill={true}
className="rounded-md border border-white/10 object-cover"
/>
</div>
<div className="w-full flex-1">
<div className="flex w-full justify-between">

15
src/pages/index.tsx
View File

@@ -1,26 +1,33 @@
import BaseLayout from '@layouts/base';
import { getAccounts } from '@utils/storage';
import { activeAccountAtom } from '@stores/account';
import { getActiveAccount } from '@utils/storage';
import LumeSymbol from '@assets/icons/Lume';
import { useSetAtom } from 'jotai';
import { useRouter } from 'next/router';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useEffect } from 'react';
export default function Page() {
const router = useRouter();
const setActiveAccount = useSetAtom(activeAccountAtom);
useEffect(() => {
getAccounts()
getActiveAccount()
.then((res: any) => {
if (res.length > 0) {
if (res) {
// update local storage
setActiveAccount(res);
// redirect
router.replace('/init');
} else {
router.replace('/onboarding');
}
})
.catch(console.error);
}, [router]);
}, [router, setActiveAccount]);
return (
<div className="relative h-full overflow-hidden">

2
src/pages/init.tsx
View File

@@ -29,7 +29,7 @@ export default function Page() {
const router = useRouter();
const [pool, relays]: any = useContext(RelayContext);
const activeAccount = useAtomValue(activeAccountAtom);
const activeAccount: any = useAtomValue(activeAccountAtom);
const [done, setDone] = useState(false);
const now = useRef(new Date());

17
src/stores/account.tsx
View File

@@ -1,9 +1,12 @@
import { isSSR } from '@utils/ssr';
import { getActiveAccount } from '@utils/storage';
import { atomWithStorage, createJSONStorage } from 'jotai/utils';
import { atomWithCache } from 'jotai-cache';
const createMyJsonStorage = () => {
const storage = createJSONStorage(() => localStorage);
const getItem = (key) => {
const value = storage.getItem(key);
return value;
};
return { ...storage, getItem };
};
export const activeAccountAtom = atomWithCache(async () => {
const response = isSSR ? {} : await getActiveAccount();
return response;
});
export const activeAccountAtom = atomWithStorage('activeAccount', {}, createMyJsonStorage());