Code optimized (#2388)

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

@@ -1,23 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { gettext } from '../../components/constants';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
+import editUtilties from '../../utils/editor-utilties';
 import Loading from '../../components/loading';
 import ListView from '../../components/list-view/list-view';
 import ListMenu from '../../components/list-view/list-menu';
 
-const propTypes = {
-  isLoadingDraft: PropTypes.bool.isRequired,
-  draftList: PropTypes.array.isRequired,
-  publishDraft: PropTypes.func.isRequired,
-  deleteDraft: PropTypes.func.isRequired
-};
-
-class MainPanel extends React.Component {
+class DraftsView extends React.Component {
   
   constructor(props) {
     super(props);
     this.state = {
+      draftList: [],
+      isLoadingDraft: true,
       isMenuShow: false,
       menuPosition: {top:'', left: ''},
       currentDraft: null,
@@ -26,6 +20,7 @@ class MainPanel extends React.Component {
   }
 
   componentDidMount() {
+    this.initDraftList();
     document.addEventListener('click', this.onHideContextMenu);
   }
 
@@ -33,6 +28,30 @@ class MainPanel extends React.Component {
     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();
+    });
+  }
+
+  onPublishHandler = () => {
+    let draft = this.state.currentDraft;
+    editUtilties.publishDraft(draft.id).then(res => {
+      this.initDraftList();
+    });
+  }
+
   onMenuToggleClick = (e, draft) => {
     if (this.state.isMenuShow) {
       this.onHideContextMenu();
@@ -60,44 +79,26 @@ class MainPanel extends React.Component {
       isItemFreezed: false
     });
   }
-
-  onPublishHandler = () => {
-    this.props.publishDraft(this.state.currentDraft);
-  }
-
-  onDeleteHandler = () => {
-    this.props.deleteDraft(this.state.currentDraft);
-  }
-
-  onSearchedClick = () => {
-    //todos;
-  }
   
   render() {
     return (
-      <div className="main-panel">
-        <div className="main-panel-north flex-right">
-          <CommonToolbar onSearchedClick={this.onSearchedClick}/>
-        </div>
-        <div className="main-panel-center">
-          <div className="panel-heading text-left">{gettext('Drafts')}</div>
-          {this.props.isLoadingDraft ?
-            <Loading /> :
-            <div className="table-container">
-              {this.props.draftList.length ? 
-                <ListView
-                  draftList={this.props.draftList} 
-                  isItemFreezed={this.state.isItemFreezed}
-                  onMenuToggleClick={this.onMenuToggleClick}
-                /> :
-                <div className="message empty-tip">
-                  <h2>{gettext('There is no draft file existing')}</h2>
-                </div>
-              }
+      <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) &&
+            <ListView
+              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('There is no draft file existing')}</h2>
             </div>
           }
-          {
-            this.state.isMenuShow && 
+          {this.state.isMenuShow && 
             <ListMenu 
               isMenuShow={this.state.isMenuShow} 
               currentDraft={this.state.currentDraft} 
@@ -112,6 +113,4 @@ class MainPanel extends React.Component {
   }
 }
 
-MainPanel.propTypes = propTypes;
-
-export default MainPanel;
+export default DraftsView;