updated account column

src/components/columns/account/active.tsx

@@ -0,0 +1,59 @@
+import { DatabaseContext } from '@components/contexts/database';
+import { RelayContext } from '@components/contexts/relay';
+
+import useLocalStorage from '@rehooks/local-storage';
+import Image from 'next/image';
+import { memo, useCallback, useContext, useMemo } from 'react';
+
+export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }) {
+  const userData = JSON.parse(user.metadata);
+
+  const { db }: any = useContext(DatabaseContext);
+  const relayPool: any = useContext(RelayContext);
+
+  const [relays]: any = useLocalStorage('relays');
+  const [currentUser]: any = useLocalStorage('current-user');
+
+  // save follows to database
+  const insertFollows = useCallback(
+    async (follows) => {
+      follows.forEach(async (item) => {
+        if (item) {
+          // insert to database
+          await db.execute(
+            `INSERT OR IGNORE INTO follows (pubkey, account, kind) VALUES ("${item[1]}", "${currentUser.id}", "0")`
+          );
+        }
+      });
+    },
+    [db, currentUser.id]
+  );
+
+  useMemo(() => {
+    relayPool.subscribe(
+      [
+        {
+          kinds: [3],
+          authors: [currentUser.id],
+        },
+      ],
+      relays,
+      (event: any) => {
+        insertFollows(event.tags);
+      },
+      undefined,
+      (events, relayURL) => {
+        console.log(events, relayURL);
+      },
+      {
+        unsubscribeOnEose: true,
+      }
+    );
+  }, [currentUser.id, insertFollows, relayPool, relays]);
+
+  return (
+    <div className="relative h-11 w-11 shrink rounded-lg ring-1 ring-fuchsia-500 ring-offset-2 ring-offset-black">
+      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
+    </div>
+  );
+});

src/components/columns/account/inactive.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { memo } from 'react';
 
-export const Account = memo(function Account({ user }: { user: any }) {
+export const InactiveAccount = memo(function InactiveAccount({ user }: { user: any }) {
   const userData = JSON.parse(user.metadata);
 
   const setCurrentUser = () => {

src/components/columns/account/index.tsx

@@ -1,32 +1,22 @@
-import { Account } from '@components/columns/account/account';
+import AccountList from '@components/columns/account/list';
 
 import LumeSymbol from '@assets/icons/Lume';
 import { PlusIcon } from '@radix-ui/react-icons';
 import { getVersion } from '@tauri-apps/api/app';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
-import Database from 'tauri-plugin-sql-api';
 
 export default function AccountColumn() {
-  const [users, setUsers] = useState([]);
   const [version, setVersion] = useState(null);
 
-  const getAccounts = useCallback(async () => {
-    const db = await Database.load('sqlite:lume.db');
-    const result: any = await db.select('SELECT * FROM accounts');
-
-    setUsers(result);
-  }, []);
-
   const getAppVersion = useCallback(async () => {
     const appVersion = await getVersion();
     setVersion(appVersion);
   }, []);
 
   useEffect(() => {
-    getAccounts().catch(console.error);
     getAppVersion().catch(console.error);
-  }, [getAccounts, getAppVersion]);
+  }, [getAppVersion]);
 
   return (
     <div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
@@ -37,9 +27,7 @@ export default function AccountColumn() {
         >
           <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
         </Link>
-        {users.map((user, index) => (
+        <AccountList />
-          <Account key={index} user={user} />
-        ))}
         <Link
           href="/onboarding"
           className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"

src/components/columns/account/list.tsx

@@ -0,0 +1,35 @@
+import { ActiveAccount } from '@components/columns/account/active';
+import { InactiveAccount } from '@components/columns/account/inactive';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { useCallback, useEffect, useState } from 'react';
+import Database from 'tauri-plugin-sql-api';
+
+export default function AccountList() {
+  const [currentUser]: any = useLocalStorage('current-user');
+  const [users, setUsers] = useState([]);
+
+  const renderAccount = useCallback(
+    (user: { id: string }) => {
+      if (user.id === currentUser.id) {
+        return <ActiveAccount user={user} />;
+      } else {
+        return <InactiveAccount user={user} />;
+      }
+    },
+    [currentUser.id]
+  );
+
+  const getAccounts = useCallback(async () => {
+    const db = await Database.load('sqlite:lume.db');
+    const result: any = await db.select('SELECT * FROM accounts');
+
+    setUsers(result);
+  }, []);
+
+  useEffect(() => {
+    getAccounts().catch(console.error);
+  }, [getAccounts]);
+
+  return <>{users.map((user) => renderAccount(user))}</>;
+}