From 7d0dab6bb27ebfb87119975c2f1ed48674c21ae9 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Thu, 21 Sep 2023 02:50:17 -0400
Subject: [PATCH] fix(striker-ui): show request error, show submitting in edit
 file form

---
 striker-ui/components/Files/EditFileForm.tsx | 31 ++++++++++++++++----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/striker-ui/components/Files/EditFileForm.tsx b/striker-ui/components/Files/EditFileForm.tsx
index 4f62720c..3dfb6334 100644
--- a/striker-ui/components/Files/EditFileForm.tsx
+++ b/striker-ui/components/Files/EditFileForm.tsx
@@ -1,12 +1,13 @@
 import { useFormik } from 'formik';
-import { FC, useMemo } from 'react';
+import { FC, useCallback, useMemo, useRef } from 'react';
 
 import ActionGroup from '../ActionGroup';
 import api from '../../lib/api';
 import convertFormikErrorsToMessages from '../../lib/convertFormikErrorsToMessages';
 import FileInputGroup from './FileInputGroup';
 import FlexBox from '../FlexBox';
-import MessageGroup from '../MessageGroup';
+import handleAPIError from '../../lib/handleAPIError';
+import MessageGroup, { MessageGroupForwardedRefContent } from '../MessageGroup';
 import fileListSchema from './schema';
 
 const toEditFileRequestBody = (
@@ -67,6 +68,14 @@ const toEditFileRequestBody = (
 const EditFileForm: FC<EditFileFormProps> = (props) => {
   const { anvils, drHosts, previous: file } = props;
 
+  const messageGroupRef = useRef<MessageGroupForwardedRefContent>({});
+
+  const setApiMessage = useCallback(
+    (message?: Message) =>
+      messageGroupRef.current.setMessage?.call(null, 'api', message),
+    [],
+  );
+
   const formikInitialValues = useMemo<FileFormikValues>(() => {
     const { locations, name, type, uuid } = file;
 
@@ -97,10 +106,21 @@ const EditFileForm: FC<EditFileFormProps> = (props) => {
 
   const formik = useFormik<FileFormikValues>({
     initialValues: formikInitialValues,
-    onSubmit: (values) => {
+    onSubmit: (values, { setSubmitting }) => {
       const body = toEditFileRequestBody(values[file.uuid], file);
 
-      api.put(`/file/${file.uuid}`, body);
+      api
+        .put(`/file/${file.uuid}`, body)
+        .catch((error) => {
+          const emsg = handleAPIError(error);
+
+          emsg.children = <>Failed to modify file. {emsg.children}</>;
+
+          setApiMessage(emsg);
+        })
+        .finally(() => {
+          setSubmitting(false);
+        });
     },
     validationSchema: fileListSchema,
   });
@@ -136,8 +156,9 @@ const EditFileForm: FC<EditFileFormProps> = (props) => {
         showSyncInputGroup
         showTypeInput
       />
-      <MessageGroup count={1} messages={formikErrors} />
+      <MessageGroup count={1} messages={formikErrors} ref={messageGroupRef} />
       <ActionGroup
+        loading={formik.isSubmitting}
         actions={[
           {
             background: 'blue',