Merge pull request #424 from sohosai/fix/#411-disable-submit-button

申請・お知らせ作成時に、送信中は送信ボタンをdisabledにする
sohosai · Jul 24, 2024 · 44bad27 · 44bad27
2 parents 23e3fe2 + 889a4bf
commit 44bad27
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git a/src/app/committee/forms/[form_id]/edit/page.tsx b/src/app/committee/forms/[form_id]/edit/page.tsx
@@ -61,8 +61,8 @@ const EditFormPage: NextPage<{ params: { form_id: string } }> = ({ params }) =>
     }),
   };
 
-  const onSubmit: HandleFormEditorSubmit = (body) => {
-    toast.promise(
+  const onSubmit: HandleFormEditorSubmit = async (body) => {
+    await toast.promise(
       client
         .PUT(`/forms/{form_id}`, {
           params: {

diff --git a/src/app/committee/forms/new/page.tsx b/src/app/committee/forms/new/page.tsx
@@ -12,8 +12,8 @@ import { deleteMultipleUploadedFiles } from "@/lib/postFile";
 const CreateFormPage: NextPage = () => {
   const router = useRouter();
 
-  const onSubmit: HandleFormEditorSubmit = (body) => {
-    toast.promise(
+  const onSubmit: HandleFormEditorSubmit = async (body) => {
+    await toast.promise(
       client
         .POST("/forms", {
           body,

diff --git a/src/app/committee/news/[news_id]/edit/EditNewsForm.tsx b/src/app/committee/news/[news_id]/edit/EditNewsForm.tsx
@@ -27,7 +27,7 @@ export const EditNewsForm: FC<{
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isSubmitted, isSubmitSuccessful },
     reset,
   } = useForm<UpdateNewsSchemaType>({
     mode: "onBlur",
@@ -67,7 +67,7 @@ export const EditNewsForm: FC<{
     }
     const fileIds = await postFiles("public", attachments);
     const categories = data.categories.length === 0 ? projectCategories : data.categories;
-    toast.promise(
+    await toast.promise(
       client
         .PUT(`/news/{news_id}`, {
           params: { path: { news_id: news_id } },
@@ -111,7 +111,8 @@ export const EditNewsForm: FC<{
           color="purple"
           className={hstack({
             gap: 3,
-          })}>
+          })}
+          disabled={isSubmitted || isSubmitSuccessful}>
           <span
             className={css({
               fontSize: "xs",

diff --git a/src/app/committee/news/new/NewNewsForm.tsx b/src/app/committee/news/new/NewNewsForm.tsx
@@ -23,7 +23,7 @@ export const NewNewsForm = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isSubmitting, isSubmitSuccessful },
   } = useForm<NewNewsSchemaType>({
     mode: "onBlur",
     resolver: valibotResolver(NewNewsSchema),
@@ -39,7 +39,7 @@ export const NewNewsForm = () => {
     const fileIds = await postFiles("public", attachments);
     const categories = data.categories.length === 0 ? projectCategories : data.categories;
 
-    toast.promise(
+    await toast.promise(
       client
         .POST("/news", {
           body: {
@@ -78,7 +78,8 @@ export const NewNewsForm = () => {
           color="purple"
           className={hstack({
             gap: 3,
-          })}>
+          })}
+          disabled={isSubmitting || isSubmitSuccessful}>
           <span
             className={css({
               fontSize: "xs",

diff --git a/src/common_components/form_editor/FormEditor.tsx b/src/common_components/form_editor/FormEditor.tsx
@@ -69,13 +69,18 @@ const Divider: FC = () => {
 
 export type HandleFormEditorSubmit = (
   _: components["schemas"]["CreateForm"] | components["schemas"]["UpdateForm"],
-) => void;
+) => Promise<void>;
 
 export const FormEditor: FC<{
   defaultValues?: CreateFormInput;
   onSubmit: HandleFormEditorSubmit;
 }> = ({ onSubmit, defaultValues }) => {
-  const { register, control, handleSubmit } = useForm<CreateFormInput>({
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { isSubmitting, isSubmitSuccessful },
+  } = useForm<CreateFormInput>({
     defaultValues: defaultValues ?? {
       categories: [],
       attributes: [],
@@ -98,7 +103,7 @@ export const FormEditor: FC<{
             return;
           }
           let fileIds: FileIds | undefined = undefined;
-          toast.promise(
+          await toast.promise(
             postFiles("public", files).then((res) => {
               if (!res) {
                 throw new Error("ファイルのアップロードに失敗しました");
@@ -132,7 +137,7 @@ export const FormEditor: FC<{
                 ],
               };
 
-              onSubmit(body);
+              return onSubmit(body);
             }),
             {
               loading: "ファイルをアップロードしています",
@@ -378,7 +383,8 @@ export const FormEditor: FC<{
           color="purple"
           className={css({
             alignSelf: "center",
-          })}>
+          })}
+          disabled={isSubmitting || isSubmitSuccessful}>
           送信
         </Button>
       </form>