adjust code structure

frontend/src/components/dialog/delete-repo-dialog.js

@@ -1,21 +1,14 @@
 import React, { Component } from 'react';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
+import { gettext } from '../../utils/constants';
 
-class DeleteItemPopup extends Component {
+class DeleteRepoDialog extends Component {
 
-  constructor(props) {
-    super(props);
-
-    this.toggle = this.toggle.bind(this);
-    this.clickYes = this.clickYes.bind(this);
-  }
-
-  toggle() {
+  toggle = () => {
     this.props.toggle();
   }
 
-  clickYes() {
+  clickYes = () => {
     this.toggle();
     
     const data = this.props.data;
@@ -27,18 +20,18 @@ class DeleteItemPopup extends Component {
   render() {
 
     const data = this.props.data;
-    // TODO:
-    //const repoName = <span class="op-target ellipsis ellipsis-op-target">{data ? data.repoName : null}</span>;
-    const repoName = data ? data.repoName : null;
+    const repoName = data ? '<span class="sf-font">' + data.repoName + '</span>' : null;
+    let message = gettext("Are you sure you want to delete %s ?");
+    message = message.replace('%s', repoName);
     const popup = (
       <Modal isOpen={this.props.isOpen} toggle={this.toggle} centered={true}>
         <ModalHeader toggle={this.toggle}>{gettext("Delete Library")}</ModalHeader>
         <ModalBody>
-          <p>{gettext("Are you sure you want to delete %s ?").replace('%s', repoName)}</p>
+          <p dangerouslySetInnerHTML={{__html: message}}></p>
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.clickYes}>{gettext("Yes")}</Button>
-          <Button color="secondary" onClick={this.toggle}>{gettext("No")}</Button>
+          <Button color="primary" onClick={this.clickYes}>{gettext("Confirm")}</Button>
+          <Button color="secondary" onClick={this.toggle}>{gettext("Cancel")}</Button>
         </ModalFooter>
       </Modal>
     );
@@ -47,4 +40,4 @@ class DeleteItemPopup extends Component {
   }
 }
 
-export default DeleteItemPopup;
+export default DeleteRepoDialog;

frontend/src/pages/my-libs/content.js

@@ -1,11 +1,11 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, storages} from '../../utils/constants';
-import TransferDialog from '../dialog/transfer-dialog';
-import LibHistorySetting from '../dialog/lib-history-setting-dialog';
-import Loading from '../loading';
-import ModalPortal from '../modal-portal';
-import DeleteItemPopup from './popups/delete-item';
+import TransferDialog from '../../components/dialog/transfer-dialog';
+import LibHistorySetting from '../../components/dialog/lib-history-setting-dialog';
+import Loading from '../../components/loading';
+import ModalPortal from '../../components/modal-portal';
+import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 import TableBody from './table-body';
 
 const propTypes = {
@@ -126,7 +126,7 @@ class Content extends Component {
       const nonEmpty = (
         <Fragment>
           {table}
-          <DeleteItemPopup 
+          <DeleteRepoDialog 
             isOpen={this.state.deleteItemPopupOpen} 
             toggle={this.toggleDeleteItemPopup} 
             data={this.state.deleteItemPopupData} 

frontend/src/pages/my-libs/my-libs-deleted.js

@@ -1,10 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
+import moment from 'moment';
 import { gettext, siteRoot, lang } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../../components/toast';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
-import moment from 'moment';
+import Loading from '../../components/loading';
+
 moment.locale(lang);
 
 class MyLibsDeleted extends Component {
@@ -13,22 +15,24 @@ class MyLibsDeleted extends Component {
     super(props);
     this.state = {
       deletedRepoList: [],
-      isLoading: false,
+      isLoading: true,
     };
   }
 
   componentDidMount() {
     seafileAPI.listDeletedRepo().then(res => {
       this.setState({
-        deletedRepoList: res.data 
+        deletedRepoList: res.data,
+        isLoading: false,
       });
     });  
   }
 
   refreshDeletedRepoList = (repoID) => {
-    this.setState({
-      deletedRepoList: this.state.deletedRepoList.filter(item => item.repo_id !== repoID) 
+    let deletedRepoList = this.state.deletedRepoList.filter(item => {
+      return item.repo_id !== repoID;
     });
+    this.setState({deletedRepoList: deletedRepoList});
   }
 
   render() {
@@ -47,15 +51,17 @@ class MyLibsDeleted extends Component {
               </div>
             </div>
             <div className="cur-view-content">
+              {this.state.isLoading && <Loading />}
               {(!this.state.isLoading && this.state.deletedRepoList.length === 0) &&
                <div className="message empty-tip">
                  <h2>{gettext('No deleted libraries.')}</h2>
                </div>
               }
-             { this.state.deletedRepoList.length !== 0 && 
+              {this.state.deletedRepoList.length !== 0 && 
                 <div>
                   <p className="tip">{gettext('Tip: libraries deleted 30 days ago will be cleaned automatically.')}</p>
-                <DeletedRepoTable deletedRepoList={this.state.deletedRepoList}
+                  <DeletedRepoTable 
+                    deletedRepoList={this.state.deletedRepoList}
                     refreshDeletedRepoList={this.refreshDeletedRepoList}
                   />
                 </div>

frontend/src/pages/my-libs/my-libs.js

@@ -3,8 +3,8 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl} from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
-import Content from '../../components/mylib-repo-list-view/content';
 import LibDetail from '../../components/dirent-detail/lib-details';
+import Content from './content';
 
 class MyLibraries extends Component {
   constructor(props) {