refactor multi accounts component
This commit is contained in:
Ren Amamiya
111
src/components/multiAccounts/activeAccount.tsx
Normal file
111
src/components/multiAccounts/activeAccount.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { RelayContext } from '@components/relaysProvider';
|
||||
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
|
||||
import { createFollows } from '@utils/storage';
|
||||
import { tagsToArray } from '@utils/transform';
|
||||
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
|
||||
import { writeText } from '@tauri-apps/api/clipboard';
|
||||
import Image from 'next/image';
|
||||
import { useRouter } from 'next/router';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { memo, useContext, useEffect } from 'react';
|
||||
|
||||
export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }) {
|
||||
const [pool, relays]: any = useContext(RelayContext);
|
||||
|
||||
const router = useRouter();
|
||||
const userData = JSON.parse(user.metadata);
|
||||
|
||||
const openProfilePage = () => {
|
||||
router.push(`/users/${user.id}`);
|
||||
};
|
||||
|
||||
const copyPublicKey = async () => {
|
||||
await writeText(nip19.npubEncode(user.id));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = pool.subscribe(
|
||||
[
|
||||
{
|
||||
kinds: [3],
|
||||
authors: [user.id],
|
||||
},
|
||||
],
|
||||
relays,
|
||||
(event: any) => {
|
||||
if (event.tags.length > 0) {
|
||||
createFollows(tagsToArray(event.tags), user.id, 0);
|
||||
}
|
||||
},
|
||||
undefined,
|
||||
undefined,
|
||||
{
|
||||
unsubscribeOnEose: true,
|
||||
}
|
||||
);
|
||||
|
||||
return () => {
|
||||
unsubscribe;
|
||||
};
|
||||
}, [pool, relays, user.id]);
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="relative h-11 w-11 rounded-md">
|
||||
<Image
|
||||
src={userData.picture || DEFAULT_AVATAR}
|
||||
alt="user's avatar"
|
||||
fill={true}
|
||||
className="rounded-md object-cover"
|
||||
priority
|
||||
/>
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[220px] rounded-md bg-zinc-900/80 p-1.5 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
|
||||
side="right"
|
||||
sideOffset={5}
|
||||
align="start"
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
onClick={() => openProfilePage()}
|
||||
className="group relative flex h-7 select-none items-center rounded-sm px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500"
|
||||
>
|
||||
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
|
||||
<AvatarIcon />
|
||||
</div>
|
||||
Open profile
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500">
|
||||
Update profile
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onClick={() => copyPublicKey()}
|
||||
className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500"
|
||||
>
|
||||
Copy public key
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator className="m-1 h-px bg-zinc-700/50" />
|
||||
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500">
|
||||
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
|
||||
<GearIcon />
|
||||
</div>
|
||||
Settings
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500">
|
||||
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
|
||||
<ExitIcon />
|
||||
</div>
|
||||
Logout
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
});
|
||||
24
src/components/multiAccounts/inactiveAccount.tsx
Normal file
24
src/components/multiAccounts/inactiveAccount.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
|
||||
import Image from 'next/image';
|
||||
import { memo } from 'react';
|
||||
|
||||
export const InactiveAccount = memo(function InactiveAccount({ user }: { user: any }) {
|
||||
const userData = JSON.parse(user.metadata);
|
||||
|
||||
const setCurrentUser = () => {
|
||||
console.log('clicked');
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-md">
|
||||
<Image
|
||||
src={userData.picture || DEFAULT_AVATAR}
|
||||
alt="user's avatar"
|
||||
fill={true}
|
||||
className="rounded-md object-cover"
|
||||
priority
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
65
src/components/multiAccounts/index.tsx
Normal file
65
src/components/multiAccounts/index.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { ActiveAccount } from '@components/multiAccounts/activeAccount';
|
||||
import { InactiveAccount } from '@components/multiAccounts/inactiveAccount';
|
||||
|
||||
import { activeAccountAtom } from '@stores/account';
|
||||
import { APP_VERSION } from '@stores/constants';
|
||||
|
||||
import { getAccounts } from '@utils/storage';
|
||||
|
||||
import LumeSymbol from '@assets/icons/Lume';
|
||||
|
||||
import { PlusIcon } from '@radix-ui/react-icons';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
export default function MultiAccounts() {
|
||||
const activeAccount: any = useAtomValue(activeAccountAtom);
|
||||
const [users, setUsers] = useState([]);
|
||||
|
||||
const renderAccount = useCallback(
|
||||
(user: { id: string }) => {
|
||||
if (user.id === activeAccount.id) {
|
||||
return <ActiveAccount key={user.id} user={user} />;
|
||||
} else {
|
||||
return <InactiveAccount key={user.id} user={user} />;
|
||||
}
|
||||
},
|
||||
[activeAccount.id]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAccount = async () => {
|
||||
const result: any = await getAccounts();
|
||||
setUsers(result);
|
||||
};
|
||||
|
||||
fetchAccount().catch(console.error);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link
|
||||
href="/explore"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800"
|
||||
>
|
||||
<LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
|
||||
</Link>
|
||||
<div>{users.map((user) => renderAccount(user))}</div>
|
||||
<Link
|
||||
href="/onboarding"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-zinc-600 hover:border-zinc-400"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 text-center">
|
||||
<span className="animate-moveBg from-fuchsia-300 via-orange-100 to-amber-300 text-sm font-black uppercase leading-tight text-zinc-600 hover:bg-gradient-to-r hover:bg-clip-text hover:text-transparent">
|
||||
Lume
|
||||
</span>
|
||||
<span className="text-xs font-medium text-zinc-700">v{APP_VERSION}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user