Merge pull request #917 from thunderstore-io/continuing-908

Fix CreateTeam forms UI problems and add field error parsing to Cyberstorm forms
thunderstore-io · Nov 24, 2023 · 1c15173 · 1c15173
2 parents 46dc662 + 362c3a9
commit 1c15173
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 48 deletions.
diff --git a/packages/cyberstorm-forms/src/components/FormTextInput.tsx b/packages/cyberstorm-forms/src/components/FormTextInput.tsx
@@ -31,7 +31,7 @@ export function FormTextInput<
         {...field}
         ref={field.ref}
         placeholder={placeholder}
-        color={isDirty ? (invalid ? "red" : "green") : undefined}
+        color={isDirty || invalid ? (invalid ? "red" : "green") : undefined}
         disabled={isSubmitting || disabled}
       />
       {error && <span className={styles.errorMessage}>{error.message}</span>}

diff --git a/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css b/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css
@@ -1,13 +1,14 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
 }
 
 .dialog {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  padding: var(--space--32);
+  border-top: var(--border-width--px) solid var(--color-surface--5);
 }
 
 .dialogText {
@@ -22,6 +23,6 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding-top: var(--space--16);
-  border-top: var(--border);
+  padding: var(--space--16) var(--space--24);
+  border-top: var(--border-width--px) solid var(--color-surface--5);
 }
diff --git a/packages/cyberstorm/src/components/Dialog/Dialog.module.css b/packages/cyberstorm/src/components/Dialog/Dialog.module.css
@@ -31,24 +31,6 @@
   overflow: auto;
 }
 
-.bodyPadding > * {
-  padding-right: var(--space--32);
-  padding-left: var(--space--32);
-}
-
-.bodyPadding > :first-child {
-  padding-top: var(--space--16);
-}
-
-.bodyPadding > :last-child {
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border);
-}
-
-.bodyPadding > :nth-last-child(2) {
-  padding-bottom: var(--space--32);
-}
-
 .header {
   display: flex;
   flex-direction: row-reverse;

diff --git a/packages/cyberstorm/src/components/Dialog/Dialog.tsx b/packages/cyberstorm/src/components/Dialog/Dialog.tsx
@@ -12,7 +12,6 @@ interface DialogProps extends PropsWithChildren {
   defaultOpen?: boolean;
   trigger?: ReactNode;
   title?: string;
-  disableDialogContentStyles?: boolean;
   showHeaderBorder?: boolean;
 }
 
@@ -25,7 +24,6 @@ export function Dialog(props: DialogProps) {
     defaultOpen = false,
     trigger,
     title = undefined,
-    disableDialogContentStyles = false,
     showHeaderBorder = false,
   } = props;
 
@@ -72,14 +70,7 @@ export function Dialog(props: DialogProps) {
                 {title ? <div className={styles.title}>{title}</div> : null}
               </div>
 
-              <div
-                className={classnames(
-                  styles.body,
-                  disableDialogContentStyles ? null : styles.bodyPadding
-                )}
-              >
-                {children}
-              </div>
+              <div className={styles.body}>{children}</div>
             </RadixDialog.Content>
           </RadixDialog.Overlay>
         </RadixDialog.Portal>

diff --git a/...src/components/Layout/PackageDetailLayout/PackageDependencyList/PackageDependencyList.tsx b/...src/components/Layout/PackageDetailLayout/PackageDependencyList/PackageDependencyList.tsx
@@ -84,7 +84,6 @@ export function PackageDependencyList(props: PackageDependencyListProps) {
         headerIcon={<FontAwesomeIcon icon={faBoxOpen} />}
         headerRightContent={
           <Dialog.Root
-            disableDialogContentStyles
             showHeaderBorder
             title="Required mods"
             trigger={

diff --git a/packages/thunderstore-api/src/apiFetch.ts b/packages/thunderstore-api/src/apiFetch.ts
@@ -8,23 +8,22 @@ const BASE_HEADERS = {
 export type apiFetchArgs = {
   config: RequestConfig;
   path: string;
-  method: RequestInit["method"];
   query?: string;
-  body?: RequestInit["body"];
+  request?: Omit<RequestInit, "headers">;
 };
 export async function apiFetch2(args: apiFetchArgs) {
   const url = getUrl(args.config, args.path, args.query);
 
   const response = await fetch(url, {
+    ...(args.request ?? {}),
     headers: {
       ...BASE_HEADERS,
       ...getAuthHeaders(args.config),
     },
-    body: args.body,
   });
 
   if (!response.ok) {
-    throw ApiError.createFromResponse(response);
+    throw await ApiError.createFromResponse(response);
   }
 
   return response.json();
@@ -38,7 +37,6 @@ export function apiFetch(config: RequestConfig, path: string, query?: string) {
     config,
     path,
     query,
-    method: "GET",
   });
 }
 

diff --git a/packages/thunderstore-api/src/errors.ts b/packages/thunderstore-api/src/errors.ts
@@ -1,19 +1,61 @@
+type JSONValue =
+  | string
+  | number
+  | boolean
+  | { [x: string]: JSONValue }
+  | JSONValue[];
+
 export function isApiError(e: Error | ApiError | unknown): e is ApiError {
   return e instanceof ApiError;
 }
 
 export class ApiError extends Error {
-  constructor(message?: string) {
-    super(message);
+  response: Response;
+  responseJson?: JSONValue;
+
+  constructor(args: {
+    message: string;
+    response: Response;
+    responseJson?: JSONValue;
+  }) {
+    super(args.message);
+    this.responseJson = args.responseJson;
+    this.response = args.response;
   }
 
-  static createFromResponse(response: Response): ApiError {
-    // TODO: Implement response parsing for known error scenarios
-    return new ApiError(`${response.status}: ${response.statusText}`);
+  static async createFromResponse(response: Response): Promise<ApiError> {
+    let responseJson: JSONValue | undefined;
+    try {
+      responseJson = await response.json();
+    } catch (e) {
+      responseJson = undefined;
+    }
+
+    return new ApiError({
+      message: `${response.status}: ${response.statusText}`,
+      response: response,
+      responseJson: responseJson,
+    });
   }
 
-  getFieldErrors(): { [key: string]: string[] } {
-    // TODO: Implement
-    return {};
+  getFieldErrors(): { [key: string | "root"]: string[] } {
+    if (typeof this.responseJson !== "object")
+      return { root: ["Unknown error occurred"] };
+    if (Array.isArray(this.responseJson)) {
+      return {
+        root: this.responseJson.map((x) => x.toString()),
+      };
+    } else {
+      return Object.fromEntries(
+        Object.entries(this.responseJson).map(([key, val]) => {
+          return [
+            key,
+            Array.isArray(val)
+              ? val.map((x) => x.toString())
+              : [val.toString()],
+          ];
+        })
+      );
+    }
   }
 }
diff --git a/packages/thunderstore-api/src/fetch/teamCreate.ts b/packages/thunderstore-api/src/fetch/teamCreate.ts
@@ -11,7 +11,9 @@ export function createTeam(config: RequestConfig, data: CreateTeamApiArgs) {
   return apiFetch2({
     config,
     path,
-    method: "POST",
-    body: JSON.stringify(data),
+    request: {
+      method: "POST",
+      body: JSON.stringify(data),
+    },
   });
 }