jsx -> tsx

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
@@ -7,6 +6,9 @@ import {
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
+import { IUserGroup } from '~/interfaces/user';
+import { CustomWindow } from '~/interfaces/global';
+import Xss from '~/services/xss';
 
 /**
  * Delete User Group Select component
@@ -15,7 +17,33 @@ import AppContainer from '~/client/services/AppContainer';
  * @class GrantSelector
  * @extends {React.Component}
  */
-class UserGroupDeleteModal extends React.Component {
+type Props = {
+  t: any, // i18next
+  appContainer: AppContainer,
+
+  userGroups: IUserGroup[],
+  deleteUserGroup: IUserGroup,
+  onDelete?: (deleteGroupId: string, actionName: string, transferToUserGroupId: string) => any,
+  isShow: boolean,
+  onShow?: () => any,
+  onHide?: () => any,
+};
+type State = {
+  actionName: string,
+  transferToUserGroupId: string,
+};
+const initialState = {
+  actionName: '',
+  transferToUserGroupId: '',
+};
+
+class UserGroupDeleteModal extends React.Component<Props, State> {
+
+  actionForPages: any;
+
+  availableOptions: any;
+
+  xss: Xss;
 
   constructor(props) {
     super(props);
@@ -53,14 +81,9 @@ class UserGroupDeleteModal extends React.Component {
       },
     ];
 
-    this.initialState = {
-      actionName: '',
-      transferToUserGroupId: '',
-    };
-
-    this.state = this.initialState;
+    this.state = initialState;
 
-    this.xss = window.xss;
+    this.xss = (window as CustomWindow).xss;
 
     this.onHide = this.onHide.bind(this);
     this.handleActionChange = this.handleActionChange.bind(this);
@@ -72,7 +95,11 @@ class UserGroupDeleteModal extends React.Component {
   }
 
   onHide() {
-    this.setState(this.initialState);
+    if (this.props.onHide == null) {
+      return;
+    }
+
+    this.setState(initialState);
     this.props.onHide();
   }
 
@@ -87,13 +114,17 @@ class UserGroupDeleteModal extends React.Component {
   }
 
   handleSubmit(e) {
+    if (this.props.onDelete == null) {
+      return;
+    }
+
     e.preventDefault();
 
-    this.props.onDelete({
-      deleteGroupId: this.props.deleteUserGroup._id,
-      actionName: this.state.actionName,
-      transferToUserGroupId: this.state.transferToUserGroupId,
-    });
+    this.props.onDelete(
+      this.props.deleteUserGroup._id,
+      this.state.actionName,
+      this.state.transferToUserGroupId,
+    );
   }
 
   renderPageActionSelector() {
@@ -195,22 +226,6 @@ class UserGroupDeleteModal extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupDeleteModalWrapper = withUnstatedContainers(UserGroupDeleteModal, [AppContainer]);
-
-UserGroupDeleteModal.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
-  userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
-  deleteUserGroup: PropTypes.object,
-  onDelete: PropTypes.func.isRequired,
-  isShow: PropTypes.bool.isRequired,
-  onShow: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired,
-};
-
-UserGroupDeleteModal.defaultProps = {
-  deleteUserGroup: {},
-};
+const UserGroupDeleteModalWrapper = withUnstatedContainers(withTranslation()(UserGroupDeleteModal), [AppContainer]);
 
-export default withTranslation()(UserGroupDeleteModalWrapper);
+export default UserGroupDeleteModalWrapper;

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

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
 
 import UserGroupTable from './UserGroupTable';
 import UserGroupCreateForm from './UserGroupCreateForm';
@@ -8,8 +7,23 @@ import UserGroupDeleteModal from './UserGroupDeleteModal';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
+import { IUserGroup, IUserGroupRelation } from '~/interfaces/user';
+import Xss from '~/services/xss';
+import { CustomWindow } from '~/interfaces/global';
 
-class UserGroupPage extends React.Component {
+type Props = {
+  appContainer: AppContainer,
+};
+type State = {
+  userGroups: IUserGroup[],
+  userGroupRelations: IUserGroupRelation[],
+  selectedUserGroup: IUserGroup | undefined,
+  isDeleteModalShow: boolean,
+};
+
+class UserGroupPage extends React.Component<Props, State> {
+
+  xss: Xss;
 
   constructor(props) {
     super(props);
@@ -21,7 +35,7 @@ class UserGroupPage extends React.Component {
       isDeleteModalShow: false,
     };
 
-    this.xss = window.xss;
+    this.xss = (window as CustomWindow).xss;
 
     this.showDeleteModal = this.showDeleteModal.bind(this);
     this.hideDeleteModal = this.hideDeleteModal.bind(this);
@@ -67,7 +81,7 @@ class UserGroupPage extends React.Component {
     });
   }
 
-  async deleteUserGroupById({ deleteGroupId, actionName, transferToUserGroupId }) {
+  async deleteUserGroupById(deleteGroupId: string, actionName: string, transferToUserGroupId: string) {
     try {
       const res = await this.props.appContainer.apiv3.delete(`/user-groups/${deleteGroupId}`, {
         actionName,
@@ -145,8 +159,4 @@ class UserGroupPage extends React.Component {
  */
 const UserGroupPageWrapper = withUnstatedContainers(UserGroupPage, [AppContainer]);
 
-UserGroupPage.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-};
-
 export default UserGroupPageWrapper;

packages/app/src/components/UnstatedUtils.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 
-import React from 'react';
+import React, { ForwardRefExoticComponent } from 'react';
 import { Subscribe } from 'unstated';
 
 /**

packages/app/src/interfaces/global.ts

@@ -0,0 +1,3 @@
+import Xss from '~/services/xss';
+
+export type CustomWindow = Window & typeof globalThis & { xss: Xss };

packages/app/src/interfaces/user.ts

@@ -1,3 +1,5 @@
+import { Ref } from './common';
+
 export type IUser = {
   name: string;
   username: string;
@@ -12,7 +14,9 @@ export type IUserGroupRelation = {
 }
 
 export type IUserGroup = {
-  userGroupId:string;
+  _id: string;
   name: string;
   createdAt: Date;
+  description: string;
+  parent: Ref<IUserGroup>;
 }