mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pull to refresh

Browse Source
This commit is contained in:
codytseng
2024-12-22 16:57:08 +08:00
parent c5b0c0543a
commit f2cfad50a9
3 changed files with 38 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

41
src/components/NoteList/index.tsx
View File

@@ -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>