Refactor API methods and enhance type safety

- Updated community and package-related API methods to utilize structured parameters, improving clarity and maintainability.
- Enhanced error handling in upload processes and API fetch functions to provide clearer feedback on validation errors.
- Removed deprecated schemas and cleaned up imports for better organization and readability.
- Introduced new request and response schemas for improved type safety and validation using Zod.
- Streamlined the codebase by removing legacy components and comments, enhancing overall maintainability.

Author: Oksamies

apps/cyberstorm-remix/app/communities/communities.tsx

@@ -63,7 +63,7 @@ const selectOptions = [
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const searchParams = new URL(request.url).searchParams;
-  const order = searchParams.get("order") ?? SortOptions.Popular;
+  const order = searchParams.get("order");
   const search = searchParams.get("search");
   const page = undefined;
   const dapper = new DapperTs(() => {
@@ -72,7 +72,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
       sessionId: undefined,
     };
   });
-  return await dapper.getCommunities(page, order ?? "", search ?? "");
+  return await dapper.getCommunities(
+    page,
+    order === null ? undefined : order,
+    search === null ? undefined : search
+  );
 }
 
 export async function clientLoader({ request }: LoaderFunctionArgs) {

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

@@ -6,7 +6,6 @@ import {
   FormTextInput,
   useFormToaster,
 } from "@thunderstore/cyberstorm-forms";
-import { currentUserSchema } from "@thunderstore/dapper-ts";
 import { faTrashCan } from "@fortawesome/pro-solid-svg-icons";
 import {
   ApiForm,
@@ -40,7 +39,7 @@ export async function clientLoader() {
   } else {
     return {
       config: getConfig(_storage),
-      currentUser: currentUser as typeof currentUserSchema._type,
+      currentUser: currentUser,
     };
   }
 }

apps/cyberstorm-remix/app/upload/upload.tsx

@@ -33,17 +33,22 @@ import {
   faArrowUpRight,
 } from "@fortawesome/pro-solid-svg-icons";
 import { UserMedia } from "@thunderstore/ts-uploader/src/client/types";
-import { DapperTs, PackageSubmissionResponse } from "@thunderstore/dapper-ts";
+import { DapperTs } from "@thunderstore/dapper-ts";
 import { MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
-import {
-  packageSubmissionErrorSchema,
-  packageSubmissionStatusSchema,
-} from "@thunderstore/dapper-ts/src/methods/package";
+// import {
+//   packageSubmissionErrorSchema,
+//   packageSubmissionStatusSchema,
+// } from "@thunderstore/dapper-ts/src/methods/package";
 import {
   PackageSubmissionResult,
   PackageSubmissionStatus,
 } from "@thunderstore/dapper/types";
+import {
+  PackageSubmissionError,
+  packageSubmissionErrorSchema,
+  packageSubmissionStatusSchema,
+} from "@thunderstore/thunderstore-api";
 
 interface CommunityOption {
   value: string;
@@ -107,7 +112,7 @@ export default function Upload() {
 
   // Teams do not have a separate identifier, the team name is the identifier
   useEffect(() => {
-    setAvailableTeams(session.getSessionCurrentUser()?.teams ?? []);
+    setAvailableTeams(session.getSessionCurrentUser()?.teams_full ?? []);
   }, [session]);
 
   const [NSFW, setNSFW] = useState<boolean>(false);
@@ -146,8 +151,9 @@ export default function Upload() {
 
   const [submissionStatus, setSubmissionStatus] =
     useState<PackageSubmissionStatus>();
-  const [submissionError, setSubmissionError] =
-    useState<PackageSubmissionResponse>({});
+  const [submissionError, setSubmissionError] = useState<
+    PackageSubmissionError | undefined
+  >();
 
   const startUpload = useCallback(async () => {
     // console.log("Starting upload");
@@ -187,12 +193,20 @@ export default function Upload() {
   const submit = useCallback(async () => {
     if (!usermedia?.uuid) {
       setSubmissionError({
+        upload_uuid: null,
+        author_name: null,
+        categories: null,
+        communities: null,
+        has_nsfw_content: null,
+        detail: null,
+        file: null,
+        team: null,
         __all__: ["Upload not completed"],
       });
       return;
     }
 
-    setSubmissionError({});
+    setSubmissionError(undefined);
     const config = session.getConfig();
     const dapper = new DapperTs(() => config);
     const result = await dapper.postPackageSubmissionMetadata(
@@ -215,15 +229,24 @@ export default function Upload() {
     } else {
       // Check if the submission request had an error
       // console.log("Submission error:", result);
-      if (packageSubmissionErrorSchema.safeParse(result).success) {
-        setSubmissionError(result);
+      const errorParsed = packageSubmissionErrorSchema.safeParse(result);
+      if (errorParsed.success) {
+        setSubmissionError(errorParsed.data);
         return;
       }
     }
 
     // Handle successful submission
     if ("task_error" in result && result.task_error) {
       setSubmissionError({
+        upload_uuid: null,
+        author_name: null,
+        categories: null,
+        communities: null,
+        has_nsfw_content: null,
+        detail: null,
+        file: null,
+        team: null,
         __all__: [`Submission failed: ${result.result}`],
       });
       return;
@@ -255,16 +278,44 @@ export default function Upload() {
     }
   }, [selectedCommunities]);
 
-  const pollSubmission = async (submissionId: string) => {
+  const pollSubmission = async (
+    submissionId: string
+  ): Promise<
+    | { success: true; data: PackageSubmissionStatus }
+    | { success: false; data: PackageSubmissionError }
+  > => {
     console.log("Polling submission status");
     // Wait 5 seconds before polling again
     await new Promise((resolve) => setTimeout(resolve, 5000));
     const result = await window.Dapper.getPackageSubmissionStatus(submissionId);
     const parsedResult = packageSubmissionStatusSchema.safeParse(result);
     if (parsedResult.success) {
-      return { success: true, data: parsedResult.data };
+      return {
+        success: true,
+        data: parsedResult.data as PackageSubmissionStatus,
+      };
     } else {
-      return { success: false, data: parsedResult.data };
+      const errorParsed = packageSubmissionErrorSchema.safeParse(result);
+      if (errorParsed.success) {
+        return {
+          success: false,
+          data: errorParsed.data as PackageSubmissionError,
+        };
+      }
+      return {
+        success: false,
+        data: {
+          upload_uuid: null,
+          author_name: null,
+          categories: null,
+          communities: null,
+          has_nsfw_content: null,
+          detail: null,
+          file: null,
+          team: null,
+          __all__: ["Error while polling submission status"],
+        },
+      };
     }
   };
 
@@ -294,18 +345,20 @@ export default function Upload() {
             submissionStatusRef.current = data.data;
             setSubmissionStatus(data.data);
           } else {
-            if (data.data) {
-              setSubmissionError(data.data);
-            } else {
-              setSubmissionError({
-                __all__: ["Unable to check submission status"],
-              });
-            }
+            setSubmissionError(data.data);
           }
         },
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         (_error) => {
           setSubmissionError({
+            upload_uuid: null,
+            author_name: null,
+            categories: null,
+            communities: null,
+            has_nsfw_content: null,
+            detail: null,
+            file: null,
+            team: null,
             __all__: ["Unable to check submission status"],
           });
         }
@@ -361,6 +414,14 @@ export default function Upload() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         (_error) => {
           setSubmissionError({
+            upload_uuid: null,
+            author_name: null,
+            categories: null,
+            communities: null,
+            has_nsfw_content: null,
+            detail: null,
+            file: null,
+            team: null,
             __all__: ["Unable to check submission status"],
           });
         }
@@ -663,7 +724,7 @@ export default function Upload() {
                 <p>Please select at least one community.</p>
               </div>
             )}
-            {Object.keys(submissionError).length > 0 && (
+            {submissionError && Object.keys(submissionError).length > 0 && (
               <div className="upload__error">
                 {Object.entries(submissionError).map(([field, errors]) => (
                   <div key={field}>

packages/cyberstorm-forms/package.json

@@ -22,9 +22,9 @@
     "@radix-ui/react-select": "^2.1.1",
     "@thunderstore/cyberstorm": "*",
     "@thunderstore/dapper": "^0.1.0",
-    "@thunderstore/thunderstore-api": "*",
-    "@thunderstore/ts-api-react-actions": "*",
-    "@thunderstore/ts-api-react-forms": "*",
+    "@thunderstore/thunderstore-api": "^0.1.0",
+    "@thunderstore/ts-api-react-actions": "^0.1.0",
+    "@thunderstore/ts-api-react-forms": "^0.1.0",
     "@thunderstore/use-promise": "^0.1.0",
     "@types/react": "^18.3.8",
     "react": "^18.3.1",

packages/cyberstorm-forms/src/forms/DisbandTeamForm.tsx

@@ -15,7 +15,7 @@ import {
 } from "@thunderstore/cyberstorm-forms";
 
 import { CyberstormLink } from "@thunderstore/cyberstorm";
-import { teamDisbandRequestParamsSchema } from "@thunderstore/thunderstore-api/src/schemas/requestSchemas";
+import { teamDisbandRequestParamsSchema } from "@thunderstore/thunderstore-api";
 
 export function DisbandTeamForm(props: {
   teamName: string;

packages/dapper-ts/src/index.ts

@@ -5,11 +5,11 @@ import { getDynamicHTML } from "./methods/dynamicHTML";
 import { getCommunities, getCommunity } from "./methods/communities";
 import { getCommunityFilters } from "./methods/communityFilters";
 import { getRatedPackages } from "./methods/ratedPackages";
-export { ratedPackagesSchema } from "./methods/ratedPackages";
-import { getCurrentUser, emptyUser } from "./methods/currentUser";
-export const getEmptyUser = emptyUser;
-export { dependencyShema } from "./methods/packageListings";
-export { currentUserSchema } from "./methods/currentUser";
+// export { ratedPackagesSchema } from "./methods/ratedPackages";
+import { getCurrentUser } from "./methods/currentUser";
+// export const getEmptyUser = emptyUser;
+// export { dependencyShema } from "./methods/packageListings";
+// export { currentUserSchema } from "./methods/currentUser";
 import {
   getPackageChangelog,
   getPackageReadme,
@@ -26,7 +26,7 @@ import {
   getTeamMembers,
   getTeamServiceAccounts,
 } from "./methods/team";
-export type { PackageSubmissionResponse } from "./methods/package";
+// export type { PackageSubmissionResponse } from "./methods/package";
 
 export interface DapperTsInterface extends DapperInterface {
   config: () => RequestConfig;

packages/dapper-ts/src/methods/communities.ts

@@ -1,41 +1,54 @@
 import {
+  CommunityListOrderingEnum,
   fetchCommunity,
   fetchCommunityList,
 } from "@thunderstore/thunderstore-api";
 
 import { DapperTsInterface } from "../index";
-import { formatErrorMessage } from "../utils";
 
 export async function getCommunities(
   this: DapperTsInterface,
-  page = 1,
-  ordering = "name",
+  page?: number,
+  ordering?: string,
   search?: string
 ) {
-  const data = await fetchCommunityList(this.config, page, ordering, search);
-  const parsed = communitiesSchema.safeParse(data);
-
-  if (!parsed.success) {
-    throw new Error(formatErrorMessage(parsed.error));
+  let supportedOrdering = undefined;
+  // As dapper accepts more options, than the TS api at this time, we'll need to check if the given ordering is supported.
+  if (ordering && ordering in CommunityListOrderingEnum) {
+    supportedOrdering = ordering as CommunityListOrderingEnum;
   }
+  const data = await fetchCommunityList({
+    config: this.config,
+    queryParams: [
+      { key: "page", value: page, impotent: 1 },
+      {
+        key: "ordering",
+        value: supportedOrdering,
+        impotent: CommunityListOrderingEnum.Popular,
+      },
+      { key: "search", value: search },
+    ],
+    params: {},
+    data: {},
+  });
 
   return {
-    count: parsed.data.count,
-    hasMore: Boolean(parsed.data.next),
-    results: parsed.data.results,
+    count: data.count,
+    hasMore: Boolean(data.next),
+    results: data.results,
   };
 }
 
 export async function getCommunity(
   this: DapperTsInterface,
   communityId: string
 ) {
-  const data = await fetchCommunity(this.config, communityId);
-  const parsed = communitySchema.safeParse(data);
-
-  if (!parsed.success) {
-    throw new Error(formatErrorMessage(parsed.error));
-  }
+  const data = await fetchCommunity({
+    config: this.config,
+    params: { community_id: communityId },
+    data: {},
+    queryParams: {},
+  });
 
-  return parsed.data;
+  return data;
 }

packages/dapper-ts/src/methods/communityFilters.ts

@@ -1,32 +1,17 @@
-import { z } from "zod";
 import { fetchCommunityFilters } from "@thunderstore/thunderstore-api";
 
 import { DapperTsInterface } from "../index";
-import { PackageCategory } from "../sharedSchemas";
-import { formatErrorMessage } from "../utils";
-
-const Section = z.object({
-  uuid: z.string().uuid(),
-  name: z.string().nonempty(),
-  slug: z.string().nonempty(),
-  priority: z.number().int(),
-});
-
-const schema = z.object({
-  package_categories: PackageCategory.array(),
-  sections: Section.array(),
-});
 
 export async function getCommunityFilters(
   this: DapperTsInterface,
   communityId: string
 ) {
-  const data = await fetchCommunityFilters(this.config, communityId);
-  const parsed = schema.safeParse(data);
-
-  if (!parsed.success) {
-    throw new Error(formatErrorMessage(parsed.error));
-  }
+  const data = await fetchCommunityFilters({
+    config: this.config,
+    params: { community_id: communityId },
+    data: {},
+    queryParams: {},
+  });
 
-  return parsed.data;
+  return data;
 }