search

abereghici / remix-themes

An abstraction for themes in your Remix app.
https://www.npmjs.com/package/remix-themes
MIT License
123 stars 14 forks source link

Random fetchers trigger the POST /action/set-theme #45

Open MarkusTrb opened 1 week ago

MarkusTrb commented 1 week ago

Describe the bug

I've come across an unexpected behaviour where every fetcher.submit call in my Remix application also causes a POST /action/set-theme request to happen. Is this intended behaviour?

Your Example Website or App

n/a

Steps to Reproduce the Bug or Issue

Root code:

import { withSentry } from "@sentry/remix";
import { ThemeProvider, useTheme, PreventFlashOnWrongTheme } from "remix-themes";
import { json } from "@remix-run/node";
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react";
import { themeSessionResolver } from "./session.server";
import { AppProvider } from "./context/app-provider";
import { ReaderProvider } from "./context/reader-provider";

export async function loader({ request }) {
  const { getTheme } = await themeSessionResolver(request);

  return json({
    userTheme: getTheme(),
  });
}

function App() {
  const { userTheme } = useLoaderData();
  const [theme] = useTheme();

  return (
    <html lang="en" data-theme={theme ?? ""}>
      <head>
        <Meta />
        <Links />
        <PreventFlashOnWrongTheme ssrTheme={userTheme} />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

function AppWithProviders() {
  const { userTheme } = useLoaderData();
  return (
    <ThemeProvider specifiedTheme={userTheme} themeAction="/action/set-theme">
      <AppProvider>
        <ReaderProvider>
          <App />
        </ReaderProvider>
      </AppProvider>
    </ThemeProvider>
  );
}

export default withSentry(AppWithProviders);

Fetcher call in index.jsx: fetcher.submit( { type: "test", }, { method: "POST", action: "/api/questions/create" } );

Expected behavior

Expected behaviour is a POST call only during first load of the application.

Platform

MacOS, Chrome. In production, too.