show UserGroupUserTable

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

@@ -21,15 +21,16 @@ import {
   useSWRxSelectableParentUserGroups, useSWRxSelectableChildUserGroups, useSWRxAncestorUserGroups,
 } from '~/stores/user-group';
 
+// import UserGroupPageList from './UserGroupPageList';
+// import UserGroupUserModal from './UserGroupUserModal';
+const UserGroupUserTable = dynamic(() => import('./UserGroupUserTable'), { 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 });
 const UserGroupModal = dynamic(() => import('../UserGroup/UserGroupModal').then(mod => mod.UserGroupModal), { ssr: false });
 const UserGroupTable = dynamic(() => import('../UserGroup/UserGroupTable').then(mod => mod.UserGroupTable), { ssr: false });
 const UpdateParentConfirmModal = dynamic(() => import('./UpdateParentConfirmModal').then(mod => mod.UpdateParentConfirmModal), { ssr: false });
-// import UserGroupPageList from './UserGroupPageList';
-// import UserGroupUserModal from './UserGroupUserModal';
-// import UserGroupUserTable from './UserGroupUserTable';
 
 
 type Props = {
@@ -341,9 +342,7 @@ const UserGroupDetailPage = (props: Props) => {
         />
       </div>
       <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.user_list')}</h2>
-      {/* These compoents will be successfully shown in https://redmine.weseek.co.jp/issues/102159 */}
-      {/* <UserGroupUserTable /> */}
-      UserGroupUserTable
+      <UserGroupUserTable />
       {/* <UserGroupUserModal /> */}
       UserGroupUserModal
 

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

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import Xss from '~/services/xss';
+import { useSWRxMyUserGroupRelations } from '~/stores/user-group';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
@@ -33,7 +34,7 @@ class UserGroupUserTable extends React.Component {
   }
 
   render() {
-    const { t, adminUserGroupDetailContainer } = this.props;
+    const { t, adminUserGroupDetailContainer, userGroupRelations } = this.props;
 
     return (
       <table className="table table-bordered table-user-list">
@@ -50,7 +51,7 @@ class UserGroupUserTable extends React.Component {
           </tr>
         </thead>
         <tbody>
-          {adminUserGroupDetailContainer.state.userGroupRelations.map((relation) => {
+          {userGroupRelations != null && userGroupRelations.map((relation) => {
             const { relatedUser } = relation;
 
             return (
@@ -114,11 +115,14 @@ class UserGroupUserTable extends React.Component {
 UserGroupUserTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   adminUserGroupDetailContainer: PropTypes.instanceOf(AdminUserGroupDetailContainer).isRequired,
+  userGroupRelations: PropTypes.object,
 };
 
 const UserGroupUserTableWrapperFC = (props) => {
   const { t } = useTranslation();
-  return <UserGroupUserTable t={t} {...props} />;
+  const { data: myUserGroupRelations } = useSWRxMyUserGroupRelations();
+
+  return <UserGroupUserTable t={t} userGroupRelations={myUserGroupRelations} {...props} />;
 };
 
 /**