Use loader in Settings.tsx

Use loader to always fetch fresh user data on initial load.

Refs. TS-2758

Author: Roffenlund

apps/cyberstorm-remix/app/settings/user/Connections/Connections.tsx

@@ -45,15 +45,16 @@ export default function Connections() {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const onSubmitSuccess = (_r: unknown) => {
-    if (!outletContext.currentUser || !outletContext.currentUser.username)
+    const username = outletContext.currentUser?.username;
+    const user = outletContext.currentUser;
+
+    if (!username || !user) {
       throw new Error("User not logged in");
+    }
+
     toast.addToast({
       csVariant: "success",
-      children: (
-        <>
-          User {outletContext.currentUser.username} was disconnected from TODO
-        </>
-      ),
+      children: <>User {username} was disconnected from</>,
       duration: 30000,
     });
   };

apps/cyberstorm-remix/app/settings/user/Settings.tsx

@@ -1,46 +1,61 @@
-import { Outlet, useLocation, useOutletContext } from "react-router";
+import {
+  Outlet,
+  useLocation,
+  useLoaderData,
+  useOutletContext,
+} from "react-router";
 import { NewLink, Tabs } from "@thunderstore/cyberstorm";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
-
 import { type OutletContextShape } from "../../root";
 import "./Settings.css";
 import { NotLoggedIn } from "~/commonComponents/NotLoggedIn/NotLoggedIn";
+import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
+import { DapperTs } from "@thunderstore/dapper-ts";
+
+function getSessionIdFromCookie(cookieHeader: string): string | null {
+  const match = cookieHeader
+    .split("; ")
+    .find((c) => c.startsWith("sessionid="));
+  return match ? match.split("=")[1] : null;
+}
 
-// export async function clientLoader() {
-//   const _storage = new NamespacedStorageManager(SESSION_STORAGE_KEY);
-//   const currentUser = getSessionCurrentUser(_storage, true, undefined, () => {
-//     clearSession(_storage);
-//     throw new Response("Your session has expired, please log in again", {
-//       status: 401,
-//     });
-//     // redirect("/");
-//   });
+function tabClass(isActive: boolean) {
+  return `tabs-item${isActive ? " tabs-item--current" : ""}`;
+}
+
+export async function loader({ request }) {
+  const cookieHeader = request.headers.get("cookie") || "";
+  const sessionId = getSessionIdFromCookie(cookieHeader);
+  const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
 
-//   if (
-//     !currentUser.username ||
-//     (currentUser.username && currentUser.username === "")
-//   ) {
-//     clearSession(_storage);
-//     throw new Response("Not logged in.", { status: 401 });
-//   } else {
-//     return {
-//       currentUser: currentUser as typeof currentUserSchema._type,
-//     };
-//   }
-// }
+  const dapper = new DapperTs(() => {
+    return {
+      apiHost: publicEnvVariables.VITE_API_URL,
+      sessionId: sessionId || undefined,
+    };
+  });
 
-// export function HydrateFallback() {
-//   return <div style={{ padding: "32px" }}>Loading...</div>;
-// }
+  const currentUser = await dapper.getCurrentUser();
+  return { currentUser };
+}
+
+export function HydrateFallback() {
+  return <div style={{ padding: "32px" }}>Loading...</div>;
+}
 
 export default function Community() {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // const { currentUser } = useLoaderData<typeof clientLoader>();
   const location = useLocation();
-  const outletContext = useOutletContext() as OutletContextShape;
+  const rootContext = useOutletContext<OutletContextShape>();
+  const { currentUser } = useLoaderData();
 
-  if (!outletContext.currentUser || !outletContext.currentUser.username)
+  if (!currentUser || !currentUser.username) {
     return <NotLoggedIn />;
+  }
+
+  const outletContext: OutletContextShape = {
+    ...rootContext,
+    currentUser,
+  };
 
   const currentTab = location.pathname.endsWith("/account/")
     ? "account"
@@ -51,16 +66,15 @@ export default function Community() {
       <PageHeader headingLevel="1" headingSize="2">
         Settings
       </PageHeader>
+
       <div className="settings-user">
         <Tabs>
           <NewLink
             key="settings"
             primitiveType="cyberstormLink"
             linkId="Settings"
             aria-current={currentTab === "settings"}
-            rootClasses={`tabs-item${
-              currentTab === "settings" ? " tabs-item--current" : ""
-            }`}
+            rootClasses={tabClass(currentTab === "settings")}
           >
             Settings
           </NewLink>
@@ -69,13 +83,12 @@ export default function Community() {
             primitiveType="cyberstormLink"
             linkId="SettingsAccount"
             aria-current={currentTab === "account"}
-            rootClasses={`tabs-item${
-              currentTab === "account" ? " tabs-item--current" : ""
-            }`}
+            rootClasses={tabClass(currentTab === "account")}
           >
             Account
           </NewLink>
         </Tabs>
+
         <section className="settings-user__body">
           <Outlet context={outletContext} />
         </section>