Merge pull request #2500 from weseek/imprv/refactor-GrowiSubNavigationForUserPage

Imprv/refactor growi sub navigation for user page

src/client/js/app.jsx

@@ -36,7 +36,6 @@ import EditorContainer from './services/EditorContainer';
 import TagContainer from './services/TagContainer';
 import GrowiSubNavigation from './components/Navbar/GrowiSubNavigation';
 import GrowiSubNavigationSwitcher from './components/Navbar/GrowiSubNavigationSwitcher';
-import GrowiSubNavigationForUserPage from './components/Navbar/GrowiSubNavigationForUserPage';
 import PersonalContainer from './services/PersonalContainer';
 
 import { appContainer, componentMappings } from './base';
@@ -103,7 +102,6 @@ if (pageContainer.state.path != null) {
     'page': <Page />,
     'grw-subnav-container': <GrowiSubNavigation />,
     'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
-    'grw-subnav-for-user-page': <GrowiSubNavigationForUserPage />,
   });
 }
 // additional definitions if user is logged in

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

@@ -22,6 +22,7 @@ import BookmarkButton from '../BookmarkButton';
 import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
 import DrawerToggler from './DrawerToggler';
+import UserPicture from '../User/UserPicture';
 
 
 // eslint-disable-next-line react/prop-types
@@ -60,6 +61,69 @@ const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
   );
 };
 
+// eslint-disable-next-line react/prop-types
+const UserPagePathNav = ({ pageId, pagePath }) => {
+  const linkedPagePath = new LinkedPagePath(pagePath);
+  const latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
+
+  return (
+    <div className="grw-page-path-nav">
+      <span className="d-flex align-items-center flex-wrap">
+        <h4 className="grw-user-page-path">{latterLink}</h4>
+        <RevisionPathControls
+          pageId={pageId}
+          pagePath={pagePath}
+        />
+      </span>
+    </div>
+  );
+};
+
+/* eslint-disable react/prop-types */
+const UserInfo = ({ pageUser }) => {
+  return (
+    <div className="grw-users-info d-flex align-items-center d-edit-none">
+      <UserPicture user={pageUser} />
+
+      <div className="users-meta">
+        <h1 className="user-page-name">
+          {pageUser.name}
+        </h1>
+        <div className="user-page-meta mt-1 mb-0">
+          <span className="user-page-username mr-2"><i className="icon-user mr-1"></i>{pageUser.username}</span>
+          <span className="user-page-email mr-2">
+            <i className="icon-envelope mr-1"></i>
+            {pageUser.isEmailPublished ? pageUser.email : '*****'}
+          </span>
+          {pageUser.introduction && <span className="user-page-introduction">{pageUser.introduction}</span>}
+        </div>
+      </div>
+
+    </div>
+  );
+};
+/* eslint-enable react/prop-types */
+
+/* eslint-disable react/prop-types */
+const PageReactionButtons = ({ appContainer, pageContainer }) => {
+
+  const { pageId, isLiked, pageUser } = pageContainer.state;
+
+  return (
+    <>
+      {pageUser == null && (
+      <span className="mr-2">
+        <LikeButton pageId={pageId} isLiked={isLiked} />
+      </span>
+      )}
+      <span className="mr-2">
+        <BookmarkButton pageId={pageId} crowi={appContainer} />
+      </span>
+    </>
+  );
+};
+/* eslint-enable react/prop-types */
+
 const GrowiSubNavigation = (props) => {
   const {
     appContainer, navigationContainer, pageContainer, isCompactMode,
@@ -67,10 +131,11 @@ const GrowiSubNavigation = (props) => {
   const { isDrawerMode } = navigationContainer.state;
   const {
     pageId, path, createdAt, creator, updatedAt, revisionAuthor,
-    isForbidden: isPageForbidden,
+    isForbidden: isPageForbidden, pageUser,
   } = pageContainer.state;
 
   const isPageNotFound = pageId == null;
+  const isUserPage = pageUser != null;
   const isPageInTrash = isTrashPage(path);
 
   // Display only the RevisionPath
@@ -94,42 +159,39 @@ const GrowiSubNavigation = (props) => {
         ) }
 
         <div>
-          { !isCompactMode && !isPageNotFound && !isPageForbidden && (
+          { !isCompactMode && !isPageNotFound && !isPageForbidden && !isUserPage && (
             <div className="mb-2">
               <TagLabels />
             </div>
           ) }
-          <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
+
+          {isUserPage ? <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
+          : <UserPagePathNav pageId={pageId} pagePath={path} />}
+
+          {isUserPage && <UserInfo pageUser={pageUser} />}
+
         </div>
       </div>
 
       {/* Right side */}
       <div className="d-flex">
 
-        {/* Buttons */}
-        { !isPageInTrash && (
-          <div className="d-flex flex-column align-items-end justify-content-center">
-            <div className="d-flex">
-              <span className="mr-2">
-                <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
-              </span>
-              <span className="mr-2">
-                <BookmarkButton pageId={pageId} crowi={appContainer} />
-              </span>
-            </div>
+        <div className="d-flex flex-column align-items-end justify-content-center">
+          <div className="d-flex">
+            { !isPageInTrash && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
             <div className="mt-2">
               {/* TODO: impl View / Edit / HackMD button group */}
               {/* <div className="btn-group" role="group" aria-label="Basic example">
-                <button type="button" className="btn btn-outline-primary">Left</button>
-                <button type="button" className="btn btn-outline-primary">Middle</button>
-                <button type="button" className="btn btn-outline-primary">Right</button>
-              </div> */}
+              <button type="button" className="btn btn-outline-primary">Left</button>
+              <button type="button" className="btn btn-outline-primary">Middle</button>
+              <button type="button" className="btn btn-outline-primary">Right</button>
+            </div> */}
             </div>
           </div>
-        ) }
+        </div>
 
         {/* Page Authors */}
-        { !isCompactMode && (
+        { (!isCompactMode && !isUserPage) && (
           <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none">
             { creator != null && (
               <li className="pb-1">

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

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
-
-import LinkedPagePath from '@commons/models/linked-page-path';
-import PagePathHierarchicalLink from '@commons/components/PagePathHierarchicalLink';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-import AppContainer from '../../services/AppContainer';
-import PageContainer from '../../services/PageContainer';
-
-import RevisionPathControls from '../Page/RevisionPathControls';
-import BookmarkButton from '../BookmarkButton';
-import UserPicture from '../User/UserPicture';
-
-// eslint-disable-next-line react/prop-types
-const PagePathNav = ({ pageId, pagePath }) => {
-  const linkedPagePath = new LinkedPagePath(pagePath);
-  const latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
-
-  return (
-    <div className="grw-page-path-nav">
-      <span className="d-flex align-items-center flex-wrap">
-        <h4 className="grw-user-page-path">{latterLink}</h4>
-        <RevisionPathControls
-          pageId={pageId}
-          pagePath={pagePath}
-        />
-      </span>
-    </div>
-  );
-};
-
-const GrowiSubNavigationForUserPage = (props) => {
-  const pageUser = JSON.parse(document.querySelector('#grw-subnav-for-user-page').getAttribute('data-page-user'));
-  const { appContainer, pageContainer } = props;
-  const {
-    pageId, path,
-  } = pageContainer.state;
-
-  const additionalClassNames = ['grw-subnavbar', 'grw-subnavbar-user-page'];
-  const layoutType = appContainer.getConfig().layoutType;
-
-  if (layoutType === 'growi') {
-    additionalClassNames.push('py-3');
-  }
-
-  return (
-    <div className={`px-3 py-3 ${additionalClassNames.join(' ')}`}>
-      <PagePathNav pageId={pageId} pagePath={path} />
-
-      <div className="d-flex align-items-center justify-content-between">
-
-        <div className="users-info d-flex align-items-center d-edit-none">
-          <UserPicture user={pageUser} />
-
-          <div className="users-meta">
-            <h1>
-              {pageUser.name}
-            </h1>
-            <ul className="user-page-meta mt-1 mb-0">
-              <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
-              <li className="user-page-email">
-                <i className="icon-envelope mr-1"></i>
-                {pageUser.isEmailPublished ? pageUser.email : '*****'}
-              </li>
-              {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
-            </ul>
-          </div>
-        </div>
-
-        <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
-      </div>
-    </div>
-  );
-
-};
-
-/**
- * Wrapper component for using unstated
- */
-const GrowiSubNavigationForUserPageWrapper = withUnstatedContainers(GrowiSubNavigationForUserPage, [AppContainer, PageContainer]);
-
-
-GrowiSubNavigationForUserPage.propTypes = {
-  t: PropTypes.func.isRequired, //  i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-};
-
-export default withTranslation()(GrowiSubNavigationForUserPageWrapper);

src/client/js/services/PageContainer.js

@@ -60,6 +60,7 @@ export default class PageContainer extends Container {
       isDeleted:  JSON.parse(mainContent.getAttribute('data-page-is-deleted')),
       isDeletable:  JSON.parse(mainContent.getAttribute('data-page-is-deletable')),
       isAbleToDeleteCompletely:  JSON.parse(mainContent.getAttribute('data-page-is-able-to-delete-completely')),
+      pageUser: JSON.parse(mainContent.getAttribute('data-page-user')),
       tags: [],
       hasChildren: JSON.parse(mainContent.getAttribute('data-page-has-children')),
       templateTagData: mainContent.getAttribute('data-template-tags') || null,

src/client/styles/scss/_user.scss

@@ -8,16 +8,12 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 /*
  * Styles
  */
-.grw-subnavbar-user-page {
-  #revision-path {
-    margin-bottom: 0;
-  }
-
+.grw-users-info {
   .users-meta {
     margin-left: 30px;
   }
 
-  h1 {
+  .user-page-name {
     margin: 0;
     font-size: 2.5em;
     color: #666;
@@ -28,36 +24,12 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
     height: 72px;
   }
 
-  ul.user-page-meta {
+  div.user-page-meta {
     padding-left: 0;
     color: #999;
 
-    li {
-      list-style: none;
-    }
-
     .user-page-username {
       font-weight: bold;
-
-      .user-page-email {
-      }
-
-      .user-page-introduction {
-      }
-    }
-
-    .user-page-email {
-    }
-
-    .user-page-introduction {
-    }
-  }
-
-  .btn.btn-bookmark {
-    &.btn-lg {
-      width: 50px;
-      height: 50px;
-      font-size: 1.5em;
     }
   }
 }

src/server/views/layout-growi/user_page.html

@@ -5,15 +5,6 @@
   user-page
 {% endblock %}
 
-{% block content_header %}
-  {% if pageUser %}
-    <div id="grw-subnav-for-user-page" class="grw-subnav" data-page-user="{{ pageUser|json }}"></div>
-  {% else %}
-    {% parent %}
-  {% endif %}
-{% endblock %}
-
-
 {% block content_main %}
   <div class="row">
 

src/server/views/layout-kibela/user_page.html

@@ -5,14 +5,6 @@
   user-page
 {% endblock %}
 
-{% block content_header %}
-  {% if pageUser %}
-    <header id="grw-subnav-for-user-page" class="grw-subnav grw-subnav-user-page" data-page-user="{{ pageUser|json }}"></header>
-  {% else %}
-    {% parent %}
-  {% endif %}
-{% endblock %}
-
 
 {% block content_main %}
   <div class="row pt-15">

src/server/views/widget/page_content.html

@@ -20,6 +20,7 @@
   data-page-creator="{% if page %}{{ page.creator|json }}{% endif %}"
   data-page-updated-at="{% if page %}{{ page.updatedAt|datetz('Y/m/d H:i:s') }}{% endif %}"
   data-page-has-children="{% if pages.length > 0 %}true{% else %}false{% endif %}"
+  data-page-user="{% if pageUser %}{{ pageUser|json }}{% else %}null{% endif %}"
   >
 {% else %}
 <div id="content-main" class="content-main"

src/server/views/widget/user_page_header.html

@@ -1,36 +0,0 @@
-<div class="header-wrap">
-  <header id="page-header" class="user-page-header">
-
-    <h4 id="revision-path"></h4>
-
-    <div class="users-info d-flex align-items-center">
-      <img src="{{ pageUser.imageUrlCached }}" class="picture img-circle">
-      <div class="users-meta" style="flex: 1;">
-        <div class="d-flex align-items-center">
-          <h1>
-            {{ pageUser.name }}
-          </h1>
-        </div>
-        <div class="user-page-meta">
-          <ul>
-            <li class="user-page-username"><i class="icon-user"></i> {{ pageUser.username }}</li>
-            <li class="user-page-email">
-              <i class="icon-envelope"></i>
-              {% if pageUser.isEmailPublished %}
-                {{ pageUser.email }}
-              {% else %}
-                *****
-              {% endif %}
-            </li>
-            {% if pageUser.introduction %}
-            <li class="user-page-introduction"><p>{{ pageUser.introduction|nl2br }}</p></li>
-            {% endif %}
-          </ul>
-        </div>
-      </div>
-      <div class="d-flex">
-        {% include 'header-buttons-lg.html' %}
-      </div>
-    </div>
-  </header>
-</div>