From af5ed2f237ed089bc2871672f89a9eaab84dbbde Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Fri, 14 Jul 2023 11:10:26 -0500
Subject: [PATCH] fix broken post button

---
 .changeset/gold-feet-love.md |  5 +++++
 src/app.tsx                  | 24 +++++++++++++++++-------
 src/index.tsx                |  6 +++---
 src/providers/index.tsx      | 24 ++++++++++++++++--------
 4 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/gold-feet-love.md

diff --git a/.changeset/gold-feet-love.md b/.changeset/gold-feet-love.md
new file mode 100644
index 000000000..7dba41ebd
--- /dev/null
+++ b/.changeset/gold-feet-love.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Fix broken post button
diff --git a/src/app.tsx b/src/app.tsx
index a71f432ce..545d5e681 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -34,6 +34,7 @@ import UserAboutTab from "./views/user/about";
 import UserLikesTab from "./views/user/likes";
 import useSetColorMode from "./hooks/use-set-color-mode";
 import UserStreamsTab from "./views/user/streams";
+import { PageProviders } from "./providers";
 
 const StreamsView = React.lazy(() => import("./views/streams"));
 const StreamView = React.lazy(() => import("./views/streams/stream"));
@@ -43,12 +44,14 @@ const RootPage = () => {
   useSetColorMode();
 
   return (
-    <Layout>
-      <ScrollRestoration />
-      <Suspense fallback={<Spinner />}>
-        <Outlet />
-      </Suspense>
-    </Layout>
+    <PageProviders>
+      <Layout>
+        <ScrollRestoration />
+        <Suspense fallback={<Spinner />}>
+          <Outlet />
+        </Suspense>
+      </Layout>
+    </PageProviders>
   );
 };
 
@@ -63,7 +66,14 @@ const router = createHashRouter([
       { path: "nsec", element: <LoginNsecView /> },
     ],
   },
-  { path: "streams/:naddr", element: <StreamView /> },
+  {
+    path: "streams/:naddr",
+    element: (
+      <PageProviders>
+        <StreamView />
+      </PageProviders>
+    ),
+  },
   {
     path: "/",
     element: <RootPage />,
diff --git a/src/index.tsx b/src/index.tsx
index da10484a8..05020c84f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { App } from "./app";
-import { Providers } from "./providers";
+import { GlobalProviders } from "./providers";
 
 // setup dayjs
 import dayjs from "dayjs";
@@ -21,7 +21,7 @@ const element = document.getElementById("root");
 if (!element) throw new Error("missing mount point");
 const root = createRoot(element);
 root.render(
-  <Providers>
+  <GlobalProviders>
     <App />
-  </Providers>
+  </GlobalProviders>
 );
diff --git a/src/providers/index.tsx b/src/providers/index.tsx
index f3c7a6594..02d2146e0 100644
--- a/src/providers/index.tsx
+++ b/src/providers/index.tsx
@@ -7,19 +7,27 @@ import { InvoiceModalProvider } from "./invoice-modal";
 import NotificationTimelineProvider from "./notification-timeline";
 import PostModalProvider from "./post-modal-provider";
 
-export const Providers = ({ children }: { children: React.ReactNode }) => {
+// Top level providers, should be render as close to the root as possible
+export const GlobalProviders = ({ children }: { children: React.ReactNode }) => {
   const { primaryColor } = useAppSettings();
   const theme = useMemo(() => createTheme(primaryColor), [primaryColor]);
 
   return (
     <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
-      <SigningProvider>
-        <InvoiceModalProvider>
-          <NotificationTimelineProvider>
-            <PostModalProvider>{children}</PostModalProvider>
-          </NotificationTimelineProvider>
-        </InvoiceModalProvider>
-      </SigningProvider>
+      {children}
     </ChakraProvider>
   );
 };
+
+/** Providers that provider functionality to pages (needs to be rendered under a router) */
+export function PageProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <SigningProvider>
+      <InvoiceModalProvider>
+        <NotificationTimelineProvider>
+          <PostModalProvider>{children}</PostModalProvider>
+        </NotificationTimelineProvider>
+      </InvoiceModalProvider>
+    </SigningProvider>
+  );
+}