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/components/toolbar/repo-view-toobar.js

@@ -51,9 +51,9 @@ class RepoViewToolbar extends React.Component {
                   {gettext('More')}
                 </DropdownToggle>
                 <DropdownMenu>
-                <DropdownItem>
-                <Link to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
-                </DropdownItem>
+                  <DropdownItem>
+                    <Link to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
+                  </DropdownItem>
                 </DropdownMenu>
               </Dropdown>
             )}

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,57 +15,61 @@ 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() {
-   return (
-     <Fragment>
-       <div className="main-panel-north">
-         <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
-       </div>
-       <div className="main-panel-center">
-         <div className="cur-view-container">
-           <div className="cur-view-path">
-             <div className="path-container">
-               <Link to={ siteRoot + 'my-libs/' }>{gettext("My Libraries")}</Link>
-               <span className="path-split">/</span>
-               <span>{gettext('Deleted Libraries')}</span>
-             </div>
-           </div>
-           <div className="cur-view-content">
-             {(!this.state.isLoading && this.state.deletedRepoList.length === 0) &&
+    return (
+      <Fragment>
+        <div className="main-panel-north">
+          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
+        </div>
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <div className="path-container">
+                <Link to={ siteRoot + 'my-libs/' }>{gettext("My Libraries")}</Link>
+                <span className="path-split">/</span>
+                <span>{gettext('Deleted Libraries')}</span>
+              </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 && 
-              <div>
-                <p className="tip">{gettext('Tip: libraries deleted 30 days ago will be cleaned automatically.')}</p>
-                <DeletedRepoTable deletedRepoList={this.state.deletedRepoList}
-                                  refreshDeletedRepoList={this.refreshDeletedRepoList}
-                                  />
-              </div>
-             }
-           </div>
-         </div>
-       </div>
-     </Fragment>
+              }
+              {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}
+                    refreshDeletedRepoList={this.refreshDeletedRepoList}
+                  />
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </Fragment>
     );
   }
 }

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) {