major overhaul (not finished)

src/components/user/base.tsx

@@ -4,12 +4,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { truncate } from '@utils/truncate';
 
 import { fetch } from '@tauri-apps/api/http';
-import Avatar from 'boring-avatars';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
-  const [profile, setProfile] = useState({ picture: null, display_name: null, name: null });
+  const [profile, setProfile] = useState(null);
 
   const fetchProfile = useCallback(async (id: string) => {
     const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
@@ -38,22 +37,13 @@ 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 ? (
+        {profile?.picture && (
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
-        ) : (
-          <Avatar
-            size={44}
-            name={pubkey}
-            variant="beam"
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-          />
         )}
       </div>
       <div className="flex w-full flex-1 flex-col items-start">
-        <span className="font-medium leading-tight text-zinc-200">
-          {profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
-        </span>
-        <span className="text-sm leading-tight text-zinc-400">{profile.name}</span>
+        <span className="font-medium leading-tight text-zinc-200">{profile?.display_name || profile?.name}</span>
+        <span className="text-sm leading-tight text-zinc-400">{truncate(pubkey, 16, ' .... ')}</span>
       </div>
     </div>
   );

src/components/user/extend.tsx

@@ -1,8 +1,6 @@
 import { DatabaseContext } from '@components/contexts/database';
 import { ImageWithFallback } from '@components/imageWithFallback';
 
-import { truncate } from '@utils/truncate';
-
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { fetch } from '@tauri-apps/api/http';
 import Avatar from 'boring-avatars';
@@ -14,7 +12,7 @@ dayjs.extend(relativeTime);
 
 export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: string; time: any }) {
   const { db }: any = useContext(DatabaseContext);
-  const [profile, setProfile] = useState({ picture: null, name: null, username: null });
+  const [profile, setProfile] = useState(null);
 
   const fetchProfile = useCallback(async (id: string) => {
     const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
@@ -31,10 +29,10 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
 
   const insertCacheProfile = useCallback(
     async (event) => {
-      // insert to database
-      await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
       // update state
       setProfile(JSON.parse(event.content));
+      // insert to database
+      await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
     },
     [db, pubkey]
   );
@@ -56,7 +54,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
   return (
     <div className="flex items-start gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
-        {profile.picture ? (
+        {profile?.picture ? (
           <ImageWithFallback
             src={profile.picture}
             alt={pubkey}
@@ -76,9 +74,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex w-full justify-between">
           <div className="flex items-baseline gap-2 text-sm">
-            <span className="font-bold leading-tight">
-              {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
-            </span>
+            <span className="font-bold leading-tight">{profile?.name}</span>
             <span className="leading-tight text-zinc-500">·</span>
             <span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
           </div>

src/components/user/mention.tsx

@@ -46,5 +46,5 @@ export const UserMention = memo(function UserMention({ pubkey }: { pubkey: strin
       .catch(console.error);
   }, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
 
-  return <span className="text-fuchsia-500">@{profile ? profile.name : truncate(pubkey, 16, ' .... ')}</span>;
+  return <span className="text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
 });

src/components/user/mini.tsx

@@ -9,7 +9,7 @@ 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, name: null });
+  const [profile, setProfile] = useState(null);
 
   const fetchProfile = useCallback(async (id: string) => {
     const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
@@ -26,10 +26,10 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
 
   const insertCacheProfile = useCallback(
     async (event) => {
-      // insert to database
-      await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
       // update state
       setProfile(JSON.parse(event.content));
+      // insert to database
+      await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
     },
     [db, pubkey]
   );
@@ -51,7 +51,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
   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 shrink-0 overflow-hidden rounded">
-        {profile.picture ? (
+        {profile?.picture ? (
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
         ) : (
           <Avatar
@@ -64,9 +64,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
         )}
       </div>
       <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
-        <p className="truncate leading-tight text-zinc-300">
-          {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
-        </p>
+        <p className="truncate leading-tight text-zinc-300">{profile?.name || truncate(pubkey, 16, ' .... ')}</p>
       </div>
     </div>
   );