update Next routing

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 
 import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
 
 import AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
 import { toastError } from '~/client/util/apiNotification';
@@ -33,7 +34,7 @@ const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element =
   // componentDidMount
   useEffect(() => {
     ExternalAccountPageHandler(1);
-  }, []);
+  }, [ExternalAccountPageHandler]);
 
   const pager = (
     <PaginationWrapper
@@ -49,10 +50,12 @@ const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element =
   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>
+        <Link href="/admin/users" prefetch={false}>
+          <a className="btn btn-outline-secondary">
+            <i className="icon-fw ti ti-arrow-left" aria-hidden="true"></i>
+            {t('admin:user_management.back_to_user_management')}
+          </a>
+        </Link>
       </p>
       <h2>{t('admin:user_management.external_account_list')}</h2>
       {(totalAccounts !== 0) ? (

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

@@ -1,6 +1,9 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, {
+  useEffect, useState, useRef, useCallback,
+} from 'react';
 
 import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
 
 import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 import { toastError } from '~/client/util/apiNotification';
@@ -25,19 +28,19 @@ const UserManagement = (props: UserManagementProps) => {
   const [isNotifyCommentShow, setIsNotifyCommentShow] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const pagingHandler = (async(selectedPage: number) => {
+  const pagingHandler = useCallback(async(selectedPage: number) => {
     try {
       await adminUsersContainer.retrieveUsersByPagingNum(selectedPage);
     }
     catch (err) {
       toastError(err);
     }
-  });
+  }, [adminUsersContainer]);
 
-  // componentDidMount
+  // for Next routing
   useEffect(() => {
     pagingHandler(1);
-  }, []);
+  }, [pagingHandler]);
 
   const validateToggleStatus = (statusType: string) => {
     return (adminUsersContainer.isSelected(statusType)) ? (
@@ -59,7 +62,7 @@ const UserManagement = (props: UserManagementProps) => {
     adminUsersContainer.handleClick(statusType);
   };
 
-  const resetButtonClickHandler = (async() => {
+  const resetButtonClickHandler = useCallback(async() => {
     try {
       await adminUsersContainer.resetAllChanges();
       setIsNotifyCommentShow(false);
@@ -70,11 +73,11 @@ const UserManagement = (props: UserManagementProps) => {
     catch (err) {
       toastError(err);
     }
-  });
+  }, [adminUsersContainer]);
 
-  const changeSearchTextHandler = (async(e: React.FormEvent<HTMLInputElement>) => {
+  const changeSearchTextHandler = useCallback(async(e: React.FormEvent<HTMLInputElement>) => {
     await adminUsersContainer.handleChangeSearchText(e?.currentTarget.value);
-  });
+  }, [adminUsersContainer]);
 
   const renderCheckbox = (status: string, statusLabel: string, statusColor: string) => {
     return (
@@ -120,10 +123,12 @@ const UserManagement = (props: UserManagementProps) => {
       ) }
       <p>
         <InviteUserControl />
-        <a className="btn btn-outline-secondary ml-2" href="/admin/users/external-accounts" role="button">
-          <i className="icon-user-follow mr-1" aria-hidden="true"></i>
-          {t('admin:user_management.external_account')}
-        </a>
+        <Link href="/admin/users/external-accounts" prefetch={false}>
+          <a className="btn btn-outline-secondary ml-2" role="button">
+            <i className="icon-user-follow mr-1" aria-hidden="true"></i>
+            {t('admin:user_management.external_account')}
+          </a>
+        </Link>
       </p>
 
       <h2>{t('user_management.user_management')}</h2>

packages/app/src/components/Admin/Users/ExternalAccountTable.tsx

@@ -18,14 +18,14 @@ type ExternalAccountTableProps = {
 
 const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element => {
 
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   const { adminExternalAccountsContainer } = props;
 
   const removeExtenalAccount = useCallback(async(externalAccountId) => {
     try {
       const accountId = await adminExternalAccountsContainer.removeExternalAccountById(externalAccountId);
-      toastSuccess(t('admin:toaster.remove_external_user_success', { accountId }));
+      toastSuccess(t('toaster.remove_external_user_success', { accountId }));
     }
     catch (err) {
       toastError(err);
@@ -36,11 +36,11 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
     <table className={`${styles['ea-table']} table table-bordered table-user-list`}>
       <thead>
         <tr>
-          <th style={{ width: '140px' }}>{t('admin:user_management.authentication_provider')}</th>
+          <th style={{ width: '140px' }}>{t('user_management.authentication_provider')}</th>
           <th style={{ width: '390px' }}><code>accountId</code></th>
-          <th style={{ width: '390px' }}>{t('admin:user_management.related_username')}<code>username</code></th>
+          <th style={{ width: '390px' }}>{t('user_management.related_username')}<code>username</code></th>
           <th style={{ width: '160px' }}>
-            {t('admin:user_management.password_setting')}
+            {t('user_management.password_setting')}
             {/* TODO: Enable popper */}
             <span
               role="button"
@@ -49,12 +49,12 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
               data-placement="top"
               data-trigger="hover"
               data-html="true"
-              title={t('admin:user_management.password_setting_help')}
+              title={t('user_management.password_setting_help')}
             >
               <small><i className="icon-question" aria-hidden="true"></i></small>
             </span>
           </th>
-          <th style={{ width: '140px' }}>{t('admin:Created')}</th>
+          <th style={{ width: '140px' }}>{t('Created')}</th>
           <th style={{ width: '70px' }}></th>
         </tr>
       </thead>
@@ -67,8 +67,8 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
               <td><strong>{ea.user.username}</strong></td>
               <td>
                 {ea.user.password
-                  ? (<span className="badge badge-info">{t('admin:user_management.set')}</span>)
-                  : (<span className="badge badge-warning">{t('admin:user_management.unset')}</span>)
+                  ? (<span className="badge badge-info">{t('user_management.set')}</span>)
+                  : (<span className="badge badge-warning">{t('user_management.unset')}</span>)
                 }
               </td>
               <td><span>{dateFnsFormat(new Date(ea.createdAt), 'yyyy-MM-dd')}</span></td>
@@ -78,14 +78,14 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                     <i className="icon-settings"></i> <span className="caret"></span>
                   </button>
                   <ul className="dropdown-menu" role="menu">
-                    <li className="dropdown-header">{t('admin:user_management.user_table.edit_menu')}</li>
+                    <li className="dropdown-header">{t('user_management.user_table.edit_menu')}</li>
                     <button
                       className="dropdown-item"
                       type="button"
                       role="button"
                       onClick={() => removeExtenalAccount(ea._id)}
                     >
-                      <i className="icon-fw icon-fire text-danger"></i> {t('admin:Delete')}
+                      <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
                     </button>
                   </ul>
                 </div>

packages/app/src/components/Admin/Users/UserTable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback } from 'react';
 
 import { UserPicture } from '@growi/ui';
 import dateFnsFormat from 'date-fns/format';
@@ -21,11 +21,6 @@ const UserTable = (props: UserTableProps) => {
   const { t } = useTranslation('admin');
   const { adminUsersContainer } = props;
 
-
-  useEffect(()=>{
-    adminUsersContainer.state.users
-  }, [])
-
   const getUserStatusLabel = (userStatus: number) => {
     let additionalClassName = 'badge-info';
     let text = 'Approval Pending';
@@ -60,10 +55,10 @@ const UserTable = (props: UserTableProps) => {
     )
   }
 
-  const sortIconsClickedHandler = (async(sort: string, sortOrder: string) => {
+  const sortIconsClickedHandler = useCallback(async(sort: string, sortOrder: string) => {
     const isAsc = sortOrder === 'asc';
     await adminUsersContainer.sort(sort, isAsc);
-  })
+  }, [adminUsersContainer])
 
   const isCurrentSortOrderAsc = adminUsersContainer.state.sortOrder === 'asc';