Extract AppRoot and SessionExpirationMonitor components, fix wrong toast on HMR

Author: zobweyt

frontend/src/app-root.tsx

@@ -0,0 +1,25 @@
+import { MetaProvider } from "@solidjs/meta";
+import { RouteSectionProps } from "@solidjs/router";
+import { Suspense } from "solid-js";
+import { Toaster } from "solid-sonner";
+import { SessionExpirationMonitor } from "~/components";
+import { I18nProvider } from "~/lib/i18n";
+import { PreferencesProvider } from "~/lib/preferences";
+import { ThemeProvider } from "~/lib/theme";
+
+export const AppRoot = (props: RouteSectionProps) => {
+  return (
+    <MetaProvider>
+      <PreferencesProvider>
+        <I18nProvider>
+          <ThemeProvider>
+            <Suspense>{props.children}</Suspense>
+
+            <Toaster />
+            <SessionExpirationMonitor />
+          </ThemeProvider>
+        </I18nProvider>
+      </PreferencesProvider>
+    </MetaProvider>
+  );
+};

frontend/src/app.tsx

@@ -1,33 +1,11 @@
-import { MetaProvider } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
-import { Portal } from "solid-js/web";
-import { Toaster } from "solid-sonner";
-import { ThemeProvider } from "~/lib/theme";
-import { I18nProvider } from "~/lib/i18n";
-import { PreferencesProvider } from "~/lib/preferences";
+import { AppRoot } from "./app-root";
 import "./app.css";
 
 export default function App() {
   return (
-    <Router
-      root={(props) => (
-        <MetaProvider>
-          <PreferencesProvider>
-            <I18nProvider>
-              <ThemeProvider>
-                <Suspense>{props.children}</Suspense>
-
-                <Portal>
-                  <Toaster richColors />
-                </Portal>
-              </ThemeProvider>
-            </I18nProvider>
-          </PreferencesProvider>
-        </MetaProvider>
-      )}
-    >
+    <Router root={AppRoot}>
       <FileRoutes />
     </Router>
   );

frontend/src/components/index.tsx

@@ -1 +1,2 @@
 export * from "./ui";
+export * from "./session-expiration-monitor";

frontend/src/routes/(app).tsx renamed to frontend/src/components/session-expiration-monitor.tsx

@@ -1,20 +1,15 @@
-import { makeEventListener } from "@solid-primitives/event-listener";
-import { createAsync, revalidate, RouteDefinition, RouteSectionProps } from "@solidjs/router";
-import { createEffect, createSignal, on, onCleanup, onMount } from "solid-js";
+import { createAsync, revalidate } from "@solidjs/router";
+import { createEffect, createSignal, on, onCleanup, onMount, ParentComponent } from "solid-js";
+
 import { toast } from "solid-sonner";
+
+import { makeEventListener } from "@solid-primitives/event-listener";
 import { getCurrentUser } from "~/lib/api/users/me";
 import { getIsLoggedIn, getSessionExpirationDate } from "~/lib/http";
 import { useI18n } from "~/lib/i18n";
 
-export const route = {
-  preload: () => {
-    getIsLoggedIn();
-    getSessionExpirationDate();
-  },
-} satisfies RouteDefinition;
-
-export default function Auth(props: RouteSectionProps) {
-  const syncBroadcastChannel = new BroadcastChannel("auth_sync");
+export const SessionExpirationMonitor: ParentComponent = (props) => {
+  const sync = new BroadcastChannel("auth_sync");
 
   const i18n = useI18n();
 
@@ -53,7 +48,7 @@ export default function Auth(props: RouteSectionProps) {
   };
 
   onMount(() => {
-    syncBroadcastChannel.onmessage = () => {
+    sync.onmessage = () => {
       revalidateSession();
     };
   });
@@ -72,25 +67,21 @@ export default function Auth(props: RouteSectionProps) {
   );
 
   createEffect(
-    on(
-      isLoggedIn,
-      () => {
-        syncBroadcastChannel.postMessage(true);
-
-        if (isLoggedIn() === false) {
-          clearRevalidateTimeout();
-          if (document.hidden) {
-            makeEventListener(document, "visibilitychange", toastSessionExpired, { once: true });
-          }
+    on(isLoggedIn, () => {
+      sync.postMessage(true);
+
+      if (isLoggedIn() === false && revalidateTimeout() !== undefined) {
+        clearRevalidateTimeout();
+        if (document.hidden) {
+          makeEventListener(document, "visibilitychange", toastSessionExpired, { once: true });
         }
-      },
-      { defer: true },
-    ),
+      }
+    }),
   );
 
   onCleanup(() => {
-    syncBroadcastChannel.close();
+    sync.close();
   });
 
   return props.children;
-}
+};