omit isMobile from AppContainer

packages/app/src/client/services/AppContainer.js

@@ -22,9 +22,6 @@ export default class AppContainer extends Container {
 
     this.config = JSON.parse(document.getElementById('growi-context-hydrate').textContent || '{}');
 
-    const userAgent = window.navigator.userAgent.toLowerCase();
-    this.isMobile = /iphone|ipad|android/.test(userAgent);
-
     const currentUserElem = document.getElementById('growi-current-user');
     if (currentUserElem != null) {
       this.currentUser = JSON.parse(currentUserElem.textContent);

packages/app/src/components/Page.jsx

@@ -1,30 +1,30 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import loggerFactory from '~/utils/logger';
 
-import { withUnstatedContainers } from './UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
-import PageContainer from '~/client/services/PageContainer';
-import EditorContainer from '~/client/services/EditorContainer';
 
 import MarkdownTable from '~/client/models/MarkdownTable';
+import AppContainer from '~/client/services/AppContainer';
+import EditorContainer from '~/client/services/EditorContainer';
+import PageContainer from '~/client/services/PageContainer';
+import { getOptionsToSave } from '~/client/util/editor';
+import {
+  useCurrentPagePath, useIsGuestUser, useSlackChannels,
+} from '~/stores/context';
+import { useIsSlackEnabled } from '~/stores/editor';
+import {
+  useEditorMode, useIsMobile, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
+} from '~/stores/ui';
+import loggerFactory from '~/utils/logger';
 
-import LinkEditModal from './PageEditor/LinkEditModal';
 import RevisionRenderer from './Page/RevisionRenderer';
+import DrawioModal from './PageEditor/DrawioModal';
 import GridEditModal from './PageEditor/GridEditModal';
 import HandsontableModal from './PageEditor/HandsontableModal';
-import DrawioModal from './PageEditor/DrawioModal';
-import mtu from './PageEditor/MarkdownTableUtil';
+import LinkEditModal from './PageEditor/LinkEditModal';
 import mdu from './PageEditor/MarkdownDrawioUtil';
-
-import { getOptionsToSave } from '~/client/util/editor';
-
-// TODO: remove this when omitting unstated is completed
-import {
-  useEditorMode, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
-} from '~/stores/ui';
-import { useIsSlackEnabled } from '~/stores/editor';
-import { useCurrentPagePath, useSlackChannels } from '~/stores/context';
+import mtu from './PageEditor/MarkdownTableUtil';
+import { withUnstatedContainers } from './UnstatedUtils';
 
 const logger = loggerFactory('growi:Page');
 
@@ -143,9 +143,9 @@ class Page extends React.Component {
   }
 
   render() {
-    const { appContainer, pageContainer, pagePath } = this.props;
-    const { isMobile } = appContainer;
-    const isLoggedIn = appContainer.currentUser != null;
+    const {
+      pageContainer, pagePath, isMobile, isGuestUser,
+    } = this.props;
     const { markdown, revisionId } = pageContainer.state;
 
     return (
@@ -155,7 +155,7 @@ class Page extends React.Component {
           <RevisionRenderer growiRenderer={this.growiRenderer} markdown={markdown} pagePath={pagePath} />
         )}
 
-        { isLoggedIn && (
+        { !isGuestUser && (
           <>
             <GridEditModal ref={this.gridEditModal} />
             <LinkEditModal ref={this.LinkEditModal} />
@@ -177,6 +177,8 @@ Page.propTypes = {
 
   pagePath: PropTypes.string.isRequired,
   editorMode: PropTypes.string.isRequired,
+  isGuestUser: PropTypes.bool.isRequired,
+  isMobile: PropTypes.bool,
   isSlackEnabled: PropTypes.bool.isRequired,
   slackChannels: PropTypes.string.isRequired,
   grant: PropTypes.number.isRequired,
@@ -187,13 +189,15 @@ Page.propTypes = {
 const PageWrapper = (props) => {
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: editorMode } = useEditorMode();
+  const { data: isGuestUser } = useIsGuestUser();
+  const { data: isMobile } = useIsMobile();
   const { data: isSlackEnabled } = useIsSlackEnabled();
   const { data: slackChannels } = useSlackChannels();
   const { data: grant } = useSelectedGrant();
   const { data: grantGroupId } = useSelectedGrantGroupId();
   const { data: grantGroupName } = useSelectedGrantGroupName();
 
-  if (currentPagePath == null || editorMode == null) {
+  if (currentPagePath == null || editorMode == null || isGuestUser == null) {
     return null;
   }
 
@@ -202,6 +206,8 @@ const PageWrapper = (props) => {
       {...props}
       pagePath={currentPagePath}
       editorMode={editorMode}
+      isGuestUser={isGuestUser}
+      isMobile={isMobile}
       isSlackEnabled={isSlackEnabled}
       slackChannels={slackChannels}
       grant={grant}

packages/app/src/components/PageComment/CommentEditor.jsx

@@ -1,27 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import { UserPicture } from '@growi/ui';
+import PropTypes from 'prop-types';
 import {
   Button,
   TabContent, TabPane,
 } from 'reactstrap';
-
 import * as toastr from 'toastr';
 
-import { UserPicture } from '@growi/ui';
 import AppContainer from '~/client/services/AppContainer';
-import PageContainer from '~/client/services/PageContainer';
 import CommentContainer from '~/client/services/CommentContainer';
 import EditorContainer from '~/client/services/EditorContainer';
+import PageContainer from '~/client/services/PageContainer';
 import GrowiRenderer from '~/client/util/GrowiRenderer';
+import { useCurrentUser } from '~/stores/context';
+import { useIsMobile } from '~/stores/ui';
 
-import { withUnstatedContainers } from '../UnstatedUtils';
+
+import { CustomNavTab } from '../CustomNavigation/CustomNav';
+import NotAvailableForGuest from '../NotAvailableForGuest';
 import Editor from '../PageEditor/Editor';
 import { SlackNotification } from '../SlackNotification';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import CommentPreview from './CommentPreview';
-import NotAvailableForGuest from '../NotAvailableForGuest';
-import { CustomNavTab } from '../CustomNavigation/CustomNav';
 
 
 const navTabMapping = {
@@ -272,7 +274,7 @@ class CommentEditor extends React.Component {
   }
 
   renderReady() {
-    const { appContainer, commentContainer } = this.props;
+    const { appContainer, commentContainer, isMobile } = this.props;
     const { activeTab } = this.state;
 
     const commentPreview = this.state.isMarkdown ? this.getCommentHtml() : null;
@@ -307,7 +309,7 @@ class CommentEditor extends React.Component {
                 value={this.state.comment}
                 isGfmMode={this.state.isMarkdown}
                 lineNumbers={false}
-                isMobile={appContainer.isMobile}
+                isMobile={isMobile}
                 isUploadable={this.state.isUploadable}
                 isUploadableFile={this.state.isUploadableFile}
                 emojiStrategy={emojiStrategy}
@@ -383,14 +385,14 @@ class CommentEditor extends React.Component {
   }
 
   render() {
-    const { appContainer } = this.props;
+    const { currentUser } = this.props;
     const { isReadyToUse } = this.state;
 
     return (
       <div className="form page-comment-form">
         <div className="comment-form">
           <div className="comment-form-user">
-            <UserPicture user={appContainer.currentUser} noLink noTooltip />
+            <UserPicture user={currentUser} noLink noTooltip />
           </div>
           <div className="comment-form-main">
             { !isReadyToUse
@@ -405,6 +407,11 @@ class CommentEditor extends React.Component {
 
 }
 
+/**
+ * Wrapper component for using unstated
+ */
+const CommentEditorHOCWrapper = withUnstatedContainers(CommentEditor, [AppContainer, PageContainer, EditorContainer, CommentContainer]);
+
 CommentEditor.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
@@ -412,6 +419,8 @@ CommentEditor.propTypes = {
   commentContainer: PropTypes.instanceOf(CommentContainer).isRequired,
 
   growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
+  currentUser: PropTypes.instanceOf(Object),
+  isMobile: PropTypes.bool,
   isForNewComment: PropTypes.bool,
   replyTo: PropTypes.string,
   currentCommentId: PropTypes.string,
@@ -421,9 +430,17 @@ CommentEditor.propTypes = {
   onCommentButtonClicked: PropTypes.func,
 };
 
-/**
- * Wrapper component for using unstated
- */
-const CommentEditorWrapper = withUnstatedContainers(CommentEditor, [AppContainer, PageContainer, EditorContainer, CommentContainer]);
+const CommentEditorWrapper = (props) => {
+  const { data: isMobile } = useIsMobile();
+  const { data: currentUser } = useCurrentUser();
+
+  return (
+    <CommentEditorHOCWrapper
+      {...props}
+      currentUser={currentUser}
+      isMobile={isMobile}
+    />
+  );
+};
 
 export default CommentEditorWrapper;

packages/app/src/components/PageEditor.jsx

@@ -13,7 +13,7 @@ import { getOptionsToSave } from '~/client/util/editor';
 import { useIsEditable, useSlackChannels } from '~/stores/context';
 import { useIsSlackEnabled } from '~/stores/editor';
 import {
-  useEditorMode, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
+  useEditorMode, useIsMobile, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
@@ -341,7 +341,7 @@ class PageEditor extends React.Component {
               ref={(c) => { this.editor = c }}
               value={this.state.markdown}
               noCdn={noCdn}
-              isMobile={this.props.appContainer.isMobile}
+              isMobile={this.props.isMobile}
               isUploadable={this.state.isUploadable}
               isUploadableFile={this.state.isUploadableFile}
               emojiStrategy={emojiStrategy}
@@ -385,6 +385,7 @@ const PageEditorHOCWrapper = withUnstatedContainers(PageEditor, [AppContainer, P
 const PageEditorWrapper = (props) => {
   const { data: isEditable } = useIsEditable();
   const { data: editorMode } = useEditorMode();
+  const { data: isMobile } = useIsMobile();
   const { data: isSlackEnabled } = useIsSlackEnabled();
   const { data: slackChannels } = useSlackChannels();
   const { data: grant, mutate: mutateGrant } = useSelectedGrant();
@@ -400,6 +401,7 @@ const PageEditorWrapper = (props) => {
       {...props}
       isEditable={isEditable}
       editorMode={editorMode}
+      isMobile={isMobile}
       isSlackEnabled={isSlackEnabled}
       slackChannels={slackChannels}
       grant={grant}
@@ -419,6 +421,7 @@ PageEditor.propTypes = {
 
   // TODO: remove this when omitting unstated is completed
   editorMode: PropTypes.string.isRequired,
+  isMobile: PropTypes.bool,
   isSlackEnabled: PropTypes.bool.isRequired,
   slackChannels: PropTypes.string.isRequired,
   grant: PropTypes.number.isRequired,