integrate/convert to useTranslation in 13 files

packages/app/src/components/Admin/UserGroupDetail/RadioButtonForSerchUserOption.jsx

@@ -1,37 +1,35 @@
 
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-class RadioButtonForSerchUserOption extends React.Component {
-
-  render() {
-    const { t, searchType } = this.props;
-    return (
-      <div className="custom-control custom-radio custom-control-inline" key={`${searchType}Match`}>
-        <input
-          type="radio"
-          id={`${searchType}Match`}
-          className="custom-control-input"
-          checked={this.props.checked}
-          onChange={this.props.onChange}
-        />
-        <label className="text-capitalize custom-control-label ml-3" htmlFor={`${searchType}Match`}>
-          {t(`admin:user_group_management.add_modal.${searchType}_match`)}
-        </label>
-      </div>
-    );
-  }
-
-}
+import { useTranslation } from 'react-i18next';
+
+const RadioButtonForSerchUserOption = (props) => {
+
+  const { searchType } = props;
+  const { t } = useTranslation();
+  return (
+    <div className="custom-control custom-radio custom-control-inline" key={`${searchType}Match`}>
+      <input
+        type="radio"
+        id={`${searchType}Match`}
+        className="custom-control-input"
+        checked={props.checked}
+        onChange={props.onChange}
+      />
+      <label className="text-capitalize custom-control-label ml-3" htmlFor={`${searchType}Match`}>
+        {t(`admin:user_group_management.add_modal.${searchType}_match`)}
+      </label>
+    </div>
+  );
+};
 
 
 RadioButtonForSerchUserOption.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
 
   searchType: PropTypes.string.isRequired,
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(RadioButtonForSerchUserOption);
+export default RadioButtonForSerchUserOption;

packages/app/src/components/Admin/UserGroupDetail/UserGroupPageList.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
 import AppContainer from '~/client/services/AppContainer';
@@ -84,9 +84,14 @@ UserGroupPageList.propTypes = {
   adminUserGroupDetailContainer: PropTypes.instanceOf(AdminUserGroupDetailContainer).isRequired,
 };
 
+const UserGroupPageListWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <UserGroupPageList t={t} {...props} />;
+};
+
 /**
  * Wrapper component for using unstated
  */
-const UserGroupPageListWrapper = withUnstatedContainers(UserGroupPageList, [AppContainer, AdminUserGroupDetailContainer]);
+const UserGroupPageListWrapper = withUnstatedContainers(UserGroupPageListWrapperFC, [AppContainer, AdminUserGroupDetailContainer]);
 
-export default withTranslation()(UserGroupPageListWrapper);
+export default UserGroupPageListWrapper;

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { UserPicture } from '@growi/ui';
 import PropTypes from 'prop-types';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { debounce } from 'throttle-debounce';
 
 import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
@@ -165,9 +165,14 @@ UserGroupUserFormByInput.propTypes = {
   adminUserGroupDetailContainer: PropTypes.instanceOf(AdminUserGroupDetailContainer).isRequired,
 };
 
+const UserGroupUserFormByInputWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <UserGroupUserFormByInput t={t} {...props} />;
+};
+
 /**
  * Wrapper component for using unstated
  */
-const UserGroupUserFormByInputWrapper = withUnstatedContainers(UserGroupUserFormByInput, [AppContainer, AdminUserGroupDetailContainer]);
+const UserGroupUserFormByInputWrapper = withUnstatedContainers(UserGroupUserFormByInputWrapperFC, [AppContainer, AdminUserGroupDetailContainer]);
 
-export default withTranslation()(UserGroupUserFormByInputWrapper);
+export default UserGroupUserFormByInputWrapper;

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserModal.jsx

@@ -1,16 +1,19 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
 
-import UserGroupUserFormByInput from './UserGroupUserFormByInput';
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
 import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
-import RadioButtonForSerchUserOption from './RadioButtonForSerchUserOption';
+import AppContainer from '~/client/services/AppContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 import CheckBoxForSerchUserOption from './CheckBoxForSerchUserOption';
+import RadioButtonForSerchUserOption from './RadioButtonForSerchUserOption';
+import UserGroupUserFormByInput from './UserGroupUserFormByInput';
 
 class UserGroupUserModal extends React.Component {
 
@@ -82,9 +85,13 @@ UserGroupUserModal.propTypes = {
   adminUserGroupDetailContainer: PropTypes.instanceOf(AdminUserGroupDetailContainer).isRequired,
 };
 
+const UserGroupUserModalWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <UserGroupUserModal t={t} {...props} />;
+};
 /**
  * Wrapper component for using unstated
  */
-const UserGroupUserModalWrapper = withUnstatedContainers(UserGroupUserModal, [AppContainer, AdminUserGroupDetailContainer]);
+const UserGroupUserModalWrapper = withUnstatedContainers(UserGroupUserModalWrapperFC, [AppContainer, AdminUserGroupDetailContainer]);
 
-export default withTranslation()(UserGroupUserModalWrapper);
+export default UserGroupUserModalWrapper;

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserTable.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-import dateFnsFormat from 'date-fns/format';
 
 import { UserPicture } from '@growi/ui';
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
+import dateFnsFormat from 'date-fns/format';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
 import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
+import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 class UserGroupUserTable extends React.Component {
 
   constructor(props) {
@@ -115,9 +117,14 @@ UserGroupUserTable.propTypes = {
   adminUserGroupDetailContainer: PropTypes.instanceOf(AdminUserGroupDetailContainer).isRequired,
 };
 
+const UserGroupUserTableWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <UserGroupUserTable t={t} {...props} />;
+};
+
 /**
  * Wrapper component for using unstated
  */
-const UserGroupUserTableWrapper = withUnstatedContainers(UserGroupUserTable, [AppContainer, AdminUserGroupDetailContainer]);
+const UserGroupUserTableWrapper = withUnstatedContainers(UserGroupUserTableWrapperFC, [AppContainer, AdminUserGroupDetailContainer]);
 
-export default withTranslation()(UserGroupUserTableWrapper);
+export default UserGroupUserTableWrapper;

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

@@ -1,14 +1,15 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+
 import dateFnsFormat from 'date-fns/format';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
 import AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
-
+import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 class ExternalAccountTable extends React.Component {
 
   constructor(props) {
@@ -122,7 +123,12 @@ ExternalAccountTable.propTypes = {
   adminExternalAccountsContainer: PropTypes.instanceOf(AdminExternalAccountsContainer).isRequired,
 };
 
-const ExternalAccountTableWrapper = withUnstatedContainers(ExternalAccountTable, [AppContainer, AdminExternalAccountsContainer]);
+const ExternalAccountTableWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <ExternalAccountTable t={t} {...props} />;
+};
+
+const ExternalAccountTableWrapper = withUnstatedContainers(ExternalAccountTableWrapperFC, [AppContainer, AdminExternalAccountsContainer]);
 
 
-export default withTranslation()(ExternalAccountTableWrapper);
+export default ExternalAccountTableWrapper;

packages/app/src/components/Admin/Users/GiveAdminButton.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
-import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class GiveAdminButton extends React.Component {
 
@@ -39,10 +41,15 @@ class GiveAdminButton extends React.Component {
 
 }
 
+const GiveAdminButtonWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <GiveAdminButton t={t} {...props} />;
+};
+
 /**
  * Wrapper component for using unstated
  */
-const GiveAdminButtonWrapper = withUnstatedContainers(GiveAdminButton, [AppContainer, AdminUsersContainer]);
+const GiveAdminButtonWrapper = withUnstatedContainers(GiveAdminButtonWrapperFC, [AppContainer, AdminUsersContainer]);
 
 GiveAdminButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -52,4 +59,4 @@ GiveAdminButton.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(GiveAdminButtonWrapper);
+export default GiveAdminButtonWrapper;

packages/app/src/components/Admin/Users/PasswordResetModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -109,10 +109,15 @@ class PasswordResetModal extends React.Component {
 
 }
 
+const PasswordResetModalWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <PasswordResetModal t={t} {...props} />;
+};
+
 /**
  * Wrapper component for using unstated
  */
-const PasswordResetModalWrapper = withUnstatedContainers(PasswordResetModal, [AppContainer]);
+const PasswordResetModalWrapper = withUnstatedContainers(PasswordResetModalWrapperFC, [AppContainer]);
 
 PasswordResetModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -124,4 +129,4 @@ PasswordResetModal.propTypes = {
 
 };
 
-export default withTranslation()(PasswordResetModalWrapper);
+export default PasswordResetModalWrapper;

packages/app/src/components/Admin/Users/RemoveAdminButton.jsx

@@ -1,11 +1,13 @@
 import React, { Fragment } from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
-import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class RemoveAdminButton extends React.Component {
 
@@ -63,10 +65,15 @@ class RemoveAdminButton extends React.Component {
 
 }
 
+const RemoveAdminButtonWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <RemoveAdminButton t={t} {...props} />;
+};
+
 /**
 * Wrapper component for using unstated
 */
-const RemoveAdminButtonWrapper = withUnstatedContainers(RemoveAdminButton, [AppContainer, AdminUsersContainer]);
+const RemoveAdminButtonWrapper = withUnstatedContainers(RemoveAdminButtonWrapperFC, [AppContainer, AdminUsersContainer]);
 
 RemoveAdminButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -76,4 +83,4 @@ RemoveAdminButton.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(RemoveAdminButtonWrapper);
+export default RemoveAdminButtonWrapper;

packages/app/src/components/Admin/Users/StatusActivateButton.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
 import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 class StatusActivateButton extends React.Component {
 
   constructor(props) {
@@ -39,10 +41,15 @@ class StatusActivateButton extends React.Component {
 
 }
 
+const StatusActivateFormWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <StatusActivateButton t={t} {...props} />;
+};
+
 /**
  * Wrapper component for using unstated
  */
-const StatusActivateFormWrapper = withUnstatedContainers(StatusActivateButton, [AppContainer, AdminUsersContainer]);
+const StatusActivateFormWrapper = withUnstatedContainers(StatusActivateFormWrapperFC, [AppContainer, AdminUsersContainer]);
 
 StatusActivateButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -52,4 +59,4 @@ StatusActivateButton.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(StatusActivateFormWrapper);
+export default StatusActivateFormWrapper;

packages/app/src/components/Admin/Users/StatusSuspendedButton.jsx

@@ -1,11 +1,13 @@
 import React, { Fragment } from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
-import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class StatusSuspendedButton extends React.Component {
 
@@ -62,10 +64,15 @@ class StatusSuspendedButton extends React.Component {
 
 }
 
+const StatusSuspendedFormWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <StatusSuspendedButton t={t} {...props} />;
+};
+
 /**
  * Wrapper component for using unstated
  */
-const StatusSuspendedFormWrapper = withUnstatedContainers(StatusSuspendedButton, [AppContainer, AdminUsersContainer]);
+const StatusSuspendedFormWrapper = withUnstatedContainers(StatusSuspendedFormWrapperFC, [AppContainer, AdminUsersContainer]);
 
 StatusSuspendedButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -75,4 +82,4 @@ StatusSuspendedButton.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(StatusSuspendedFormWrapper);
+export default StatusSuspendedFormWrapper;

packages/app/src/components/Admin/Users/UserInviteModal.jsx

@@ -1,19 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
+import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useTranslation } from 'react-i18next';
+
 
 // import Button from 'react-bootstrap/es/Button';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
+import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError, toastWarning } from '~/client/util/apiNotification';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
-import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 
 class UserInviteModal extends React.Component {
 
@@ -281,10 +282,15 @@ class UserInviteModal extends React.Component {
 
 }
 
+const UserInviteModalWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <UserInviteModal t={t} {...props} />;
+};
+
 /**
  * Wrapper component for using unstated
  */
-const UserInviteModalWrapper = withUnstatedContainers(UserInviteModal, [AppContainer, AdminUsersContainer]);
+const UserInviteModalWrapper = withUnstatedContainers(UserInviteModalWrapperFC, [AppContainer, AdminUsersContainer]);
 
 
 UserInviteModal.propTypes = {
@@ -293,4 +299,4 @@ UserInviteModal.propTypes = {
   adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
 };
 
-export default withTranslation()(UserInviteModalWrapper);
+export default UserInviteModalWrapper;

packages/app/src/components/Admin/Users/UserMenu.jsx

@@ -1,20 +1,23 @@
 import React, { Fragment } from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import {
   UncontrolledDropdown, DropdownToggle, DropdownMenu,
 } from 'reactstrap';
 
+import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+import AppContainer from '~/client/services/AppContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
+import GiveAdminButton from './GiveAdminButton';
+import RemoveAdminButton from './RemoveAdminButton';
+import SendInvitationEmailButton from './SendInvitationEmailButton';
 import StatusActivateButton from './StatusActivateButton';
 import StatusSuspendedButton from './StatusSuspendedButton';
 import UserRemoveButton from './UserRemoveButton';
-import RemoveAdminButton from './RemoveAdminButton';
-import GiveAdminButton from './GiveAdminButton';
-import SendInvitationEmailButton from './SendInvitationEmailButton';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
-import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 
 class UserMenu extends React.Component {
 
@@ -113,7 +116,12 @@ class UserMenu extends React.Component {
 
 }
 
-const UserMenuWrapper = withUnstatedContainers(UserMenu, [AppContainer, AdminUsersContainer]);
+const UserMenuWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <UserMenu t={t} {...props} />;
+};
+
+const UserMenuWrapper = withUnstatedContainers(UserMenuWrapperFC, [AppContainer, AdminUsersContainer]);
 
 UserMenu.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -123,4 +131,4 @@ UserMenu.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(UserMenuWrapper);
+export default UserMenuWrapper;