create react component

src/client/js/app.jsx

@@ -12,6 +12,7 @@ import DisplaySwitcher from './components/Page/DisplaySwitcher';
 import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
 import Page from './components/Page';
 import PageComments from './components/PageComments';
+import PageContentFooter from './components/PageContentFooter';
 import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageManagement from './components/Page/PageManagement';
@@ -111,6 +112,7 @@ if (pageContainer.state.pageId != null) {
     'page-accessories': <PageAccessories />,
     'revision-toc': <TableOfContents />,
     'liker-list': <LikerList />,
+    'page-content-footer': <PageContentFooter />,
 
     'recent-created-icon': <RecentlyCreatedIcon />,
     'user-bookmark-icon': <BookmarkIcon />,

src/client/js/components/PageContentFooter.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import AppContainer from '../services/AppContainer';
+import PageContainer from '../services/PageContainer';
+import { withUnstatedContainers } from './UnstatedUtils';
+
+const PageContentFooter = (props) => {
+  return (
+    <div className="page-attachments-row mt-5 py-4 d-edit-none d-print-none">
+      <div className="container-lg">
+        <p className="page-meta">
+          <p>Last revision posted at </p>
+          <p>Created at</p>
+          {/* <p>Last revision posted at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.revision.author.username }}"><
+            img src="{{ page.revision.author.imageUrlCached|default('/images/icons/user.svg') }}" class="picture picture-sm rounded-circle">
+            {{ page.revision.author.name }}</a></p>
+          <p>Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.creator.username }}">
+            <img src="{{ page.creator.imageUrlCached|default('/images/icons/user.svg') }}" class="picture picture-sm rounded-circle">
+            {{ page.creator.name }}</a></p> */}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageContentFooterWrapper = withUnstatedContainers(PageContentFooter, [AppContainer, PageContainer]);
+
+
+PageContentFooter.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+export default PageContentFooterWrapper;

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

@@ -16,10 +16,7 @@
 
 {% block content_main_after %}
   {% include 'widget/comments.html' %}
-
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
+  <div id="page-content-footer"></div>
 {% endblock %}
 
 

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

@@ -18,9 +18,7 @@
       <div id="trash-page-list"></div>
     </div>
   {% endif %}
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
+  <div id="page-content-footer"></div>
 {% endblock %}
 
 

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

@@ -45,7 +45,6 @@
     </div>
   {% endif %}
 
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
+  <div id="page-content-footer"></div>
+
 {% endblock %}

src/server/views/widget/page_attachments.html

@@ -1,8 +0,0 @@
-<div class="page-attachments-row mt-5 py-4 d-edit-none d-print-none">
-  <div class="container-lg">
-    <p class="page-meta">
-      <p>Last revision posted at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.revision.author.username }}"><img src="{{ page.revision.author.imageUrlCached|default('/images/icons/user.svg') }}" class="picture picture-sm rounded-circle"> {{ page.revision.author.name }}</a></p>
-      <p>Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.creator.username }}"><img src="{{ page.creator.imageUrlCached|default('/images/icons/user.svg') }}" class="picture picture-sm rounded-circle"> {{ page.creator.name }}</a></p>
-    </p>
-  </div>
-</div>