refs 113224: apply fb and refactor

packages/app/src/components/PopUps.tsx

@@ -1,17 +0,0 @@
-import { useSWRxQuestionnaireOrders } from '~/stores/questionnaire';
-
-import QuestionnaireToast from './Questionnaire/QuestionnaireToast';
-
-import styles from './PopUps.module.scss';
-
-const PopUps = (): JSX.Element => {
-  const { data: questionnaireOrders } = useSWRxQuestionnaireOrders();
-
-  return <div className={styles['grw-popups']}>
-    {questionnaireOrders?.map((questionnaireOrder) => {
-      return <QuestionnaireToast questionnaireOrder={questionnaireOrder} key={questionnaireOrder._id}/>;
-    })}
-  </div>;
-};
-
-export default PopUps;

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

@@ -19,7 +19,7 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
   const { data: currentUser } = useCurrentUser();
 
   const { data: questionnaireModalData, close: closeQuestionnaireModal } = useQuestionnaireModal();
-  const isOpened = questionnaireModalData?.[questionnaireOrder._id];
+  const isOpened = questionnaireModalData?.openedQuestionnaireId === questionnaireOrder._id;
 
   const { t } = useTranslation();
 
@@ -34,17 +34,17 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
         closeButton: true,
       },
     );
-    closeQuestionnaireModal(questionnaireOrder._id);
+    closeQuestionnaireModal();
   };
 
   return (<Modal
     size="lg"
     isOpen={isOpened}
-    toggle={() => closeQuestionnaireModal(questionnaireOrder._id)}
+    toggle={() => closeQuestionnaireModal()}
   >
     <ModalHeader
       tag="h4"
-      toggle={() => closeQuestionnaireModal(questionnaireOrder._id)}
+      toggle={() => closeQuestionnaireModal()}
       className="bg-primary text-light">
       <span>{t('questionnaire.give_us_feedback')}</span>
     </ModalHeader>

packages/app/src/components/PopUps.module.scss → packages/app/src/components/Questionnaire/QuestionnaireModalManager.module.scss

@@ -1,4 +1,4 @@
-.grw-popups :global {
+.grw-questionnaire-toasts :global {
   position: fixed;
   right: 20px;
   bottom: 20px;

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

@@ -1,6 +1,9 @@
 import { useSWRxQuestionnaireOrders } from '~/stores/questionnaire';
 
 import QuestionnaireModal from './QuestionnaireModal';
+import QuestionnaireToast from './QuestionnaireToast';
+
+import styles from './QuestionnaireModalManager.module.scss';
 
 const QuestionnaireModalManager = ():JSX.Element => {
   const { data: questionnaireOrders } = useSWRxQuestionnaireOrders();
@@ -9,6 +12,11 @@ const QuestionnaireModalManager = ():JSX.Element => {
     {questionnaireOrders?.map((questionnaireOrder) => {
       return <QuestionnaireModal questionnaireOrder={questionnaireOrder} key={questionnaireOrder._id} />;
     })}
+    <div className={styles['grw-questionnaire-toasts']}>
+      {questionnaireOrders?.map((questionnaireOrder) => {
+        return <QuestionnaireToast questionnaireOrder={questionnaireOrder} key={questionnaireOrder._id}/>;
+      })}
+    </div>
   </>;
 };
 

packages/app/src/pages/[[...path]].page.tsx

@@ -25,7 +25,6 @@ import { MainPane } from '~/components/Layout/MainPane';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { useTranslation } from '~/i18n';
 import { PageContentFooter } from '~/components/PageContentFooter';
-import PopUps from '~/components/PopUps';
 import QuestionnaireModalManager from '~/components/Questionnaire/QuestionnaireModalManager';
 import { DrawioViewerScript } from '~/components/Script/DrawioViewerScript';
 import { UsersHomePageFooterProps } from '~/components/UsersHomePageFooter';
@@ -375,7 +374,6 @@ Page.getLayout = function getLayout(page) {
       <DrawioModal />
       <HandsontableModal />
       <QuestionnaireModalManager />
-      <PopUps />
     </>
   );
 };

packages/app/src/stores/modal.tsx

@@ -585,23 +585,21 @@ export const useConflictDiffModal = (): SWRResponse<ConflictDiffModalStatus, Err
 * QuestionnaireModals
 */
 type QuestionnaireModalStatuses = {
-  // key: QuestionnaireOrder _id
-  // value: whether or not the modal of QuestionnaireOrder is opened
-  [key: string]: boolean,
+  openedQuestionnaireId: string | null,
 }
 
 type QuestionnaireModalStatusUtils = {
   open(string): Promise<QuestionnaireModalStatuses | undefined>
-  close(string): Promise<QuestionnaireModalStatuses | undefined>
+  close(): Promise<QuestionnaireModalStatuses | undefined>
 }
 
 export const useQuestionnaireModal = (status?: QuestionnaireModalStatuses): SWRResponse<QuestionnaireModalStatuses, Error> & QuestionnaireModalStatusUtils => {
-  const initialData: QuestionnaireModalStatuses = {};
+  const initialData: QuestionnaireModalStatuses = { openedQuestionnaireId: null };
   const swrResponse = useStaticSWR<QuestionnaireModalStatuses, Error>('questionnaireModalStatus', status, { fallbackData: initialData });
 
   return {
     ...swrResponse,
-    open: (questionnaireOrderId: string) => swrResponse.mutate({ [questionnaireOrderId]: true }),
-    close: (questionnaireOrderId: string) => swrResponse.mutate({ [questionnaireOrderId]: false }),
+    open: (questionnaireOrderId: string) => swrResponse.mutate({ openedQuestionnaireId: questionnaireOrderId }),
+    close: () => swrResponse.mutate({ openedQuestionnaireId: null }),
   };
 };

packages/app/src/styles/style-app.scss

@@ -18,7 +18,7 @@
 
 // icons
 
-// DO NOT CHANGE THER ORDER OF font-awesome AND simple-line-icons.
+// DO NOT CHANGE THE ORDER OF font-awesome AND simple-line-icons.
 // font-family used in simple-line-icons has to be prioritized than the one used in font-awesome.
 @import '~font-awesome';
 @import '~simple-line-icons';