repair router bug

frontend/src/app.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Link } from '@reach/router';
+import { Router } from '@reach/router';
-import { gettext, siteRoot } from './utils/constants';
+import { siteRoot } from './utils/constants';
 import SidePanel from './components/side-panel';
 import MainPanel from './components/main-panel';
 import DraftsView from './pages/drafts/drafts-view';
@@ -53,8 +53,9 @@ class App extends Component {
       draftList:[],
       isLoadingDraft: true,
       currentTab: '/',
-      pathPrefix: null,
+      pathPrefix: [],
     };
+    this.dirViewPanels = ['my-libs', 'shared-libs', 'org']; // and group
   }
 
   componentDidMount() {
@@ -100,41 +101,55 @@ class App extends Component {
   }
 
   tabItemClick = (tabName, groupID) => {
-    let pathPrefix = this.generatorPrefix(tabName, groupID);
+    let pathPrefix = [];
+    if (groupID || this.dirViewPanels.indexOf(tabName) > -1) {
+      pathPrefix = this.generatorPrefix(tabName, groupID);
+    }
     this.setState({
       currentTab: tabName,
       pathPrefix: pathPrefix
     });
   } 
 
-  generatorPrefix = (currentTab, groupID) => {
+  generatorPrefix = (tabName, groupID) => {
-    if (groupID) { //group
+    let pathPrefix = [];
-      return (
+    if (groupID) {
-        <Fragment>
+      let navTab1 = {
-          <Link to={siteRoot + 'groups/'} className="normal">{gettext('Groups')}</Link>
+        url: siteRoot + 'groups/',
-          <span className="path-split">/</span>
+        showName: 'Groups',
-          <Link to={siteRoot + 'group/' + groupID + '/'} className="normal">{currentTab}</Link>
+        name: 'groups',
-          <span className="path-split">/</span>
+        id: null,
-        </Fragment>
+      }
-      );
+      let navTab2 = {
+        url: siteRoot + 'group/' + groupID + '/',
+        showName: tabName,
+        name: tabName,
+        id: groupID,
+      };
+      pathPrefix.push(navTab1);
+      pathPrefix.push(navTab2);
+    } else {
+      let navTab = {
+        url: siteRoot + tabName + '/',
+        showName: this.getTabShowName(tabName, groupID),
+        name: tabName,
+        id: null,
+      };
+      pathPrefix.push(navTab);
     }
-    if (currentTab === 'my-libs') {
+    return pathPrefix;
-      return (
+  }
-        <Fragment>
+
-          <Link to={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</Link>
+  getTabShowName = (tabName) => {
-          <span className="path-split">/</span>
+    if (tabName === 'my-libs') {
-        </Fragment>
+      return 'Libraries';
-      );
     }
-    if (currentTab === 'shared-libs') {
+    if (tabName === 'shared-libs') {
-      return (
+      return 'Shared with me';
-        <Fragment>
+    }
-          <Link to={siteRoot + 'shared-libs/'} className="normal">{gettext('Shared with me')}</Link>
+    if (tabName === 'org') {
-          <span className="path-split">/</span>
+      return 'Shared with all';
-        </Fragment>
-      );
     }
-    return null;
   }
 
   render() {
@@ -170,9 +185,9 @@ class App extends Component {
             <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
-            <DirView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel}/>
+            <DirView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
             <Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-            <Group path={siteRoot + 'group/:groupID'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
+            <Group path={siteRoot + 'group/:groupID'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
             <WikisWrapper path={siteRoot + 'wikis'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
           </Router>
         </MainPanel>

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

@@ -5,9 +5,10 @@ import { siteRoot, gettext } from '../../utils/constants';
 
 const propTypes = {
   repoName: PropTypes.string.isRequired,
-  pathPrefix: PropTypes.object,
   currentPath: PropTypes.string.isRequired,
   onPathClick: PropTypes.func.isRequired,
+  onTabNavClick: PropTypes.func,
+  pathPrefix: PropTypes.array,
 };
 
 class DirPath extends React.Component {
@@ -17,6 +18,10 @@ class DirPath extends React.Component {
     this.props.onPathClick(path);
   }
 
+  onTabNavClick = (tabName, id) => {
+    this.props.onTabNavClick(tabName, id);
+  }
+
   turnPathToLink = (path) => {
     path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
     let pathList = path.split('/');
@@ -47,13 +52,27 @@ class DirPath extends React.Component {
     let pathElem = this.turnPathToLink(currentPath);
     return (
       <div className="path-containter">
-        {this.props.pathPrefix ? 
+        {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
-          this.props.pathPrefix :
+          return (
-            <Fragment>
+            <Fragment key={index}>
-              <Link to={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</Link>
+              <Link to={item.url} className="normal" onClick={() => this.onTabNavClick(item.name, item.id)}>{gettext(item.showName)}</Link>
               <span className="path-split">/</span>
-            </Fragment>       
+            </Fragment>
+          );
+        })}
+        {this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
+          <Fragment>
+            <Link to={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick.bind(this, 'my-libs')}>{gettext('Libraries')}</Link>
+            <span className="path-split">/</span>
+          </Fragment>
+        )
         }
+        {!this.props.pathPrefix && (
+          <Fragment>
+            <a href={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick.bind(this, 'my-libs')}>{gettext('Libraries')}</a>
+            <span className="path-split">/</span>
+          </Fragment>
+        )}
         {currentPath === '/' ?
           <span>{repoName}</span>:
           <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>

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

@@ -5,11 +5,12 @@ import DirTool from './dir-tool';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
-  pathPrefix: PropTypes.object.isRequired,
   repoName: PropTypes.string.isRequired,
   permission: PropTypes.bool.isRequired,
   currentPath: PropTypes.string.isRequired,
   onPathClick: PropTypes.func.isRequired,
+  onTabNavClick: PropTypes.func,
+  pathPrefix: PropTypes.array,
 };
 
 class CurDirPath extends React.Component {
@@ -22,6 +23,7 @@ class CurDirPath extends React.Component {
           pathPrefix={this.props.pathPrefix}
           currentPath={this.props.currentPath}
           onPathClick={this.props.onPathClick}
+          onTabNavClick={this.props.onTabNavClick}
         />
         <DirTool 
           repoID={this.props.repoID}

frontend/src/components/dir-view/dir-panel.js

@@ -14,7 +14,7 @@ import FileUploader from '../file-uploader/file-uploader';
 
 const propTypes = {
   currentRepo: PropTypes.object,
-  pathPrefix: PropTypes.object.isRequired,
+  pathPrefix: PropTypes.array.isRequired,
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   repoName: PropTypes.string.isRequired,
@@ -40,6 +40,7 @@ const propTypes = {
   onFileTagChanged: PropTypes.func.isRequired,
   onMenuClick: PropTypes.func.isRequired,
   onPathClick: PropTypes.func.isRequired,
+  onTabNavClick: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
   onFileUploadSuccess: PropTypes.func.isRequired,
@@ -152,6 +153,7 @@ class DirPanel extends React.Component {
                 currentPath={this.props.path} 
                 permission={this.props.permission}
                 onPathClick={this.props.onPathClick}
+                onTabNavClick={this.props.onTabNavClick}
               />
             </div>
             <div className="cur-view-content">

frontend/src/components/dir-view/dir-view.js

@@ -11,7 +11,8 @@ import FileTag from '../../models/file-tag';
 import Repo from '../../models/repo';
 
 const propTypes = {
-  pathPrefix: PropTypes.object.isRequired,
+  pathPrefix: PropTypes.array.isRequired,
+  onTabNavClick: PropTypes.func.isRequired,
   onMenuClick: PropTypes.func.isRequired,
 };
 
@@ -456,6 +457,7 @@ class DirView extends React.Component {
         onFileTagChanged={this.onFileTagChanged}
         onMenuClick={this.onMenuClick}
         onPathClick={this.onPathClick}
+        onTabNavClick={this.props.onTabNavClick}
         updateDirent={this.updateDirent}
         switchViewMode={this.switchViewMode}
         onSearchedClick={this.onSearchedClick}

frontend/src/pages/groups/group-view.js

@@ -180,6 +180,10 @@ class GroupView extends React.Component {
     });
   }
 
+  onTabNavClick = (tabName) => {
+    this.props.onTabNavClick(tabName);
+  }
+
   render() {
     let { errMessage, emptyTip, currentGroup } = this.state;
     let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
@@ -203,7 +207,7 @@ class GroupView extends React.Component {
               {currentGroup && (
                 <Fragment>
                   <div className="path-container">
-                    <Link to={`${siteRoot}groups/`}>{gettext("Groups")}</Link>
+                    <Link to={`${siteRoot}groups/`} onClick={() => this.onTabNavClick('groups')}>{gettext("Groups")}</Link>
                     <span className="path-split">/</span>
                     <span>{currentGroup.name}</span>
                     {currentGroup.parent_group_id !== 0 && (