feat(Walk): Add Up Folder navigation

ui/app/components/List/tests/index.test.jsx

@@ -15,7 +15,7 @@ describe('<List />', () => {
   test('should pass all items props to rendered component', () => {
     const items = [{ id: 1, name: 'Hello' }, { id: 2, name: 'World' }];
 
-    const component = ({ item, key }) => <li title={key}>{item.name}</li>;
+    const component = ({ item }) => <li>{item.name}</li>;
 
     const { container, getByText } = render(
       <List items={items} component={component} />,

ui/app/containers/Walk/ListFolders.jsx → ui/app/containers/Walk/ListFile.jsx

@@ -7,7 +7,7 @@ import walkUtils from './util';
 
 const { isImage } = walkUtils;
 
-function Contents({ item: file }) {
+function ListFile({ item: file }) {
   if (isImage(file)) {
     return null;
   }
@@ -27,4 +27,4 @@ function Contents({ item: file }) {
   );
 }
 
-export default Contents;
+export default ListFile;

ui/app/containers/Walk/index.jsx

@@ -13,16 +13,15 @@ import { useInjectReducer } from '../../utils/injectReducer';
 import walkUtils from './util';
 
 import GenericList from '../../components/GenericList';
-import ListFolders from './ListFolders';
+import ListFile from './ListFile';
 import Menu from './Menu';
 import OrganizePreviews from '../../components/OrganizePreviews';
 
-const { isImage } = walkUtils;
-
-function parseQueryString(find, from) {
-  if (!find || !from) return '';
-  return RegExp(`[?&]${find}(=([^&#]*)|&|#|$)`).exec(from)[2];
-}
+const {
+  addUpFolderPath,
+  isImage,
+  parseQueryString,
+} = walkUtils;
 
 function Walk({
   doListDirectory,
@@ -46,6 +45,8 @@ function Walk({
     content: file.filename,
     ...file,
   }));
+  addUpFolderPath(itemFiles, path);
+
   const itemImages = itemFiles.filter((file) => isImage(file));
   const hasImages = !loading && itemImages.length > 0;
 
@@ -62,7 +63,7 @@ function Walk({
     />,
     <GenericList
       key="walk-GenericList"
-      component={ListFolders}
+      component={ListFile}
       items={itemFiles}
       loading={loading}
       error={false}

ui/app/containers/Walk/tests/ListFile.test.jsx

@@ -0,0 +1,18 @@
+/* global describe, expect, test */
+import React from 'react';
+import { render } from 'react-testing-library';
+
+import ListFile from '../ListFile';
+
+describe('<ListFile />', () => {
+  test('should render a folder', () => {
+    const path = 'testPath';
+    const { container } = render(<ListFile item={{ mediumType: 'folder', path }} />);
+    expect(container.querySelector('a').href).toEqual(`http://localhost/?path=${path}`);
+  });
+
+  test('should avoid an image', () => {
+    const { container } = render(<ListFile item={{ mediumType: 'image', ext: 'JPEG' }} />);
+    expect(container.querySelector('li')).toEqual(null);
+  });
+});

ui/app/containers/Walk/tests/util.test.js

@@ -0,0 +1,56 @@
+/* global beforeEach, describe, expect, test */
+import util from '../util';
+
+const {
+  addUpFolderPath,
+  isImage,
+} = util;
+
+describe('Walk - util', () => {
+  describe('isImage', () => {
+    test('detect JPG', () => {
+      expect(isImage({ mediumType: 'image', ext: 'JPEG' })).toEqual(true);
+      expect(isImage({ mediumType: 'image', ext: 'jpeg' })).toEqual(true);
+      expect(isImage({ mediumType: 'image', ext: 'JPG' })).toEqual(true);
+      expect(isImage({ mediumType: 'image', ext: 'jpg' })).toEqual(true);
+    });
+
+    test('ignore RAW', () => {
+      expect(isImage({ mediumType: 'image', ext: 'RAW' })).toEqual(false);
+      expect(isImage({ mediumType: 'image', ext: 'ARW' })).toEqual(false);
+    });
+  });
+
+  describe('addUpFolderPath', () => {
+    const file = {
+      filename: '..',
+      mediumType: 'folder',
+    };
+    let dummyFile;
+
+    beforeEach(() => {
+      dummyFile = { id: 'testid.js', ext: 'js' };
+    });
+
+    test('hide when at root folder', () => {
+      expect(addUpFolderPath([dummyFile], null)).toEqual([dummyFile]);
+      expect(addUpFolderPath([dummyFile])).toEqual([dummyFile]);
+      expect(addUpFolderPath([dummyFile], '')).toEqual([dummyFile]);
+    });
+
+    test('one level deep', () => {
+      const expectedFile = { ...file, path: '' };
+      expect(addUpFolderPath([dummyFile], 'galleries')).toEqual([expectedFile, dummyFile]);
+    });
+
+    test('two levels deep', () => {
+      const expectedFile = { ...file, path: 'galleries' };
+      expect(addUpFolderPath([dummyFile], 'galleries/gallery-demo')).toEqual([expectedFile, dummyFile]);
+    });
+
+    test('three levels deep', () => {
+      const expectedFile = { ...file, path: 'galleries/gallery-demo' };
+      expect(addUpFolderPath([dummyFile], 'galleries/gallery-demo/thumbs')).toEqual([expectedFile, dummyFile]);
+    });
+  });
+});

ui/app/containers/Walk/util.js

@@ -4,6 +4,38 @@ function isImage(file) {
   return (file.mediumType === 'image' && config.supportedFileTypes.photo.includes(file.ext.toLowerCase()));
 }
 
+function parseQueryString(find, from) {
+  if (!find || !from) return '';
+  return RegExp(`[?&]${find}(=([^&#]*)|&|#|$)`).exec(from)[2];
+}
+
+function addUpFolderPath(itemFiles, path) {
+  const file = {
+    filename: '..',
+    mediumType: 'folder',
+  };
+
+  if (path) {
+    if (path.lastIndexOf('/') > -1) {
+      const splitPath = path.split('/');
+      splitPath.pop();
+      itemFiles.unshift({
+        path: splitPath.join('/'),
+        ...file,
+      });
+    } else {
+      itemFiles.unshift({
+        path: '',
+        ...file,
+      });
+    }
+  }
+
+  return itemFiles;
+}
+
 export default {
+  addUpFolderPath,
   isImage,
+  parseQueryString,
 };