Merge pull request #85 from unfoldingWord/zach-sort-order-760

Compare/sort browse dialog

Author: mandolyte

package.json

@@ -67,7 +67,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-istanbul": "6.0.0",
     "coveralls": "3.0.7",
-    "cypress": "6.2.1",
+    "cypress": "^6.8.0",
     "eslint": "6.6.0",
     "eslint-config-prettier": "6.5.0",
     "eslint-plugin-chai-friendly": "0.5.0",

src/components/file/helpers.js

@@ -74,3 +74,77 @@ export const saveFile = async ({
   });
   return response;
 };
+
+const REGEX_TSV_BOOK_ABBREVIATION = /^\w*_(\w*)\.tsv$/i;
+
+export const manifestFileComparer = ({
+  repository, item1, item2,
+}) => {
+  const item1Path = item1?.path;
+  const item2Path = item2?.path;
+  
+  let compare = 0;
+
+  if (item1Path && item2Path && repository && repository.books)
+  {
+    const book1Matches = item1Path.match(REGEX_TSV_BOOK_ABBREVIATION);
+    const book2Matches = item2Path.match(REGEX_TSV_BOOK_ABBREVIATION);
+
+    const isTsvFiles = (book1Matches && book2Matches)?true:false;
+    if (isTsvFiles)
+    {
+      const book1 = book1Matches[1];
+      const book2 = book2Matches[1];
+      
+      let iiBook1 = 0;
+      let iiBook2 = 0;
+      for (let ii=0; ii < repository.books.length; ii++)
+      {
+        if (repository.books[ii].toLowerCase() == book1.toLowerCase())
+        {
+          iiBook1 = ii;
+        }
+        if (repository.books[ii].toLowerCase() == book2.toLowerCase())
+        {
+          iiBook2 = ii;
+        }
+      }
+
+      if (iiBook1 < iiBook2)
+      {
+        compare = -1;
+      }
+      else if (iiBook2 < iiBook1)
+      {
+        compare = 1;
+      }
+      else
+      {
+        compare = 0;
+      }
+    }
+    else // BOTH are NOT TSV file: (could be manifest file).
+    {
+      if (book1Matches)
+      {
+        // Book1 is a TSV, but book2 is a non-TSV file.
+        return 1;
+      }
+      else if (book2Matches)
+      {
+        // Book2 is the TSV file; but book1 is NOT.
+        return -1;
+      }
+      else
+      {
+        compare = item1Path.localeCompare(item2Path);
+      }
+    }
+  }
+  else // item1/item2 don't exist:
+  {
+    compare = 0;
+  }
+
+  return compare;
+};

src/components/tree-blob/Tree.js

@@ -28,6 +28,7 @@ function Tree({
   onBlob,
   depth,
   filepath,
+  comparer,
 }) {
   const classes = useStyles();
   const [_tree, setTree] = useState(tree || []);
@@ -40,7 +41,7 @@ function Tree({
   const [selectedPath, setSelectedPath] = useState(_selectedPath);
 
   const updateTree = async () => {
-    const __tree = await fetchTree({ url, config });
+    const __tree = await fetchTree({ url, config, comparer });
     setTree(__tree);
   };
 

src/components/tree-blob/TreeObject.js

@@ -35,6 +35,7 @@ function TreeObject({
   onBlob,
   depth,
   filepath,
+  comparer,
 }) {
   const classes = useStyles();
   const _filepath = Path.join(filepath || '', path);
@@ -67,6 +68,7 @@ function TreeObject({
         onBlob={onBlob}
         depth={depth + 1}
         filepath={_filepath}
+        comparer={comparer}
       />
     </>
   );

src/components/tree-blob/TreeObject.md

@@ -37,6 +37,58 @@ import { TreeObject } from 'gitea-react-toolkit';
 </Paper>
 ```
 
+### URL + Sorting Example
+
+```js
+import { Paper } from '@material-ui/core';
+import { TreeObject } from 'gitea-react-toolkit';
+import {manifestFileComparer} from '../file/helpers';
+
+import repository from './mocks/repositoryData-twl.json';
+
+const tsvManifestFileComparer = ((item1,item2) => {
+  // Repository instance can be passed from application.
+  return manifestFileComparer({repository, item1, item2});
+});
+
+<Paper>
+  <TreeObject
+    path=""
+    type="tree"
+    selected
+    pathSelected="LICENSE.md"
+    url="https://qa.door43.org/api/v1/repos/unfoldingWord/en_twl/git/trees/master?recursive=true"
+    onBlob={(data) => alert(JSON.stringify(data, null, 2))}
+    comparer={tsvManifestFileComparer}
+  />
+</Paper>
+```
+
+### URL + Custom Sorting Example
+
+```js
+import { Paper } from '@material-ui/core';
+import { TreeObject } from 'gitea-react-toolkit';
+
+<Paper>
+  <TreeObject
+    path=""
+    type="tree"
+    selected
+    pathSelected="LICENSE.md"
+    url="https://qa.door43.org/api/v1/repos/unfoldingWord/en_twl/git/trees/master?recursive=true"
+    onBlob={(data) => alert(JSON.stringify(data, null, 2))}
+    comparer={(item1,item2)=>{
+      if (item1.path < item2.path)
+        return -1;
+      if ( item1.path > item2.path)
+        return 1;
+      return 0; 
+    }}
+  />
+</Paper>
+```
+
 ### Sample Data
 
 ```json

src/components/tree-blob/helpers.js

@@ -1,14 +1,20 @@
 import { get } from '../../core';
 
-export const fetchTree = async ({ url, config }) => {
+export const fetchTree = async ({ url, config, comparer }) => {
   const _config = {
     cache: {
       maxAge: 1 * 2 * 1000, // 2 sec cache override
     },
     ...config,
   };
   const response = await get({ url, config: _config });
-  const { tree } = response;
+  let { tree } = response;
+
+  if (comparer)
+  {
+    tree = tree.sort(comparer);
+  }
+
   return tree;
 };