Refactor selectScopeHandler

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

@@ -7,13 +7,13 @@ import {
 
 import { useCurrentUser } from '~/stores-universal/context';
 
-import { AiAssistantScopeType, AiAssistantAccessScope } from '../../../../interfaces/ai-assistant';
+import { AiAssistantAccessScope } from '../../../../interfaces/ai-assistant';
 
 type Props = {
   isDisabled: boolean,
   isDisabledGroups: boolean,
   selectedAccessScope: AiAssistantAccessScope,
-  onSelect: (accessScope: AiAssistantAccessScope, scopeType: AiAssistantScopeType) => void,
+  onSelect: (accessScope: AiAssistantAccessScope) => void,
 }
 
 export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
@@ -35,7 +35,7 @@ export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
   }, [currentUser?.username, t]);
 
   const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
-    onSelect(accessScope, AiAssistantScopeType.ACCESS);
+    onSelect(accessScope);
   }, [onSelect]);
 
   return (

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

@@ -20,7 +20,8 @@ type Props = {
   selectedUserGroupsForShareScope: PopulatedGrantedGroup[],
   selectedUserGroupsForAccessScope: PopulatedGrantedGroup[],
   onSelectUserGroup: (userGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => void,
-  onSelectScope: (scopeType: AiAssistantScopeType, scope: AiAssistantAccessScope | AiAssistantShareScope) => void,
+  onSelectShareScope: (scope: AiAssistantShareScope) => void,
+  onSelectAccessScope: (scope: AiAssistantAccessScope) => void,
 }
 
 export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
@@ -29,8 +30,9 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
     selectedAccessScope,
     selectedUserGroupsForShareScope,
     selectedUserGroupsForAccessScope,
-    onSelectScope,
     onSelectUserGroup,
+    onSelectShareScope,
+    onSelectAccessScope,
   } = props;
 
   const { data: userRelatedGroups } = useSWRxUserRelatedGroups();
@@ -43,23 +45,35 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
   const changeShareToggleHandler = useCallback(() => {
     setIsShared((prev) => {
       if (prev) { // if isShared === true
-        onSelectScope(AiAssistantScopeType.ACCESS, AiAssistantAccessScope.OWNER);
-        onSelectScope(AiAssistantScopeType.SHARE, AiAssistantShareScope.SAME_AS_ACCESS_SCOPE);
+        onSelectShareScope(AiAssistantShareScope.SAME_AS_ACCESS_SCOPE);
+        onSelectAccessScope(AiAssistantAccessScope.OWNER);
       }
       else {
-        onSelectScope(AiAssistantScopeType.SHARE, AiAssistantShareScope.PUBLIC_ONLY);
+        onSelectShareScope(AiAssistantShareScope.PUBLIC_ONLY);
       }
       return !prev;
     });
-  }, [onSelectScope]);
+  }, [onSelectAccessScope, onSelectShareScope]);
 
-  const selectScopeHandler = useCallback((scope: AiAssistantAccessScope | AiAssistantShareScope, scopeType: AiAssistantScopeType) => {
-    onSelectScope(scopeType, scope);
-    if (scope === 'groups' && !hasNoRelatedGroups) {
-      setSelectedUserGroupType(scopeType);
-      setIsSelectUserGroupModalOpen(true);
+  const selectGroupScopeHandler = useCallback((scopeType: AiAssistantScopeType) => {
+    setSelectedUserGroupType(scopeType);
+    setIsSelectUserGroupModalOpen(true);
+  }, []);
+
+  const selectShareScopeHandler = useCallback((shareScope: AiAssistantShareScope) => {
+    onSelectShareScope(shareScope);
+    if (shareScope === AiAssistantShareScope.GROUPS && !hasNoRelatedGroups) {
+      selectGroupScopeHandler(AiAssistantScopeType.SHARE);
+    }
+  }, [hasNoRelatedGroups, onSelectShareScope, selectGroupScopeHandler]);
+
+  const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
+    onSelectAccessScope(accessScope);
+    if (accessScope === AiAssistantAccessScope.GROUPS && !hasNoRelatedGroups) {
+      selectGroupScopeHandler(AiAssistantScopeType.ACCESS);
     }
-  }, [hasNoRelatedGroups, onSelectScope]);
+  }, [hasNoRelatedGroups, onSelectAccessScope, selectGroupScopeHandler]);
+
 
   return (
     <>
@@ -84,15 +98,14 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
           isDisabled={!isShared}
           isDisabledGroups={hasNoRelatedGroups}
           selectedAccessScope={selectedAccessScope}
-          onSelect={selectScopeHandler}
+          onSelect={selectAccessScopeHandler}
         />
 
         <ShareScopeSwitch
           isDisabled={!isShared}
           isDisabledGroups={hasNoRelatedGroups}
           selectedShareScope={selectedShareScope}
-          selectedAccessScope={selectedAccessScope}
-          onSelect={selectScopeHandler}
+          onSelect={selectShareScopeHandler}
         />
 
         <SelectUserGroupModal

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

@@ -105,15 +105,12 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   /*
   *  For AiAssistantManagementEditShare methods
   */
-  const selectScopeHandler = useCallback((scopeType: AiAssistantScopeType, targetScope: AiAssistantAccessScope | AiAssistantShareScope) => {
-    if (scopeType === AiAssistantScopeType.ACCESS) {
-      setSelectedAccessScope(targetScope as AiAssistantAccessScope);
-      return;
-    }
-    if (scopeType === AiAssistantScopeType.SHARE) {
-      setSelectedShareScope(targetScope as AiAssistantShareScope);
-      return;
-    }
+  const selectShareScopeHandler = useCallback((shareScope: AiAssistantShareScope) => {
+    setSelectedShareScope(shareScope);
+  }, []);
+
+  const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
+    setSelectedAccessScope(accessScope);
   }, []);
 
   const selectUserGroupsHandler = useCallback((targetUserGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => {
@@ -179,8 +176,9 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
             selectedAccessScope={selectedAccessScope}
             selectedUserGroupsForShareScope={selectedUserGroupsForShareScope}
             selectedUserGroupsForAccessScope={selectedUserGroupsForAccessScope}
-            onSelectScope={selectScopeHandler}
             onSelectUserGroup={selectUserGroupsHandler}
+            onSelectShareScope={selectShareScopeHandler}
+            onSelectAccessScope={selectAccessScopeHandler}
           />
         </TabPane>
 

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

@@ -5,16 +5,13 @@ import {
   Input, Label, FormGroup,
 } from 'reactstrap';
 
-import type { AiAssistantAccessScope } from '../../../../interfaces/ai-assistant';
-import { AiAssistantShareScope, AiAssistantScopeType } from '../../../../interfaces/ai-assistant';
-
+import { AiAssistantShareScope } from '../../../../interfaces/ai-assistant';
 
 type Props = {
   isDisabled: boolean,
   isDisabledGroups: boolean,
   selectedShareScope: AiAssistantShareScope,
-  selectedAccessScope: AiAssistantAccessScope,
-  onSelect: (shareScope: AiAssistantShareScope, scopeType: AiAssistantScopeType) => void,
+  onSelect: (shareScope: AiAssistantShareScope) => void,
 }
 
 export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
@@ -40,7 +37,7 @@ export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
               id="shareGroup"
               className="form-check-input"
               disabled={isDisabled || (isDisabledGroups && shareScope === AiAssistantShareScope.GROUPS)}
-              onChange={() => onSelect(shareScope, AiAssistantScopeType.SHARE)}
+              onChange={() => onSelect(shareScope)}
               checked={selectedShareScope === shareScope}
             />
             <Label check for="shareGroup" className="d-flex flex-column">