pass isUserGroupUserModalShown variable as props

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

@@ -57,6 +57,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
   const [isCreateModalShown, setCreateModalShown] = useState<boolean>(false);
   const [isUpdateModalShown, setUpdateModalShown] = useState<boolean>(false);
   const [isDeleteModalShown, setDeleteModalShown] = useState<boolean>(false);
+  const [isUserGroupUserModalShown, setIsUserGroupUserModalShown] = useState<boolean>(false);
 
   useEffect(() => {
     if ((currentUserGroupId != null && !ObjectId.isValid(currentUserGroupId)) || currentUserGroup === null) {
@@ -192,6 +193,14 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
     }
   }, [currentUserGroup?.name, currentUserGroupId, mutateUserGroupRelations, xss]);
 
+  const openUserGroupUserModal = useCallback(() => {
+    setIsUserGroupUserModalShown(true);
+  }, []);
+
+  const closeUserGroupUserModal = useCallback(() => {
+    setIsUserGroupUserModalShown(false);
+  }, []);
+
   const showUpdateModal = useCallback((group: IUserGroupHasId) => {
     setUpdateModalShown(true);
     setSelectedUserGroup(group);
@@ -351,8 +360,9 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
         />
       </div>
       <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.user_list')}</h2>
-      <UserGroupUserTable userGroup={currentUserGroup} userGroupRelations={childUserGroupRelations} onClickRemoveUserBtn={removeUserByUsername} />
+      <UserGroupUserTable userGroup={currentUserGroup} userGroupRelati onClickPlusBtn={openUserGroupUserModal} />
       <UserGroupUserModal
+        isOpen={isUserGroupUserModalShown}
         userGroup={currentUserGroup}
         searchType={searchType}
         onClickAddUserBtn={addUserByUsername}

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

@@ -17,6 +17,7 @@ import RadioButtonForSerchUserOption from './RadioButtonForSerchUserOption';
 import UserGroupUserFormByInput from './UserGroupUserFormByInput';
 
 type Props = {
+  isOpen: boolean,
   adminUserGroupDetailContainer: AdminUserGroupDetailContainer,
   userGroup: IUserGroupHasId,
   searchType: SearchType,
@@ -28,11 +29,11 @@ type Props = {
 const UserGroupUserModal = (props: Props) => {
   const { t } = useTranslation();
   const {
-    adminUserGroupDetailContainer, userGroup, searchType, onClickAddUserBtn, onSearchApplicableUsers, onChangeSearchType,
+    isOpen, adminUserGroupDetailContainer, userGroup, searchType, onClickAddUserBtn, onSearchApplicableUsers, onChangeSearchType,
   } = props;
 
   return (
-    <Modal isOpen={adminUserGroupDetailContainer.state.isUserGroupUserModalOpen} toggle={adminUserGroupDetailContainer.closeUserGroupUserModal}>
+    <Modal isOpen={isOpen} toggle={adminUserGroupDetailContainer.closeUserGroupUserModal}>
       <ModalHeader tag="h4" toggle={adminUserGroupDetailContainer.closeUserGroupUserModal} className="bg-info text-light">
         {t('admin:user_group_management.add_modal.add_user') }
       </ModalHeader>

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

@@ -4,24 +4,22 @@ import { UserPicture } from '@growi/ui';
 import dateFnsFormat from 'date-fns/format';
 import { useTranslation } from 'next-i18next';
 
-
-import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
 import { IUserGroupHasId, IUserGroupRelation } from '~/interfaces/user';
 import { useSWRxUserGroupRelations } from '~/stores/user-group';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-
 type Props = {
-  adminUserGroupDetailContainer: AdminUserGroupDetailContainer
   userGroupRelations: IUserGroupRelation[],
   userGroup: IUserGroupHasId,
   onClickRemoveUserBtn: (username: string) => Promise<void>,
+  onClickPlusBtn: () => void,
 }
 
-const UserGroupUserTable = (props: Props) => {
+export const UserGroupUserTable = (props: Props): JSX.Element => {
   const { t } = useTranslation();
 
-  const { adminUserGroupDetailContainer, userGroup, onClickRemoveUserBtn } = props;
+  const {
+    userGroup, onClickRemoveUserBtn, onClickPlusBtn,
+  } = props;
   const { data: userGroupRelations } = useSWRxUserGroupRelations(userGroup._id);
 
 
@@ -82,7 +80,7 @@ const UserGroupUserTable = (props: Props) => {
         <tr>
           <td></td>
           <td className="text-center">
-            <button className="btn btn-outline-secondary" type="button" onClick={adminUserGroupDetailContainer.openUserGroupUserModal}>
+            <button className="btn btn-outline-secondary" type="button" onClick={onClickPlusBtn}>
               <i className="ti ti-plus"></i>
             </button>
           </td>
@@ -97,9 +95,4 @@ const UserGroupUserTable = (props: Props) => {
   );
 };
 
-/**
- * Wrapper component for using unstated
- */
-const UserGroupUserTableWrapper = withUnstatedContainers(UserGroupUserTable, [AdminUserGroupDetailContainer]);
-
-export default UserGroupUserTableWrapper;
+export default UserGroupUserTable;