refactor multi accounts component

src/components/columns/account/list.tsx

@@ -1,36 +0,0 @@
-import { ActiveAccount } from '@components/columns/account/active';
-import { InactiveAccount } from '@components/columns/account/inactive';
-
-import { activeAccountAtom } from '@stores/account';
-
-import { getAccounts } from '@utils/storage';
-
-import { useAtomValue } from 'jotai';
-import { useCallback, useEffect, useState } from 'react';
-
-export default function AccountList() {
-  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 <>{users.map((user) => renderAccount(user))}</>;
-}

src/components/multiAccounts/activeAccount.tsx

@@ -1,25 +1,23 @@
 import { RelayContext } from '@components/relaysProvider';
 
-import { dateToUnix } from '@utils/getDate';
+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 destr from 'destr';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { nip19 } from 'nostr-tools';
-import { memo, useContext, useEffect, useRef } from 'react';
+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 = destr(user.metadata);
-
-  const now = useRef(new Date());
+  const userData = JSON.parse(user.metadata);
 
   const openProfilePage = () => {
     router.push(`/users/${user.id}`);
@@ -35,7 +33,6 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
         {
           kinds: [3],
           authors: [user.id],
-          since: dateToUnix(now.current),
         },
       ],
       relays,
@@ -61,12 +58,10 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
       <DropdownMenu.Trigger asChild>
         <button className="relative h-11 w-11 rounded-md">
           <Image
-            src={userData.picture}
+            src={userData.picture || DEFAULT_AVATAR}
             alt="user's avatar"
             fill={true}
             className="rounded-md object-cover"
-            placeholder="blur"
-            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
             priority
           />
         </button>

src/components/multiAccounts/inactiveAccount.tsx

@@ -1,9 +1,10 @@
-import destr from 'destr';
+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 = destr(user.metadata);
+  const userData = JSON.parse(user.metadata);
 
   const setCurrentUser = () => {
     console.log('clicked');
@@ -11,7 +12,13 @@ export const InactiveAccount = memo(function InactiveAccount({ user }: { user: a
 
   return (
     <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-md">
-      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-md object-cover" />
+      <Image
+        src={userData.picture || DEFAULT_AVATAR}
+        alt="user's avatar"
+        fill={true}
+        className="rounded-md object-cover"
+        priority
+      />
     </button>
   );
 });

src/components/multiAccounts/index.tsx

@@ -1,23 +1,41 @@
-import AccountList from '@components/columns/account/list';
+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 { getVersion } from '@tauri-apps/api/app';
+import { useAtomValue } from 'jotai';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 
-export default function AccountColumn() {
-  const [version, setVersion] = useState(null);
+export default function MultiAccounts() {
+  const activeAccount: any = useAtomValue(activeAccountAtom);
+  const [users, setUsers] = useState([]);
 
-  const getAppVersion = useCallback(async () => {
-    const appVersion = await getVersion();
-    setVersion(appVersion);
-  }, []);
+  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(() => {
-    getAppVersion().catch(console.error);
-  }, [getAppVersion]);
+    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">
@@ -28,7 +46,7 @@ export default function AccountColumn() {
         >
           <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
         </Link>
-        <AccountList />
+        <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"
@@ -40,7 +58,7 @@ export default function AccountColumn() {
         <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{version}</span>
+        <span className="text-xs font-medium text-zinc-700">v{APP_VERSION}</span>
       </div>
     </div>
   );

src/layouts/withSidebar.tsx

@@ -1,6 +1,6 @@
 import AppHeader from '@components/appHeader';
-import AccountColumn from '@components/columns/account';
 import NavigatorColumn from '@components/columns/navigator';
+import MultiAccounts from '@components/multiAccounts';
 
 export default function WithSidebarLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -13,7 +13,7 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
       </div>
       <div className="relative flex min-h-0 w-full flex-1">
         <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
-          <AccountColumn />
+          <MultiAccounts />
         </div>
         <div className="grid w-full grid-cols-4 xl:grid-cols-5">
           <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">

src/stores/constants.tsx

@@ -1 +1,2 @@
+export const APP_VERSION = '0.2.1';
 export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';