imprv

packages/app/src/components/Questionnaire/QuestionnaireModal.tsx

@@ -65,7 +65,8 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
 
     sendAnswer(answers);
 
-    closeQuestionnaireModal();
+    const shouldCloseToastor = true;
+    closeQuestionnaireModal(shouldCloseToastor);
   }, [closeQuestionnaireModal, questionnaireOrder.questions, sendAnswer]);
 
   const denyBtnClickHandler = useCallback(async() => {
@@ -78,12 +79,13 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
     catch (e) {
       logger.error(e);
     }
-    closeQuestionnaireModal();
+    const shouldCloseToastor = true;
+    closeQuestionnaireModal(shouldCloseToastor);
   }, [closeQuestionnaireModal, questionnaireOrder._id, t]);
 
   // No showing toasts since not important
-  const closeBtnClickHandler = useCallback(async() => {
-    closeQuestionnaireModal();
+  const closeBtnClickHandler = useCallback(async(shouldCloseToastor: boolean) => {
+    closeQuestionnaireModal(shouldCloseToastor);
 
     try {
       await apiv3Put('/questionnaire/skip', {
@@ -95,17 +97,21 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
     }
   }, [closeQuestionnaireModal, questionnaireOrder._id]);
 
+  const closeBtnClickHandlerClosingToastor = useCallback(async() => {
+    closeBtnClickHandler(true);
+  }, [closeBtnClickHandler]);
+
   const questionnaireOrderTitle = lang === 'en_US' ? questionnaireOrder.title.en_US : questionnaireOrder.title.ja_JP;
 
   return (<Modal
     size="lg"
     isOpen={isOpened}
-    toggle={closeBtnClickHandler}
+    toggle={closeBtnClickHandlerClosingToastor}
   >
     <form onSubmit={submitHandler}>
       <ModalHeader
         tag="h4"
-        toggle={closeBtnClickHandler}
+        toggle={closeBtnClickHandlerClosingToastor}
         className="bg-primary text-light">
         <span>{t('questionnaire.give_us_feedback')}</span>
       </ModalHeader>

packages/app/src/components/Questionnaire/QuestionnaireToast.tsx

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
-import { toastError, toastSuccess } from '~/client/util/toastr';
+import { toastSuccess } from '~/client/util/toastr';
 import { IQuestionnaireOrderHasId } from '~/interfaces/questionnaire/questionnaire-order';
 import { useCurrentUser } from '~/stores/context';
 import { useQuestionnaireModal } from '~/stores/modal';
@@ -25,8 +25,7 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
   const { t } = useTranslation();
 
   const answerBtnClickHandler = useCallback(() => {
-    setIsOpen(false);
-    openQuestionnaireModal(questionnaireOrder._id);
+    openQuestionnaireModal(questionnaireOrder._id, () => setIsOpen(false));
   }, [openQuestionnaireModal, questionnaireOrder._id]);
 
   const denyBtnClickHandler = useCallback(async() => {

packages/app/src/stores/modal.tsx

@@ -2,15 +2,19 @@ import { useCallback, useMemo } from 'react';
 
 import { SWRResponse } from 'swr';
 
+
 import MarkdownTable from '~/client/models/MarkdownTable';
 import { IPageToDeleteWithMeta, IPageToRenameWithMeta } from '~/interfaces/page';
 import {
   OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction, OnPutBackedFunction,
 } from '~/interfaces/ui';
 import { IUserGroupHasId } from '~/interfaces/user';
+import loggerFactory from '~/utils/logger';
 
 import { useStaticSWR } from './use-static-swr';
 
+const logger = loggerFactory('growi:stores:modal');
+
 /*
 * PageCreateModal
 */
@@ -586,11 +590,12 @@ export const useConflictDiffModal = (): SWRResponse<ConflictDiffModalStatus, Err
 */
 type QuestionnaireModalStatuses = {
   openedQuestionnaireId: string | null,
+  closeToastor?: () => void | Promise<void>,
 }
 
 type QuestionnaireModalStatusUtils = {
-  open(string): Promise<QuestionnaireModalStatuses | undefined>
-  close(): Promise<QuestionnaireModalStatuses | undefined>
+  open(string: string, closeToastor: () => void | Promise<void>): Promise<QuestionnaireModalStatuses | undefined>
+  close(shouldCloseToastor?: boolean): Promise<QuestionnaireModalStatuses | undefined>
 }
 
 export const useQuestionnaireModal = (status?: QuestionnaireModalStatuses): SWRResponse<QuestionnaireModalStatuses, Error> & QuestionnaireModalStatusUtils => {
@@ -599,7 +604,17 @@ export const useQuestionnaireModal = (status?: QuestionnaireModalStatuses): SWRR
 
   return {
     ...swrResponse,
-    open: (questionnaireOrderId: string) => swrResponse.mutate({ openedQuestionnaireId: questionnaireOrderId }),
-    close: () => swrResponse.mutate({ openedQuestionnaireId: null }),
+    open: (questionnaireOrderId: string, closeToastor: () => void | Promise<void>) => swrResponse.mutate({
+      openedQuestionnaireId: questionnaireOrderId,
+      closeToastor,
+    }),
+    close: (shouldCloseToastor?: boolean) => {
+      if (shouldCloseToastor) {
+        swrResponse.data?.closeToastor?.();
+        if (swrResponse.data?.closeToastor === undefined) logger.debug('Tried to run `swrResponse.data?.closeToastor` but it was `undefined`');
+      }
+
+      return swrResponse.mutate({ openedQuestionnaireId: null });
+    },
   };
 };