convert to useTranslation

packages/app/src/components/Admin/Security/SecurityManagementContents.jsx

@@ -1,25 +1,24 @@
 import React, { Fragment, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
+import { useTranslation } from 'react-i18next';
 import { TabContent, TabPane } from 'reactstrap';
 
+import CustomNav from '../../CustomNavigation/CustomNav';
+
+import BasicSecuritySetting from './BasicSecuritySetting';
+import FacebookSecuritySetting from './FacebookSecuritySetting';
+import GitHubSecuritySetting from './GitHubSecuritySetting';
+import GoogleSecuritySetting from './GoogleSecuritySetting';
 import LdapSecuritySetting from './LdapSecuritySetting';
 import LocalSecuritySetting from './LocalSecuritySetting';
-import SamlSecuritySetting from './SamlSecuritySetting';
 import OidcSecuritySetting from './OidcSecuritySetting';
+import SamlSecuritySetting from './SamlSecuritySetting';
 import SecuritySetting from './SecuritySetting';
-import BasicSecuritySetting from './BasicSecuritySetting';
-import GoogleSecuritySetting from './GoogleSecuritySetting';
-import GitHubSecuritySetting from './GitHubSecuritySetting';
-import TwitterSecuritySetting from './TwitterSecuritySetting';
-import FacebookSecuritySetting from './FacebookSecuritySetting';
 import ShareLinkSetting from './ShareLinkSetting';
+import TwitterSecuritySetting from './TwitterSecuritySetting';
 
-import CustomNav from '../../CustomNavigation/CustomNav';
-
-function SecurityManagementContents(props) {
-  const { t } = props;
+const SecurityManagementContents = () => {
+  const { t } = useTranslation();
 
   const [activeTab, setActiveTab] = useState('passport_local');
   const [activeComponents, setActiveComponents] = useState(new Set(['passport_local']));
@@ -144,10 +143,6 @@ function SecurityManagementContents(props) {
     </div>
   );
 
-}
-
-SecurityManagementContents.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
 };
 
-export default withTranslation()(SecurityManagementContents);
+export default SecurityManagementContents;

packages/app/src/components/Admin/Security/SecuritySetting.jsx

@@ -1,15 +1,17 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import { Collapse } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
 
-import { validateDeleteConfigs, prepareDeleteConfigValuesForCalc } from '~/utils/page-delete-config';
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
+import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { PageDeleteConfigValue } from '~/interfaces/page-delete-config';
-import AppContainer from '~/client/services/AppContainer';
-import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
+import { validateDeleteConfigs, prepareDeleteConfigValuesForCalc } from '~/utils/page-delete-config';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 // used as the prefix of translation
 const DeletionTypeForT = Object.freeze({
@@ -495,6 +497,14 @@ SecuritySetting.propTypes = {
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
 };
 
-const SecuritySettingWrapper = withUnstatedContainers(SecuritySetting, [AppContainer, AdminGeneralSecurityContainer]);
+const SecuritySettingWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <SecuritySetting t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const SecuritySettingWrapper = withUnstatedContainers(SecuritySettingWrapperFC, [AppContainer, AdminGeneralSecurityContainer]);
 
-export default withTranslation()(SecuritySettingWrapper);
+export default SecuritySettingWrapper;

packages/app/src/components/Admin/Security/ShareLinkSetting.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 AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AppContainer from '~/client/services/AppContainer';
@@ -15,7 +15,6 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import DeleteAllShareLinksModal from './DeleteAllShareLinksModal';
 
-
 const Pager = (props) => {
   if (props.links.length === 0) {
     return null;
@@ -192,12 +191,20 @@ class ShareLinkSetting extends React.Component {
 
 }
 
-const ShareLinkSettingWrapper = withUnstatedContainers(ShareLinkSetting, [AppContainer, AdminGeneralSecurityContainer]);
-
 ShareLinkSetting.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
 };
 
-export default withTranslation()(ShareLinkSettingWrapper);
+const ShareLinkSettingWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <ShareLinkSetting t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const ShareLinkSettingWrapper = withUnstatedContainers(ShareLinkSettingWrapperFC, [AppContainer, AdminGeneralSecurityContainer]);
+
+export default ShareLinkSettingWrapper;

packages/app/src/components/Admin/Security/TwitterSecuritySettingContents.jsx

@@ -1,15 +1,17 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
-class TwitterSecurityManagementContents extends React.Component {
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
+class TwitterSecuritySettingContents extends React.Component {
 
   constructor(props) {
     super(props);
@@ -191,16 +193,23 @@ class TwitterSecurityManagementContents extends React.Component {
 
 }
 
-
-TwitterSecurityManagementContents.propTypes = {
+TwitterSecuritySettingContents.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
   adminTwitterSecurityContainer: PropTypes.instanceOf(AdminTwitterSecurityContainer).isRequired,
 };
 
-const TwitterSecurityManagementContentsWrapper = withUnstatedContainers(TwitterSecurityManagementContents, [
+const TwitterSecuritySettingContentsWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <TwitterSecuritySettingContents t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const TwitterSecuritySettingContentsWrapper = withUnstatedContainers(TwitterSecuritySettingContentsWrapperFC, [
   AdminGeneralSecurityContainer,
   AdminTwitterSecurityContainer,
 ]);
 
-export default withTranslation()(TwitterSecurityManagementContentsWrapper);
+export default TwitterSecuritySettingContentsWrapper;

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

@@ -1,7 +1,8 @@
 
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 class CheckBoxForSerchUserOption extends React.Component {
 
@@ -25,7 +26,6 @@ class CheckBoxForSerchUserOption extends React.Component {
 
 }
 
-
 CheckBoxForSerchUserOption.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
@@ -34,4 +34,9 @@ CheckBoxForSerchUserOption.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(CheckBoxForSerchUserOption);
+const CheckBoxForSerchUserOptionWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <CheckBoxForSerchUserOption t={t} {...props} />;
+};
+
+export default CheckBoxForSerchUserOptionWrapperFC;

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

@@ -1,10 +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 AppContainer from '~/client/services/AppContainer';
 import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+import AppContainer from '~/client/services/AppContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 import UserInviteModal from './UserInviteModal';
 
 class InviteUserControl extends React.Component {
@@ -24,12 +27,20 @@ class InviteUserControl extends React.Component {
 
 }
 
-const InviteUserControlWrapper = withUnstatedContainers(InviteUserControl, [AppContainer, AdminUsersContainer]);
-
 InviteUserControl.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
 };
 
-export default withTranslation()(InviteUserControlWrapper);
+const InviteUserControlWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <InviteUserControl t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const InviteUserControlWrapper = withUnstatedContainers(InviteUserControlWrapperFC, [AppContainer, AdminUsersContainer]);
+
+export default InviteUserControlWrapper;

packages/app/src/components/Admin/Users/UserRemoveButton.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 UserRemoveButton extends React.Component {
 
   constructor(props) {
@@ -40,11 +42,6 @@ class UserRemoveButton extends React.Component {
 
 }
 
-/**
- * Wrapper component for using unstated
- */
-const UserRemoveButtonWrapper = withUnstatedContainers(UserRemoveButton, [AppContainer, AdminUsersContainer]);
-
 UserRemoveButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
@@ -53,4 +50,14 @@ UserRemoveButton.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(UserRemoveButtonWrapper);
+const UserRemoveButtonWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <UserRemoveButton t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const UserRemoveButtonWrapper = withUnstatedContainers(UserRemoveButtonWrapperFC, [AppContainer, AdminUsersContainer]);
+
+export default UserRemoveButtonWrapper;