From f2cfad50a9b252b91374a0f63dadac87a55b7158 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sun, 22 Dec 2024 16:57:08 +0800
Subject: [PATCH] feat: pull to refresh

---
 package-lock.json                 | 10 ++++++++
 package.json                      |  1 +
 src/components/NoteList/index.tsx | 41 ++++++++++++++++++++-----------
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e874b35a..3d820f38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "react-dom": "^18.3.1",
         "react-i18next": "^15.2.0",
         "react-resizable-panels": "^2.1.7",
+        "react-simple-pull-to-refresh": "^1.3.3",
         "react-string-replace": "^1.1.1",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
@@ -7950,6 +7951,15 @@
         "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/react-simple-pull-to-refresh": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-simple-pull-to-refresh/-/react-simple-pull-to-refresh-1.3.3.tgz",
+      "integrity": "sha512-6qXsa5RtNVmKJhLWvDLIX8UK51HFtCEGjdqQGf+M1Qjrcc4qH4fki97sgVpGEFBRwbY7DiVDA5N5p97kF16DTw==",
+      "peerDependencies": {
+        "react": "^16.10.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.10.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-string-replace": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.1.tgz",
diff --git a/package.json b/package.json
index 1f5e9b2d..1e07b4a6 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.2.0",
     "react-resizable-panels": "^2.1.7",
+    "react-simple-pull-to-refresh": "^1.3.3",
     "react-string-replace": "^1.1.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/components/NoteList/index.tsx b/src/components/NoteList/index.tsx
index 3cbf50ac..1cc4fb87 100644
--- a/src/components/NoteList/index.tsx
+++ b/src/components/NoteList/index.tsx
@@ -10,6 +10,7 @@ import dayjs from 'dayjs'
 import { Event, Filter, kinds } from 'nostr-tools'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import PullToRefresh from 'react-simple-pull-to-refresh'
 import NoteCard from '../NoteCard'
 
 const NORMAL_RELAY_LIMIT = 100
@@ -150,20 +151,32 @@ export default function NoteList({
   return (
     <div className={cn('space-y-2 sm:space-y-4', className)}>
       <DisplayRepliesSwitch displayReplies={displayReplies} setDisplayReplies={setDisplayReplies} />
-      {newEvents.length > 0 && (
-        <div className="flex justify-center w-full max-sm:mt-2">
-          <Button size="lg" onClick={showNewEvents}>
-            {t('show new notes')}
-          </Button>
-        </div>
-      )}
-      <div className="flex flex-col sm:gap-4">
-        {events
-          .filter((event) => displayReplies || !isReplyNoteEvent(event))
-          .map((event) => (
-            <NoteCard key={event.id} className="w-full" event={event} />
-          ))}
-      </div>
+      <PullToRefresh
+        onRefresh={async () =>
+          new Promise((resolve) => {
+            setRefreshCount((pre) => pre + 1)
+            setTimeout(resolve, 1000)
+          })
+        }
+        pullingContent=""
+      >
+        <>
+          {newEvents.filter((event) => displayReplies || !isReplyNoteEvent(event)).length > 0 && (
+            <div className="flex justify-center w-full max-sm:mt-2">
+              <Button size="lg" onClick={showNewEvents}>
+                {t('show new notes')}
+              </Button>
+            </div>
+          )}
+          <div className="flex flex-col sm:gap-4">
+            {events
+              .filter((event) => displayReplies || !isReplyNoteEvent(event))
+              .map((event) => (
+                <NoteCard key={event.id} className="w-full" event={event} />
+              ))}
+          </div>
+        </>
+      </PullToRefresh>
       <div className="text-center text-sm text-muted-foreground">
         {hasMore ? (
           <div ref={bottomRef}>{t('loading...')}</div>