Merge pull request #6271 from weseek/imprv/100060-omit-withLoadingSpinner

Omit withLoadingSppiner

packages/app/src/components/Admin/App/AppSettingsPage.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import loggerFactory from '~/utils/logger';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminAppContainer from '~/client/services/AdminAppContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
+import loggerFactory from '~/utils/logger';
 
-import AdminAppContainer from '~/client/services/AdminAppContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppSettingsPageContents from './AppSettingsPageContents';
 
@@ -46,6 +46,6 @@ AppSettingsPage.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const AppSettingsPageWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(AppSettingsPage), [AdminAppContainer]);
+const AppSettingsPageWithUnstatedContainer = withUnstatedContainers(AppSettingsPage, [AdminAppContainer]);
 
 export default AppSettingsPageWithUnstatedContainer;

packages/app/src/components/Admin/App/SesSetting.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 
-import { withLoadingSppiner } from '../../SuspenseUtils';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 type Props = {
@@ -57,6 +56,6 @@ const SmtpSetting = (props: Props) => {
 /**
  * Wrapper component for using unstated
  */
-const SmtpSettingWrapper = withUnstatedContainers(withLoadingSppiner(SmtpSetting), [AdminAppContainer]);
+const SmtpSettingWrapper = withUnstatedContainers(SmtpSetting, [AdminAppContainer]);
 
 export default SmtpSettingWrapper;

packages/app/src/components/Admin/App/SmtpSetting.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 
-import { withLoadingSppiner } from '../../SuspenseUtils';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 
@@ -82,5 +81,5 @@ const SmtpSetting = (props: Props) => {
 /**
  * Wrapper component for using unstated
  */
-const SmtpSettingWrapper = withUnstatedContainers(withLoadingSppiner(SmtpSetting), [AdminAppContainer]);
+const SmtpSettingWrapper = withUnstatedContainers(SmtpSetting, [AdminAppContainer]);
 export default SmtpSettingWrapper;

packages/app/src/components/Admin/ImportDataPage.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import loggerFactory from '~/utils/logger';
 
-import { withUnstatedContainers } from '../UnstatedUtils';
-import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../SuspenseUtils';
+import PropTypes from 'prop-types';
 
 import AdminImportContainer from '~/client/services/AdminImportContainer';
 import { toastError } from '~/client/util/apiNotification';
+import { toArrayIfNot } from '~/utils/array-utils';
+import loggerFactory from '~/utils/logger';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import ImportDataPageContents from './ImportData/ImportDataPageContents';
 
@@ -47,6 +47,6 @@ ImportDataPage.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ImportDataPageWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(ImportDataPage), [AdminImportContainer]);
+const ImportDataPageWithUnstatedContainer = withUnstatedContainers(ImportDataPage, [AdminImportContainer]);
 
 export default ImportDataPageWithUnstatedContainer;

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

@@ -1,15 +1,16 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
+import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
+import { toastError } from '~/client/util/apiNotification';
+import { toArrayIfNot } from '~/utils/array-utils';
 import loggerFactory from '~/utils/logger';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastError } from '~/client/util/apiNotification';
-import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
 import MarkDownSettingContents from './MarkDownSettingContents';
-import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
+
 
 const logger = loggerFactory('growi:MarkDown');
 
@@ -39,7 +40,7 @@ function MarkdownSetting(props) {
   return <MarkDownSettingContents />;
 }
 
-const MarkdownSettingWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(MarkdownSetting), [AdminMarkDownContainer]);
+const MarkdownSettingWithUnstatedContainer = withUnstatedContainers(MarkdownSetting, [AdminMarkDownContainer]);
 
 MarkdownSetting.propTypes = {
   adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,

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

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminBasicSecurityContainer from '~/client/services/AdminBasicSecurityContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import AdminBasicSecurityContainer from '~/client/services/AdminBasicSecurityContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import BasicSecurityManagementContents from './BasicSecuritySettingContents';
 
@@ -44,7 +44,7 @@ BasicSecurityManagement.propTypes = {
   adminBasicSecurityContainer: PropTypes.instanceOf(AdminBasicSecurityContainer).isRequired,
 };
 
-const BasicSecurityManagementWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(BasicSecurityManagement), [
+const BasicSecurityManagementWithUnstatedContainer = withUnstatedContainers(BasicSecurityManagement, [
   AdminBasicSecurityContainer,
 ]);
 

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

@@ -1,13 +1,14 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminGitHubSecurityContainer from '~/client/services/AdminGitHubSecurityContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import AdminGitHubSecurityContainer from '~/client/services/AdminGitHubSecurityContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 
 import GitHubSecuritySettingContents from './GitHubSecuritySettingContents';
 
@@ -40,7 +41,7 @@ GitHubSecurityManagement.propTypes = {
   adminGitHubSecurityContainer: PropTypes.instanceOf(AdminGitHubSecurityContainer).isRequired,
 };
 
-const GitHubSecurityManagementWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(GitHubSecurityManagement), [
+const GitHubSecurityManagementWithUnstatedContainer = withUnstatedContainers(GitHubSecurityManagement, [
   AdminGitHubSecurityContainer,
 ]);
 

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

@@ -1,13 +1,14 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminGoogleSecurityContainer from '~/client/services/AdminGoogleSecurityContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import AdminGoogleSecurityContainer from '~/client/services/AdminGoogleSecurityContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 import GoogleSecurityManagementContents from './GoogleSecuritySettingContents';
 
 let retrieveErrors = null;
@@ -39,7 +40,7 @@ GoogleSecurityManagement.propTypes = {
   adminGoogleSecurityContainer: PropTypes.instanceOf(AdminGoogleSecurityContainer).isRequired,
 };
 
-const GoogleSecurityManagementWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(GoogleSecurityManagement), [
+const GoogleSecurityManagementWithUnstatedContainer = withUnstatedContainers(GoogleSecurityManagement, [
   AdminGoogleSecurityContainer,
 ]);
 

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

@@ -1,12 +1,12 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import LdapSecuritySettingContents from './LdapSecuritySettingContents';
 
@@ -38,7 +38,7 @@ LdapSecuritySetting.propTypes = {
   adminLdapSecurityContainer: PropTypes.instanceOf(AdminLdapSecurityContainer).isRequired,
 };
 
-const LdapSecuritySettingWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(LdapSecuritySetting), [
+const LdapSecuritySettingWithUnstatedContainer = withUnstatedContainers(LdapSecuritySetting, [
   AdminLdapSecurityContainer,
 ]);
 

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

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminLocalSecurityContainer from '~/client/services/AdminLocalSecurityContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import AdminLocalSecurityContainer from '~/client/services/AdminLocalSecurityContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import LocalSecuritySettingContents from './LocalSecuritySettingContents';
 
@@ -39,7 +39,7 @@ LocalSecuritySetting.propTypes = {
   adminLocalSecurityContainer: PropTypes.instanceOf(AdminLocalSecurityContainer).isRequired,
 };
 
-const LocalSecuritySettingWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(LocalSecuritySetting), [
+const LocalSecuritySettingWithUnstatedContainer = withUnstatedContainers(LocalSecuritySetting, [
   AdminLocalSecurityContainer,
 ]);
 

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

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminOidcSecurityContainer from '~/client/services/AdminOidcSecurityContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import AdminOidcSecurityContainer from '~/client/services/AdminOidcSecurityContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import OidcSecurityManagementContents from './OidcSecuritySettingContents';
 
@@ -39,7 +39,7 @@ OidcSecurityManagement.propTypes = {
   adminOidcSecurityContainer: PropTypes.instanceOf(AdminOidcSecurityContainer).isRequired,
 };
 
-const OidcSecurityManagementWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(OidcSecurityManagement), [
+const OidcSecurityManagementWithUnstatedContainer = withUnstatedContainers(OidcSecurityManagement, [
   AdminOidcSecurityContainer,
 ]);
 

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

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastError } from '~/client/util/apiNotification';
+import PropTypes from 'prop-types';
 
 import AdminSamlSecurityContainer from '~/client/services/AdminSamlSecurityContainer';
+import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import SamlSecuritySettingContents from './SamlSecuritySettingContents';
 
@@ -39,7 +39,7 @@ SamlSecurityManagement.propTypes = {
   adminSamlSecurityContainer: PropTypes.instanceOf(AdminSamlSecurityContainer).isRequired,
 };
 
-const SamlSecurityManagementWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(SamlSecurityManagement), [
+const SamlSecurityManagementWithUnstatedContainer = withUnstatedContainers(SamlSecurityManagement, [
   AdminSamlSecurityContainer,
 ]);
 

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

@@ -1,12 +1,13 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
+
+import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import { toastError } from '~/client/util/apiNotification';
+import { toArrayIfNot } from '~/utils/array-utils';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import SecurityManagementContents from './SecurityManagementContents';
 
 let retrieveErrors = null;
@@ -40,6 +41,6 @@ SecurityManagement.propTypes = {
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
 };
 
-const SecurityManagementWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(SecurityManagement), [AdminGeneralSecurityContainer]);
+const SecurityManagementWithUnstatedContainer = withUnstatedContainers(SecurityManagement, [AdminGeneralSecurityContainer]);
 
 export default SecurityManagementWithUnstatedContainer;

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

@@ -1,13 +1,14 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
-import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
 
 import TwitterSecuritySettingContents from './TwitterSecuritySettingContents';
 
@@ -41,7 +42,7 @@ TwitterSecurityManagement.propTypes = {
   adminTwitterSecurityContainer: PropTypes.instanceOf(AdminTwitterSecurityContainer).isRequired,
 };
 
-const TwitterSecurityManagementWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(TwitterSecurityManagement), [
+const TwitterSecurityManagementWithUnstatedContainer = withUnstatedContainers(TwitterSecurityManagement, [
   AdminTwitterSecurityContainer,
 ]);
 

packages/app/src/components/PageEditor/LinkEditModal.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import path from 'path';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 import {
   Modal,
   ModalHeader,
@@ -14,15 +14,15 @@ import {
 } from 'reactstrap';
 import validator from 'validator';
 
+
 import Linker from '~/client/models/Linker';
-import PageContainer from '~/client/services/PageContainer';
 import { apiv3Get } from '~/client/util/apiv3-client';
+import { useCurrentPagePath } from '~/stores/context';
 
 import PagePreviewIcon from '../Icons/PagePreviewIcon';
 import SearchTypeahead from '../SearchTypeahead';
-import { withUnstatedContainers } from '../UnstatedUtils';
 
-import PreviewWithSuspense from './PreviewWithSuspense';
+import Preview from './Preview';
 
 
 class LinkEditModal extends React.PureComponent {
@@ -44,7 +44,7 @@ class LinkEditModal extends React.PureComponent {
       isPreviewOpen: false,
     };
 
-    this.isApplyPukiwikiLikeLinkerPlugin = window.growiRenderer.preProcessors.some(process => process.constructor.name === 'PukiwikiLikeLinker');
+    // this.isApplyPukiwikiLikeLinkerPlugin = window.growiRenderer.preProcessors.some(process => process.constructor.name === 'PukiwikiLikeLinker');
 
     this.show = this.show.bind(this);
     this.hide = this.hide.bind(this);
@@ -267,8 +267,7 @@ class LinkEditModal extends React.PureComponent {
   }
 
   getRootPath(type) {
-    const { pageContainer } = this.props;
-    const pagePath = pageContainer.state.path;
+    const { pagePath } = this.props;
     // rootPaths of md link and pukiwiki link are different
     return type === Linker.types.markdownLink ? path.dirname(pagePath) : pagePath;
   }
@@ -308,7 +307,11 @@ class LinkEditModal extends React.PureComponent {
                 </button>
                 <Popover trigger="focus" placement="right" isOpen={this.state.isPreviewOpen} target="preview-btn" toggle={this.toggleIsPreviewOpen}>
                   <PopoverBody>
-                    <PreviewWithSuspense setMarkdown={this.setMarkdown} markdown={this.state.markdown} pagePath={pagePath} error={this.state.previewError} />
+                    {this.state.markdown != null && pagePath != null
+                    && <div className="linkedit-preview">
+                      <Preview markdown={this.state.markdown} pagePath={pagePath} />
+                    </div>
+                    }
                   </PopoverBody>
                 </Popover>
               </div>
@@ -460,18 +463,15 @@ class LinkEditModal extends React.PureComponent {
 
 const LinkEditModalFc = React.forwardRef((props, ref) => {
   const { t } = useTranslation();
-  return <LinkEditModal t={t} ref={ref} {...props} />;
+  const { data: currentPath } = useCurrentPagePath();
+  return <LinkEditModal t={t} ref={ref} pagePath={currentPath} {...props} />;
 });
 
 LinkEditModal.propTypes = {
   t: PropTypes.func.isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  pagePath: PropTypes.string,
   onSave: PropTypes.func,
 };
 
-/**
- * Wrapper component for using unstated
- */
-const LinkEditModalWrapper = withUnstatedContainers(LinkEditModalFc, [PageContainer]);
 
-export default LinkEditModalWrapper;
+export default LinkEditModalFc;

packages/app/src/components/PageEditor/PreviewWithSuspense.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Preview from './Preview';
-
-import { withLoadingSppiner } from '../SuspenseUtils';
-
-function PagePreview(props) {
-  if (props.markdown == null || props.pagePath == null) {
-    if (props.error !== '') {
-      return props.error;
-    }
-    throw (async() => {
-      await props.setMarkdown();
-    })();
-  }
-
-  return (
-    <div className="linkedit-preview">
-      <Preview markdown={props.markdown} pagePath={props.pagePath} />
-    </div>
-  );
-}
-
-PagePreview.propTypes = {
-  setMarkdown: PropTypes.func,
-  markdown: PropTypes.string,
-  pagePath: PropTypes.string,
-  error: PropTypes.string,
-};
-
-export default withLoadingSppiner(PagePreview);

packages/app/src/components/SuspenseUtils.jsx

@@ -1,21 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import React, { Suspense } from 'react';
-
-/**
- * If you throw a Promise in the component, it will display a sppiner
- * @param {object} Component A React.Component or functional component
- */
-export const withLoadingSppiner = Component => function getWithLoadingSpinner(props) {
-  return (
-    // wrap with <Suspense></Suspense>
-    <Suspense
-      fallback={(
-        <div className="my-5 text-center">
-          <i className="fa fa-lg fa-spinner fa-pulse mx-auto text-muted"></i>
-        </div>
-      )}
-    >
-      <Component {...props} />
-    </Suspense>
-  );
-};