Typescriptized components & Wrap with unstated at the end to not use the return type of withTranslation in other files

packages/app/src/components/Admin/UserGroup/UserGroupCreateForm.jsx

@@ -105,7 +105,7 @@ class UserGroupCreateForm extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupCreateFormWrapper = withUnstatedContainers(UserGroupCreateForm, [AppContainer]);
+const UserGroupCreateFormWrapper = withUnstatedContainers(withTranslation()(UserGroupCreateForm), [AppContainer]);
 
 UserGroupCreateForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -115,4 +115,4 @@ UserGroupCreateForm.propTypes = {
   onCreate: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(UserGroupCreateFormWrapper);
+export default UserGroupCreateFormWrapper;

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

@@ -1,10 +1,10 @@
 import React from 'react';
+import { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import { IUserGroup } from '~/interfaces/user';
 import { CustomWindow } from '~/interfaces/global';
@@ -18,15 +18,15 @@ import Xss from '~/services/xss';
  * @extends {React.Component}
  */
 type Props = {
-  t: any, // i18next
+  t: TFunction, // i18next
   appContainer: AppContainer,
 
   userGroups: IUserGroup[],
-  deleteUserGroup: IUserGroup,
-  onDelete?: (deleteGroupId: string, actionName: string, transferToUserGroupId: string) => any,
+  deleteUserGroup?: IUserGroup,
+  onDelete?: (deleteGroupId: string, actionName: string, transferToUserGroupId: string) => Promise<void> | void,
   isShow: boolean,
-  onShow?: () => any,
-  onHide?: () => any,
+  onShow?: (group: IUserGroup) => Promise<void> | void,
+  onHide?: () => Promise<void> | void,
 };
 type State = {
   actionName: string,
@@ -114,7 +114,7 @@ class UserGroupDeleteModal extends React.Component<Props, State> {
   }
 
   handleSubmit(e) {
-    if (this.props.onDelete == null) {
+    if (this.props.onDelete == null || this.props.deleteUserGroup == null) {
       return;
     }
 
@@ -153,7 +153,7 @@ class UserGroupDeleteModal extends React.Component<Props, State> {
     const { t } = this.props;
 
     const groups = this.props.userGroups.filter((group) => {
-      return group._id !== this.props.deleteUserGroup._id;
+      return group._id !== this.props?.deleteUserGroup?._id;
     });
 
     const options = groups.map((group) => {
@@ -200,7 +200,7 @@ class UserGroupDeleteModal extends React.Component<Props, State> {
         </ModalHeader>
         <ModalBody>
           <div>
-            <span className="font-weight-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{this.props.deleteUserGroup.name}&quot;
+            <span className="font-weight-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{this.props?.deleteUserGroup?.name || ''}&quot;
           </div>
           <div className="text-danger mt-5">
             {t('admin:user_group_management.delete_modal.desc')}
@@ -223,9 +223,4 @@ class UserGroupDeleteModal extends React.Component<Props, State> {
 
 }
 
-/**
- * Wrapper component for using unstated
- */
-const UserGroupDeleteModalWrapper = withUnstatedContainers(withTranslation()(UserGroupDeleteModal), [AppContainer]);
-
-export default UserGroupDeleteModalWrapper;
+export default withTranslation()(UserGroupDeleteModal);

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

@@ -47,7 +47,7 @@ class UserGroupPage extends React.Component<Props, State> {
     await this.syncUserGroupAndRelations();
   }
 
-  async showDeleteModal(group) {
+  async showDeleteModal(group: IUserGroup) {
     try {
       await this.syncUserGroupAndRelations();
 
@@ -141,6 +141,7 @@ class UserGroupPage extends React.Component<Props, State> {
           userGroupRelations={this.state.userGroupRelations}
         />
         <UserGroupDeleteModal
+          appContainer={this.props.appContainer}
           userGroups={this.state.userGroups}
           deleteUserGroup={this.state.selectedUserGroup}
           onDelete={this.deleteUserGroupById}

packages/app/src/components/Admin/UserGroup/UserGroupTable.jsx

@@ -141,7 +141,7 @@ class UserGroupTable extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupTableWrapper = withUnstatedContainers(UserGroupTable, [AppContainer]);
+const UserGroupTableWrapper = withUnstatedContainers(withTranslation()(UserGroupTable), [AppContainer]);
 
 
 UserGroupTable.propTypes = {
@@ -154,4 +154,4 @@ UserGroupTable.propTypes = {
   onDelete: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(UserGroupTableWrapper);
+export default UserGroupTableWrapper;

packages/app/src/components/UnstatedUtils.jsx

@@ -1,55 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-
-import React, { ForwardRefExoticComponent } from 'react';
-import { Subscribe } from 'unstated';
-
-/**
- * generate K/V object by specified instances
- *
- * @param {Array<object>} instances
- * @returns automatically named key and value
- *   e.g.
- *   {
- *     appContainer: <AppContainer />,
- *     exampleContainer: <ExampleContainer />,
- *   }
- */
-function generateAutoNamedProps(instances) {
-  const props = {};
-
-  instances.forEach((instance) => {
-    // get class name
-    const className = instance.constructor.getClassName();
-    // convert initial charactor to lower case
-    const propName = `${className.charAt(0).toLowerCase()}${className.slice(1)}`;
-
-    props[propName] = instance;
-  });
-
-  return props;
-}
-
-/**
- * Return a React component that is injected unstated containers
- *
- * @param {object} Component A React.Component or functional component
- * @param {array} containerClasses unstated container classes to subscribe
- * @returns returns such like a following element:
- *  e.g.
- *  <Subscribe to={containerClasses}>  // containerClasses = [AppContainer, PageContainer]
- *    { (appContainer, pageContainer) => (
- *      <Component appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
- *    )}
- *  </Subscribe>
- */
-export function withUnstatedContainers(Component, containerClasses) {
-  return React.forwardRef((props, ref) => (
-    // wrap with <Subscribe></Subscribe>
-    <Subscribe to={containerClasses}>
-      { (...containers) => {
-        const propsForContainers = generateAutoNamedProps(containers);
-        return <Component {...props} {...propsForContainers} ref={ref} />;
-      }}
-    </Subscribe>
-  ));
-}