QuestionnaireModalManager.tsx 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import { useCallback, type JSX } from 'react';
  2. import { useCurrentUser } from '~/stores-universal/context';
  3. import { StatusType } from '../../interfaces/questionnaire-answer-status';
  4. import type { IQuestionnaireOrderHasId } from '../../interfaces/questionnaire-order';
  5. import { GuestQuestionnaireAnswerStatusService } from '../services/guest-questionnaire-answer-status';
  6. import { useSWRxQuestionnaireOrders } from '../stores/questionnaire';
  7. import QuestionnaireModal from './QuestionnaireModal';
  8. import QuestionnaireToast from './QuestionnaireToast';
  9. import styles from './QuestionnaireModalManager.module.scss';
  10. const QuestionnaireModalManager = ():JSX.Element => {
  11. const { data: questionnaireOrders } = useSWRxQuestionnaireOrders();
  12. const { data: currentUser } = useCurrentUser();
  13. const questionnaireOrdersToShow = useCallback((questionnaireOrders: IQuestionnaireOrderHasId[] | undefined) => {
  14. const guestQuestionnaireAnswerStorage = GuestQuestionnaireAnswerStatusService.getStorage();
  15. if (currentUser != null || guestQuestionnaireAnswerStorage == null) {
  16. return questionnaireOrders;
  17. }
  18. return questionnaireOrders?.filter((questionnaireOrder) => {
  19. const localAnswerStatus = guestQuestionnaireAnswerStorage[questionnaireOrder._id];
  20. return localAnswerStatus == null || localAnswerStatus.status === StatusType.not_answered;
  21. });
  22. }, [currentUser]);
  23. return (
  24. <>
  25. {questionnaireOrders?.map((questionnaireOrder) => {
  26. return (
  27. <QuestionnaireModal
  28. questionnaireOrder={questionnaireOrder}
  29. key={questionnaireOrder._id}
  30. />
  31. );
  32. })}
  33. <div className={styles['grw-questionnaire-toasts']}>
  34. {questionnaireOrdersToShow(questionnaireOrders)?.map((questionnaireOrder) => {
  35. return <QuestionnaireToast questionnaireOrder={questionnaireOrder} key={questionnaireOrder._id} />;
  36. })}
  37. </div>
  38. </>
  39. );
  40. };
  41. export default QuestionnaireModalManager;