updated following page and note connector

2024-09-14 09:13:31 +00:00 · 2023-03-16 14:54:31 +07:00 · 2023-03-16 14:54:31 +07:00 · 9d96e3b5fd
commit 9d96e3b5fd
parent 123d22d5cf
13 changed files with 99 additions and 181 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -12,6 +12,7 @@
    "^@layouts/(.*)$",
    "^@pages/(.*)$",
    "^@components/(.*)$",
+    "^@stores/(.*)$",
    "^@utils/(.*)$",
    "<THIRD_PARTY_MODULES>",
    "^[./]"
--- a/package.json
+++ b/package.json
@ -24,6 +24,7 @@
    "bitcoin-address-validation": "^2.2.1",
    "boring-avatars": "^1.7.0",
    "framer-motion": "^9.1.7",
+    "jotai": "^2.0.3",
    "moment": "^2.29.4",
    "next": "^13.2.4",
    "next-remove-imports": "^1.0.10",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -29,6 +29,7 @@ specifiers:
  eslint-plugin-react-hooks: ^4.6.0
  framer-motion: ^9.1.7
  husky: ^8.0.3
+  jotai: ^2.0.3
  lint-staged: ^13.2.0
  moment: ^2.29.4
  next: ^13.2.4
@ -65,6 +66,7 @@ dependencies:
  bitcoin-address-validation: 2.2.1
  boring-avatars: 1.7.0
  framer-motion: 9.1.7_biqbaboplfbrettd7655fr4n2y
+  jotai: 2.0.3_react@18.2.0
  moment: 2.29.4
  next: 13.2.4_biqbaboplfbrettd7655fr4n2y
  next-remove-imports: 1.0.10
@ -1160,9 +1162,9 @@ packages:
      - encoding
    dev: false

-  /@supabase/gotrue-js/2.13.0:
+  /@supabase/gotrue-js/2.14.0:
    resolution:
-      { integrity: sha512-NFBHuHNUn94mP/zOQzsp1k2PtwV55Vhf6ZbTzmMpiUvIRlXhVteZcdfdoAQDIBrdxOdL7F54NFp1gIupPZka6g== }
+      { integrity: sha512-FI6q4n4iZ2zrEt1BnBYYe8HQ1k9t5CpBcDQxVXa8PeMwygXpzR0AcdfAsZ5Yba42C8YsBA132ti01f+RINS3UQ== }
    dependencies:
      cross-fetch: 3.1.5
    transitivePeerDependencies:
@ -1178,9 +1180,9 @@ packages:
      - encoding
    dev: false

-  /@supabase/realtime-js/2.6.0:
+  /@supabase/realtime-js/2.7.0:
    resolution:
-      { integrity: sha512-tOVulMobhpxyDuu8VIImpL8FXmZOKsGNOSyS5ihJdj2xYmPPvYG+D2J51Ewfl+MFF65tweiB6p9N9bNIW1cDNA== }
+      { integrity: sha512-wg35ofiCpIemycmPZvvZk3jM9c9z8VvnPUBbSP9ZZN2vSOEJ9C7DZuLiiZMXsyNUzjVgIn62A1tN99T5+9O8Aw== }
    dependencies:
      '@types/phoenix': 1.5.5
      websocket: 1.0.34
@ -1202,9 +1204,9 @@ packages:
      { integrity: sha512-/vkpPxGDyLfTASWnVHL8vdgQxn9SX/Cs+BotTxFhLSIeGFSazC6rpQSMKu6RqzO7gjBD1KqTv0h3auWfClWs+Q== }
    dependencies:
      '@supabase/functions-js': 2.1.0
-      '@supabase/gotrue-js': 2.13.0
+      '@supabase/gotrue-js': 2.14.0
      '@supabase/postgrest-js': 1.4.1
-      '@supabase/realtime-js': 2.6.0
+      '@supabase/realtime-js': 2.7.0
      '@supabase/storage-js': 2.3.1
      cross-fetch: 3.1.5
    transitivePeerDependencies:
@ -2004,7 +2006,7 @@ packages:
    hasBin: true
    dependencies:
      caniuse-lite: 1.0.30001466
-      electron-to-chromium: 1.4.330
+      electron-to-chromium: 1.4.331
      node-releases: 2.0.10
      update-browserslist-db: 1.0.10_browserslist@4.21.5

@ -2414,9 +2416,9 @@ packages:
      { integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== }
    dev: true

-  /electron-to-chromium/1.4.330:
+  /electron-to-chromium/1.4.331:
    resolution:
-      { integrity: sha512-PqyefhybrVdjAJ45HaPLtuVaehiSw7C3ya0aad+rvmV53IVyXmYRk3pwIOb2TxTDTnmgQdn46NjMMaysx79/6Q== }
+      { integrity: sha512-tdtr9y9oJl8VDiS+HeB6e/JDJqdDGjIk3yRfEMHm5rDnWQ/D5SbafybAayInxolbfbH6pouV5g7ZUAwE/WVtHw== }

  /emoji-regex/8.0.0:
    resolution:
@ -3755,6 +3757,19 @@ packages:
      { integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw== }
    dev: true

+  /jotai/2.0.3_react@18.2.0:
+    resolution:
+      { integrity: sha512-MMjhSPAL3RoeZD9WbObufRT2quThEAEknHHridf2ma8Ml7ZVQmUiHk0ssdbR3F0h3kcwhYqSGJ59OjhPge7RRg== }
+    engines: { node: '>=12.20.0' }
+    peerDependencies:
+      react: '>=17.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+    dev: false
+
  /js-sdsl/4.3.0:
    resolution:
      { integrity: sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ== }
--- a/src/components/appHeader/index.tsx
+++ b/src/components/appHeader/index.tsx
@ -1,3 +1,5 @@
+import { NoteConnector } from '@components/note/connector';
+
 import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
 import { useRouter } from 'next/router';

@ -15,7 +17,7 @@ export default function AppHeader() {
  return (
    <div data-tauri-drag-region className="flex h-full w-full items-center">
      <div className="relative w-[68px] shrink-0">{/* macos traffic lights */}</div>
-      <div className="px-2">
+      <div className="flex w-full flex-1 items-center justify-between px-2">
        <div className="flex h-full gap-2">
          <button onClick={() => goBack()} className="group rounded-md p-1 hover:bg-zinc-900">
            <ArrowLeftIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
@ -24,6 +26,9 @@ export default function AppHeader() {
            <ArrowRightIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
          </button>
        </div>
+        <div>
+          <NoteConnector />
+        </div>
      </div>
    </div>
  );
--- a/src/components/note/atoms/user.tsx
+++ b/src/components/note/atoms/user.tsx
@ -1,83 +0,0 @@
-import { DatabaseContext } from '@components/contexts/database';
-import { ImageWithFallback } from '@components/imageWithFallback';
-
-import { truncate } from '@utils/truncate';
-
-import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import Avatar from 'boring-avatars';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
-import Moment from 'react-moment';
-
-export const User = memo(function User({ pubkey, time }: { pubkey: string; time: any }) {
-  const { db }: any = useContext(DatabaseContext);
-  const [profile, setProfile] = useState({ picture: null, name: null, username: null });
-
-  const insertCacheProfile = useCallback(
-    async (event) => {
-      const metadata: any = JSON.parse(event.content);
-
-      await db.execute(
-        `INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`
-      );
-      setProfile(metadata);
-    },
-    [db, pubkey]
-  );
-
-  const getCacheProfile = useCallback(async () => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result;
-  }, [db, pubkey]);
-
-  useEffect(() => {
-    getCacheProfile()
-      .then((res) => {
-        if (res[0] !== undefined) {
-          setProfile(JSON.parse(res[0].metadata));
-        } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
-            res.json().then((res) => {
-              // update state
-              setProfile(JSON.parse(res.content));
-              // save profile to database
-              insertCacheProfile(res);
-            })
-          );
-        }
-      })
-      .catch(console.error);
-  }, [getCacheProfile, insertCacheProfile, pubkey]);
-
-  return (
-    <div className="relative flex items-start gap-4">
-      <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
-        {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 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="leading-tight text-zinc-500">·</span>
-            <Moment fromNow unix className="text-zinc-500">
-              {time}
-            </Moment>
-          </div>
-          <div>
-            <DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});
--- a/src/components/note/connector.tsx
+++ b/src/components/note/connector.tsx
@ -1,40 +1,28 @@
 import { DatabaseContext } from '@components/contexts/database';
 import { RelayContext } from '@components/contexts/relay';

+import { atomHasNewerNote } from '@stores/note';
+
 import { dateToUnix, hoursAgo } from '@utils/getDate';

-import { ReloadIcon } from '@radix-ui/react-icons';
+import { SliderIcon } from '@radix-ui/react-icons';
 import { useLocalStorage } from '@rehooks/local-storage';
-import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useSetAtom } from 'jotai';
+import { memo, useCallback, useContext, useEffect, useRef } from 'react';

-export const NoteConnector = memo(function NoteConnector({
-  setParentReload,
-  setHasNewNote,
-  currentDate,
-}: {
-  setParentReload: any;
-  setHasNewNote: any;
-  currentDate: any;
-}) {
+export const NoteConnector = memo(function NoteConnector() {
  const { db }: any = useContext(DatabaseContext);
  const relayPool: any = useContext(RelayContext);

  const [follows]: any = useLocalStorage('follows');
  const [relays]: any = useLocalStorage('relays');

-  const [reload, setReload] = useState(false);
-  const timeout = useRef(null);
-
-  const reloadNewsfeed = () => {
-    setParentReload(true);
-    setReload(true);
-    timeout.current = setTimeout(() => {
-      setReload(false);
-    }, 2000);
-  };
+  const setHasNewerNote = useSetAtom(atomHasNewerNote);
+  const now = useRef(new Date());

  const insertDB = useCallback(
    async (event: any) => {
+      // insert to local database
      await db.execute(
        `INSERT OR IGNORE INTO
          cache_notes
@ -45,7 +33,7 @@ export const NoteConnector = memo(function NoteConnector({
              "${event.created_at}",
              "${event.kind}",
              '${JSON.stringify(event.tags)}',
-              "${event.content}"
+              '${JSON.stringify(event.content)}'
            );`
      );
    },
@ -58,54 +46,34 @@ export const NoteConnector = memo(function NoteConnector({
        {
          kinds: [1],
          authors: follows,
-          since: dateToUnix(hoursAgo(12, currentDate)),
+          since: dateToUnix(hoursAgo(12, now.current)),
        },
      ],
      relays,
      (event: any) => {
-        // show trigger update newer event
-        if (event.created_at > dateToUnix(currentDate)) {
-          setHasNewNote(true);
-        }
        // insert event to local database
        insertDB(event).catch(console.error);
-      },
-      undefined,
-      (events: any, relayURL: any) => {
-        console.log(events, relayURL);
+        // ask user load newer note
+        if (event.created_at > dateToUnix(now.current)) {
+          setHasNewerNote(true);
+        }
      }
    );
-  }, [relayPool, follows, currentDate, relays, insertDB, setHasNewNote]);
+  }, [relayPool, follows, relays, insertDB, setHasNewerNote]);

  useEffect(() => {
    fetchEvent();
-
-    return () => {
-      clearTimeout(timeout.current);
-    };
  }, [fetchEvent]);

  return (
-    <div className="relative flex h-12 items-center justify-between border-b border-zinc-800 px-6 shadow-input">
-      <div>
-        <h3 className="text-sm font-semibold text-zinc-500"># following</h3>
+    <>
+      <div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 hover:bg-zinc-900">
+        <span className="relative flex h-1.5 w-1.5">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
+        </span>
+        <p className="text-xs font-medium text-zinc-500">Relays</p>
      </div>
-      <div className="flex items-center gap-2">
-        <button
-          onClick={() => reloadNewsfeed()}
-          className={`${reload ? 'animate-spin' : ''} rounded-full p-1 hover:bg-zinc-800`}
-        >
-          <ReloadIcon className="h-3.5 w-3.5 text-zinc-500" />
-        </button>
-        <div className="inline-flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-800 px-2.5 py-1">
-          {/* #TODO: get user network status */}
-          <span className="relative flex h-1.5 w-1.5">
-            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
-            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
-          </span>
-          <p className="text-xs font-medium text-zinc-500">Online</p>
-        </div>
-      </div>
-    </div>
+    </>
  );
 });
--- a/src/components/note/content/index.tsx
+++ b/src/components/note/content/index.tsx
@ -14,7 +14,7 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
 export const Content = memo(function Content({ data }: { data: any }) {
  const [preview, setPreview] = useState({});

-  const content = useRef(data.content);
+  const content = useRef(JSON.parse(data.content));
  const urls = useMemo(
    () =>
      content.current.match(
--- a/src/components/note/placeholder.tsx
+++ b/src/components/note/placeholder.tsx
@ -2,7 +2,7 @@ import { memo } from 'react';

 export const Placeholder = memo(function Placeholder() {
  return (
-    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-6">
+    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-3">
      <div className="flex items-start gap-4">
        <div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
        <div className="flex w-full flex-1 items-start justify-between">
--- a/src/components/user/mini.tsx
+++ b/src/components/user/mini.tsx
@ -8,7 +8,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, display_name: null });
+  const [profile, setProfile] = useState({ picture: null, name: null });

  const insertCacheProfile = useCallback(
    async (event) => {
@ -67,7 +67,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.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
+          {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
        </p>
      </div>
    </div>
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -16,7 +16,7 @@ export default function Page() {
    if (currentUser) {
      timer.current = setTimeout(() => {
        setLoading(false);
-        router.push('/newsfeed/circle');
+        router.push('/newsfeed/following');
      }, 1000);
    } else {
      timer.current = setTimeout(() => {
--- a/src/pages/newsfeed/following.tsx
+++ b/src/pages/newsfeed/following.tsx
@ -2,16 +2,16 @@ import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';

 import { DatabaseContext } from '@components/contexts/database';
-import { NoteConnector } from '@components/note/connector';
 import NoteForm from '@components/note/form';
 import { Placeholder } from '@components/note/placeholder';
 import { Repost } from '@components/note/repost';
 import { Single } from '@components/note/single';

+import { atomHasNewerNote } from '@stores/note';
+
 import { dateToUnix } from '@utils/getDate';

-import { ArrowUpIcon } from '@radix-ui/react-icons';
-import { writeStorage } from '@rehooks/local-storage';
+import { useAtomValue } from 'jotai';
 import { useCallback, useState } from 'react';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
@ -20,8 +20,8 @@ export default function Page() {
  const { db }: any = useContext(DatabaseContext);

  const [data, setData] = useState([]);
-  const [parentReload, setParentReload] = useState(false);
-  const [hasNewNote, setHasNewNote] = useState(false);
+  const [reload, setReload] = useState(false);
+  const hasNewerNote = useAtomValue(atomHasNewerNote);

  const now = useRef(new Date());
  const limit = useRef(30);
@ -49,7 +49,6 @@ export default function Page() {
        LIMIT ${limit.current}`
    );
    setData((data) => [...result, ...data]);
-    setHasNewNote(false);
  }, [db]);

  const ItemContent = useCallback(
@ -66,22 +65,6 @@ export default function Page() {
    [data]
  );

-  useEffect(() => {
-    const getData = async () => {
-      const result = await db.select(
-        `SELECT * FROM cache_notes WHERE created_at <= ${dateToUnix(now.current)} ORDER BY created_at DESC LIMIT ${
-          limit.current
-        }`
-      );
-      if (result) {
-        setData(result);
-        writeStorage('settings', new Date());
-      }
-    };
-
-    getData().catch(console.error);
-  }, [db, parentReload]);
-
  const computeItemKey = useCallback(
    (index: string | number) => {
      return data[index].id;
@ -89,16 +72,40 @@ export default function Page() {
    [data]
  );

+  useEffect(() => {
+    const getData = async () => {
+      const result = await db.select(
+        `SELECT * FROM cache_notes WHERE created_at <= ${dateToUnix(now.current)} ORDER BY created_at DESC LIMIT ${
+          limit.current
+        }`
+      );
+      if (result.length > 0) {
+        setData(result);
+      } else {
+        setReload(true);
+      }
+    };
+
+    if (reload === false) {
+      getData().catch(console.error);
+    } else {
+      const timer = setTimeout(() => {
+        getData().catch(console.error);
+      }, 8000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [db, reload]);
+
  return (
    <div className="relative h-full w-full">
-      {hasNewNote && (
+      {hasNewerNote && (
        <div className="absolute top-16 left-1/2 z-50 -translate-x-1/2 transform">
          <button
            onClick={() => loadNewest()}
-            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 pl-3 pr-3.5 text-sm shadow-lg active:translate-y-1"
+            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 px-3 text-sm shadow-lg active:translate-y-1"
          >
-            <ArrowUpIcon className="h-4 w-4" />
-            <span className="drop-shadow-md">Load newest</span>
+            <span className="text-white drop-shadow">Load newest</span>
          </button>
        </div>
      )}
@ -118,7 +125,7 @@ export default function Page() {
        endReached={loadMore}
        overscan={800}
        increaseViewportBy={1000}
-        className="relative h-full w-full"
+        className="scrollbar-hide relative h-full w-full"
        style={{
          contain: 'strict',
        }}
--- a/src/stores/note.tsx
+++ b/src/stores/note.tsx
@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const atomHasNewerNote = atom(false);
--- a/tsconfig.json
+++ b/tsconfig.json
@ -5,6 +5,7 @@
      "@pages/*": ["src/pages/*"],
      "@layouts/*": ["src/layouts/*"],
      "@components/*": ["src/components/*"],
+      "@stores/*": ["src/stores/*"],
      "@utils/*": ["src/utils/*"],
      "@assets/*": ["src/assets/*"]
    },