Skalop URL via root data loader

app/components/Chat.tsx

@@ -5,10 +5,10 @@ import type { User } from "~/db/types";
 import { useUser } from "~/modules/auth";
 import { nanoid } from "nanoid";
 import clsx from "clsx";
-import { SKALOP_BASE_URL } from "~/utils/urls";
 import { Button } from "./Button";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import invariant from "tiny-invariant";
+import { useRootLoaderData } from "~/hooks/useRootLoaderData";
 
 type ChatUser = Pick<User, "discordName" | "discordId" | "discordAvatar"> & {
   chatNameColor: string | null;
@@ -187,6 +187,7 @@ export function useChat({
   rooms: ChatProps["rooms"];
   onNewMessage?: (message: ChatMessage) => void;
 }) {
+  const rootLoaderData = useRootLoaderData();
   const user = useUser();
 
   const [messages, setMessages] = React.useState<ChatMessage[]>([]);
@@ -202,7 +203,7 @@ export function useChat({
   React.useEffect(() => {
     if (rooms.length === 0) return;
 
-    const url = `${SKALOP_BASE_URL}?${rooms
+    const url = `${rootLoaderData.skalopUrl}?${rooms
       .map((room) => `room=${room.code}`)
       .join("&")}`;
     ws.current = new ReconnectingWebSocket(url, [], {
@@ -241,7 +242,7 @@ export function useChat({
       wsCurrent?.close();
       setMessages([]);
     };
-  }, [rooms, onNewMessage]);
+  }, [rooms, onNewMessage, rootLoaderData.skalopUrl]);
 
   const send = React.useCallback(
     (contents: string) => {

app/root.tsx

@@ -42,7 +42,6 @@ import { Theme, ThemeHead, useTheme, ThemeProvider } from "./modules/theme";
 import { getThemeSession } from "./modules/theme/session.server";
 import { isTheme } from "./modules/theme/provider";
 import { useIsMounted } from "./hooks/useIsMounted";
-import invariant from "tiny-invariant";
 import { CUSTOMIZED_CSS_VARS_NAME } from "./constants";
 import NProgress from "nprogress";
 import nProgressStyles from "nprogress/nprogress.css";
@@ -83,6 +82,7 @@ export interface RootLoaderData {
   theme: Theme | null;
   patrons: FindAllPatrons;
   baseUrl: string;
+  skalopUrl: string;
   user?: Pick<
     UserWithPlusTier,
     | "id"
@@ -104,16 +104,15 @@ export const loader: LoaderFunction = async ({ request }) => {
   const locale = await i18next.getLocale(request);
   const themeSession = await getThemeSession(request);
 
-  invariant(process.env["BASE_URL"], "BASE_URL env var is not set");
-
   if (user?.banned) throw new Response(null, { status: 403 });
 
   return json<RootLoaderData>(
     {
       locale,
       theme: themeSession.getTheme(),
       patrons: db.users.findAllPatrons(),
-      baseUrl: process.env["BASE_URL"],
+      baseUrl: process.env["BASE_URL"]!,
+      skalopUrl: process.env["SKALOP_WS_URL"]!,
       publisherId: process.env["PLAYWIRE_PUBLISHER_ID"],
       websiteId: process.env["PLAYWIRE_WEBSITE_ID"],
       loginDisabled: process.env["LOGIN_DISABLED"] === "true",

app/utils/urls.ts

@@ -37,11 +37,6 @@ const staticAssetsUrl = ({
 }) =>
   `https://raw.githubusercontent.com/Sendouc/sendou-ink-assets/main/${folder}/${fileName}`;
 
-export const SKALOP_BASE_URL =
-  process.env.NODE_ENV === "production"
-    ? "ws://skalop.sendou.ink"
-    : "ws://localhost:5900";
-
 export const SENDOU_INK_BASE_URL = "https://sendou.ink";
 
 const USER_SUBMITTED_IMAGE_ROOT = "https://sendou.nyc3.digitaloceanspaces.com";