show UserGroupPageList

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

@@ -47,14 +47,14 @@ export default class AdminUserGroupDetailContainer extends Container {
       grandChildUserGroups: [], // TODO 85062: fetch data on init (findChildGroupsByParentIds) For child group list
 
       childUserGroupRelations: [], // TODO 85062: fetch data on init (findRelationsByGroupIds) For child group list users
-      relatedPages: [], // For page list
+      // relatedPages: [], // For page list
       isUserGroupUserModalOpen: false,
       searchType: 'partial',
       isAlsoMailSearched: false,
       isAlsoNameSearched: false,
     };
 
-    this.init();
+    // this.init();
 
     this.switchIsAlsoMailSearched = this.switchIsAlsoMailSearched.bind(this);
     this.switchIsAlsoNameSearched = this.switchIsAlsoNameSearched.bind(this);
@@ -74,26 +74,26 @@ export default class AdminUserGroupDetailContainer extends Container {
   /**
    * retrieve user group data
    */
-  async init() {
-    try {
-      const [
-        userGroupRelations,
-        relatedPages,
-      ] = await Promise.all([
-        apiv3Get(`/user-groups/${this.state.userGroup._id}/user-group-relations`).then((res) => { return res.data.userGroupRelations }),
-        apiv3Get(`/user-groups/${this.state.userGroup._id}/pages`).then((res) => { return res.data.pages }),
-      ]);
-
-      await this.setState({
-        userGroupRelations,
-        relatedPages,
-      });
-    }
-    catch (err) {
-      logger.error(err);
-      toastError(new Error('Failed to fetch data'));
-    }
-  }
+  // async init() {
+  //   try {
+  //     const [
+  //       userGroupRelations,
+  //       relatedPages,
+  //     ] = await Promise.all([
+  //       apiv3Get(`/user-groups/${this.state.userGroup._id}/user-group-relations`).then((res) => { return res.data.userGroupRelations }),
+  //       apiv3Get(`/user-groups/${this.state.userGroup._id}/pages`).then((res) => { return res.data.pages }),
+  //     ]);
+
+  //     await this.setState({
+  //       userGroupRelations,
+  //       relatedPages,
+  //     });
+  //   }
+  //   catch (err) {
+  //     logger.error(err);
+  //     toastError(new Error('Failed to fetch data'));
+  //   }
+  // }
 
   /**
    * switch isAlsoMailSearched

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

@@ -12,7 +12,6 @@ import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import {
   apiv3Get, apiv3Put, apiv3Delete, apiv3Post,
 } from '~/client/util/apiv3-client';
-import { IPageHasId } from '~/interfaces/page';
 import { IUserGroup, IUserGroupHasId } from '~/interfaces/user';
 import { useIsAclEnabled } from '~/stores/context';
 import { useUpdateUserGroupConfirmModal } from '~/stores/modal';
@@ -46,7 +45,6 @@ const UserGroupDetailPage = (props: Props) => {
    * State (from AdminUserGroupDetailContainer)
    */
   const { data: currentUserGroup } = useSWRxUserGroup(currentUserGroupId);
-  const [relatedPages, setRelatedPages] = useState<IPageHasId[]>([]); // For page list
   const [searchType, setSearchType] = useState<string>('partial');
   const [isAlsoMailSearched, setAlsoMailSearched] = useState<boolean>(false);
   const [isAlsoNameSearched, setAlsoNameSearched] = useState<boolean>(false);
@@ -389,7 +387,7 @@ const UserGroupDetailPage = (props: Props) => {
 
       <h2 className="admin-setting-header mt-4">{t('Page')}</h2>
       <div className="page-list">
-        <UserGroupPageList />
+        <UserGroupPageList userGroupId={currentUserGroupId} relatedPages={userGroupPages} />
       </div>
     </div>
   );

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { apiv3Get } from '~/client/util/apiv3-client';
+import { IPageHasId } from '~/interfaces/page';
 
 import PageListItemS from '../../PageList/PageListItemS';
 import PaginationWrapper from '../../PaginationWrapper';
@@ -35,7 +36,7 @@ class UserGroupPageList extends React.Component {
     const offset = (pageNum - 1) * limit;
 
     try {
-      const res = await apiv3Get(`/user-groups/${this.props.adminUserGroupDetailContainer.state.userGroup._id}/pages`, {
+      const res = await apiv3Get(`/user-groups/${this.props.userGroupId}/pages`, {
         limit,
         offset,
       });
@@ -54,7 +55,7 @@ class UserGroupPageList extends React.Component {
 
   render() {
     const { t, adminUserGroupDetailContainer } = this.props;
-    const { relatedPages } = adminUserGroupDetailContainer.state;
+    const { relatedPages } = this.props;
 
     return (
       <Fragment>
@@ -80,11 +81,20 @@ class UserGroupPageList extends React.Component {
 UserGroupPageList.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   adminUserGroupDetailContainer: PropTypes.instanceOf(AdminUserGroupDetailContainer).isRequired,
+  userGroupId: PropTypes.string.isRequired,
+  relatedPages: PropTypes.arrayOf(IPageHasId),
 };
 
 const UserGroupPageListWrapperFC = (props) => {
   const { t } = useTranslation();
-  return <UserGroupPageList t={t} {...props} />;
+  const { userGroupId, relatedPages } = props;
+
+
+  if (userGroupId == null || relatedPages == null) {
+    return <></>;
+  }
+
+  return <UserGroupPageList t={t} userGroupId={userGroupId} relatedPages={relatedPages} {...props} />;
 };
 
 /**