From 09c7ccc02348d53819fcd4f23b7361f9be5b326e Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Thu, 2 Mar 2023 15:16:23 +0700
Subject: [PATCH] added reload button for newsfeed

---
 src/components/note/connector.tsx | 16 ++++++++++------
 src/components/note/repost.tsx    | 31 ++++++++-----------------------
 src/components/note/single.tsx    | 24 +++---------------------
 src/pages/feed/following.tsx      | 21 +++++++++++----------
 4 files changed, 32 insertions(+), 60 deletions(-)

diff --git a/src/components/note/connector.tsx b/src/components/note/connector.tsx
index df09466f..23a37e30 100644
--- a/src/components/note/connector.tsx
+++ b/src/components/note/connector.tsx
@@ -4,10 +4,11 @@ import { RelayContext } from '@components/contexts/relay';
 
 import { dateToUnix, hoursAgo } from '@utils/getDate';
 
+import { ReloadIcon } from '@radix-ui/react-icons';
 import { useLocalStorage } from '@rehooks/local-storage';
 import { memo, useCallback, useContext, useRef } from 'react';
 
-export const NoteConnector = memo(function NoteConnector() {
+export const NoteConnector = memo(function NoteConnector({ setReload }: { setReload: any }) {
   const { db }: any = useContext(DatabaseContext);
   const relayPool: any = useContext(RelayContext);
 
@@ -51,13 +52,16 @@ export const NoteConnector = memo(function NoteConnector() {
       <div>
         <h3 className="text-sm font-semibold text-zinc-500"># following</h3>
       </div>
-      <div>
-        <div className="inline-flex items-center gap-2">
-          <span className="relative flex h-3 w-3">
+      <div className="flex items-center gap-2">
+        <button onClick={() => setReload(true)} className="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">
+          <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-3 w-3 rounded-full bg-green-500"></span>
+            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
           </span>
-          <p className="text-sm font-medium text-zinc-500">Online</p>
+          <p className="text-xs font-medium text-zinc-500">Online</p>
         </div>
       </div>
     </div>
diff --git a/src/components/note/repost.tsx b/src/components/note/repost.tsx
index 8dbb4aec..4bc3dcea 100644
--- a/src/components/note/repost.tsx
+++ b/src/components/note/repost.tsx
@@ -4,17 +4,10 @@ import { UserRepost } from '@components/note/atoms/userRepost';
 import { Content } from '@components/note/content';
 import { Placeholder } from '@components/note/placeholder';
 
-import * as Dialog from '@radix-ui/react-dialog';
 import { LoopIcon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
-import dynamic from 'next/dynamic';
 import { memo, useContext, useState } from 'react';
 
-const Modal = dynamic(() => import('@components/note/modal'), {
-  ssr: false,
-  loading: () => <></>,
-});
-
 export const Repost = memo(function Repost({ root, user }: { root: any; user: string }) {
   const relayPool: any = useContext(RelayContext);
   const [relays]: any = useLocalStorage('relays');
@@ -40,23 +33,15 @@ export const Repost = memo(function Repost({ root, user }: { root: any; user: st
 
   if (events !== null && Object.keys(events).length > 0) {
     return (
-      <Dialog.Root>
-        <Dialog.Trigger>
-          <div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
-            <div className="flex items-center gap-1 pl-8 text-sm">
-              <LoopIcon className="h-4 w-4 text-zinc-400" />
-              <div className="ml-2">
-                <UserRepost pubkey={user} />
-              </div>
-            </div>
-            {events[0].content && <Content data={events[0]} />}
+      <div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
+        <div className="flex items-center gap-1 pl-8 text-sm">
+          <LoopIcon className="h-4 w-4 text-zinc-400" />
+          <div className="ml-2">
+            <UserRepost pubkey={user} />
           </div>
-          <Dialog.Portal>
-            <Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
-            <Dialog.Content className="fixed inset-0 overflow-y-auto">{events[0].content && <Modal event={events[0]} />}</Dialog.Content>
-          </Dialog.Portal>
-        </Dialog.Trigger>
-      </Dialog.Root>
+        </div>
+        {events[0].content && <Content data={events[0]} />}
+      </div>
     );
   } else {
     return (
diff --git a/src/components/note/single.tsx b/src/components/note/single.tsx
index e6d56b59..926bf63b 100644
--- a/src/components/note/single.tsx
+++ b/src/components/note/single.tsx
@@ -1,30 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Content } from '@components/note/content';
 
-import * as Dialog from '@radix-ui/react-dialog';
-import dynamic from 'next/dynamic';
 import { memo } from 'react';
 
-const Modal = dynamic(() => import('@components/note/modal'), {
-  ssr: false,
-  loading: () => <></>,
-});
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Single = memo(function Single({ event }: { event: any }) {
   return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <div className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
-          <Content data={event} />
-        </div>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
-        <Dialog.Content className="fixed inset-0 overflow-y-auto">
-          <Modal event={event} />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+    <div className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
+      <Content data={event} />
+    </div>
   );
 });
diff --git a/src/pages/feed/following.tsx b/src/pages/feed/following.tsx
index 177b4a4e..790ecdf3 100644
--- a/src/pages/feed/following.tsx
+++ b/src/pages/feed/following.tsx
@@ -15,19 +15,11 @@ import { Virtuoso } from 'react-virtuoso';
 export default function Page() {
   const { db }: any = useContext(DatabaseContext);
   const [data, setData] = useState([]);
+  const [reload, setReload] = useState(false);
 
   const limit = useRef(30);
   const offset = useRef(0);
 
-  useEffect(() => {
-    const getData = async () => {
-      const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
-      setData(result);
-    };
-
-    getData().catch(console.error);
-  }, [db]);
-
   const loadMore = useCallback(async () => {
     offset.current += limit.current;
     // next query
@@ -49,6 +41,15 @@ export default function Page() {
     [data]
   );
 
+  useEffect(() => {
+    const getData = async () => {
+      const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
+      setData(result);
+    };
+
+    getData().catch(console.error);
+  }, [db, reload]);
+
   const computeItemKey = useCallback(
     (index: string | number) => {
       return data[index].id;
@@ -58,7 +59,7 @@ export default function Page() {
 
   return (
     <div className="h-full w-full">
-      <NoteConnector />
+      <NoteConnector setReload={setReload} />
       <Virtuoso
         data={data}
         itemContent={ItemContent}