Merge pull request #3096 from Northeastern-Electric-Racing/#2693-requ…

…ired-and-optional-tabs-do-not-need-to-be-mutually-exclusive

#2693 Made Required and Optional Users Not Mutually Exclusive When Editing Design Reviews

src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetailPage.tsx

@@ -103,6 +103,13 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
     }
   };
 
+  const handleSelectingRequiredUser = (newValue: { label: string; id: string }[]) => {
+    const newRequiredUserIds = new Set(newValue.map((user) => user.id));
+    const filteredOptionalUsers = optionalUsers.filter((user) => !newRequiredUserIds.has(user.id));
+    setOptionalUsers(filteredOptionalUsers);
+    setRequiredUsers(newValue);
+  };
+
   const handleEdit = async (data?: FinalizeReviewInformation) => {
     const times = [];
     for (let i = startTime; i < endTime; i++) {
@@ -254,9 +261,9 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
                   limitTags={1}
                   renderTags={() => null}
                   id="required-users"
-                  options={users.filter((user) => !optionalUsers.some((optUser) => optUser.id === user.id))}
+                  options={users}
                   value={requiredUsers}
-                  onChange={(_event, newValue) => setRequiredUsers(newValue)}
+                  onChange={(_event, newValue) => handleSelectingRequiredUser(newValue)}
                   getOptionLabel={(option) => option.label}
                   renderOption={(props, option, { selected }) => (
                     <li {...props}>