Change config in Dapper and ApiForms/ApiActions to be a callable

This is done in efforts to keep the config out of memory, so that it can be refreshed and reliably used from the localStorage
thunderstore-io · Jan 19, 2025 · 914e125 · 914e125
1 parent 9c5c131
commit 914e125
Show file tree

Hide file tree

Showing 53 changed files with 126 additions and 104 deletions.
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -27,10 +27,12 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 export async function loader({ request, params }: LoaderFunctionArgs) {
   if (params.communityId) {
     try {
-      const dapper = new DapperTs({
-        apiHost: process.env.PUBLIC_API_URL,
-        sessionId: undefined,
-        csrfToken: undefined,
+      const dapper = new DapperTs(() => {
+        return {
+          apiHost: process.env.PUBLIC_API_URL,
+          sessionId: undefined,
+          csrfToken: undefined,
+        };
       });
       const searchParams = new URL(request.url).searchParams;
       const ordering =

diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -69,10 +69,12 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const order = searchParams.get("order") ?? SortOptions.Popular;
   const search = searchParams.get("search");
   const page = undefined;
-  const dapper = new DapperTs({
-    apiHost: process.env.PUBLIC_API_URL,
-    sessionId: undefined,
-    csrfToken: undefined,
+  const dapper = new DapperTs(() => {
+    return {
+      apiHost: process.env.PUBLIC_API_URL,
+      sessionId: undefined,
+      csrfToken: undefined,
+    };
   });
   return await dapper.getCommunities(page, order ?? "", search ?? "");
 }

diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -63,10 +63,12 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.communityId && params.namespaceId && params.packageId) {
     try {
-      const dapper = new DapperTs({
-        apiHost: process.env.PUBLIC_API_URL,
-        sessionId: undefined,
-        csrfToken: undefined,
+      const dapper = new DapperTs(() => {
+        return {
+          apiHost: process.env.PUBLIC_API_URL,
+          sessionId: undefined,
+          csrfToken: undefined,
+        };
       });
       return {
         community: await dapper.getCommunity(params.communityId),
@@ -129,8 +131,6 @@ export default function Community() {
 
   const [isLiked, setIsLiked] = useState(false);
 
-  // TODO: VERY CRITICAL TO FIGURE OUT !!! Figure out if this is stupid or not? I'm not sure if Remix will let fetch part of the client loader.
-  // Ideally we could just tell Remix to use the clientLoader to fetch all related data, but it seems like it just doesnt do it, so we have to do this.
   const fetchAndSetRatedPackages = async () => {
     const dapper = window.Dapper;
     if (currentUser?.username) {

diff --git a/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx b/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx
@@ -7,10 +7,12 @@ import { DapperTs } from "@thunderstore/dapper-ts";
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = new DapperTs({
-        apiHost: process.env.PUBLIC_API_URL,
-        sessionId: undefined,
-        csrfToken: undefined,
+      const dapper = new DapperTs(() => {
+        return {
+          apiHost: process.env.PUBLIC_API_URL,
+          sessionId: undefined,
+          csrfToken: undefined,
+        };
       });
       return {
         status: "ok",

diff --git a/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx b/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx
@@ -7,10 +7,12 @@ import { DapperTs } from "@thunderstore/dapper-ts";
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = new DapperTs({
-        apiHost: process.env.PUBLIC_API_URL,
-        sessionId: undefined,
-        csrfToken: undefined,
+      const dapper = new DapperTs(() => {
+        return {
+          apiHost: process.env.PUBLIC_API_URL,
+          sessionId: undefined,
+          csrfToken: undefined,
+        };
       });
       return {
         status: "ok",

diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx b/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx
@@ -9,10 +9,12 @@ import { DapperTs } from "@thunderstore/dapper-ts";
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.communityId && params.namespaceId && params.packageId) {
     try {
-      const dapper = new DapperTs({
-        apiHost: process.env.PUBLIC_API_URL,
-        sessionId: undefined,
-        csrfToken: undefined,
+      const dapper = new DapperTs(() => {
+        return {
+          apiHost: process.env.PUBLIC_API_URL,
+          sessionId: undefined,
+          csrfToken: undefined,
+        };
       });
       return {
         listing: await dapper.getPackageListingDetails(

diff --git a/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx b/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx
@@ -22,10 +22,12 @@ import { DapperTs } from "@thunderstore/dapper-ts";
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = new DapperTs({
-        apiHost: process.env.PUBLIC_API_URL,
-        sessionId: undefined,
-        csrfToken: undefined,
+      const dapper = new DapperTs(() => {
+        return {
+          apiHost: process.env.PUBLIC_API_URL,
+          sessionId: undefined,
+          csrfToken: undefined,
+        };
       });
       return {
         status: "ok",

diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
@@ -67,7 +67,7 @@ declare global {
 
 export type OutletContextShape = {
   currentUser: CurrentUser | undefined;
-  requestConfig: RequestConfig;
+  requestConfig: () => RequestConfig;
 };
 
 export const meta: MetaFunction = () => {
@@ -193,23 +193,22 @@ function App() {
   const [currentUser, setCurrentUser] = useState<CurrentUser | undefined>(
     undefined
   );
-  const [requestConfig, setRequestConfig] = useState<RequestConfig>();
+  const [rcCallable, setRcCallable] = useState<() => RequestConfig>();
 
   const session = useSession();
   useEffect(() => {
     // INIT DAPPER
-    window.Dapper = new DapperTs(session.getConfig(), () => {
+    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));
-    setRequestConfig(session.getConfig());
   }, []);
 
   return (
-    <Outlet
-      context={{ currentUser: currentUser, requestConfig: requestConfig }}
-    />
+    <Outlet context={{ currentUser: currentUser, requestConfig: rcCallable }} />
   );
 }
 

diff --git a/apps/cyberstorm-remix/cyberstorm/dapper/sessionUtils.ts b/apps/cyberstorm-remix/cyberstorm/dapper/sessionUtils.ts
@@ -10,15 +10,17 @@ export function getDapper(isClient = false) {
   if (isClient) {
     const session = useSession();
     // TODO: Add "ValidateDapper" and stop always returning a new dapper.
-    return new DapperTs(session.getConfig(), () => {
+    return new DapperTs(session.getConfig, () => {
       session.clearSession();
       redirect("/communities");
     });
   } else {
-    return new DapperTs({
-      apiHost: process.env.PUBLIC_API_URL,
-      sessionId: undefined,
-      csrfToken: undefined,
+    return new DapperTs(() => {
+      return {
+        apiHost: process.env.PUBLIC_API_URL,
+        sessionId: undefined,
+        csrfToken: undefined,
+      };
     });
   }
 }

diff --git a/packages/cyberstorm-forms/src/actions/PackageDeprecateAction.tsx b/packages/cyberstorm-forms/src/actions/PackageDeprecateAction.tsx
@@ -13,7 +13,7 @@ export function PackageDeprecateAction(props: {
   namespace: string;
   isDeprecated: boolean;
   dataUpdateTrigger: () => Promise<void>;
-  config: RequestConfig;
+  config: () => RequestConfig;
 }) {
   const { onSubmitSuccess, onSubmitError } = useFormToaster({
     successMessage: `${

diff --git a/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx b/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx
@@ -11,7 +11,7 @@ export function PackageLikeAction(props: {
   namespace: string;
   isLiked: boolean;
   dataUpdateTrigger: () => Promise<void>;
-  config: RequestConfig;
+  config: () => RequestConfig;
 }) {
   const { onSubmitSuccess, onSubmitError } = useFormToaster({
     successMessage: `${props.isLiked ? "Unliked" : "Liked"} package ${

diff --git a/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx b/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx
@@ -31,7 +31,7 @@ export function PackageEditForm(props: {
   isDeprecated: boolean;
   deprecationButton: ReactNode;
   dataUpdateTrigger: () => Promise<void>;
-  config: RequestConfig;
+  config: () => RequestConfig;
 }) {
   const { onSubmitSuccess, onSubmitError } = useFormToaster({
     successMessage: "Changes saved!",

diff --git a/packages/dapper-ts/src/__tests__/index.ts b/packages/dapper-ts/src/__tests__/index.ts
@@ -6,7 +6,9 @@ const packageName = "Testitute";
 let dapper: DapperTs;
 
 beforeAll(() => {
-  dapper = new DapperTs({ apiHost: "https://thunderstore.dev" });
+  dapper = new DapperTs(() => {
+    return { apiHost: "https://thunderstore.dev" };
+  });
 });
 
 it("executes getCommunities without errors", async () => {

diff --git a/packages/dapper-ts/src/index.ts b/packages/dapper-ts/src/index.ts
@@ -26,15 +26,15 @@ import {
 } from "./methods/team";
 
 export interface DapperTsInterface extends DapperInterface {
-  config: RequestConfig;
+  config: () => RequestConfig;
   removeSessionHook?: () => void;
 }
 
 export class DapperTs implements DapperTsInterface {
-  config: RequestConfig;
+  config: () => RequestConfig;
   removeSessionHook?: () => void;
 
-  constructor(config: RequestConfig, removeSessionHook?: () => void) {
+  constructor(config: () => RequestConfig, removeSessionHook?: () => void) {
     this.config = config;
     this.removeSessionHook = removeSessionHook;
     this.getDynamicHTML = this.getDynamicHTML.bind(this);

diff --git a/packages/dapper-ts/src/methods/currentUser.ts b/packages/dapper-ts/src/methods/currentUser.ts
@@ -45,7 +45,7 @@ export const emptyUser = {
 };
 
 export async function getCurrentUser(this: DapperTsInterface) {
-  if (typeof this.config.sessionId !== "string") {
+  if (typeof this.config().sessionId !== "string") {
     return emptyUser;
   }
 

diff --git a/packages/thunderstore-api/src/apiFetch.ts b/packages/thunderstore-api/src/apiFetch.ts
@@ -36,7 +36,7 @@ function sleep(delay: number) {
 }
 
 export type apiFetchArgs = {
-  config: RequestConfig;
+  config: () => RequestConfig;
   path: string;
   query?: string;
   request?: Omit<RequestInit, "headers">;
@@ -45,9 +45,9 @@ export type apiFetchArgs = {
 export async function apiFetch2(args: apiFetchArgs) {
   const { config, path, request, query, useSession = false } = args;
   const usedConfig: RequestConfig = useSession
-    ? config
+    ? config()
     : {
-        apiHost: config.apiHost,
+        apiHost: config().apiHost,
         csrfToken: undefined,
         sessionId: undefined,
       };
@@ -69,7 +69,7 @@ export async function apiFetch2(args: apiFetchArgs) {
 }
 
 export function apiFetch(
-  config: RequestConfig,
+  config: () => RequestConfig,
   path: string,
   query?: string,
   request?: Omit<RequestInit, "headers">,

diff --git a/packages/thunderstore-api/src/fetch/community.ts b/packages/thunderstore-api/src/fetch/community.ts
@@ -2,7 +2,7 @@ import { RequestConfig } from "../index";
 import { apiFetch } from "../apiFetch";
 
 export async function fetchCommunity(
-  config: RequestConfig,
+  config: () => RequestConfig,
   communityId: string
 ) {
   const path = `api/cyberstorm/community/${communityId}/`;

diff --git a/packages/thunderstore-api/src/fetch/communityFilters.ts b/packages/thunderstore-api/src/fetch/communityFilters.ts
@@ -2,7 +2,7 @@ import { RequestConfig } from "../index";
 import { apiFetch } from "../apiFetch";
 
 export async function fetchCommunityFilters(
-  config: RequestConfig,
+  config: () => RequestConfig,
   communityId: string
 ) {
   const path = `api/cyberstorm/community/${communityId}/filters/`;

diff --git a/packages/thunderstore-api/src/fetch/communityList.ts b/packages/thunderstore-api/src/fetch/communityList.ts
@@ -3,7 +3,7 @@ import { apiFetch } from "../apiFetch";
 import { serializeQueryString } from "../queryString";
 
 export async function fetchCommunityList(
-  config: RequestConfig,
+  config: () => RequestConfig,
   page = 1,
   ordering = "name",
   search?: string

diff --git a/packages/thunderstore-api/src/fetch/communityPackageListings.ts b/packages/thunderstore-api/src/fetch/communityPackageListings.ts
@@ -4,7 +4,7 @@ import { serializeQueryString } from "../queryString";
 import { PackageListingQueryParams } from "../types";
 
 export async function fetchCommunityPackageListings(
-  config: RequestConfig,
+  config: () => RequestConfig,
   communityId: string,
   options?: PackageListingQueryParams
 ) {

diff --git a/packages/thunderstore-api/src/fetch/currentUser.ts b/packages/thunderstore-api/src/fetch/currentUser.ts
@@ -1,7 +1,7 @@
 import { RequestConfig } from "../index";
 import { apiFetch } from "../apiFetch";
 
-export async function fetchCurrentUser(config: RequestConfig) {
+export async function fetchCurrentUser(config: () => RequestConfig) {
   const path = "api/experimental/current-user/";
   const request = { cache: "no-store" as RequestCache };
 

diff --git a/packages/thunderstore-api/src/fetch/dynamicHTML.ts b/packages/thunderstore-api/src/fetch/dynamicHTML.ts
@@ -2,7 +2,7 @@ import { RequestConfig } from "../index";
 import { apiFetch } from "../apiFetch";
 
 export async function fetchDynamicHTML(
-  config: RequestConfig,
+  config: () => RequestConfig,
   placement: string
 ) {
   const path = `api/cyberstorm/dynamichtml/${placement}`;

diff --git a/packages/thunderstore-api/src/fetch/namespacePackageListings.ts b/packages/thunderstore-api/src/fetch/namespacePackageListings.ts
@@ -4,7 +4,7 @@ import { serializeQueryString } from "../queryString";
 import { PackageListingQueryParams } from "../types";
 
 export async function fetchNamespacePackageListings(
-  config: RequestConfig,
+  config: () => RequestConfig,
   communityId: string,
   namespaceId: string,
   options?: PackageListingQueryParams

diff --git a/packages/thunderstore-api/src/fetch/packageChangelog.ts b/packages/thunderstore-api/src/fetch/packageChangelog.ts
@@ -2,7 +2,7 @@ import { RequestConfig } from "../index";
 import { apiFetch } from "../apiFetch";
 
 export async function fetchPackageChangelog(
-  config: RequestConfig,
+  config: () => RequestConfig,
   namespaceId: string,
   packageName: string,
   versionNumber?: string

diff --git a/packages/thunderstore-api/src/fetch/packageDependantsListings.ts b/packages/thunderstore-api/src/fetch/packageDependantsListings.ts
@@ -4,7 +4,7 @@ import { serializeQueryString } from "../queryString";
 import { PackageListingQueryParams } from "../types";
 
 export async function fetchPackageDependantsListings(
-  config: RequestConfig,
+  config: () => RequestConfig,
   communityId: string,
   namespaceId: string,
   packageName: string,

diff --git a/packages/thunderstore-api/src/fetch/packageDeprecate.ts b/packages/thunderstore-api/src/fetch/packageDeprecate.ts
@@ -11,7 +11,7 @@ export type packageDeprecateApiArgs = {
 };
 
 export function packageDeprecate(
-  config: RequestConfig,
+  config: () => RequestConfig,
   data: packageDeprecateApiArgs,
   meta: packageDeprecateMetaArgs
 ) {

diff --git a/packages/thunderstore-api/src/fetch/packageEditCategories.ts b/packages/thunderstore-api/src/fetch/packageEditCategories.ts
@@ -13,7 +13,7 @@ export type PackageEditApiArgs = {
 };
 
 export function packageEditCategories(
-  config: RequestConfig,
+  config: () => RequestConfig,
   data: PackageEditApiArgs,
   meta: PackageEditMetaArgs
 ) {

diff --git a/packages/thunderstore-api/src/fetch/packageLike.ts b/packages/thunderstore-api/src/fetch/packageLike.ts
@@ -11,7 +11,7 @@ export type packageLikeApiArgs = {
 };
 
 export function packageLike(
-  config: RequestConfig,
+  config: () => RequestConfig,
   data: packageLikeApiArgs,
   meta: packageLikeMetaArgs
 ) {