Fix NotAvailableForGuest is enabled even when the user is logged in

src/client/js/components/Drawio.jsx

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
+import AppContainer from '../services/AppContainer';
+
+import { withUnstatedContainers } from './UnstatedUtils';
+
 import NotAvailableForGuest from './NotAvailableForGuest';
 
 class Drawio extends React.Component {
@@ -83,4 +87,4 @@ Drawio.propTypes = {
   rangeLineNumberOfMarkdown: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(Drawio);
+export default withTranslation()(withUnstatedContainers(Drawio, [AppContainer]));

src/client/js/components/NotAvailableForGuest.jsx

@@ -3,7 +3,17 @@ import PropTypes from 'prop-types';
 
 import { UncontrolledTooltip } from 'reactstrap';
 
-const NotAvailableForGuest = ({ children }) => {
+import AppContainer from '../services/AppContainer';
+
+import { withUnstatedContainers } from './UnstatedUtils';
+
+const NotAvailableForGuest = (props) => {
+  const { appContainer, children } = props;
+  const isLoggedin = appContainer.currentUser != null;
+
+  if (isLoggedin) {
+    return props.children;
+  }
 
   const id = children.props.id || `grw-not-available-for-guest-${Math.random().toString(32).substring(2)}`;
 
@@ -24,7 +34,8 @@ const NotAvailableForGuest = ({ children }) => {
 };
 
 NotAvailableForGuest.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   children: PropTypes.node.isRequired,
 };
 
-export default NotAvailableForGuest;
+export default withUnstatedContainers(NotAvailableForGuest, [AppContainer]);

src/client/js/services/AppContainer.js

@@ -14,15 +14,6 @@ import {
 } from '../util/color-scheme';
 import Apiv1ErrorHandler from '../util/apiv1ErrorHandler';
 
-import {
-  DetachCodeBlockInterceptor,
-  RestoreCodeBlockInterceptor,
-} from '../util/interceptor/detach-code-blocks';
-
-import {
-  DrawioInterceptor,
-} from '../util/interceptor/drawio-interceptor';
-
 import i18nFactory from '../util/i18n';
 import apiv3ErrorHandler from '../util/apiv3ErrorHandler';
 
@@ -100,9 +91,6 @@ export default class AppContainer extends Container {
     this.originRenderer = new GrowiRenderer(this);
 
     this.interceptorManager = new InterceptorManager();
-    this.interceptorManager.addInterceptor(new DetachCodeBlockInterceptor(this), 10); // process as soon as possible
-    this.interceptorManager.addInterceptor(new DrawioInterceptor(this), 20);
-    this.interceptorManager.addInterceptor(new RestoreCodeBlockInterceptor(this), 900); // process as late as possible
 
     if (this.currentUser != null) {
       // remove old user cache

src/client/js/services/PageContainer.js

@@ -6,6 +6,15 @@ import * as entities from 'entities';
 import * as toastr from 'toastr';
 import { toastError } from '../util/apiNotification';
 
+import {
+  DetachCodeBlockInterceptor,
+  RestoreCodeBlockInterceptor,
+} from '../util/interceptor/detach-code-blocks';
+
+import {
+  DrawioInterceptor,
+} from '../util/interceptor/drawio-interceptor';
+
 const logger = loggerFactory('growi:services:PageContainer');
 const scrollThresForSticky = 0;
 const scrollThresForCompact = 30;
@@ -69,6 +78,11 @@ export default class PageContainer extends Container {
       isSubnavCompact: false,
     };
 
+    const { interceptorManager } = this.appContainer;
+    interceptorManager.addInterceptor(new DetachCodeBlockInterceptor(appContainer), 10); // process as soon as possible
+    interceptorManager.addInterceptor(new DrawioInterceptor(appContainer), 20);
+    interceptorManager.addInterceptor(new RestoreCodeBlockInterceptor(appContainer), 900); // process as late as possible
+
     this.initStateMarkdown();
     this.initStateOthers();
 

src/client/js/util/interceptor/drawio-interceptor.js

@@ -1,7 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'unstated';
 import { BasicInterceptor } from 'growi-commons';
+
 import Drawio from '../../components/Drawio';
 
 /**
@@ -132,12 +134,13 @@ export class DrawioInterceptor extends BasicInterceptor {
   renderReactDOM(drawioMapEntry, elem, isPreview) {
     ReactDOM.render(
       // eslint-disable-next-line react/jsx-filename-extension
-      <Drawio
-        appContainer={this.appContainer}
-        drawioContent={drawioMapEntry.contentHtml}
-        isPreview={isPreview}
-        rangeLineNumberOfMarkdown={drawioMapEntry.rangeLineNumberOfMarkdown}
-      />,
+      <Provider inject={[this.appContainer]}>
+        <Drawio
+          drawioContent={drawioMapEntry.contentHtml}
+          isPreview={isPreview}
+          rangeLineNumberOfMarkdown={drawioMapEntry.rangeLineNumberOfMarkdown}
+        />
+      </Provider>,
       elem,
     );
   }