Merge branch 'imprv/integrate-convert-to-useTranslation' of https://github.com/weseek/growi into imprv/integrate-convert-to-useTranslation

packages/app/src/components/Admin/MarkdownSetting/MarkDownSettingContents.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Card, CardBody } from 'reactstrap';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import LineBreakForm from './LineBreakForm';
-import IndentForm from './IndentForm';
-import PresentationForm from './PresentationForm';
-import XssForm from './XssForm';
-
-
-class MarkDownSettingContents extends React.Component {
-
-  render() {
-    const { t } = this.props;
-    return (
-      <div data-testid="admin-markdown">
-        {/* Line Break Setting */}
-        <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
-        </Card>
-        <LineBreakForm />
-
-        {/* Indent Setting */}
-        <h2 className="admin-setting-header">{t('admin:markdown_setting.indent_header')}</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{t('admin:markdown_setting.indent_desc') }</CardBody>
-        </Card>
-        <IndentForm />
-
-        {/* Presentation Setting */}
-        <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
-        </Card>
-        <PresentationForm />
-
-        {/* XSS Setting */}
-        <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
-        </Card>
-        <XssForm />
-      </div>
-    );
-  }
-
-}
-
-MarkDownSettingContents.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
-
-export default withTranslation()(MarkDownSettingContents);

packages/app/src/components/Admin/MarkdownSetting/MarkDownSettingContents.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { Card, CardBody } from 'reactstrap';
+
+import IndentForm from './IndentForm';
+import LineBreakForm from './LineBreakForm';
+import PresentationForm from './PresentationForm';
+import XssForm from './XssForm';
+
+type Props = {
+
+};
+
+
+const MarkDownSettingContents: FC<Props> = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div data-testid="admin-markdown">
+      {/* Line Break Setting */}
+      <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
+      <Card className="card well my-3">
+        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
+      </Card>
+      <LineBreakForm />
+
+      {/* Indent Setting */}
+      <h2 className="admin-setting-header">{t('admin:markdown_setting.indent_header')}</h2>
+      <Card className="card well my-3">
+        <CardBody className="px-0 py-2">{t('admin:markdown_setting.indent_desc') }</CardBody>
+      </Card>
+      <IndentForm />
+
+      {/* Presentation Setting */}
+      <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
+      <Card className="card well my-3">
+        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
+      </Card>
+      <PresentationForm />
+
+      {/* XSS Setting */}
+      <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
+      <Card className="card well my-3">
+        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
+      </Card>
+      <XssForm />
+    </div>
+  );
+};
+
+export default MarkDownSettingContents;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
+import PropTypes from 'prop-types';
 import {
   Modal,
   ModalHeader,
@@ -10,8 +9,6 @@ import {
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
-import AppContainer from '~/client/services/AppContainer';
-import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
 import LdapAuthTest from './LdapAuthTest';
 
 
@@ -66,14 +63,10 @@ class LdapAuthTestModal extends React.Component {
 
 
 LdapAuthTestModal.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminLdapSecurityContainer: PropTypes.instanceOf(AdminLdapSecurityContainer).isRequired,
-
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-const LdapAuthTestModalWrapper = withUnstatedContainers(LdapAuthTestModal, [AppContainer, AdminLdapSecurityContainer]);
+const LdapAuthTestModalWrapper = withUnstatedContainers(LdapAuthTestModal, []);
 
-export default withTranslation()(LdapAuthTestModalWrapper);
+export default LdapAuthTestModalWrapper;

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

@@ -1,13 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '~/client/util/apiNotification';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 
-import AppContainer from '~/client/services/AppContainer';
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 import LdapAuthTestModal from './LdapAuthTestModal';
 
 
@@ -432,15 +433,18 @@ class LdapSecuritySettingContents extends React.Component {
 
 LdapSecuritySettingContents.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
   adminLdapSecurityContainer: PropTypes.instanceOf(AdminLdapSecurityContainer).isRequired,
 };
 
-const LdapSecuritySettingContentsWrapper = withUnstatedContainers(LdapSecuritySettingContents, [
-  AppContainer,
+const LdapSecuritySettingContentsWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <LdapSecuritySettingContents t={t} {...props} />;
+};
+
+const LdapSecuritySettingContentsWrapper = withUnstatedContainers(LdapSecuritySettingContentsWrapperFC, [
   AdminGeneralSecurityContainer,
   AdminLdapSecurityContainer,
 ]);
 
-export default withTranslation()(LdapSecuritySettingContentsWrapper);
+export default LdapSecuritySettingContentsWrapper;

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

@@ -1,14 +1,16 @@
 /* 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 AppContainer from '~/client/services/AppContainer';
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AdminLocalSecurityContainer from '~/client/services/AdminLocalSecurityContainer';
+import AppContainer from '~/client/services/AppContainer';
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class LocalSecuritySettingContents extends React.Component {
 
@@ -249,10 +251,15 @@ LocalSecuritySettingContents.propTypes = {
   adminLocalSecurityContainer: PropTypes.instanceOf(AdminLocalSecurityContainer).isRequired,
 };
 
-const LocalSecuritySettingContentsWrapper = withUnstatedContainers(LocalSecuritySettingContents, [
+const LocalSecuritySettingContentsWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <LocalSecuritySettingContents t={t} {...props} />;
+};
+
+const LocalSecuritySettingContentsWrapper = withUnstatedContainers(LocalSecuritySettingContentsWrapperFC, [
   AppContainer,
   AdminGeneralSecurityContainer,
   AdminLocalSecurityContainer,
 ]);
 
-export default withTranslation()(LocalSecuritySettingContentsWrapper);
+export default LocalSecuritySettingContentsWrapper;

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

@@ -1,14 +1,15 @@
 /* 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 AppContainer from '~/client/services/AppContainer';
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AdminOidcSecurityContainer from '~/client/services/AdminOidcSecurityContainer';
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class OidcSecurityManagementContents extends React.Component {
 
@@ -462,15 +463,18 @@ class OidcSecurityManagementContents extends React.Component {
 
 OidcSecurityManagementContents.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
   adminOidcSecurityContainer: PropTypes.instanceOf(AdminOidcSecurityContainer).isRequired,
 };
 
-const OidcSecurityManagementContentsWrapper = withUnstatedContainers(OidcSecurityManagementContents, [
-  AppContainer,
+const OidcSecurityManagementContentsWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <OidcSecurityManagementContents t={t} {...props} />;
+};
+
+const OidcSecurityManagementContentsWrapper = withUnstatedContainers(OidcSecurityManagementContentsWrapperFC, [
   AdminGeneralSecurityContainer,
   AdminOidcSecurityContainer,
 ]);
 
-export default withTranslation()(OidcSecurityManagementContentsWrapper);
+export default OidcSecurityManagementContentsWrapper;

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

@@ -1,16 +1,16 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import { Collapse } from 'reactstrap';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
-import AppContainer from '~/client/services/AppContainer';
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AdminSamlSecurityContainer from '~/client/services/AdminSamlSecurityContainer';
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class SamlSecurityManagementContents extends React.Component {
 
@@ -532,15 +532,18 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
 SamlSecurityManagementContents.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
   adminSamlSecurityContainer: PropTypes.instanceOf(AdminSamlSecurityContainer).isRequired,
 };
 
-const SamlSecurityManagementContentsWrapper = withUnstatedContainers(SamlSecurityManagementContents, [
-  AppContainer,
+const SamlSecurityManagementContentsWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <SamlSecurityManagementContents t={t} {...props} />;
+};
+
+const SamlSecurityManagementContentsWrapper = withUnstatedContainers(SamlSecurityManagementContentsWrapperFC, [
   AdminGeneralSecurityContainer,
   AdminSamlSecurityContainer,
 ]);
 
-export default withTranslation()(SamlSecurityManagementContentsWrapper);
+export default SamlSecurityManagementContentsWrapper;

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

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import { Collapse } from 'reactstrap';
 
 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 { validateDeleteConfigs, prepareDeleteConfigValuesForCalc } from '~/utils/page-delete-config';
@@ -492,8 +491,6 @@ class SecuritySetting extends React.Component {
 
 SecuritySetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  csrf: PropTypes.string,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
 };
 
@@ -502,9 +499,6 @@ const SecuritySettingWrapperFC = (props) => {
   return <SecuritySetting t={t} {...props} />;
 };
 
-/**
- * Wrapper component for using unstated
- */
-const SecuritySettingWrapper = withUnstatedContainers(SecuritySettingWrapperFC, [AppContainer, AdminGeneralSecurityContainer]);
+const SecuritySettingWrapper = withUnstatedContainers(SecuritySettingWrapperFC, [AdminGeneralSecurityContainer]);
 
 export default SecuritySettingWrapper;

packages/app/src/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
 
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
 const DeleteSlackBotSettingsModal = React.memo((props) => {
-  const { t } = props;
+  const { t } = useTranslation();
 
   function closeModal() {
     if (props.onClose == null) {
@@ -86,11 +85,10 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
 });
 
 DeleteSlackBotSettingsModal.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
   isResetAll: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func,
   onClickDeleteButton: PropTypes.func,
 };
 
-export default withTranslation()(DeleteSlackBotSettingsModal);
+export default DeleteSlackBotSettingsModal;

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

@@ -1,6 +1,6 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
 const SortIcons = (props) => {
 
@@ -28,5 +28,4 @@ SortIcons.propTypes = {
   isAsc: PropTypes.bool.isRequired,
 };
 
-
-export default withTranslation()(SortIcons);
+export default SortIcons;

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

@@ -1,15 +1,17 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-import dateFnsFormat from 'date-fns/format';
 
 import { UserPicture } from '@growi/ui';
-import UserMenu from './UserMenu';
+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 AdminUsersContainer from '~/client/services/AdminUsersContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 import SortIcons from './SortIcons';
+import UserMenu from './UserMenu';
+
 
 class UserTable extends React.Component {
 
@@ -216,11 +218,14 @@ class UserTable extends React.Component {
 
 UserTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
+};
 
+const UserTableWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <UserTable t={t} {...props} />;
 };
 
-const UserTableWrapper = withUnstatedContainers(UserTable, [AppContainer, AdminUsersContainer]);
+const UserTableWrapper = withUnstatedContainers(UserTableWrapperFC, [AdminUsersContainer]);
 
-export default withTranslation()(UserTableWrapper);
+export default UserTableWrapper;

packages/app/src/components/Page/RedirectedAlert.jsx → packages/app/src/components/Page/RedirectedAlert.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import React, { FC } from 'react';
 
+import { useTranslation } from 'react-i18next';
 
-const RedirectedAlert = (props) => {
-  const { t } = props;
+type Props = {
+
+}
+
+const RedirectedAlert: FC<Props> = () => {
+  const { t } = useTranslation();
   const urlParams = new URLSearchParams(window.location.search);
   const fromPath = urlParams.get('redirectFrom');
 
@@ -15,8 +18,4 @@ const RedirectedAlert = (props) => {
   );
 };
 
-RedirectedAlert.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
-
-export default withTranslation()(RedirectedAlert);
+export default RedirectedAlert;

packages/app/src/components/Page/RevisionLoader.jsx

@@ -1,23 +1,20 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Waypoint } from 'react-waypoint';
 
-import AppContainer from '~/client/services/AppContainer';
 import GrowiRenderer from '~/client/util/GrowiRenderer';
 import { apiv3Get } from '~/client/util/apiv3-client';
 import loggerFactory from '~/utils/logger';
 
-import { withUnstatedContainers } from '../UnstatedUtils';
-
 import RevisionRenderer from './RevisionRenderer';
 
 
 /**
  * Load data from server and render RevisionBody component
  */
-class LegacyRevisionLoader extends React.Component {
+class RevisionLoader extends React.Component {
 
   constructor(props) {
     super(props);
@@ -122,13 +119,8 @@ class LegacyRevisionLoader extends React.Component {
 
 }
 
-/**
- * Wrapper component for using unstated
- */
-const LegacyRevisionLoaderWrapper = withTranslation()(withUnstatedContainers(LegacyRevisionLoader, [AppContainer]));
 
-LegacyRevisionLoader.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+RevisionLoader.propTypes = {
   t: PropTypes.func.isRequired,
 
   growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
@@ -140,7 +132,9 @@ LegacyRevisionLoader.propTypes = {
   highlightKeywords: PropTypes.arrayOf(PropTypes.string),
 };
 
-const RevisionLoader = (props) => {
-  return <LegacyRevisionLoaderWrapper {...props}></LegacyRevisionLoaderWrapper>;
+const RevisionLoaderWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <RevisionLoader t={t} {...props} />;
 };
-export default RevisionLoader;
+
+export default RevisionLoaderWrapperFC;