[shared dir view] fixup for 'current path' (#4141)

frontend/src/shared-dir-view.js

@@ -16,7 +16,7 @@ import './css/shared-dir-view.css';
 import './css/grid-view.css';
 
 let loginUser = window.app.pageOptions.name;
-const { token, trafficOverLimit, dirName, sharedBy, path, canDownload, mode, thumbnailSize } = window.shared.pageOptions;
+const { token, trafficOverLimit, dirName, sharedBy, path, canDownload, mode, thumbnailSize, zipped } = window.shared.pageOptions;
 
 const showDownloadIcon = !trafficOverLimit && canDownload;
 
@@ -93,28 +93,20 @@ class SharedDirView extends React.Component {
   }
 
   renderPath = () => {
-    // path: '/', or '/g/'
-    if (path == '/') {
-      return dirName;
-    }
-
-    let pathList = path.substr(0, path.length -1).split('/');
     return (
       <React.Fragment>
-        <a href={`?p=${encodeURIComponent('/')}&mode=${mode}`}>{dirName}</a>
+        {zipped.map((item, index) => {
-        <span> / </span>
+          if (index != zipped.length - 1) {
-        {pathList.map((item, index) => {
-          if (index > 0 && index != pathList.length - 1) {
             return (
               <React.Fragment key={index}>
-                <a href={`?p=${encodeURIComponent(pathList.slice(0, index+1).join('/'))}&mode=${mode}`}>{pathList[index]}</a>
+                <a href={`?p=${encodeURIComponent(item.path)}&mode=${mode}`}>{item.name}</a>
                 <span> / </span>
               </React.Fragment>
             );
           }
+        })
         }
-        )}
+        {zipped[zipped.length - 1].name}
-        {pathList[pathList.length - 1]}
       </React.Fragment>
     );
   }

seahub/templates/view_shared_dir_react.html

@@ -22,6 +22,16 @@
             dirName: '{{ dir_name|escapejs }}',
             sharedBy: '{{ username|email2nickname|escapejs }}',
             path: '{{ path|escapejs }}',
+            zipped: (function() {
+              var list = [];
+              {% for name, path in zipped %}
+              list.push({
+                'name': '{{ name|escapejs }}',
+                'path': '{{ path|escapejs }}'
+              });
+              {% endfor %}
+              return list;
+            })(),
             token: '{{ token }}',
             mode: '{{ mode }}',
             thumbnailSize: {{ thumbnail_size }},