added useMetadata and refactor user component

src-tauri/prisma/migrations/20230406012222_remove_unique_from_pleb/migration.sql

@@ -0,0 +1,5 @@
+-- DropIndex
+DROP INDEX "Pleb_pubkey_idx";
+
+-- DropIndex
+DROP INDEX "Pleb_pubkey_key";

src-tauri/prisma/migrations/20230406014004_add_plebid_to_pleb/migration.sql

@@ -0,0 +1,23 @@
+/*
+  Warnings:
+
+  - Added the required column `plebId` to the `Pleb` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Pleb" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "plebId" TEXT NOT NULL,
+    "pubkey" TEXT NOT NULL,
+    "kind" INTEGER NOT NULL,
+    "metadata" TEXT NOT NULL,
+    "accountId" INTEGER NOT NULL,
+    CONSTRAINT "Pleb_accountId_fkey" FOREIGN KEY ("accountId") REFERENCES "Account" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+INSERT INTO "new_Pleb" ("accountId", "id", "kind", "metadata", "pubkey") SELECT "accountId", "id", "kind", "metadata", "pubkey" FROM "Pleb";
+DROP TABLE "Pleb";
+ALTER TABLE "new_Pleb" RENAME TO "Pleb";
+CREATE UNIQUE INDEX "Pleb_plebId_key" ON "Pleb"("plebId");
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

src-tauri/prisma/schema.prisma

@@ -27,14 +27,13 @@ model Account {
 
 model Pleb {
   id       Int    @id @default(autoincrement())
-  pubkey   String @unique
+  plebId   String @unique
+  pubkey   String
   kind     Int
   metadata String
 
   Account   Account @relation(fields: [accountId], references: [id])
   accountId Int
-
-  @@index([pubkey])
 }
 
 model Note {

src-tauri/src/main.rs

@@ -19,7 +19,7 @@ mod db;
 use db::*;
 use serde::Deserialize;
 use specta::{collect_types, Type};
-use std::sync::Arc;
+use std::{sync::Arc, vec};
 use tauri::State;
 use tauri_specta::ts;
 
@@ -44,6 +44,7 @@ struct GetPlebPubkeyData {
 
 #[derive(Deserialize, Type)]
 struct CreatePlebData {
+  pleb_id: String,
   pubkey: String,
   kind: i32,
   metadata: String,
@@ -126,13 +127,21 @@ async fn get_pleb_by_pubkey(
 #[tauri::command]
 #[specta::specta]
 async fn create_pleb(db: DbState<'_>, data: CreatePlebData) -> Result<pleb::Data, ()> {
+  let pleb_id = data.pleb_id.clone();
+  let metadata = data.metadata.clone();
+
   db.pleb()
-    .create(
+    .upsert(
-      data.pubkey,
+      pleb::pleb_id::equals(pleb_id),
-      data.kind,
+      pleb::create(
-      data.metadata,
+        data.pleb_id,
-      account::id::equals(data.account_id),
+        data.pubkey,
-      vec![],
+        data.kind,
+        data.metadata,
+        account::id::equals(data.account_id),
+        vec![],
+      ),
+      vec![pleb::metadata::set(metadata)],
     )
     .exec()
     .await

src/components/multiAccounts/activeAccount.tsx

@@ -33,9 +33,13 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
 
       for (const tag of tags) {
         const metadata: any = await fetchMetadata(tag[1], pool, relays);
-        createPleb({ pubkey: tag[1], kind: 0, metadata: metadata.content, account_id: activeAccount.id }).catch(
+        createPleb({
-          console.error
+          pleb_id: tag[1] + '-lume' + activeAccount.id.toString(),
-        );
+          pubkey: tag[1],
+          kind: 0,
+          metadata: metadata.content,
+          account_id: activeAccount.id,
+        }).catch(console.error);
       }
     },
     [pool, relays]

src/components/note/base.tsx

@@ -71,6 +71,11 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
     return;
   }, [event.content, event.eventId, event.parent_id]);
 
+  const openUserPage = (e) => {
+    e.stopPropagation();
+    router.push(`/users/${event.pubkey}`);
+  };
+
   const openThread = (e) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
@@ -87,7 +92,9 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
     >
       <>{getParent}</>
       <div className="relative z-10 flex flex-col">
-        <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
+        <div onClick={(e) => openUserPage(e)}>
+          <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
+        </div>
         <div className="-mt-5 pl-[52px]">
           <div className="flex flex-col gap-2">
             <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">

src/components/user/base.tsx

@@ -1,22 +1,14 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
-import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { Author } from 'nostr-relaypool';
+import { memo } from 'react';
-import { memo, useContext, useEffect, useState } from 'react';
 
 export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const profile = useMetadata(pubkey);
-
-  const [profile, setProfile] = useState(null);
-
-  useEffect(() => {
-    const user = new Author(pool, relays, pubkey);
-    user.metaData((res) => setProfile(JSON.parse(res.content)), 0);
-  }, [pool, relays, pubkey]);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/extend.tsx

@@ -2,63 +2,21 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { fetch } from '@tauri-apps/api/http';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useRouter } from 'next/router';
-import { useCallback, useEffect, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
 export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) => {
-  const router = useRouter();
+  const profile = useMetadata(pubkey);
-  const [profile, setProfile] = useState(null);
-
-  const openUserPage = (e) => {
-    e.stopPropagation();
-    router.push(`/users/${pubkey}`);
-  };
-
-  const fetchMetadata = useCallback(async (pubkey: string) => {
-    const res = await fetch(`https://rbr.bio/${pubkey}/metadata.json`, {
-      method: 'GET',
-      timeout: 5,
-    });
-    return res.data;
-  }, []);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        } else {
-          fetchMetadata(pubkey).then((res: any) => {
-            if (res.content) {
-              const metadata = JSON.parse(res.content);
-              setProfile(metadata);
-            }
-          });
-        }
-      })
-      .catch(console.error);
-  }, [fetchMetadata, pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
 
   return (
     <div className="group flex items-start gap-2">
-      <div
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1">
-        onClick={(e) => openUserPage(e)}
-        className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1"
-      >
         <ImageWithFallback
           src={profile?.picture || DEFAULT_AVATAR}
           alt={pubkey}
@@ -69,7 +27,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
       <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 onClick={(e) => openUserPage(e)} className="font-bold leading-tight group-hover:underline">
+            <span className="font-bold leading-tight group-hover:underline">
               {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
             </span>
             <span className="leading-tight text-zinc-500">·</span>

src/components/user/follow.tsx

@@ -2,28 +2,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { useCallback, useEffect, useState } from 'react';
-
 export const UserFollow = ({ pubkey }: { pubkey: string }) => {
-  const [profile, setProfile] = useState(null);
+  const profile = useMetadata(pubkey);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        }
-      })
-      .catch(console.error);
-  }, [pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/large.tsx

@@ -2,33 +2,17 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useCallback, useEffect, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
 export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) => {
-  const [profile, setProfile] = useState(null);
+  const profile = useMetadata(pubkey);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        }
-      })
-      .catch(console.error);
-  }, [pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/mention.tsx

@@ -1,41 +1,10 @@
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { fetch } from '@tauri-apps/api/http';
+import { memo } from 'react';
-import { memo, useCallback, useEffect, useState } from 'react';
 
 export const UserMention = memo(function UserMention({ pubkey }: { pubkey: string }) {
-  const [profile, setProfile] = useState(null);
+  const profile = useMetadata(pubkey);
-
-  const fetchMetadata = useCallback(async (pubkey: string) => {
-    const res = await fetch(`https://rbr.bio/${pubkey}/metadata.json`, {
-      method: 'GET',
-      timeout: 5,
-    });
-    return res.data;
-  }, []);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        } else {
-          fetchMetadata(pubkey).then((res: any) => {
-            if (res.content) {
-              const metadata = JSON.parse(res.content);
-              setProfile(metadata);
-            }
-          });
-        }
-      })
-      .catch(console.error);
-  }, [fetchMetadata, pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
 
   return <span className="cursor-pointer text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
 });

src/components/user/mini.tsx

@@ -2,48 +2,27 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { useCallback, useEffect, useState } from 'react';
-
 export const UserMini = ({ pubkey }: { pubkey: string }) => {
-  const [profile, setProfile] = useState(null);
+  const profile = useMetadata(pubkey);
 
-  const getCachedMetadata = useCallback(async () => {
+  return (
-    const { getPlebByPubkey } = await import('@utils/bindings');
+    <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">
-    getPlebByPubkey({ pubkey: pubkey })
+      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
-      .then((res) => {
+        <ImageWithFallback
-        if (res) {
+          src={profile?.picture || DEFAULT_AVATAR}
-          const metadata = JSON.parse(res.metadata);
+          alt={pubkey}
-          setProfile(metadata);
+          fill={true}
-        }
+          className="rounded object-cover"
-      })
+        />
-      .catch(console.error);
-  }, [pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
-
-  if (profile) {
-    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">
-          <ImageWithFallback
-            src={profile?.picture || DEFAULT_AVATAR}
-            alt={pubkey}
-            fill={true}
-            className="rounded object-cover"
-          />
-        </div>
-        <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
-          <p className="truncate leading-tight text-zinc-300">
-            {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
-          </p>
-        </div>
       </div>
-    );
+      <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
-  } else {
+        <p className="truncate leading-tight text-zinc-300">
-    return <></>;
+          {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
-  }
+        </p>
+      </div>
+    </div>
+  );
 };

src/pages/newsfeed/following.tsx

@@ -54,8 +54,7 @@ export default function Page() {
       limit: limit.current,
       offset: offset.current,
     });
-    const filteredResult = filteredData(result);
+    setData((data) => [...data, ...result]);
-    setData((data) => [...data, ...filteredResult]);
   }, []);
 
   const loadMore = useCallback(async () => {
@@ -67,8 +66,7 @@ export default function Page() {
       limit: limit.current,
       offset: offset.current,
     });
-    const filteredResult = filteredData(result);
+    setData((data) => [...data, ...result]);
-    setData((data) => [...data, ...filteredResult]);
   }, []);
 
   const loadLatest = useCallback(async () => {
@@ -76,8 +74,7 @@ export default function Page() {
     // next query
     const result: any = await getLatestNotes({ date: dateToUnix(now.current) });
     // update data
-    const filteredResult = filteredData(result);
+    setData((data) => [...data, ...result]);
-    setData((data) => [...data, ...filteredResult]);
     // hide newer trigger
     setHasNewerNote(false);
     // scroll to top
@@ -103,7 +100,7 @@ export default function Page() {
       )}
       <Virtuoso
         ref={virtuosoRef}
-        data={data}
+        data={filteredData(data)}
         itemContent={itemContent}
         computeItemKey={computeItemKey}
         components={COMPONENTS}

src/pages/onboarding/create/step-2.tsx

@@ -85,9 +85,13 @@ export default function Page() {
 
     for (const follow of follows) {
       const metadata: any = await fetchMetadata(follow, pool, relays);
-      createPleb({ pubkey: follow, kind: 0, metadata: metadata.content, account_id: parseInt(id) }).catch(
+      createPleb({
-        console.error
+        pleb_id: follow + '-lume' + id,
-      );
+        pubkey: follow,
+        kind: 0,
+        metadata: metadata.content,
+        account_id: parseInt(id),
+      }).catch(console.error);
     }
 
     // build event

src/pages/onboarding/login/step-2.tsx

@@ -50,9 +50,13 @@ export default function Page() {
       if (profile?.id !== null) {
         for (const tag of tags) {
           const metadata: any = await fetchMetadata(tag[1], pool, relays);
-          createPleb({ pubkey: tag[1], kind: 0, metadata: metadata.content, account_id: profile.id }).catch(
+          createPleb({
-            console.error
+            pleb_id: tag[1] + '-lume' + profile.id.toString(),
-          );
+            pubkey: tag[1],
+            kind: 0,
+            metadata: metadata.content,
+            account_id: profile.id,
+          }).catch(console.error);
         }
       }
     },

src/utils/bindings.ts

@@ -44,11 +44,20 @@ export function getNoteById(data: GetNoteByIdData) {
   return invoke<Note | null>('get_note_by_id', { data });
 }
 
-export type CreatePlebData = { pubkey: string; kind: number; metadata: string; account_id: number };
+export type CreateNoteData = {
-export type Account = { id: number; pubkey: string; privkey: string; active: boolean; metadata: string };
+  event_id: string;
-export type GetLatestNoteData = { date: number };
+  pubkey: string;
-export type Pleb = { id: number; pubkey: string; kind: number; metadata: string; accountId: number };
+  kind: number;
-export type GetPlebPubkeyData = { pubkey: string };
+  tags: string;
+  content: string;
+  parent_id: string;
+  parent_comment_id: string;
+  created_at: number;
+  account_id: number;
+};
+export type CreatePlebData = { pleb_id: string; pubkey: string; kind: number; metadata: string; account_id: number };
+export type GetNoteByIdData = { event_id: string };
+export type Pleb = { id: number; plebId: string; pubkey: string; kind: number; metadata: string; accountId: number };
 export type Note = {
   id: number;
   eventId: string;
@@ -61,18 +70,9 @@ export type Note = {
   createdAt: number;
   accountId: number;
 };
+export type Account = { id: number; pubkey: string; privkey: string; active: boolean; metadata: string };
+export type GetPlebPubkeyData = { pubkey: string };
 export type GetPlebData = { account_id: number };
 export type CreateAccountData = { pubkey: string; privkey: string; metadata: string };
-export type CreateNoteData = {
+export type GetLatestNoteData = { date: number };
-  event_id: string;
-  pubkey: string;
-  kind: number;
-  tags: string;
-  content: string;
-  parent_id: string;
-  parent_comment_id: string;
-  created_at: number;
-  account_id: number;
-};
-export type GetNoteByIdData = { event_id: string };
 export type GetNoteData = { date: number; limit: number; offset: number };

src/utils/metadata.tsx

@@ -1,6 +1,39 @@
+import { RelayContext } from '@components/relaysProvider';
+
 import { Author } from 'nostr-relaypool';
+import { useCallback, useContext, useEffect, useState } from 'react';
 
 export const fetchMetadata = (pubkey: string, pool: any, relays: any) => {
   const author = new Author(pool, relays, pubkey);
   return new Promise((resolve) => author.metaData(resolve, 0));
 };
+
+export const useMetadata = (pubkey) => {
+  const [pool, relays]: any = useContext(RelayContext);
+  const [profile, setProfile] = useState(null);
+
+  const getCachedMetadata = useCallback(async () => {
+    const { getPlebByPubkey } = await import('@utils/bindings');
+    getPlebByPubkey({ pubkey: pubkey })
+      .then((res) => {
+        if (res) {
+          const metadata = JSON.parse(res.metadata);
+          setProfile(metadata);
+        } else {
+          fetchMetadata(pubkey, pool, relays).then((res: any) => {
+            if (res.content) {
+              const metadata = JSON.parse(res.content);
+              setProfile(metadata);
+            }
+          });
+        }
+      })
+      .catch(console.error);
+  }, [pool, relays, pubkey]);
+
+  useEffect(() => {
+    getCachedMetadata().catch(console.error);
+  }, [getCachedMetadata]);
+
+  return profile;
+};