Refactor selectUserGroupsHandler

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementEditShare.tsx

@@ -4,7 +4,7 @@ import {
   ModalBody, Input, Label,
 } from 'reactstrap';
 
-import { AiAssistantScopeType, AiAssistantShareScope, AiAssistantAccessScope } from '~/features/openai/interfaces/ai-assistant';
+import { AiAssistantShareScope, AiAssistantAccessScope } from '~/features/openai/interfaces/ai-assistant';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 import { useSWRxUserRelatedGroups } from '~/stores/user';
 
@@ -13,15 +13,22 @@ import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
 import { SelectUserGroupModal } from './SelectUserGroupModal';
 import { ShareScopeSwitch } from './ShareScopeSwitch';
 
+const ScopeType = {
+  ACCESS: 'Access',
+  SHARE: 'Share',
+} as const;
+
+type ScopeType = typeof ScopeType[keyof typeof ScopeType];
 
 type Props = {
   selectedShareScope: AiAssistantShareScope,
   selectedAccessScope: AiAssistantAccessScope,
   selectedUserGroupsForShareScope: PopulatedGrantedGroup[],
   selectedUserGroupsForAccessScope: PopulatedGrantedGroup[],
-  onSelectUserGroup: (userGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => void,
   onSelectShareScope: (scope: AiAssistantShareScope) => void,
   onSelectAccessScope: (scope: AiAssistantAccessScope) => void,
+  onSelectShareScopeUserGroups: (userGroup: PopulatedGrantedGroup) => void,
+  onSelectAccessScopeUserGroups: (userGroup: PopulatedGrantedGroup) => void,
 }
 
 export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
@@ -30,9 +37,10 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
     selectedAccessScope,
     selectedUserGroupsForShareScope,
     selectedUserGroupsForAccessScope,
-    onSelectUserGroup,
     onSelectShareScope,
     onSelectAccessScope,
+    onSelectShareScopeUserGroups,
+    onSelectAccessScopeUserGroups,
   } = props;
 
   const { data: userRelatedGroups } = useSWRxUserRelatedGroups();
@@ -40,7 +48,7 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
 
   const [isShared, setIsShared] = useState(false);
   const [isSelectUserGroupModalOpen, setIsSelectUserGroupModalOpen] = useState(false);
-  const [selectedUserGroupType, setSelectedUserGroupType] = useState<AiAssistantScopeType>(AiAssistantScopeType.ACCESS);
+  const [selectedUserGroupType, setSelectedUserGroupType] = useState<ScopeType>(ScopeType.ACCESS);
 
   const changeShareToggleHandler = useCallback(() => {
     setIsShared((prev) => {
@@ -55,7 +63,7 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
     });
   }, [onSelectAccessScope, onSelectShareScope]);
 
-  const selectGroupScopeHandler = useCallback((scopeType: AiAssistantScopeType) => {
+  const selectGroupScopeHandler = useCallback((scopeType: ScopeType) => {
     setSelectedUserGroupType(scopeType);
     setIsSelectUserGroupModalOpen(true);
   }, []);
@@ -63,14 +71,14 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
   const selectShareScopeHandler = useCallback((shareScope: AiAssistantShareScope) => {
     onSelectShareScope(shareScope);
     if (shareScope === AiAssistantShareScope.GROUPS && !hasNoRelatedGroups) {
-      selectGroupScopeHandler(AiAssistantScopeType.SHARE);
+      selectGroupScopeHandler(ScopeType.SHARE);
     }
   }, [hasNoRelatedGroups, onSelectShareScope, selectGroupScopeHandler]);
 
   const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
     onSelectAccessScope(accessScope);
     if (accessScope === AiAssistantAccessScope.GROUPS && !hasNoRelatedGroups) {
-      selectGroupScopeHandler(AiAssistantScopeType.ACCESS);
+      selectGroupScopeHandler(ScopeType.ACCESS);
     }
   }, [hasNoRelatedGroups, onSelectAccessScope, selectGroupScopeHandler]);
 
@@ -112,9 +120,15 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
           isOpen={isSelectUserGroupModalOpen}
           userRelatedGroups={userRelatedGroups?.relatedGroups}
           closeModal={() => setIsSelectUserGroupModalOpen(false)}
-          selectedUserGroupType={selectedUserGroupType}
-          selectedUserGroup={selectedUserGroupType === AiAssistantScopeType.ACCESS ? selectedUserGroupsForAccessScope : selectedUserGroupsForShareScope}
-          onSelect={onSelectUserGroup}
+          selectedUserGroups={selectedUserGroupType === ScopeType.ACCESS ? selectedUserGroupsForAccessScope : selectedUserGroupsForShareScope}
+          onSelect={(userGroup) => {
+            if (selectedUserGroupType === ScopeType.ACCESS) {
+              onSelectAccessScopeUserGroups(userGroup);
+            }
+            else {
+              onSelectShareScopeUserGroups(userGroup);
+            }
+          }}
         />
       </ModalBody>
     </>

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementModal.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Modal, TabContent, TabPane } from 'reactstrap';
 
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import { AiAssistantAccessScope, AiAssistantShareScope, AiAssistantScopeType } from '~/features/openai/interfaces/ai-assistant';
+import { AiAssistantAccessScope, AiAssistantShareScope } from '~/features/openai/interfaces/ai-assistant';
 import type { IPageForItem } from '~/interfaces/page';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 import loggerFactory from '~/utils/logger';
@@ -113,20 +113,29 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
     setSelectedAccessScope(accessScope);
   }, []);
 
-  const selectUserGroupsHandler = useCallback((targetUserGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => {
-    const selectedUserGroups = scopeType === AiAssistantScopeType.ACCESS ? selectedUserGroupsForAccessScope : selectedUserGroupsForShareScope;
-    const setSelectedUserGroups = scopeType === AiAssistantScopeType.ACCESS ? setSelectedUserGroupsForAccessScope : setSelectedUserGroupsForShareScope;
+  const selectShareScopeUserGroups = useCallback((targetUserGroup: PopulatedGrantedGroup) => {
+    const selectedUserGroupIds = selectedUserGroupsForShareScope.map(userGroup => userGroup.item._id);
+    if (selectedUserGroupIds.includes(targetUserGroup.item._id)) {
+      // if selected, remove it
+      setSelectedUserGroupsForShareScope(selectedUserGroupsForShareScope.filter(userGroup => userGroup.item._id !== targetUserGroup.item._id));
+    }
+    else {
+      // if not selected, add it
+      setSelectedUserGroupsForShareScope([...selectedUserGroupsForShareScope, targetUserGroup]);
+    }
+  }, [selectedUserGroupsForShareScope]);
 
-    const selectedUserGroupIds = selectedUserGroups.map(userGroup => userGroup.item._id);
+  const selectAccessScopeUserGroups = useCallback((targetUserGroup: PopulatedGrantedGroup) => {
+    const selectedUserGroupIds = selectedUserGroupsForAccessScope.map(userGroup => userGroup.item._id);
     if (selectedUserGroupIds.includes(targetUserGroup.item._id)) {
       // if selected, remove it
-      setSelectedUserGroups(selectedUserGroups.filter(userGroup => userGroup.item._id !== targetUserGroup.item._id));
+      setSelectedUserGroupsForAccessScope(selectedUserGroupsForAccessScope.filter(userGroup => userGroup.item._id !== targetUserGroup.item._id));
     }
     else {
       // if not selected, add it
-      setSelectedUserGroups([...selectedUserGroups, targetUserGroup]);
+      setSelectedUserGroupsForAccessScope([...selectedUserGroupsForAccessScope, targetUserGroup]);
     }
-  }, [selectedUserGroupsForAccessScope, selectedUserGroupsForShareScope]);
+  }, [selectedUserGroupsForAccessScope]);
 
 
   /*
@@ -176,9 +185,10 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
             selectedAccessScope={selectedAccessScope}
             selectedUserGroupsForShareScope={selectedUserGroupsForShareScope}
             selectedUserGroupsForAccessScope={selectedUserGroupsForAccessScope}
-            onSelectUserGroup={selectUserGroupsHandler}
             onSelectShareScope={selectShareScopeHandler}
             onSelectAccessScope={selectAccessScopeHandler}
+            onSelectAccessScopeUserGroups={selectAccessScopeUserGroups}
+            onSelectShareScopeUserGroups={selectShareScopeUserGroups}
           />
         </TabPane>
 

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/SelectUserGroupModal.tsx

@@ -6,23 +6,20 @@ import {
   Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
 
-import type { AiAssistantScopeType } from '~/features/openai/interfaces/ai-assistant';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 
 type Props = {
   isOpen: boolean,
   userRelatedGroups?: PopulatedGrantedGroup[],
-  selectedUserGroupType: AiAssistantScopeType,
-  selectedUserGroup: PopulatedGrantedGroup[],
+  selectedUserGroups: PopulatedGrantedGroup[],
   closeModal: () => void,
-  onSelect: (userGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => void,
+  onSelect: (userGroup: PopulatedGrantedGroup) => void,
 }
 
 const SelectUserGroupModalSubstance: React.FC<Props> = (props: Props) => {
   const {
     userRelatedGroups,
-    selectedUserGroup,
-    selectedUserGroupType,
+    selectedUserGroups,
     onSelect,
     closeModal,
   } = props;
@@ -30,9 +27,9 @@ const SelectUserGroupModalSubstance: React.FC<Props> = (props: Props) => {
   const { t } = useTranslation();
 
   const checked = useCallback((targetUserGroup: PopulatedGrantedGroup) => {
-    const selectedUserGroupIds = selectedUserGroup.map(userGroup => userGroup.item._id);
+    const selectedUserGroupIds = selectedUserGroups.map(userGroup => userGroup.item._id);
     return selectedUserGroupIds.includes(targetUserGroup.item._id);
-  }, [selectedUserGroup]);
+  }, [selectedUserGroups]);
 
   return (
     <ModalBody className="d-flex flex-column">
@@ -41,7 +38,7 @@ const SelectUserGroupModalSubstance: React.FC<Props> = (props: Props) => {
           className="btn btn-outline-primary d-flex justify-content-start mb-3 mx-4 align-items-center p-3"
           type="button"
           key={userGroup.item._id}
-          onClick={() => onSelect(userGroup, selectedUserGroupType)}
+          onClick={() => onSelect(userGroup)}
         >
           <input type="checkbox" checked={checked(userGroup)} onChange={() => {}} />
           <p className="ms-3 mb-0">{userGroup.item.name}</p>

apps/app/src/features/openai/interfaces/ai-assistant.ts

@@ -5,11 +5,6 @@ import type { VectorStore } from '../server/models/vector-store';
 /*
 *  Objects
 */
-export const AiAssistantScopeType = {
-  ACCESS: 'Access',
-  SHARE: 'Share',
-} as const;
-
 export const AiAssistantShareScope = {
   SAME_AS_ACCESS_SCOPE: 'sameAsAccessScope',
   PUBLIC_ONLY: 'publicOnly', // TODO: Rename to "PUBLIC"
@@ -26,7 +21,6 @@ export const AiAssistantAccessScope = {
 /*
 *  Interfaces
 */
-export type AiAssistantScopeType = typeof AiAssistantScopeType[keyof typeof AiAssistantScopeType];
 export type AiAssistantShareScope = typeof AiAssistantShareScope[keyof typeof AiAssistantShareScope];
 export type AiAssistantAccessScope = typeof AiAssistantAccessScope[keyof typeof AiAssistantAccessScope];