tsfc

packages/app/src/components/Admin/ManageExternalAccount.jsx

@@ -1,91 +0,0 @@
-import React, { Fragment } from 'react';
-
-import { useTranslation } from 'next-i18next';
-import PropTypes from 'prop-types';
-
-import AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
-import { toastError } from '~/client/util/apiNotification';
-
-import PaginationWrapper from '../PaginationWrapper';
-import { withUnstatedContainers } from '../UnstatedUtils';
-
-import ExternalAccountTable from './Users/ExternalAccountTable';
-
-
-class ManageExternalAccount extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.handleExternalAccountPage = this.handleExternalAccountPage.bind(this);
-  }
-
-  UNSAFE_componentWillMount() {
-    this.handleExternalAccountPage(1);
-  }
-
-  async handleExternalAccountPage(selectedPage) {
-    try {
-      await this.props.adminExternalAccountsContainer.retrieveExternalAccountsByPagingNum(selectedPage);
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }
-
-  render() {
-    const { t, adminExternalAccountsContainer } = this.props;
-    const { activePage, totalAccounts, pagingLimit } = adminExternalAccountsContainer.state;
-
-
-    const pager = (
-      <PaginationWrapper
-        activePage={activePage}
-        changePage={this.handleExternalAccountPage}
-        totalItemsCount={totalAccounts}
-        pagingLimit={pagingLimit}
-        align="center"
-        size="sm"
-      />
-    );
-    return (
-      <Fragment>
-        <p>
-          <a className="btn btn-outline-secondary" href="/admin/users">
-            <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
-            {t('admin:user_management.back_to_user_management')}
-          </a>
-        </p>
-
-        <h2>{t('admin:user_management.external_account_list')}</h2>
-        {(totalAccounts !== 0) ? (
-          <>
-            {pager}
-            <ExternalAccountTable />
-            {pager}
-          </>
-        )
-          : (
-            <>
-              {t('admin:user_management.external_account_none')}
-            </>
-          )}
-
-      </Fragment>
-    );
-  }
-
-}
-
-ManageExternalAccount.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  adminExternalAccountsContainer: PropTypes.instanceOf(AdminExternalAccountsContainer).isRequired,
-};
-
-const ManageExternalAccountWrapperFC = (props) => {
-  const { t } = useTranslation();
-  return <ManageExternalAccount t={t} {...props} />;
-};
-
-const ManageExternalAccountWrapper = withUnstatedContainers(ManageExternalAccountWrapperFC, [AdminExternalAccountsContainer]);
-
-export default ManageExternalAccountWrapper;

packages/app/src/components/Admin/ManageExternalAccount.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
+import { toastError } from '~/client/util/apiNotification';
+
+import PaginationWrapper from '../PaginationWrapper';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+import ExternalAccountTable from './Users/ExternalAccountTable';
+
+
+type adminEAContainerState = {
+  activePage: number,
+  totalAccounts: number,
+  pagingLimit: number,
+}
+
+type adminEAContainer = {
+  state: adminEAContainerState,
+  retrieveExternalAccountsByPagingNum: (selectedPage: number) => Promise<void>,
+}
+
+type ManageExternalAccountProps = {
+  adminExternalAccountsContainer: adminEAContainer,
+}
+
+const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element => {
+
+  const { t } = useTranslation();
+  const { adminExternalAccountsContainer } = props;
+  const { activePage, totalAccounts, pagingLimit } = adminExternalAccountsContainer.state;
+
+  const handleExternalAccountPage = useCallback(async(selectedPage) => {
+    try {
+      await adminExternalAccountsContainer.retrieveExternalAccountsByPagingNum(selectedPage);
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [adminExternalAccountsContainer]);
+
+  // componentDidMount
+  useEffect(() => {
+    handleExternalAccountPage(1);
+  }, []);
+
+  const pager = (
+    <PaginationWrapper
+      activePage={activePage}
+      changePage={handleExternalAccountPage}
+      totalItemsCount={totalAccounts}
+      pagingLimit={pagingLimit}
+      align="center"
+      size="sm"
+    />
+  );
+
+  return (
+    <>
+      <p>
+        <a className="btn btn-outline-secondary" href="/admin/users">
+          <i className="icon-fw ti ti-arrow-left" aria-hidden="true"></i>
+          { t('admin:user_management.back_to_user_management') }
+        </a>
+      </p>
+      <h2>{ t('admin:user_management.external_account_list') }</h2>
+      { (totalAccounts !== 0) ? (
+        <>
+          {pager}
+          <ExternalAccountTable />
+          {pager}
+        </>
+      )
+        : (
+          <>
+            { t('admin:user_management.external_account_none') }
+          </>
+        )
+      }
+    </>
+  );
+};
+
+const ManageExternalAccountWrapper = withUnstatedContainers(ManageExternalAccount, [AdminExternalAccountsContainer]);
+
+export default ManageExternalAccountWrapper;