Draft review (#2416)

frontend/src/pages/drafts/drafts-view.js

@@ -1,124 +1,43 @@
 import React from 'react';
-import { gettext } from '../../utils/constants';
-import editUtilties from '../../utils/editor-utilties';
-import Toast from '../../components/toast/';
-import Loading from '../../components/loading';
-import DraftListView from '../../components/draft-list-view/draft-list-view';
-import DraftListMenu from '../../components/draft-list-view/draft-list-menu';
+import { siteRoot, gettext } from '../../utils/constants';
+import { Link } from '@reach/router';
 
 class DraftsView extends React.Component {
   
   constructor(props) {
     super(props);
     this.state = {
-      draftList: [],
-      isLoadingDraft: true,
-      isMenuShow: false,
-      menuPosition: {top:'', left: ''},
-      currentDraft: null,
-      isItemFreezed: false, 
+      currentTab: this.props.currentTab
     };
   }
 
-  componentDidMount() {
-    this.initDraftList();
-    document.addEventListener('click', this.onHideContextMenu);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onHideContextMenu);
-  }
-
-  initDraftList() {
-    this.setState({isLoadingDraft: true});
-    editUtilties.listDrafts().then(res => {
-      this.setState({
-        draftList: res.data.data,
-        isLoadingDraft: false,
-      });
-    });
-  }
-
-  onDeleteHandler = () => {
-    let draft = this.state.currentDraft;
-    editUtilties.deleteDraft(draft.id).then(res => {
-      this.initDraftList();
-      Toast.success(gettext('Delete draft succeeded.'));
-    }).catch(() => {
-      Toast.error(gettext('Delete draft failed.'));
-    });
-  }
-
-  onPublishHandler = () => {
-    let draft = this.state.currentDraft;
-    editUtilties.publishDraft(draft.id).then(res => {
-      this.initDraftList();
-      Toast.success(gettext('Publish draft succeeded.'));
-    }).catch(() => {
-      Toast.error(gettext('Publish draft failed.'));
-    });
-  }
-
-  onMenuToggleClick = (e, draft) => {
-    if (this.state.isMenuShow) {
-      this.onHideContextMenu();
-    } else {
-      this.onShowContextMenu(e, draft);
-    }
-  }
-
-  onShowContextMenu = (e, draft) => {
-    let left = e.clientX - 8*16;
-    let top  = e.clientY + 10;
-    let position = {top: top, left: left};
+  tabItemClick = (param) => {
     this.setState({
-      isMenuShow: true,
-      menuPosition: position,
-      currentDraft: draft,
-      isItemFreezed: true
-    });
-  }
-
-  onHideContextMenu = () => {
-    this.setState({
-      isMenuShow: false,
-      currentDraft: null,
-      isItemFreezed: false
-    });
+      currentTab: param  
+    })
   }
   
   render() {
     return (
       <div className="cur-view-container">
-        <div className="cur-view-path panel-heading text-left">{gettext('Drafts')}</div>
-        <div className="cur-view-content" style={{padding: 0}}>
-          {this.state.isLoadingDraft && <Loading /> }
-          {(!this.state.isLoadingDraft && this.state.draftList.length !==0) &&
-            <DraftListView
-              draftList={this.state.draftList} 
-              isItemFreezed={this.state.isItemFreezed}
-              onMenuToggleClick={this.onMenuToggleClick}
-            />
-          }
-          {(!this.state.isLoadingDraft && this.state.draftList.length === 0) &&
-            <div className="message empty-tip">
-              <h2>{gettext('No draft yet')}</h2>
-              <p>{gettext('Draft is a way to let you collaborate with others on files. You can create a draft from a file, edit the draft and then ask for a review. The original file will be updated only after the draft be reviewed.')}</p>
-            </div>
-          }
-          {this.state.isMenuShow && 
-            <DraftListMenu 
-              isMenuShow={this.state.isMenuShow} 
-              currentDraft={this.state.currentDraft} 
-              menuPosition={this.state.menuPosition} 
-              onPublishHandler={this.onPublishHandler}
-              onDeleteHandler={this.onDeleteHandler}
-            />
-          }
+        <div className="cur-view-path">
+          <ul className="tab-tabs-nav">
+            <li className={`tab ${this.state.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
+              <Link  className='a' to={siteRoot + 'drafts'} title={gettext('Drafts')}>
+                {gettext('Drafts')}
+              </Link>
+            </li>
+            <li className={`tab ${this.state.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
+              <Link  className='a' to={siteRoot + 'drafts/reviews'} title={gettext('reviews')}>
+                {gettext('Reviews')}
+              </Link>
+            </li>
+          </ul>
         </div>
+        {this.props.children}
       </div>
     );
   }
 }
 
-export default DraftsView;
+export default DraftsView;