convert withTranslation to useTranslation 10 jsx files

packages/app/src/components/ArchiveCreateModal.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -233,8 +233,6 @@ const ArchiveCreateModal = (props) => {
   );
 };
 
-const ArchiveCreateModalWrapper = withUnstatedContainers(ArchiveCreateModal, [AppContainer]);
-
 ArchiveCreateModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
@@ -245,4 +243,14 @@ ArchiveCreateModal.propTypes = {
   errorMessage: PropTypes.string,
 };
 
-export default withTranslation()(ArchiveCreateModalWrapper);
+const ArchiveCreateModalWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <ArchiveCreateModal t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const ArchiveCreateModalWrapper = withUnstatedContainers(ArchiveCreateModalWrapperFC, [AppContainer]);
+
+export default ArchiveCreateModalWrapper;

packages/app/src/components/CreateTemplateModal.jsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
-import { withTranslation } from 'react-i18next';
 import { pathUtils } from '@growi/core';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import urljoin from 'url-join';
 
-
 const CreateTemplateModal = (props) => {
   const { t, path } = props;
 
@@ -63,7 +61,6 @@ const CreateTemplateModal = (props) => {
   );
 };
 
-
 CreateTemplateModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   path: PropTypes.string.isRequired,
@@ -71,4 +68,9 @@ CreateTemplateModal.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(CreateTemplateModal);
+const CreateTemplateModalWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <CreateTemplateModal t={t} {...props} />;
+};
+
+export default CreateTemplateModalWrapperFC;

packages/app/src/components/Drawio.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import { debounce } from 'throttle-debounce';
 
-import { withTranslation } from 'react-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 
+import NotAvailableForGuest from './NotAvailableForGuest';
 import { withUnstatedContainers } from './UnstatedUtils';
 
-import NotAvailableForGuest from './NotAvailableForGuest';
 
 class Drawio extends React.Component {
 
@@ -105,4 +105,11 @@ Drawio.propTypes = {
   rangeLineNumberOfMarkdown: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(withUnstatedContainers(Drawio, [AppContainer]));
+const DrawioWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <Drawio t={t} {...props} />;
+};
+
+const DrawioWrapper = withUnstatedContainers(DrawioWrapperFC, [AppContainer]);
+
+export default DrawioWrapper;

packages/app/src/components/InstallerForm.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import i18next from 'i18next';
-import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 
 import { localeMetadatas } from '~/client/util/i18n';
 
@@ -214,4 +214,9 @@ InstallerForm.propTypes = {
   csrf: PropTypes.string,
 };
 
-export default withTranslation()(InstallerForm);
+const InstallerFormWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <InstallerForm t={t} {...props} />;
+};
+
+export default InstallerFormWrapperFC;

packages/app/src/components/LoginForm.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 import ReactCardFlip from 'react-card-flip';
-
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
+
 import { withUnstatedContainers } from './UnstatedUtils';
 
 class LoginForm extends React.Component {
@@ -327,11 +328,6 @@ class LoginForm extends React.Component {
 
 }
 
-/**
- * Wrapper component for using unstated
- */
-const LoginFormWrapper = withUnstatedContainers(LoginForm, [AppContainer]);
-
 LoginForm.propTypes = {
   // i18next
   t: PropTypes.func.isRequired,
@@ -351,4 +347,14 @@ LoginForm.propTypes = {
   objOfIsExternalAuthEnableds: PropTypes.object,
 };
 
-export default withTranslation()(LoginFormWrapper);
+const LoginFormWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <LoginForm t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const LoginFormWrapper = withUnstatedContainers(LoginFormWrapperFC, [AppContainer]);
+
+export default LoginFormWrapper;

packages/app/src/components/Me/BasicInfoSettings.jsx

@@ -2,7 +2,7 @@
 import React, { Fragment } from 'react';
 
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import PersonalContainer from '~/client/services/PersonalContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
@@ -163,11 +163,19 @@ class BasicInfoSettings extends React.Component {
 
 }
 
-const BasicInfoSettingsWrapper = withUnstatedContainers(BasicInfoSettings, [PersonalContainer]);
-
 BasicInfoSettings.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   personalContainer: PropTypes.instanceOf(PersonalContainer).isRequired,
 };
 
-export default withTranslation()(BasicInfoSettingsWrapper);
+const BasicInfoSettingsWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <BasicInfoSettings t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const BasicInfoSettingsWrapper = withUnstatedContainers(BasicInfoSettingsWrapperFC, [PersonalContainer]);
+
+export default BasicInfoSettingsWrapper;

packages/app/src/components/PageAccessoriesModalControl.jsx

@@ -1,19 +1,18 @@
 import React, { Fragment, useMemo } from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
 
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
-import PageListIcon from './Icons/PageListIcon';
-import TimeLineIcon from './Icons/TimeLineIcon';
-import HistoryIcon from './Icons/HistoryIcon';
+import { useCurrentPageId } from '~/stores/context';
+
 import AttachmentIcon from './Icons/AttachmentIcon';
+import HistoryIcon from './Icons/HistoryIcon';
+import PageListIcon from './Icons/PageListIcon';
 import ShareLinkIcon from './Icons/ShareLinkIcon';
-
+import TimeLineIcon from './Icons/TimeLineIcon';
 import { withUnstatedContainers } from './UnstatedUtils';
 
-import { useCurrentPageId } from '~/stores/context';
 
 const PageAccessoriesModalControl = (props) => {
   const {
@@ -92,10 +91,6 @@ const PageAccessoriesModalControl = (props) => {
     </div>
   );
 };
-/**
- * Wrapper component for using unstated
- */
-const PageAccessoriesModalControlWrapper = withUnstatedContainers(PageAccessoriesModalControl, []);
 
 PageAccessoriesModalControl.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
@@ -106,4 +101,14 @@ PageAccessoriesModalControl.propTypes = {
   isSharedUser: PropTypes.bool.isRequired,
 };
 
-export default withTranslation()(PageAccessoriesModalControlWrapper);
+const PageAccessoriesModalControlWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <PageAccessoriesModalControl t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageAccessoriesModalControlWrapper = withUnstatedContainers(PageAccessoriesModalControlWrapperFC, []);
+
+export default PageAccessoriesModalControlWrapper;

packages/app/src/components/PageAttachment.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 import PageContainer from '~/client/services/PageContainer';
@@ -172,16 +172,20 @@ class PageAttachment extends React.Component {
 
 }
 
-/**
- * Wrapper component for using unstated
- */
-const PageAttachmentWrapper = withUnstatedContainers(PageAttachment, [AppContainer, PageContainer]);
-
-
 PageAttachment.propTypes = {
   t: PropTypes.func.isRequired,
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
-export default withTranslation()(PageAttachmentWrapper);
+const PageAttachmentWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <PageAttachment t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageAttachmentWrapper = withUnstatedContainers(PageAttachmentWrapperFC, [AppContainer, PageContainer]);
+
+export default PageAttachmentWrapper;

packages/app/src/components/PageCreateModal.jsx

@@ -5,7 +5,7 @@ import React, {
 import { pagePathUtils, pathUtils } from '@growi/core';
 import { format } from 'date-fns';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { debounce } from 'throttle-debounce';
 
@@ -307,16 +307,19 @@ const PageCreateModal = (props) => {
   );
 };
 
-
-/**
- * Wrapper component for using unstated
- */
-const ModalControlWrapper = withUnstatedContainers(PageCreateModal, [AppContainer]);
-
-
 PageCreateModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 
-export default withTranslation()(ModalControlWrapper);
+const PageCreateModalWrapperFC = (props) => {
+  const { t } = useTranslation();
+  return <PageCreateModal t={t} {...props} />;
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageCreateModalWrapper = withUnstatedContainers(PageCreateModalWrapperFC, [AppContainer]);
+
+export default PageCreateModalWrapper;

packages/app/src/components/PageEditorByHackmd.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 AppContainer from '~/client/services/AppContainer';
@@ -424,12 +424,8 @@ class PageEditorByHackmd extends React.Component {
 
 }
 
-/**
- * Wrapper component for using unstated
- */
-const PageEditorByHackmdHOCWrapper = withUnstatedContainers(PageEditorByHackmd, [AppContainer, PageContainer, EditorContainer]);
-
-const PageEditorByHackmdWrapper = (props) => {
+const PageEditorByHackmdWrapperFC = React.forwardRef((props, ref) => {
+  const { t } = useTranslation();
   const { data: editorMode } = useEditorMode();
   const { data: isSlackEnabled } = useIsSlackEnabled();
   const { data: slackChannels } = useSlackChannels();
@@ -442,8 +438,10 @@ const PageEditorByHackmdWrapper = (props) => {
   }
 
   return (
-    <PageEditorByHackmdHOCWrapper
+    <PageEditorByHackmd
+      ref={ref}
       {...props}
+      t={t}
       editorMode={editorMode}
       isSlackEnabled={isSlackEnabled}
       slackChannels={slackChannels}
@@ -452,7 +450,12 @@ const PageEditorByHackmdWrapper = (props) => {
       grantGroupName={grantGroupName}
     />
   );
-};
+});
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageEditorByHackmdWrapper = withUnstatedContainers(PageEditorByHackmdWrapperFC, [AppContainer, PageContainer, EditorContainer]);
 
 PageEditorByHackmd.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -470,4 +473,4 @@ PageEditorByHackmd.propTypes = {
   grantGroupName: PropTypes.string,
 };
 
-export default withTranslation()(PageEditorByHackmdWrapper);
+export default PageEditorByHackmdWrapper;