Merge pull request #2269 from HHS/mb/TTAHUB-3187/improve-recipient-gr…

…oups-component Fix for recipient groups component
HHS · Jul 12, 2024 · a0d8060 · a0d8060
2 parents fd063d7 + 0bf407b
commit a0d8060
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/frontend/src/components/RecipientsWithGroups.js b/frontend/src/components/RecipientsWithGroups.js
@@ -2,6 +2,7 @@ import React, {
   useState,
   useEffect,
 } from 'react';
+import PropTypes from 'prop-types';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import {
   Dropdown,
@@ -16,20 +17,19 @@ import GroupAlert from './GroupAlert';
 
 const placeholderText = '- Select -';
 
-const RecipientsWithGroups = () => {
+const RecipientsWithGroups = ({ regionId }) => {
   const {
     control,
     register,
     watch,
     setValue,
   } = useFormContext();
 
-  // Recipients.
-  const regionId = watch('regionId');
   const watchFormRecipients = watch('recipients');
   const watchGroup = watch('recipientGroup');
 
   const [recipientOptions, setRecipientOptions] = useState();
+
   useEffect(() => {
     async function fetchRecipients() {
       if (!recipientOptions && regionId) {
@@ -205,4 +205,8 @@ const RecipientsWithGroups = () => {
   );
 };
 
+RecipientsWithGroups.propTypes = {
+  regionId: PropTypes.number.isRequired,
+};
+
 export default RecipientsWithGroups;
diff --git a/frontend/src/pages/SessionForm/pages/participants.js b/frontend/src/pages/SessionForm/pages/participants.js
@@ -59,6 +59,9 @@ const Participants = ({ formData }) => {
   const isIstVisit = watch('isIstVisit') === 'yes';
   const isNotIstVisit = watch('isIstVisit') === 'no';
 
+  const regionId = watch('regionId');
+  const eventRegionId = formData.event ? formData.event.regionId : null;
+
   // handle existing sessions
   useDeepCompareEffect(() => {
     const {
@@ -141,7 +144,9 @@ const Participants = ({ formData }) => {
 
       {isNotIstVisit && (
         <>
-          <RecipientsWithGroups />
+          <RecipientsWithGroups
+            regionId={regionId || eventRegionId}
+          />
           <div className="margin-top-2">
             <FormItem
               label="Recipient participants"
@@ -184,7 +189,6 @@ const Participants = ({ formData }) => {
 
       {(isIstVisit || isNotIstVisit) && (
       <>
-
         <ParticipantsNumberOfParticipants
           isHybrid={isHybrid}
           register={register}
@@ -251,13 +255,15 @@ Participants.propTypes = {
     recipients: PropTypes.arrayOf(PropTypes.shape({
       label: PropTypes.string,
     })),
+    regionId: PropTypes.number,
     istSelectionComplete: PropTypes.bool,
     event: PropTypes.shape({
       id: PropTypes.number,
       name: PropTypes.string,
       displayId: PropTypes.string,
       status: PropTypes.string,
       pageState: PropTypes.objectOf(PropTypes.string),
+      regionId: PropTypes.number,
     }),
     numberOfParticipants: PropTypes.number,
     numberOfParticipantsInPerson: PropTypes.number,