updated navigatorbar

src/components/columns/navigator/index.tsx

@@ -2,73 +2,60 @@ import ActiveLink from '@components/activeLink';
 import Messages from '@components/columns/navigator/messages';
 
 import { PlusIcon } from '@radix-ui/react-icons';
+import useLocalStorage from '@rehooks/local-storage';
 
 export default function NavigatorColumn() {
+  const [follows] = useLocalStorage('follows');
+
   return (
-    <div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-4 pb-4">
+    <div className="flex h-full flex-col gap-4 pt-4">
-      <div className="flex flex-col gap-4">
+      {/* Newsfeed */}
-        {/* Create post
+      <div className="flex flex-col gap-1 px-2">
-          <div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
+        <div className="flex items-center justify-between px-2">
-            <div className="flex flex-col p-2">
+          <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Newsfeed</h3>
-              <div className="flex items-center justify-between">
+          <button
-                <h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
+            type="button"
-                <UserDropdownMenu pubkey={currentUser.id} />
+            className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
-              </div>
+          >
-              <span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
+            <PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
-            </div>
+          </button>
-            <div className="p-2">
-              <CreatePost />
-            </div>
-          </div>
-        */}
-        {/* Newsfeed */}
-        <div className="flex flex-col gap-1">
-          <div className="flex items-center justify-between px-2">
-            <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Newsfeed</h3>
-            <button
-              type="button"
-              className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
-            >
-              <PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
-            </button>
-          </div>
-          <div className="flex flex-col gap-1 text-zinc-400">
-            <ActiveLink
-              href={`/newsfeed/following`}
-              activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-              className="flex h-8 items-center gap-2.5 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
-            >
-              <div className="inline-flex h-5 w-5 items-center justify-center">
-                <span className="h-4 w-3.5 rounded bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
-              </div>
-              <span>following</span>
-            </ActiveLink>
-            <ActiveLink
-              href={`/newsfeed/circle`}
-              activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-              className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
-            >
-              <div className="inline-flex h-5 w-5 items-center justify-center">
-                <span className="h-4 w-3.5 rounded bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
-              </div>
-              <span>circle</span>
-            </ActiveLink>
-          </div>
         </div>
-        {/* Messages */}
+        <div className="flex flex-col gap-1 text-zinc-400">
-        <div className="flex flex-col gap-1">
+          <ActiveLink
-          <div className="flex items-center justify-between px-2">
+            href={`/newsfeed/following`}
-            <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Messages</h3>
+            activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-            <button
+            className="flex h-8 items-center gap-2.5 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
-              type="button"
+          >
-              className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
+            <div className="inline-flex h-5 w-5 items-center justify-center">
-            >
+              <span className="h-4 w-3.5 rounded bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
-              <PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
+            </div>
-            </button>
+            <span>following</span>
-          </div>
+          </ActiveLink>
-          <div className="flex flex-col">
+          <ActiveLink
-            <Messages />
+            href={`/newsfeed/circle`}
-          </div>
+            activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
+            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
+          >
+            <div className="inline-flex h-5 w-5 items-center justify-center">
+              <span className="h-4 w-3.5 rounded bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
+            </div>
+            <span>circle</span>
+          </ActiveLink>
+        </div>
+      </div>
+      {/* Messages */}
+      <div className="flex flex-col gap-1 px-2">
+        <div className="flex items-center justify-between px-2">
+          <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Messages</h3>
+          <button
+            type="button"
+            className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
+          >
+            <PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
+          </button>
+        </div>
+        <div className="flex flex-col">
+          <Messages data={follows} />
         </div>
       </div>
     </div>

src/components/columns/navigator/messages/index.tsx

@@ -1,31 +1,14 @@
-import Avatar from 'boring-avatars';
+import { UserMini } from '@components/user/mini';
-import { useState } from 'react';
-import { Config, names, uniqueNamesGenerator } from 'unique-names-generator';
 
-const config: Config = {
+import { Key } from 'react';
-  dictionaries: [names],
-};
 
-export default function Messages() {
+export default function Messages({ data }: { data: any }) {
-  const [data] = useState([...Array(15)]);
+  console.log(data);
 
   return (
     <>
-      {data.map((item, index) => (
+      {data.map((item: string, index: Key) => (
-        <div
+        <UserMini key={index} pubkey={item} />
-          key={index}
-          className="flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
-        >
-          <Avatar
-            size={20}
-            name={uniqueNamesGenerator(config).toString()}
-            variant="beam"
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-          />
-          <div>
-            <p className="text-zinc-400">{uniqueNamesGenerator(config).toString()}</p>
-          </div>
-        </div>
       ))}
     </>
   );

src/components/user/mini.tsx

@@ -0,0 +1,75 @@
+import { DatabaseContext } from '@components/contexts/database';
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { truncate } from '@utils/truncate';
+
+import Avatar from 'boring-avatars';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+
+export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
+  const { db }: any = useContext(DatabaseContext);
+  const [profile, setProfile] = useState({ picture: null, display_name: null });
+
+  const insertCacheProfile = useCallback(
+    async (event) => {
+      const metadata: any = JSON.parse(event.content);
+      // insert to database
+      await db.execute(
+        `INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`
+      );
+      // update state
+      setProfile(metadata);
+    },
+    [db, pubkey]
+  );
+
+  const getCacheProfile = useCallback(async () => {
+    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
+    return result[0];
+  }, [db, pubkey]);
+
+  useEffect(() => {
+    getCacheProfile()
+      .then((res) => {
+        if (res !== undefined) {
+          setProfile(JSON.parse(res.metadata));
+        } else {
+          fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
+            .then((response) => {
+              if (response.ok) {
+                return response.json();
+              } else if (response.status === 404) {
+                return Promise.reject('error 404');
+              } else {
+                return Promise.reject('some other error: ' + response.status);
+              }
+            })
+            .then((data) => insertCacheProfile(data))
+            .catch((error) => console.log('error is', error));
+        }
+      })
+      .catch(console.error);
+  }, [getCacheProfile, insertCacheProfile, pubkey]);
+
+  return (
+    <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
+      <div className="relative h-5 w-5">
+        {profile.picture ? (
+          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
+        ) : (
+          <Avatar
+            size={20}
+            name={pubkey}
+            variant="beam"
+            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
+          />
+        )}
+      </div>
+      <div className="flex flex-col">
+        <p className="leading-tight text-zinc-300">
+          {profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
+        </p>
+      </div>
+    </div>
+  );
+});