refactor: 🏗️

2025-01-23 15:53:02 +08:00
parent 0f2f82b3ac
commit ee21e19625
6 changed files with 120 additions and 104 deletions
--- a/src/components/Nip22ReplyNoteList/index.tsx
+++ b/src/components/Nip22ReplyNoteList/index.tsx
@@ -7,7 +7,7 @@ import { useNoteStats } from '@/providers/NoteStatsProvider'
 import client from '@/services/client.service'
 import dayjs from 'dayjs'
 import { Event as NEvent } from 'nostr-tools'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReplyNote from '../ReplyNote'
 import { isCommentEvent } from '@/lib/event'
@@ -116,7 +116,7 @@ export default function Nip22ReplyNoteList({
    setReplyMap(replyMap)
  }, [replies, event.id, updateNoteReplyCount])

-  const loadMore = async () => {
+  const loadMore = useCallback(async () => {
    if (loading || !until || !timelineKey) return

    setLoading(true)
@@ -127,24 +127,27 @@ export default function Nip22ReplyNoteList({
    }
    setUntil(events.length ? events[events.length - 1].created_at - 1 : undefined)
    setLoading(false)
-  }
+  }, [loading, until, timelineKey])

-  const onNewReply = (evt: NEvent) => {
-    setReplies((pre) => {
-      if (pre.some((reply) => reply.id === evt.id)) return pre
-      return [...pre, evt]
-    })
-    if (evt.pubkey === pubkey) {
-      setTimeout(() => {
-        if (bottomRef.current) {
-          bottomRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-        }
-        highlightReply(evt.id, false)
-      }, 100)
-    }
-  }
+  const onNewReply = useCallback(
+    (evt: NEvent) => {
+      setReplies((pre) => {
+        if (pre.some((reply) => reply.id === evt.id)) return pre
+        return [...pre, evt]
+      })
+      if (evt.pubkey === pubkey) {
+        setTimeout(() => {
+          if (bottomRef.current) {
+            bottomRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+          }
+          highlightReply(evt.id, false)
+        }, 100)
+      }
+    },
+    [pubkey]
+  )

-  const highlightReply = (eventId: string, scrollTo = true) => {
+  const highlightReply = useCallback((eventId: string, scrollTo = true) => {
    if (scrollTo) {
      const ref = replyRefs.current[eventId]
      if (ref) {
@@ -155,7 +158,7 @@ export default function Nip22ReplyNoteList({
    setTimeout(() => {
      setHighlightReplyId((pre) => (pre === eventId ? undefined : pre))
    }, 1500)
-  }
+  }, [])

  return (
    <>
--- a/src/components/NoteList/index.tsx
+++ b/src/components/NoteList/index.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@/components/ui/button'
 import { PICTURE_EVENT_KIND } from '@/constants'
-import { useFetchRelayInfos } from '@/hooks'
 import { isReplyNoteEvent } from '@/lib/event'
+import { checkAlgoRelay } from '@/lib/relay'
 import { cn } from '@/lib/utils'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
@@ -11,7 +11,7 @@ import storage from '@/services/storage.service'
 import { TNoteListMode } from '@/types'
 import dayjs from 'dayjs'
 import { Event, Filter, kinds } from 'nostr-tools'
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PullToRefresh from 'react-simple-pull-to-refresh'
 import NoteCard from '../NoteCard'
@@ -36,7 +36,6 @@ export default function NoteList({
  const { isLargeScreen } = useScreenSize()
  const { signEvent, checkLogin } = useNostr()
  const { mutePubkeys } = useMuteList()
-  const { areAlgoRelays } = useFetchRelayInfos([...relayUrls])
  const [refreshCount, setRefreshCount] = useState(0)
  const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
  const [events, setEvents] = useState<Event[]>([])
@@ -56,10 +55,10 @@ export default function NoteList({
    }
    return {
      kinds: [kinds.ShortTextNote, kinds.Repost, PICTURE_EVENT_KIND],
-      limit: areAlgoRelays ? ALGO_RELAY_LIMIT : NORMAL_RELAY_LIMIT,
+      limit: NORMAL_RELAY_LIMIT,
      ...filter
    }
-  }, [JSON.stringify(filter), areAlgoRelays, isPictures])
+  }, [JSON.stringify(filter), isPictures])

  useEffect(() => {
    if (relayUrls.length === 0) return
@@ -70,10 +69,14 @@ export default function NoteList({
      setNewEvents([])
      setHasMore(true)

+      const relayInfos = await client.fetchRelayInfos(relayUrls)
+      const areAlgoRelays = relayInfos.every((relayInfo) => checkAlgoRelay(relayInfo))
+      const filter = areAlgoRelays ? { ...noteFilter, limit: ALGO_RELAY_LIMIT } : noteFilter
+
      let eventCount = 0
      const { closer, timelineKey } = await client.subscribeTimeline(
        [...relayUrls],
-        noteFilter,
+        filter,
        {
          onEvents: (events, eosed) => {
            if (eventCount > events.length) return
@@ -112,7 +115,22 @@ export default function NoteList({
    return () => {
      promise.then((closer) => closer())
    }
-  }, [JSON.stringify(relayUrls), noteFilter, areAlgoRelays, refreshCount])
+  }, [JSON.stringify(relayUrls), noteFilter, refreshCount])
+
+  const loadMore = useCallback(async () => {
+    if (!timelineKey || refreshing || !hasMore) return
+
+    const newEvents = await client.loadMoreTimeline(
+      timelineKey,
+      events.length ? events[events.length - 1].created_at - 1 : dayjs().unix(),
+      noteFilter.limit
+    )
+    if (newEvents.length === 0) {
+      setHasMore(false)
+      return
+    }
+    setEvents((oldEvents) => [...oldEvents, ...newEvents])
+  }, [timelineKey, refreshing, hasMore, events, noteFilter])

  useEffect(() => {
    if (refreshing) return
@@ -140,22 +158,7 @@ export default function NoteList({
        observerInstance.unobserve(currentBottomRef)
      }
    }
-  }, [refreshing, hasMore, events, timelineKey, bottomRef])
-
-  const loadMore = async () => {
-    if (!timelineKey || refreshing) return
-
-    const newEvents = await client.loadMoreTimeline(
-      timelineKey,
-      events.length ? events[events.length - 1].created_at - 1 : dayjs().unix(),
-      noteFilter.limit
-    )
-    if (newEvents.length === 0) {
-      setHasMore(false)
-      return
-    }
-    setEvents((oldEvents) => [...oldEvents, ...newEvents])
-  }
+  }, [refreshing, loadMore])

  const showNewEvents = () => {
    setEvents((oldEvents) => [...newEvents, ...oldEvents])
--- a/src/components/NotificationList/index.tsx
+++ b/src/components/NotificationList/index.tsx
@@ -9,7 +9,7 @@ import client from '@/services/client.service'
 import dayjs from 'dayjs'
 import { Heart, MessageCircle, Repeat, ThumbsUp } from 'lucide-react'
 import { Event, kinds, nip19, validateEvent } from 'nostr-tools'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PullToRefresh from 'react-simple-pull-to-refresh'
 import { embedded, embeddedNostrNpubRenderer, embeddedNostrProfileRenderer } from '../Embedded'
@@ -20,7 +20,7 @@ const LIMIT = 100

 export default function NotificationList() {
  const { t } = useTranslation()
-  const { pubkey, relayList } = useNostr()
+  const { pubkey } = useNostr()
  const [refreshCount, setRefreshCount] = useState(0)
  const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
  const [refreshing, setRefreshing] = useState(true)
@@ -29,13 +29,14 @@ export default function NotificationList() {
  const bottomRef = useRef<HTMLDivElement | null>(null)

  useEffect(() => {
-    if (!pubkey || !relayList) {
+    if (!pubkey) {
      setUntil(undefined)
      return
    }

    const init = async () => {
      setRefreshing(true)
+      const relayList = await client.fetchRelayList(pubkey)
      let eventCount = 0
      const { closer, timelineKey } = await client.subscribeTimeline(
        relayList.read.length >= 4
@@ -70,7 +71,25 @@ export default function NotificationList() {
    return () => {
      promise.then((closer) => closer?.())
    }
-  }, [pubkey, refreshCount, relayList])
+  }, [pubkey, refreshCount])
+
+  const loadMore = useCallback(async () => {
+    if (!pubkey || !timelineKey || !until || refreshing) return
+    const notifications = await client.loadMoreTimeline(timelineKey, until, LIMIT)
+    if (notifications.length === 0) {
+      setUntil(undefined)
+      return
+    }
+
+    if (notifications.length > 0) {
+      setNotifications((oldNotifications) => [
+        ...oldNotifications,
+        ...notifications.filter((event) => event.pubkey !== pubkey)
+      ])
+    }
+
+    setUntil(notifications[notifications.length - 1].created_at - 1)
+  }, [pubkey, timelineKey, until, refreshing])

  useEffect(() => {
    if (refreshing) return
@@ -98,25 +117,7 @@ export default function NotificationList() {
        observerInstance.unobserve(currentBottomRef)
      }
    }
-  }, [until, refreshing, timelineKey])
-
-  const loadMore = async () => {
-    if (!pubkey || !timelineKey || !until || refreshing) return
-    const notifications = await client.loadMoreTimeline(timelineKey, until, LIMIT)
-    if (notifications.length === 0) {
-      setUntil(undefined)
-      return
-    }
-
-    if (notifications.length > 0) {
-      setNotifications((oldNotifications) => [
-        ...oldNotifications,
-        ...notifications.filter((event) => event.pubkey !== pubkey)
-      ])
-    }
-
-    setUntil(notifications[notifications.length - 1].created_at - 1)
-  }
+  }, [refreshing, loadMore])

  return (
    <PullToRefresh
--- a/src/components/ReplyNoteList/index.tsx
+++ b/src/components/ReplyNoteList/index.tsx
@@ -7,7 +7,7 @@ import { useNoteStats } from '@/providers/NoteStatsProvider'
 import client from '@/services/client.service'
 import dayjs from 'dayjs'
 import { Event as NEvent, kinds } from 'nostr-tools'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReplyNote from '../ReplyNote'
 import { BIG_RELAY_URLS } from '@/constants'
@@ -127,7 +127,7 @@ export default function ReplyNoteList({ event, className }: { event: NEvent; cla
    setReplyMap(replyMap)
  }, [replies, event.id, updateNoteReplyCount])

-  const loadMore = async () => {
+  const loadMore = useCallback(async () => {
    if (loading || !until || !timelineKey) return

    setLoading(true)
@@ -138,24 +138,27 @@ export default function ReplyNoteList({ event, className }: { event: NEvent; cla
    }
    setUntil(events.length ? events[events.length - 1].created_at - 1 : undefined)
    setLoading(false)
-  }
+  }, [loading, until, timelineKey])

-  const onNewReply = (evt: NEvent) => {
-    setReplies((pre) => {
-      if (pre.some((reply) => reply.id === evt.id)) return pre
-      return [...pre, evt]
-    })
-    if (evt.pubkey === pubkey) {
-      setTimeout(() => {
-        if (bottomRef.current) {
-          bottomRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-        }
-        highlightReply(evt.id, false)
-      }, 100)
-    }
-  }
+  const onNewReply = useCallback(
+    (evt: NEvent) => {
+      setReplies((pre) => {
+        if (pre.some((reply) => reply.id === evt.id)) return pre
+        return [...pre, evt]
+      })
+      if (evt.pubkey === pubkey) {
+        setTimeout(() => {
+          if (bottomRef.current) {
+            bottomRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+          }
+          highlightReply(evt.id, false)
+        }, 100)
+      }
+    },
+    [pubkey]
+  )

-  const highlightReply = (eventId: string, scrollTo = true) => {
+  const highlightReply = useCallback((eventId: string, scrollTo = true) => {
    if (scrollTo) {
      const ref = replyRefs.current[eventId]
      if (ref) {
@@ -166,7 +169,7 @@ export default function ReplyNoteList({ event, className }: { event: NEvent; cla
    setTimeout(() => {
      setHighlightReplyId((pre) => (pre === eventId ? undefined : pre))
    }, 1500)
-  }
+  }, [])

  return (
    <>