Fix context and ENV variable passing issues

apps/cyberstorm-remix/app/entry.client.tsx

@@ -1,13 +1,31 @@
-import { RemixBrowser } from "@remix-run/react";
+import { redirect, RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 import { useLocation, useMatches } from "@remix-run/react";
 import * as Sentry from "@sentry/remix";
 import { useEffect } from "react";
 import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
+import { ContextInterface, SessionProvider } from "@thunderstore/ts-api-react";
+import { DapperTs } from "@thunderstore/dapper-ts";
 
-const publicEnvVars = getPublicEnvVariables(["PUBLIC_CLIENT_SENTRY_DSN"]);
+const publicEnvVars = getPublicEnvVariables([
+  "PUBLIC_CLIENT_SENTRY_DSN",
+  "PUBLIC_API_URL",
+]);
+
+const sessionProvider = SessionProvider({
+  apiHost: publicEnvVars.PUBLIC_API_URL ?? "MISSING_API_HOST",
+});
+
+const { clearSession, getConfig } = sessionProvider.props
+  .value as ContextInterface;
+
+// INIT DAPPER
+window.Dapper = new DapperTs(getConfig, () => {
+  clearSession();
+  redirect("/communities");
+});
 
 Sentry.init({
   dsn: publicEnvVars.PUBLIC_CLIENT_SENTRY_DSN,

apps/cyberstorm-remix/app/p/packageListing.tsx

@@ -457,7 +457,7 @@ export default function Community() {
                   );
                 }}
               />
-              <Outlet />
+              <Outlet context={outletContext} />
             </div>
           </section>
           <aside className="__sidebar">

apps/cyberstorm-remix/app/root.tsx

@@ -194,11 +194,6 @@ function App() {
 
   const session = useSession();
   useEffect(() => {
-    // INIT DAPPER
-    window.Dapper = new DapperTs(session.getConfig, () => {
-      session.clearSession();
-      redirect("/communities");
-    });
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setRcCallable((prevRcCallable) => session.getConfig);
     setCurrentUser(session.getSessionCurrentUser(true));

packages/ts-api-react/src/SessionContext.tsx

@@ -18,11 +18,13 @@ import {
   emptyUser,
 } from "@thunderstore/dapper-ts/src/methods/currentUser";
 
-interface ContextInterface {
+export interface ContextInterface {
   /** Remove session data from provider's state and localStorage. */
   clearSession: () => void;
   /** Remove session cookies. */
   clearCookies: () => void;
+  /** Set SessionData in storage */
+  setSession: (sessionData: SessionData) => void;
   /** Get RequestConfig for Dapper usage */
   getConfig: (domain?: string) => RequestConfig;
   /** Check if session is valid and try to repair if not */
@@ -42,12 +44,12 @@ interface SessionData {
 }
 
 const SessionContext = createContext<ContextInterface | null>(null);
-const ID_KEY = "id";
-const USERNAME_KEY = "username";
-const API_HOST_KEY = "apiHost";
+export const ID_KEY = "id";
+export const USERNAME_KEY = "username";
+export const API_HOST_KEY = "apiHost";
 
 // CurrentUser objects keys
-const CURRENT_USER_KEY = "currentUser";
+export const CURRENT_USER_KEY = "currentUser";
 
 interface Props extends PropsWithChildren {
   apiHost: string;

packages/ts-api-react/src/index.ts

@@ -1,3 +1,12 @@
-export { useSession, SessionProvider } from "./SessionContext";
+export {
+  useSession,
+  SessionProvider,
+  ID_KEY,
+  API_HOST_KEY,
+  USERNAME_KEY,
+  CURRENT_USER_KEY,
+} from "./SessionContext";
+export type { ContextInterface } from "./SessionContext";
+export { StorageManager as NamespacedStorageManager } from "./storage";
 export { useApiCall } from "./useApiCall";
 export type { ApiEndpoint } from "./useApiCall";