Merge pull request #1216 from userlocalhost/feature/ui/more_reusability

Fixed some common components to be more reusability

Author: hinashi

frontend/src/components/common/SubmitButton.tsx

@@ -16,7 +16,7 @@ interface Props {
   disabled: boolean;
   isSubmitting: boolean;
   handleSubmit: React.MouseEventHandler<HTMLButtonElement>;
-  handleCancel: React.MouseEventHandler<HTMLButtonElement>;
+  handleCancel?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 export const SubmitButton: FC<Props> = ({
@@ -37,9 +37,11 @@ export const SubmitButton: FC<Props> = ({
         {name}
         {isSubmitting && <CircularProgress size="20px" />}
       </StyledButton>
-      <StyledButton variant="contained" color="info" onClick={handleCancel}>
-        キャンセル
-      </StyledButton>
+      {handleCancel && (
+        <StyledButton variant="contained" color="info" onClick={handleCancel}>
+          キャンセル
+        </StyledButton>
+      )}
     </StyledBox>
   );
 };

frontend/src/services/AironeAPIErrorUtil.ts

@@ -118,7 +118,15 @@ export const extractAPIException = async <T>(
     const details = (typed as Record<string, Array<ErrorDetail>>)[fieldName];
     const message = details.map((e) => extractErrorDetail(e)).join(", ");
 
-    fieldReporter(fieldName as keyof T, message);
+    // This convert snake_case to camelCase (e.g. "nw_addr" -> "nwAddr")
+    const snakeToCamel = (x: string) =>
+      x
+        .toLowerCase()
+        .replace(/(_\w)/g, (m: string) => m.toUpperCase().substr(1));
+
+    // It's necessary to convert fieldName from snake case to cammel case because
+    // server-side response its name as snake case but zod expect it as camel case.
+    fieldReporter(snakeToCamel(fieldName) as keyof T, message);
   });
 };