-
- {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
-
+ {profile?.name}
ยท
{dayjs().to(dayjs.unix(time))}
diff --git a/src/components/user/mention.tsx b/src/components/user/mention.tsx
index 7b21fb63..d3599bf6 100644
--- a/src/components/user/mention.tsx
+++ b/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
@{profile ? profile.name : truncate(pubkey, 16, ' .... ')};
+ return
@{profile?.name || truncate(pubkey, 16, ' .... ')};
});
diff --git a/src/components/user/mini.tsx b/src/components/user/mini.tsx
index b668fa32..3289cac2 100644
--- a/src/components/user/mini.tsx
+++ b/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 (
- {profile.picture ? (
+ {profile?.picture ? (
) : (
-
- {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
-
+
{profile?.name || truncate(pubkey, 16, ' .... ')}
);
diff --git a/src/pages/newsfeed/circle.tsx b/src/pages/newsfeed/circle.tsx
index c14a205a..2068d805 100644
--- a/src/pages/newsfeed/circle.tsx
+++ b/src/pages/newsfeed/circle.tsx
@@ -1,12 +1,45 @@
import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+import { Note } from '@components/note';
+
+import { initialNotesAtom } from '@stores/note';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useAtom } from 'jotai';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useMemo, useRef } from 'react';
export default function Page() {
+ const [data]: any = useAtom(initialNotesAtom);
+
+ const parentRef = useRef(null);
+ const count = useMemo(() => data.length, [data]);
+
+ const virtualizer = useVirtualizer({
+ count,
+ getScrollElement: () => parentRef.current,
+ getItemKey: (index: number) => data[index].id,
+ estimateSize: () => 500,
+ overscan: 5,
+ });
+
+ const items = virtualizer.getVirtualItems();
+
return (
-
Circle Newsfeed
+ {items.length > 0 && (
+
+
+
+ {items.map((virtualRow) => (
+
+
+
+ ))}
+
+
+
+ )}
);
}
diff --git a/src/pages/newsfeed/following.tsx b/src/pages/newsfeed/following.tsx
index 0826bbf5..ca86f7f4 100644
--- a/src/pages/newsfeed/following.tsx
+++ b/src/pages/newsfeed/following.tsx
@@ -6,13 +6,13 @@ import { Note } from '@components/note';
import FormBasic from '@components/note/form/basic';
import { Placeholder } from '@components/note/placeholder';
-import { atomHasNewerNote } from '@stores/note';
+import { hasNewerNoteAtom } from '@stores/note';
import { dateToUnix } from '@utils/getDate';
import { useAtom } from 'jotai';
import { Key, useCallback, useState } from 'react';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useMemo, useRef } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
import { Virtuoso } from 'react-virtuoso';
export default function Page() {
@@ -20,7 +20,7 @@ export default function Page() {
const [data, setData] = useState([]);
const [reload, setReload] = useState(false);
- const [hasNewerNote, setHasNewerNote] = useAtom(atomHasNewerNote);
+ const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
const now = useRef(new Date());
const limit = useRef(30);
@@ -70,7 +70,7 @@ export default function Page() {
[data]
);
- useMemo(() => {
+ useEffect(() => {
const getData = async () => {
const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
if (result.length > 0) {
diff --git a/src/stores/note.tsx b/src/stores/note.tsx
index e7987861..b3f365b5 100644
--- a/src/stores/note.tsx
+++ b/src/stores/note.tsx
@@ -1,3 +1,14 @@
import { atom } from 'jotai';
+import { atomsWithQuery } from 'jotai-tanstack-query';
+import Database from 'tauri-plugin-sql-api';
-export const atomHasNewerNote = atom(false);
+// usecase: notify user that connector has receive newer note
+export const hasNewerNoteAtom = atom(false);
+// usecase: get all notes (limit 1000)
+export const [initialNotesAtom] = atomsWithQuery(() => ({
+ queryFn: async () => {
+ const db = await Database.load('sqlite:lume.db');
+ const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT 1000`);
+ return result;
+ },
+}));