Merge pull request #2435 from weseek/imprv/reactify-navbar

Imprv/reactify navbar

src/client/js/base.jsx

@@ -4,8 +4,8 @@ import loggerFactory from '@alias/logger';
 import Xss from '@commons/service/xss';
 
 import SearchTop from './components/Navbar/SearchTop';
+import GrowiNavbar from './components/Navbar/GrowiNavbar';
 import NavbarToggler from './components/Navbar/NavbarToggler';
-import PersonalDropdown from './components/Navbar/PersonalDropdown';
 import Sidebar from './components/Sidebar';
 import StaffCredit from './components/StaffCredit/StaffCredit';
 
@@ -39,12 +39,11 @@ logger.info('AppContainer has been initialized');
  *  value: React Element
  */
 const componentMappings = {
+  'grw-navbar': <GrowiNavbar />,
   'grw-navbar-toggler': <NavbarToggler />,
 
   'grw-search-top': <SearchTop />,
-  'personal-dropdown': <PersonalDropdown />,
 
-  'create-page-button': <PageCreateButton />,
   'create-page-button-icon': <PageCreateButton isIcon />,
   'page-create-modal': <PageCreateModal />,
 

src/client/js/components/Navbar/GrowiNavbar.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
+import NavigationContainer from '../../services/NavigationContainer';
+import AppContainer from '../../services/AppContainer';
+
+import PageCreateButton from './PageCreateButton';
+import PersonalDropdown from './PersonalDropdown';
+import GrowiLogo from '../GrowiLogo';
+
+class GrowiNavbar extends React.Component {
+
+  renderNavbarRight() {
+    const { appContainer } = this.props;
+    const isReachable = appContainer.config.isSearchServiceReachable;
+
+    return (
+      <>
+        <li className="nav-item d-none d-md-block">
+          <PageCreateButton />
+        </li>
+
+        {isReachable
+         && (
+         <li className="nav-item d-md-none">
+           <a type="button" className="nav-link px-4" data-target="#grw-search-top-collapse" data-toggle="collapse">
+             <i className="icon-magnifier mr-2"></i>
+           </a>
+         </li>
+         )}
+
+        <li className="grw-personal-dropdown nav-item dropdown dropdown-toggle dropdown-toggle-no-caret">
+          <PersonalDropdown />
+        </li>
+      </>
+    );
+  }
+
+  renderConfidential() {
+    const { appContainer } = this.props;
+    const { crowi } = appContainer.config;
+
+    return (
+      <li className="nav-item confidential text-light">
+        <i className="icon-info d-md-none" data-toggle="tooltip" title={crowi.confidential} />
+        <span className="d-none d-md-inline">
+          {crowi.confidential}
+        </span>
+      </li>
+    );
+  }
+
+  render() {
+    const { appContainer } = this.props;
+    const { crowi } = appContainer.config;
+    const { currentUser } = appContainer;
+
+    return (
+      <nav className="navbar grw-navbar navbar-expand navbar-dark sticky-top mb-0 px-0">
+
+        {/* Brand Logo  */}
+        <div className="navbar-brand mr-0">
+          <a className="grw-logo d-block" href="/">
+            <GrowiLogo />
+          </a>
+        </div>
+
+        <ul className="navbar-nav d-md-none">
+          <li id="grw-navbar-toggler" className="nav-item"></li>
+        </ul>
+        <div className="grw-app-title d-none d-md-block">
+          {crowi.title}
+        </div>
+
+
+        {/* Navbar Right  */}
+        <ul className="navbar-nav ml-auto">
+          {currentUser != null ? this.renderNavbarRight() : <li id="login-user" className="nav-item"><a className="nav-link" href="/login">Login</a></li>}
+        </ul>
+
+        {crowi.confidential != null && this.renderConfidential()}
+      </nav>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const GrowiNavbarWrapper = withUnstatedContainers(GrowiNavbar, [AppContainer, NavigationContainer]);
+
+
+GrowiNavbar.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+export default withTranslation()(GrowiNavbarWrapper);

src/server/models/config.js

@@ -182,6 +182,7 @@ module.exports = function(crowi) {
       crowi: {
         title: crowi.appService.getAppTitle(),
         url: crowi.appService.getSiteUrl(),
+        confidential: crowi.appService.getAppConfidential(),
       },
       upload: {
         image: crowi.fileUploadService.getIsUploadable(),

src/server/service/app.js

@@ -39,6 +39,10 @@ class AppService {
     return -(this.configManager.getConfig('crowi', 'app:timezone') || 9) * 60;
   }
 
+  getAppConfidential() {
+    return this.configManager.getConfig('crowi', 'app:confidential');
+  }
+
   /**
    * Execute only once for installing application
    */

src/server/views/layout/layout.html

@@ -74,48 +74,7 @@
 <div id="wrapper">
 
   {% block layout_head_nav %}
-  <nav class="navbar grw-navbar navbar-expand navbar-dark sticky-top mb-0 px-0">
-    {# Brand Logo #}
-    <div class="navbar-brand mr-0">
-      <a class="grw-logo d-block" href="/">
-        {% include '../widget/logo.html' %}
-      </a>
-    </div>
-    <ul class="navbar-nav d-md-none">
-      <li id="grw-navbar-toggler" class="nav-item"></li>
-    </ul>
-    <div class="grw-app-title d-none d-md-block">
-      {{ appService.getAppTitle() | preventXss }}
-    </div>
-
-    {# Navbar Right #}
-    <ul class="navbar-nav ml-auto">
-      {% if user %}
-        <li id="create-page-button" class="nav-item d-none d-md-block"></li>
-        {% if isSearchServiceConfigured() %}
-          <li class="nav-item d-md-none">
-            <a type="button" class="nav-link px-4" data-target="#grw-search-top-collapse" data-toggle="collapse">
-              <i class="icon-magnifier mr-2"></i>
-            </a>
-          </li>
-        {% endif %}
-        <li id="personal-dropdown" class="grw-personal-dropdown nav-item dropdown dropdown-toggle dropdown-toggle-no-caret"></li>
-      {% else %}
-        <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>
-      {% endif %}
-
-      {% if getConfig('crowi', 'app:confidential') %}
-        <li class="nav-item confidential text-light">
-          <i class="icon-info d-md-none" data-toggle="tooltip" title="{{ getConfig('crowi', 'app:confidential') }}"></i>
-          <span class="d-none d-md-inline">
-            {{ getConfig('crowi', 'app:confidential') }}
-          </span>
-        </li>
-      {% endif %}
-    </ul>
-
-  </nav>
-
+    <div id="grw-navbar"></div>
   {% endblock  %} {# layout_head_nav #}
 
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}