fix: unable to publish to currently browsed relay

src/PageManager.tsx

@@ -2,6 +2,7 @@ import Sidebar from '@/components/Sidebar'
 import { cn } from '@/lib/utils'
 import NoteListPage from '@/pages/primary/NoteListPage'
 import HomePage from '@/pages/secondary/HomePage'
+import { CurrentRelaysProvider } from '@/providers/CurrentRelaysProvider'
 import { TPageRef } from '@/types'
 import {
   cloneElement,
@@ -291,32 +292,34 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
               : 0
           }}
         >
-          <NotificationProvider>
-            {!!secondaryStack.length &&
-              secondaryStack.map((item, index) => (
+          <CurrentRelaysProvider>
+            <NotificationProvider>
+              {!!secondaryStack.length &&
+                secondaryStack.map((item, index) => (
+                  <div
+                    key={item.index}
+                    style={{
+                      display: index === secondaryStack.length - 1 ? 'block' : 'none'
+                    }}
+                  >
+                    {item.component}
+                  </div>
+                ))}
+              {primaryPages.map(({ name, element, props }) => (
                 <div
-                  key={item.index}
+                  key={name}
                   style={{
-                    display: index === secondaryStack.length - 1 ? 'block' : 'none'
+                    display:
+                      secondaryStack.length === 0 && currentPrimaryPage === name ? 'block' : 'none'
                   }}
                 >
-                  {item.component}
+                  {props ? cloneElement(element as React.ReactElement, props) : element}
                 </div>
               ))}
-            {primaryPages.map(({ name, element, props }) => (
-              <div
-                key={name}
-                style={{
-                  display:
-                    secondaryStack.length === 0 && currentPrimaryPage === name ? 'block' : 'none'
-                }}
-              >
-                {props ? cloneElement(element as React.ReactElement, props) : element}
-              </div>
-            ))}
-            <BottomNavigationBar />
-            <TooManyRelaysAlertDialog />
-          </NotificationProvider>
+              <BottomNavigationBar />
+              <TooManyRelaysAlertDialog />
+            </NotificationProvider>
+          </CurrentRelaysProvider>
         </SecondaryPageContext.Provider>
       </PrimaryPageContext.Provider>
     )
@@ -337,45 +340,47 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
           currentIndex: secondaryStack.length ? secondaryStack[secondaryStack.length - 1].index : 0
         }}
       >
-        <NotificationProvider>
-          <div className="flex h-screen overflow-hidden bg-surface-background">
-            <Sidebar />
-            <div className="grid grid-cols-2 gap-2 w-full pr-2">
-              <div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden">
-                {primaryPages.map(({ name, element, props }) => (
-                  <div
-                    key={name}
-                    className="w-full"
-                    style={{
-                      display: currentPrimaryPage === name ? 'block' : 'none'
-                    }}
-                  >
-                    {props ? cloneElement(element as React.ReactElement, props) : element}
-                  </div>
-                ))}
-              </div>
-              <div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden">
-                {secondaryStack.map((item, index) => (
+        <CurrentRelaysProvider>
+          <NotificationProvider>
+            <div className="flex h-screen overflow-hidden bg-surface-background">
+              <Sidebar />
+              <div className="grid grid-cols-2 gap-2 w-full pr-2">
+                <div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden">
+                  {primaryPages.map(({ name, element, props }) => (
+                    <div
+                      key={name}
+                      className="w-full"
+                      style={{
+                        display: currentPrimaryPage === name ? 'block' : 'none'
+                      }}
+                    >
+                      {props ? cloneElement(element as React.ReactElement, props) : element}
+                    </div>
+                  ))}
+                </div>
+                <div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden">
+                  {secondaryStack.map((item, index) => (
+                    <div
+                      key={item.index}
+                      className="w-full"
+                      style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }}
+                    >
+                      {item.component}
+                    </div>
+                  ))}
                   <div
-                    key={item.index}
+                    key="home"
                     className="w-full"
-                    style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }}
+                    style={{ display: secondaryStack.length === 0 ? 'block' : 'none' }}
                   >
-                    {item.component}
+                    <HomePage />
                   </div>
-                ))}
-                <div
-                  key="home"
-                  className="w-full"
-                  style={{ display: secondaryStack.length === 0 ? 'block' : 'none' }}
-                >
-                  <HomePage />
                 </div>
               </div>
             </div>
-          </div>
-          <TooManyRelaysAlertDialog />
-        </NotificationProvider>
+            <TooManyRelaysAlertDialog />
+          </NotificationProvider>
+        </CurrentRelaysProvider>
       </SecondaryPageContext.Provider>
     </PrimaryPageContext.Provider>
   )

src/components/PostEditor/SendOnlyToSwitch.tsx

@@ -3,7 +3,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Switch } from '@/components/ui/switch'
 import { isProtectedEvent } from '@/lib/event'
 import { simplifyUrl } from '@/lib/url'
-import { useFeed } from '@/providers/FeedProvider'
+import { useCurrentRelays } from '@/providers/CurrentRelaysProvider'
 import client from '@/services/client.service'
 import { Info } from 'lucide-react'
 import { Event } from 'nostr-tools'
@@ -20,12 +20,12 @@ export default function SendOnlyToSwitch({
   setSpecifiedRelayUrls: Dispatch<SetStateAction<string[] | undefined>>
 }) {
   const { t } = useTranslation()
-  const { relayUrls } = useFeed()
+  const { currentRelayUrls } = useCurrentRelays()
   const [urls, setUrls] = useState<string[]>([])
 
   useEffect(() => {
     if (!parentEvent) {
-      setUrls(relayUrls)
+      setUrls(currentRelayUrls)
       return
     }
     const isProtected = isProtectedEvent(parentEvent)
@@ -34,9 +34,9 @@ export default function SendOnlyToSwitch({
       setSpecifiedRelayUrls(seenOn)
       setUrls(seenOn)
     } else {
-      setUrls(relayUrls)
+      setUrls(currentRelayUrls)
     }
-  }, [parentEvent, relayUrls])
+  }, [parentEvent, currentRelayUrls])
 
   if (!urls.length) return null
 

src/pages/primary/RelayPage/index.tsx

@@ -2,12 +2,20 @@ import Relay from '@/components/Relay'
 import RelayPageControls from '@/components/RelayPageControls'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
+import { useCurrentRelays } from '@/providers/CurrentRelaysProvider'
 import { Server } from 'lucide-react'
-import { forwardRef, useMemo } from 'react'
+import { forwardRef, useEffect, useMemo } from 'react'
 
 const RelayPage = forwardRef(({ url }: { url?: string }, ref) => {
+  const { setTemporaryRelayUrls } = useCurrentRelays()
   const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
 
+  useEffect(() => {
+    if (normalizedUrl) {
+      setTemporaryRelayUrls([normalizedUrl])
+    }
+  }, [normalizedUrl])
+
   return (
     <PrimaryPageLayout
       pageName="relay"

src/providers/CurrentRelaysProvider.tsx

@@ -0,0 +1,35 @@
+import { usePrimaryPage } from '@/PageManager'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { useFeed } from './FeedProvider'
+
+type TCurrentRelaysContext = {
+  currentRelayUrls: string[]
+  setTemporaryRelayUrls: (urls: string[]) => void
+}
+
+const CurrentRelaysContext = createContext<TCurrentRelaysContext | undefined>(undefined)
+
+export const useCurrentRelays = () => {
+  const context = useContext(CurrentRelaysContext)
+  if (!context) {
+    throw new Error('useCurrentRelays must be used within a CurrentRelaysProvider')
+  }
+  return context
+}
+
+export function CurrentRelaysProvider({ children }: { children: React.ReactNode }) {
+  const { current } = usePrimaryPage()
+  const { relayUrls } = useFeed()
+  const [currentRelayUrls, setCurrentRelayUrls] = useState<string[]>([])
+  const [temporaryRelayUrls, setTemporaryRelayUrls] = useState<string[]>([])
+
+  useEffect(() => {
+    setCurrentRelayUrls(current === 'relay' ? temporaryRelayUrls : relayUrls)
+  }, [temporaryRelayUrls, current, relayUrls])
+
+  return (
+    <CurrentRelaysContext.Provider value={{ currentRelayUrls, setTemporaryRelayUrls }}>
+      {children}
+    </CurrentRelaysContext.Provider>
+  )
+}