resume and delete draft

src/client/js/app.js

@@ -37,6 +37,7 @@ import BookmarkButton from './components/BookmarkButton';
 import LikeButton from './components/LikeButton';
 import PagePathAutoComplete from './components/PagePathAutoComplete';
 import RecentCreated from './components/RecentCreated/RecentCreated';
+import MyDraftList from './components/MyDraftList/MyDraftList';
 import UserPictureList from './components/User/UserPictureList';
 
 import CustomCssEditor from './components/Admin/CustomCssEditor';
@@ -399,6 +400,14 @@ if (recentCreatedControlsElem) {
   );
 }
 
+const myDraftControlsElem = document.getElementById('user-draft-list');
+if (myDraftControlsElem) {
+  ReactDOM.render(
+    <MyDraftList crowi={crowi} />,
+    myDraftControlsElem,
+  );
+}
+
 /*
  * HackMD Editor
  */

src/client/js/components/MyDraftList/MyDraftList.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import Draft from '../PageList/Draft';
+
+export default class MyDraftList extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      drafts: [],
+    };
+
+    this.getDraftsFromLocalStorage = this.getDraftsFromLocalStorage.bind(this);
+    this.clearDraft = this.clearDraft.bind(this);
+  }
+
+  componentWillMount() {
+    this.getDraftsFromLocalStorage();
+  }
+
+  getDraftsFromLocalStorage() {
+    const draftsAsObj = JSON.parse(this.props.crowi.localStorage.getItem('draft') || {});
+
+    // {'/a': '#a', '/b': '#b'} => [{path: '/a', markdown: '#a'}, {path: '/b', markdown: '#b'}]
+    const drafts = Object.entries(draftsAsObj).map((d) => {
+      return {
+        path: d[0],
+        markdown: d[1],
+      };
+    });
+
+    this.setState({
+      drafts: drafts || [],
+    });
+  }
+
+  /**
+   * generate Elements of Draft
+   *
+   * @param {any} drafts Array of pages Model Obj
+   *
+   */
+  generateDraftList(drafts) {
+    return drafts.map((draft) => {
+      return <Draft key={draft.path} crowi={this.props.crowi} draft={draft} clearDraft={this.clearDraft} />;
+    });
+  }
+
+  clearDraft(path) {
+    this.props.crowi.clearDraft(path);
+
+    this.setState((prevState) => {
+      return {
+        drafts: prevState.drafts.filter((draft) => { return draft.path !== path }),
+      };
+    });
+  }
+
+  render() {
+    return (
+      <div className="page-list-container-create">
+        <ul className="page-list-ul page-list-ul-flat">
+          {this.generateDraftList(this.state.drafts)}
+        </ul>
+      </div>
+    );
+  }
+
+}
+
+MyDraftList.propTypes = {
+  crowi: PropTypes.object.isRequired,
+};

src/client/js/components/PageList/Draft.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Draft extends React.Component {
+
+  render() {
+    return (
+      <li className="page-list-li d-flex align-items-center">
+        <a className="page-list-link" href={this.props.draft.path}>
+          {this.props.draft.path}
+        </a>
+        <a href={`${this.props.draft.path}#edit`} target="_blank" rel="noopener noreferrer">
+          <button type="button">Resume</button>
+        </a>
+        <button type="button" onClick={() => { return this.props.clearDraft(this.props.draft.path) }}>Delete</button>
+      </li>
+    );
+  }
+
+}
+
+Draft.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  draft: PropTypes.object.isRequired,
+  clearDraft: PropTypes.func.isRequired,
+};

src/server/views/widget/user_page_content.html

@@ -4,7 +4,10 @@
       <a href="#user-bookmark-list" data-toggle="tab"><i class="icon-star"></i> Bookmarks</a>
     </li>
     <li>
-      <a href="#user-created-list" data-toggle="tab"><i class="icon-clock"></i> Recent Created</a>
+      <a href="#user-created-list" data-toggle="tab"><i class="icon-clock"></i> Recently Created</a>
+    </li>
+    <li>
+      <a href="#user-draft-list" data-toggle="tab"><i class="icon-clock"></i> My Drafts</a>
     </li>
     {% if user._id.toString() == pageUser._id.toString() %}
     <li>
@@ -29,5 +32,10 @@
       <div class="page-list-container">
       </div>
     </div>
+
+    <div class="tab-pane user-draft-list page-list" id="user-draft-list">
+        <div class="page-list-container">
+        </div>
+    </div>
   </div>
 </div>