adjust code

frontend/src/components/cur-dir-path/dir-path.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
 import { siteRoot, gettext } from '../../utils/constants';
 
 const propTypes = {
@@ -49,7 +50,7 @@ class DirPath extends React.Component {
         {this.props.pathPrefix ? 
           this.props.pathPrefix :
             <Fragment>
-              <a href={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</a>
+              <Link to={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</Link>
               <span className="path-split">/</span>
             </Fragment>       
         }

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

@@ -24,7 +24,7 @@ class DeleteRepoDialog extends Component {
     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}>
+      <Modal isOpen={true} toggle={this.toggle} centered={true}>
         <ModalHeader toggle={this.toggle}>{gettext("Delete Library")}</ModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{__html: message}}></p>

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

@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, storages} from '../../utils/constants';
-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';
+import ModalPortal from '../../components/modal-portal';
+import LibHistorySetting from '../../components/dialog/lib-history-setting-dialog';
+import TransferDialog from '../../components/dialog/transfer-dialog';
+import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 
 const propTypes = {
   loading: PropTypes.bool.isRequired,
@@ -83,13 +83,13 @@ class Content extends Component {
       const desktopThead = (
         <thead>
           <tr>
-            <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="42%">{gettext("Name")}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
+            <th width="42%">{gettext('Name')}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
-            <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
+            <th width="14%"><span className="sr-only">{gettext('Actions')}</span></th>
 
-            <th width={showStorageBackend ? '15%' : '20%'}>{gettext("Size")}</th>
+            <th width={showStorageBackend ? '15%' : '20%'}>{gettext('Size')}</th>
             {showStorageBackend ? <th width="10%">{gettext('Storage backend')}</th> : null}
-            <th width={showStorageBackend ? '15%' : '20%'}>{gettext("Last Update")}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>
+            <th width={showStorageBackend ? '15%' : '20%'}>{gettext('Last Update')}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>
           </tr>
         </thead>
       );
@@ -97,13 +97,13 @@ class Content extends Component {
       const mobileThead = (
         <thead>
           <tr>
-            <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="18%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="76%">
               {gettext("Sort:")} {/* TODO: sort */}
               {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
               {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
             </th>
-            <th width="6%"><span className="sr-only">{gettext("Actions")}</span></th>
+            <th width="6%"><span className="sr-only">{gettext('Actions')}</span></th>
           </tr>
         </thead>
       );
@@ -126,11 +126,14 @@ class Content extends Component {
       const nonEmpty = (
         <Fragment>
           {table}
-          <DeleteRepoDialog 
+          {this.state.deleteItemPopupOpen && (
-            isOpen={this.state.deleteItemPopupOpen} 
+            <ModalPortal>
-            toggle={this.toggleDeleteItemPopup} 
+              <DeleteRepoDialog 
-            data={this.state.deleteItemPopupData} 
+                toggle={this.toggleDeleteItemPopup} 
-          />
+                data={this.state.deleteItemPopupData} 
+              />
+            </ModalPortal>
+          )}
           {this.state.showTransfer &&
             <ModalPortal>
               <TransferDialog 

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

@@ -168,7 +168,7 @@ class Item extends Component {
       'is_admin': data.is_admin,
       'permission': permission
     });
-    data.url = `${siteRoot}#my-libs/lib/${data.repo_id}/`;
+    data.url = `${siteRoot}library/${data.repo_id}/`;
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let shareIconClassName = 'sf2-icon-share sf2-x op-icon' + iconVisibility; 
@@ -205,8 +205,8 @@ class Item extends Component {
 
     const desktopOperations = (
       <div>
-        <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
+        <a href="#" className={shareIconClassName} title={gettext('Share')} onClick={this.share}></a>
-        <a href="#" className={deleteIconClassName} title={gettext("Delete")} onClick={this.showDeleteItemPopup}></a>
+        <a href="#" className={deleteIconClassName} title={gettext('Delete')} onClick={this.showDeleteItemPopup}></a>
         <Dropdown isOpen={this.state.operationMenuOpen} toggle={this.toggleOperationMenu}>
           {commonToggle}
           <DropdownMenu>
@@ -220,7 +220,7 @@ class Item extends Component {
     const mobileOperations = (
       <Dropdown isOpen={this.state.operationMenuOpen} toggle={this.toggleOperationMenu}>
         {commonToggle}
-        <div className={`${this.state.operationMenuOpen?'':'d-none'}`} onClick={this.toggleOperationMenu}>
+        <div className={`${this.state.operationMenuOpen ? '' : 'd-none'}`} onClick={this.toggleOperationMenu}>
           <div className="mobile-operation-menu-bg-layer"></div>
           <div className="mobile-operation-menu">
             <DropdownItem onClick={this.share}>{gettext('Share')}</DropdownItem>

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

@@ -18,7 +18,7 @@ class MyLibraries extends Component {
   }
 
   componentDidMount() {
-    seafileAPI.listRepos({type:'mine'}).then((res) => {
+    seafileAPI.listRepos({type: 'mine'}).then((res) => {
       // res: {data: {...}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
       this.setState({
         loading: false,
@@ -29,19 +29,19 @@ class MyLibraries extends Component {
         if (error.response.status == 403) {
           this.setState({
             loading: false,
-            errorMsg: gettext("Permission denied")
+            errorMsg: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             loading: false,
-            errorMsg: gettext("Error")
+            errorMsg: gettext('Error')
           });
         }
       } else {
         this.setState({
           loading: false,
-          errorMsg: gettext("Please check the network.")
+          errorMsg: gettext('Please check the network.')
         });
       }
     });
@@ -102,7 +102,7 @@ class MyLibraries extends Component {
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext("My Libraries")}</h3>
+              <h3 className="sf-heading">{gettext('My Libraries')}</h3>
             </div>
             <div className="cur-view-content">
               <Content