refactor: page manager

src/pages/primary/BookmarkPage/index.tsx

@@ -2,24 +2,19 @@ import BookmarkList from '@/components/BookmarkList'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { TPageRef } from '@/types'
 import { BookmarkIcon } from 'lucide-react'
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const BookmarkPage = forwardRef((_, ref) => {
-  const layoutRef = useRef<TPageRef>(null)
-  useImperativeHandle(ref, () => layoutRef.current)
-
-  return (
-    <PrimaryPageLayout
-      pageName="bookmark"
-      ref={layoutRef}
-      titlebar={<BookmarkPageTitlebar />}
-      displayScrollToTopButton
-    >
-      <BookmarkList />
-    </PrimaryPageLayout>
-  )
-})
+const BookmarkPage = forwardRef<TPageRef>((_, ref) => (
+  <PrimaryPageLayout
+    pageName="bookmark"
+    ref={ref}
+    titlebar={<BookmarkPageTitlebar />}
+    displayScrollToTopButton
+  >
+    <BookmarkList />
+  </PrimaryPageLayout>
+))
 BookmarkPage.displayName = 'BookmarkPage'
 export default BookmarkPage
 

src/pages/primary/ExplorePage/index.tsx

@@ -7,6 +7,7 @@ import { BIG_RELAY_URLS, ExtendedKind } from '@/constants'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { getReplaceableEventIdentifier } from '@/lib/event'
 import { useUserTrust } from '@/providers/UserTrustProvider'
+import { TPageRef } from '@/types'
 import { Compass, Plus } from 'lucide-react'
 import { NostrEvent } from 'nostr-tools'
 import { forwardRef, useCallback, useMemo, useState } from 'react'
@@ -14,7 +15,7 @@ import { useTranslation } from 'react-i18next'
 
 type TExploreTabs = 'following' | 'explore' | 'reviews'
 
-const ExplorePage = forwardRef((_, ref) => {
+const ExplorePage = forwardRef<TPageRef>((_, ref) => {
   const { hideUntrustedNotes } = useUserTrust()
   const [tab, setTab] = useState<TExploreTabs>('explore')
 

src/pages/primary/MePage/index.tsx

@@ -12,6 +12,7 @@ import { toBookmarks, toProfile, toRelaySettings, toSettings, toWallet } from '@
 import { cn } from '@/lib/utils'
 import { useSecondaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
+import { TPageRef } from '@/types'
 import {
   ArrowDownUp,
   Bookmark,
@@ -25,7 +26,7 @@ import {
 import { forwardRef, HTMLProps, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const MePage = forwardRef((_, ref) => {
+const MePage = forwardRef<TPageRef>((_, ref) => {
   const { t } = useTranslation()
   const { push } = useSecondaryPage()
   const { pubkey } = useNostr()

src/pages/primary/NoteListPage/index.tsx

@@ -24,14 +24,15 @@ import FeedButton from './FeedButton'
 import FollowingFeed from './FollowingFeed'
 import RelaysFeed from './RelaysFeed'
 
-const NoteListPage = forwardRef((_, ref) => {
+const NoteListPage = forwardRef<TPageRef>((_, ref) => {
   const { t } = useTranslation()
   const { addRelayUrls, removeRelayUrls } = useCurrentRelays()
   const layoutRef = useRef<TPageRef>(null)
   const { pubkey } = useNostr()
   const { feedInfo, relayUrls, isReady, switchFeed } = useFeed()
   const [showRelayDetails, setShowRelayDetails] = useState(false)
-  useImperativeHandle(ref, () => layoutRef.current)
+
+  useImperativeHandle(ref, () => layoutRef.current as TPageRef)
 
   useEffect(() => {
     if (layoutRef.current) {

src/pages/primary/NotificationListPage/index.tsx

@@ -2,11 +2,12 @@ import HideUntrustedContentButton from '@/components/HideUntrustedContentButton'
 import NotificationList from '@/components/NotificationList'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { usePrimaryPage } from '@/PageManager'
+import { TPageRef } from '@/types'
 import { Bell } from 'lucide-react'
 import { forwardRef, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const NotificationListPage = forwardRef((_, ref) => {
+const NotificationListPage = forwardRef<TPageRef>((_, ref) => {
   const { current } = usePrimaryPage()
   const firstRenderRef = useRef(true)
   const notificationListRef = useRef<{ refresh: () => void }>(null)

src/pages/primary/ProfilePage/index.tsx

@@ -1,11 +1,12 @@
 import Profile from '@/components/Profile'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { useNostr } from '@/providers/NostrProvider'
+import { TPageRef } from '@/types'
 import { UserRound } from 'lucide-react'
 import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const ProfilePage = forwardRef((_, ref) => {
+const ProfilePage = forwardRef<TPageRef>((_, ref) => {
   const { pubkey } = useNostr()
 
   return (

src/pages/primary/RelayPage/index.tsx

@@ -1,10 +1,11 @@
 import Relay from '@/components/Relay'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
+import { TPageRef } from '@/types'
 import { Server } from 'lucide-react'
 import { forwardRef, useMemo } from 'react'
 
-const RelayPage = forwardRef(({ url }: { url?: string }, ref) => {
+const RelayPage = forwardRef<TPageRef>(({ url }: { url?: string }, ref) => {
   const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
 
   return (

src/pages/primary/SearchPage/index.tsx

@@ -2,10 +2,10 @@ import SearchBar, { TSearchBarRef } from '@/components/SearchBar'
 import SearchResult from '@/components/SearchResult'
 import PrimaryPageLayout, { TPrimaryPageLayoutRef } from '@/layouts/PrimaryPageLayout'
 import { usePrimaryPage } from '@/PageManager'
-import { TSearchParams } from '@/types'
+import { TPageRef, TSearchParams } from '@/types'
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 
-const SearchPage = forwardRef((_, ref) => {
+const SearchPage = forwardRef<TPageRef>((_, ref) => {
   const { current, display } = usePrimaryPage()
   const [input, setInput] = useState('')
   const [searchParams, setSearchParams] = useState<TSearchParams | null>(null)

src/pages/primary/SettingsPage/index.tsx

@@ -2,24 +2,19 @@ import Settings from '@/components/Settings'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { TPageRef } from '@/types'
 import { SettingsIcon } from 'lucide-react'
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const SettingsPage = forwardRef((_, ref) => {
-  const layoutRef = useRef<TPageRef>(null)
-  useImperativeHandle(ref, () => layoutRef.current)
-
-  return (
-    <PrimaryPageLayout
-      pageName="settings"
-      ref={layoutRef}
-      titlebar={<SettingsPageTitlebar />}
-      displayScrollToTopButton
-    >
-      <Settings />
-    </PrimaryPageLayout>
-  )
-})
+const SettingsPage = forwardRef<TPageRef>((_, ref) => (
+  <PrimaryPageLayout
+    pageName="settings"
+    ref={ref}
+    titlebar={<SettingsPageTitlebar />}
+    displayScrollToTopButton
+  >
+    <Settings />
+  </PrimaryPageLayout>
+))
 SettingsPage.displayName = 'SettingsPage'
 export default SettingsPage