Revert "👐 Bye AppContainer"

This reverts commit 9a782240f6a6c4c1bb2dceb1315769191cde10e2.

packages/app/src/components/Admin/UserGroup/UserGroupDeleteModal.tsx

@@ -7,6 +7,7 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
+import AppContainer from '~/client/services/AppContainer';
 import { IUserGroupHasId } from '~/interfaces/user';
 import { CustomWindow } from '~/interfaces/global';
 import Xss from '~/services/xss';
@@ -19,6 +20,8 @@ import Xss from '~/services/xss';
  * @extends {React.Component}
  */
 type Props = {
+  appContainer: AppContainer,
+
   userGroups: IUserGroupHasId[],
   deleteUserGroup?: IUserGroupHasId,
   onDelete?: (deleteGroupId: string, actionName: string, transferToUserGroupId: string) => Promise<void> | void,

packages/app/src/components/Admin/UserGroup/UserGroupPage.tsx

@@ -130,6 +130,7 @@ const UserGroupPage: FC<Props> = (props: Props) => {
         (userGroups != null && userGroupRelations != null && childUserGroups != null) && (
           <>
             <UserGroupTable
+              appContainer={props.appContainer}
               userGroups={userGroups}
               childUserGroups={childUserGroups}
               isAclEnabled={isAclEnabled}
@@ -137,6 +138,7 @@ const UserGroupPage: FC<Props> = (props: Props) => {
               userGroupRelations={userGroupRelations}
             />
             <UserGroupDeleteModal
+              appContainer={props.appContainer}
               userGroups={userGroups}
               deleteUserGroup={selectedUserGroup}
               onDelete={deleteUserGroupById}

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

@@ -5,13 +5,13 @@ import { useTranslation } from 'react-i18next';
 
 import UserGroupForm from '../UserGroup/UserGroupForm';
 import UserGroupTable from '../UserGroup/UserGroupTable';
-import UserGroupDeleteModal from '../UserGroup/UserGroupDeleteModal';
 import UserGroupDropdown from '../UserGroup/UserGroupDropdown';
 import UserGroupUserTable from './UserGroupUserTable';
 import UserGroupUserModal from './UserGroupUserModal';
 import UserGroupPageList from './UserGroupPageList';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
+import AppContainer from '~/client/services/AppContainer';
 import {
   apiv3Get, apiv3Put, apiv3Delete, apiv3Post,
 } from '~/client/util/apiv3-client';
@@ -25,8 +25,8 @@ import {
 } from '~/stores/user-group';
 
 type Props = {
-  isAclEnabled: boolean,
-}
+  appContainer: AppContainer,
+};
 
 const UserGroupDetailPage: FC<Props> = (props: Props) => {
   const rootElem = document.getElementById('admin-user-group-detail');
@@ -132,10 +132,6 @@ const UserGroupDetailPage: FC<Props> = (props: Props) => {
     console.log('button clicked!');
   };
 
-  const showDeleteModal = () => {
-    console.log('showDeleteModal');
-  };
-
   /*
    * Dependencies
    */
@@ -170,26 +166,14 @@ const UserGroupDetailPage: FC<Props> = (props: Props) => {
         onClickCreateUserGroupButtonHandler={() => onClickCreateChildGroupButtonHandler()}
       />
 
-      { (childUserGroups != null && userGroupRelations != null) && (
-        <>
-          <UserGroupTable
-            userGroups={[userGroup]}
-            childUserGroups={childUserGroups}
-            isAclEnabled={props.isAclEnabled}
-            onDelete={showDeleteModal}
-            userGroupRelations={userGroupRelations}
-          />
-          {/* <UserGroupDeleteModal
-            userGroups={childUserGroups}
-            deleteUserGroup={selectedUserGroup}
-            onDelete={deleteUserGroupById}
-            isShow={isDeleteModalShown}
-            onShow={showDeleteModal}
-            onHide={hideDeleteModal}
-          /> */}
-        </>
-      )}
-
+      {/* <UserGroupTable
+        appContainer={props.appContainer}
+        userGroups={userGroups}
+        childUserGroups={childUserGroups}
+        isAclEnabled={isAclEnabled}
+        onDelete={showDeleteModal}
+        userGroupRelations={userGroupRelations}
+      /> */}
 
       <h2 className="admin-setting-header mt-4">{t('Page')}</h2>
       <div className="page-list">
@@ -200,4 +184,10 @@ const UserGroupDetailPage: FC<Props> = (props: Props) => {
 
 };
 
-export default UserGroupDetailPage;
+
+/**
+ * Wrapper component for using unstated
+ */
+const UserGroupDetailPageWrapper = withUnstatedContainers(UserGroupDetailPage, [AppContainer]);
+
+export default UserGroupDetailPageWrapper;