remove isAlsoMailSearched and isAlsoNameSearched variables from AdminUserGroupContainer

packages/app/src/client/services/AdminUserGroupDetailContainer.js

@@ -42,8 +42,6 @@ export default class AdminUserGroupDetailContainer extends Container {
 
     // this.init();
 
-    this.switchIsAlsoMailSearched = this.switchIsAlsoMailSearched.bind(this);
-    this.switchIsAlsoNameSearched = this.switchIsAlsoNameSearched.bind(this);
   }
 
   /**
@@ -53,19 +51,4 @@ export default class AdminUserGroupDetailContainer extends Container {
     return 'AdminUserGroupDetailContainer';
   }
 
-
-  /**
-   * switch isAlsoMailSearched
-   */
-  switchIsAlsoMailSearched() {
-    this.setState({ isAlsoMailSearched: !this.state.isAlsoMailSearched });
-  }
-
-  /**
-   * switch isAlsoNameSearched
-   */
-  switchIsAlsoNameSearched() {
-    this.setState({ isAlsoNameSearched: !this.state.isAlsoNameSearched });
-  }
-
 }

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -24,9 +24,9 @@ import {
 
 
 const UserGroupPageList = dynamic(() => import('./UserGroupPageList'), { ssr: false });
-const UserGroupUserModal = dynamic(() => import('./UserGroupUserModal'), { ssr: false });
 const UserGroupUserTable = dynamic(() => import('./UserGroupUserTable'), { ssr: false });
 
+const UserGroupUserModal = dynamic(() => import('./UserGroupUserModal').then(mod => mod.UserGroupUserModal), { ssr: false });
 const UserGroupDeleteModal = dynamic(() => import('../UserGroup/UserGroupDeleteModal').then(mod => mod.UserGroupDeleteModal), { ssr: false });
 const UserGroupDropdown = dynamic(() => import('../UserGroup/UserGroupDropdown').then(mod => mod.UserGroupDropdown), { ssr: false });
 const UserGroupForm = dynamic(() => import('../UserGroup/UserGroupForm').then(mod => mod.UserGroupForm), { ssr: false });
@@ -89,16 +89,13 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
 
   const { open: openUpdateParentConfirmModal } = useUpdateUserGroupConfirmModal();
 
-
   /*
    * Function
    */
-  // TODO 85062: old name: switchIsAlsoMailSearched
   const toggleIsAlsoMailSearched = useCallback(() => {
     setAlsoMailSearched(prev => !prev);
   }, []);
 
-  // TODO 85062: old name: switchIsAlsoNameSearched
   const toggleAlsoNameSearched = useCallback(() => {
     setAlsoNameSearched(prev => !prev);
   }, []);
@@ -357,10 +354,14 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
         isOpen={isUserGroupUserModalShown}
         userGroup={currentUserGroup}
         searchType={searchType}
+        isAlsoMailSearched={isAlsoMailSearched}
+        isAlsoNameSearched={isAlsoNameSearched}
         onClickAddUserBtn={addUserByUsername}
         onSearchApplicableUsers={fetchApplicableUsers}
-        onChangeSearchType={switchSearchType}
+        onSwitchSearchType={switchSearchType}
         onClose={() => setIsUserGroupUserModalShown(false)}
+        onToggleIsAlsoMailSearched={toggleIsAlsoMailSearched}
+        onToggleIsAlsoNameSearched={toggleAlsoNameSearched}
       />
 
       <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.child_group_list')}</h2>

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserModal.tsx

@@ -9,9 +9,6 @@ import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetai
 import { IUserGroupHasId } from '~/interfaces/user';
 import { SearchTypes, SearchType } from '~/interfaces/user-group';
 
-
-import { withUnstatedContainers } from '../../UnstatedUtils';
-
 import CheckBoxForSerchUserOption from './CheckBoxForSerchUserOption';
 import RadioButtonForSerchUserOption from './RadioButtonForSerchUserOption';
 import UserGroupUserFormByInput from './UserGroupUserFormByInput';
@@ -21,16 +18,30 @@ type Props = {
   adminUserGroupDetailContainer: AdminUserGroupDetailContainer,
   userGroup: IUserGroupHasId,
   searchType: SearchType,
+  isAlsoMailSearched: boolean,
+  isAlsoNameSearched: boolean,
   onClickAddUserBtn: () => void,
   onSearchApplicableUsers: () => void,
-  onChangeSearchType: (searchType: SearchType) => void
+  onSwitchSearchType: (searchType: SearchType) => void
   onClose: () => void,
+  onToggleIsAlsoMailSearched: () => void,
+  onToggleIsAlsoNameSearched: () => void,
 }
 
-const UserGroupUserModal = (props: Props) => {
+export const UserGroupUserModal = (props: Props): JSX.Element => {
   const { t } = useTranslation();
   const {
-    isOpen, adminUserGroupDetailContainer, userGroup, searchType, onClickAddUserBtn, onSearchApplicableUsers, onChangeSearchType, onClose,
+    isOpen,
+    userGroup,
+    searchType,
+    onClickAddUserBtn,
+    onSearchApplicableUsers,
+    onSwitchSearchType,
+    onClose,
+    isAlsoMailSearched,
+    isAlsoNameSearched,
+    onToggleIsAlsoMailSearched,
+    onToggleIsAlsoNameSearched,
   } = props;
 
   return (
@@ -49,15 +60,15 @@ const UserGroupUserModal = (props: Props) => {
             <div className="mb-5">
               <CheckBoxForSerchUserOption
                 option="mail"
-                checked={adminUserGroupDetailContainer.state.isAlsoMailSearched}
-                onChange={adminUserGroupDetailContainer.switchIsAlsoMailSearched}
+                checked={isAlsoMailSearched}
+                onChange={onToggleIsAlsoMailSearched}
               />
             </div>
             <div className="mb-5">
               <CheckBoxForSerchUserOption
                 option="name"
-                checked={adminUserGroupDetailContainer.state.isAlsoNameSearched}
-                onChange={adminUserGroupDetailContainer.switchIsAlsoNameSearched}
+                checked={isAlsoNameSearched}
+                onChange={onToggleIsAlsoNameSearched}
               />
             </div>
           </div>
@@ -66,21 +77,21 @@ const UserGroupUserModal = (props: Props) => {
               <RadioButtonForSerchUserOption
                 searchType="forward"
                 checked={searchType === SearchTypes.FORWARD}
-                onChange={() => onChangeSearchType(SearchTypes.FORWARD)}
+                onChange={() => onSwitchSearchType(SearchTypes.FORWARD)}
               />
             </div>
             <div className="mb-5">
               <RadioButtonForSerchUserOption
                 searchType="partial"
                 checked={searchType === SearchTypes.PARTIAL}
-                onChange={() => onChangeSearchType(SearchTypes.PARTIAL)}
+                onChange={() => onSwitchSearchType(SearchTypes.PARTIAL)}
               />
             </div>
             <div className="mb-5">
               <RadioButtonForSerchUserOption
                 searchType="backward"
                 checked={searchType === SearchTypes.BACKWORD}
-                onChange={() => onChangeSearchType(SearchTypes.BACKWORD)}
+                onChange={() => onSwitchSearchType(SearchTypes.BACKWORD)}
               />
             </div>
           </div>
@@ -89,10 +100,3 @@ const UserGroupUserModal = (props: Props) => {
     </Modal>
   );
 };
-
-/**
- * Wrapper component for using unstated
- */
-const UserGroupUserModalWrapper = withUnstatedContainers(UserGroupUserModal, [AdminUserGroupDetailContainer]);
-
-export default UserGroupUserModalWrapper;