componalization

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import { isTrashPage, userPageRoot } from '../../../../lib/util/path-utils';
+import { isTrashPage } from '../../../../lib/util/path-utils';
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import RevisionPath from '../Page/RevisionPath';
@@ -11,7 +11,8 @@ import PageContainer from '../../services/PageContainer';
 import TagLabels from '../Page/TagLabels';
 import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
-import UserPicture from '../User/UserPicture';
+import PageCreator from './PageCreator';
+import RevisionAuthor from './RevisionAuthor';
 
 const GrowiSubNavigation = (props) => {
   const { appContainer, pageContainer } = props;
@@ -39,36 +40,13 @@ const GrowiSubNavigation = (props) => {
       <div>
         <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
       </div>
+
+      {/* Page Authors */}
       <ul className="authors hidden-sm hidden-xs text-nowrap">
-        {creator != null
-        && (
-        <li>
-          <div className="d-flex align-items-center">
-            <div className="mr-2" href={userPageRoot(creator)} data-toggle="tooltip" data-placement="bottom" title={creator.name}>
-              <UserPicture user={creator} size="sm" />
-            </div>
-            <div>
-              <div>Created by <a href={userPageRoot(creator)}>{creator.name}</a></div>
-              <div className="text-muted">{createdAt}</div>
-            </div>
-          </div>
-        </li>
-        )}
-        {revisionAuthor != null
-        && (
-        <li className="mt-1">
-          <div className="d-flex align-items-center">
-            <div className="mr-2" href={userPageRoot(revisionAuthor)} data-toggle="tooltip" data-placement="bottom" title={revisionAuthor.name}>
-              <UserPicture user={revisionAuthor} size="sm" />
-            </div>
-            <div>
-              <div>Updated by  <a href={userPageRoot(revisionAuthor)}>{revisionAuthor.name }</a></div>
-              <div className="text-muted">{updatedAt}</div>
-            </div>
-          </div>
-        </li>
-        )}
+        {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} /></li>}
+        {revisionAuthor != null && <li className="mt-1"><RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
       </ul>
+
     </div>
   );
 

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPicture from '../User/UserPicture';
+import { userPageRoot } from '../../../../lib/util/path-utils';
+
+const PageCreator = (props) => {
+  const { creator, createdAt } = props;
+
+  return (
+    <div className="d-flex align-items-center">
+      <div className="mr-2" href={userPageRoot(creator)} data-toggle="tooltip" data-placement="bottom" title={creator.name}>
+        <UserPicture user={creator} size="sm" />
+      </div>
+      <div>
+        <div>Created by <a href={userPageRoot(creator)}>{creator.name}</a></div>
+        <div className="text-muted">{createdAt}</div>
+      </div>
+    </div>
+  );
+};
+
+PageCreator.propTypes = {
+
+  creator: PropTypes.object.isRequired,
+  createdAt: PropTypes.string.isRequired,
+};
+
+
+export default PageCreator;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPicture from '../User/UserPicture';
+import { userPageRoot } from '../../../../lib/util/path-utils';
+
+const RevisionAuthor = (props) => {
+  const { revisionAuthor, updatedAt } = props;
+
+  return (
+    <div className="d-flex align-items-center">
+      <div className="mr-2" href={userPageRoot(revisionAuthor)} data-toggle="tooltip" data-placement="bottom" title={revisionAuthor.name}>
+        <UserPicture user={revisionAuthor} size="sm" />
+      </div>
+      <div>
+        <div>Updated by  <a href={userPageRoot(revisionAuthor)}>{revisionAuthor.name}</a></div>
+        <div className="text-muted">{updatedAt}</div>
+      </div>
+    </div>
+  );
+};
+
+RevisionAuthor.propTypes = {
+
+  revisionAuthor: PropTypes.object.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+};
+
+
+export default RevisionAuthor;

src/server/views/widget/page_content.html

@@ -11,9 +11,9 @@
   data-page-has-draft-on-hackmd="{% if hasDraftOnHackmd %}{{ hasDraftOnHackmd.toString() }}{% endif %}"
   data-page-is-seen="{% if page and page.isSeenUser(user) %}1{% else %}0{% endif %}"
   data-slack-channels="{{ slack|default('') }}"
-  data-page-created-at="{{ page.createdAt|datetz('Y/m/d H:i:s') }}"
-  data-page-creator="{{ page.creator|json }}"
-  data-page-updated-at="{{ page.updatedAt|datetz('Y/m/d H:i:s') }}"
+  data-page-created-at="{% if page %}{{ page.createdAt|datetz('Y/m/d H:i:s') }}{% endif %}"
+  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 %}"
   >
 {% else %}
 <div id="content-main" class="content-main"