WIP: impl History component

src/client/js/components/Sidebar/History.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
@@ -14,29 +14,46 @@ import AppContainer from '../../services/AppContainer';
 class History extends React.Component {
 
   static propTypes = {
+    t: PropTypes.func.isRequired, // i18next
+    appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   };
 
   state = {
   };
 
-  renderHeaderWordmark() {
-    return <h3>History</h3>;
+  PageItem = (page) => {
+    return (
+      <li className="list-group-item">
+        <div className="d-flex w-100 justify-content-between">
+          <h5 className="mb-1">List group item heading</h5>
+          <small>3 days ago</small>
+        </div>
+        <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+        <small>Donec id elit non mi porta.</small>
+      </li>
+    );
   }
 
   render() {
+    const { PageItem } = this;
+    const { recentlyUpdatedPages } = this.props.appContainer.state;
+
     return (
       <>
         <HeaderSection>
           { () => (
-            <div className="grw-sidebar-header-container">
-              {this.renderHeaderWordmark()}
+            <div className="grw-sidebar-header-container p-3 d-flex">
+              <h3>History</h3>
+              <button type="button" className="btn xs btn-secondary ml-auto"><i className="icon icon-reload"></i></button>
             </div>
           ) }
         </HeaderSection>
         <MenuSection>
           { () => (
-            <div className="grw-sidebar-content-container">
-              <span>(TBD) History Contents</span>
+            <div className="grw-sidebar-content-container p-3">
+              <ul className="list-group">
+                { recentlyUpdatedPages.map(page => <PageItem page={page} />) }
+              </ul>
             </div>
           ) }
         </MenuSection>

src/client/styles/scss/_sidebar.scss

@@ -78,8 +78,6 @@
 }
 
 .grw-sidebar-header-container {
-  padding: 10px;
-
   h3 {
     margin-bottom: 0;
   }