feat(archive-viewer): address comments

box · Dec 9, 2019 · dc7dcb6 · dc7dcb6
1 parent 0d97c54
commit dc7dcb6
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 98 deletions.
diff --git a/build/webpack.common.config.js b/build/webpack.common.config.js
@@ -25,7 +25,6 @@ module.exports = language => {
                         path.resolve('src/lib'),
                         path.resolve('node_modules/box-annotations'),
                         path.resolve('node_modules/box-ui-elements'),
-                        path.resolve('../box-ui-elements'),
                     ],
                 },
                 {

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
         "babel-plugin-react-remove-properties": "^0.3.0",
         "babel-plugin-transform-require-ignore": "^0.1.1",
         "box-annotations": "^2.3.0",
-        "box-ui-elements": "^11.0.2",
+        "box-ui-elements": "^11.1.0-beta.18",
         "chai": "^4.2.0",
         "chai-dom": "^1.8.1",
         "conventional-changelog-cli": "^2.0.23",
@@ -89,6 +89,8 @@
         "raw-loader": "^3.1.0",
         "react": "^16.7.0",
         "react-dom": "^16.7.0",
+        "react-intl": "^2.9.0",
+        "react-tether": "^1.0.0",
         "react-virtualized": "^9.13.0",
         "sass-loader": "^7.1.0",
         "sinon": "^7.4.2",

diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties
@@ -69,6 +69,14 @@ error_not_downloadable=Oops! It looks like something is wrong with this file. We
 # Preview error message shown when flash is not enabled on their browser
 error_flash_not_enabled=We’re sorry, the preview didn’t load because Flash is not enabled on your browser. If possible, please enable Flash and refresh the page.
 
+# Archive Preview
+# Label for filename column name
+filename=Filename
+# Label for last modified date column name
+last_modified_date=Last modified date
+# Label for size column name
+size=Size
+
 # Media Preview
 # Label for autoplay in media player
 media_autoplay=Autoplay

diff --git a/src/lib/viewers/archive/ArchiveExplorer.js b/src/lib/viewers/archive/ArchiveExplorer.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import memoize from 'lodash/memoize';
 import Internationalize from 'box-ui-elements/es/elements/common/Internationalize';
 import {
     readableTimeCellRenderer,
@@ -14,7 +15,7 @@ const { KEY_NAME, KEY_MODIFIED_AT } = TABLE_COLUMNS;
 
 class ArchiveExplorer extends React.Component {
     static propTypes = {
-        itemList: PropTypes.arrayOf(
+        itemCollection: PropTypes.arrayOf(
             PropTypes.shape({
                 type: PropTypes.string.isRequired,
                 absolute_path: PropTypes.string.isRequired,
@@ -46,19 +47,7 @@ class ArchiveExplorer extends React.Component {
         ).isRequired,
     };
 
-    constructor(props) {
-        super(props);
-        const { cache, root } = this.buildCache(props.itemList);
-        this.cache = cache;
-        this.root = root;
-
-        this.state = {
-            itemList: cache[root],
-            fullPath: root,
-        };
-    }
-
-    buildCache = itemList => {
+    buildCache = memoize(itemList => {
         const folders = [];
         const temp = {};
         const cache = {};
@@ -79,27 +68,27 @@ class ArchiveExplorer extends React.Component {
         });
 
         return { cache, root };
-    };
+    });
 
-    updateData = absolutePath => {
-        this.setState({
-            itemList: this.cache[absolutePath],
-        });
-    };
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            fullPath: undefined,
+        };
+    }
 
-    getRowData = ({ index }) => {
-        const { itemList } = this.state;
-        const currentRow = itemList[index];
-        const { name, type, modified_at: modifiedAt } = currentRow;
+    getRowData = itemList => ({ index }) => {
+        const { name, type, modified_at: modifiedAt, ...rest } = itemList[index];
 
         const rowData = {
-            ...currentRow,
             [KEY_NAME]: {
                 isExternal: false,
                 name,
                 type,
             },
             [KEY_MODIFIED_AT]: `20${modifiedAt}`,
+            ...rest,
         };
         return rowData;
     };
@@ -108,25 +97,40 @@ class ArchiveExplorer extends React.Component {
         const { name } = cellValue;
         const { fullPath } = this.state;
         const nextFullPath = `${fullPath}${name}/`;
-        this.updateData(nextFullPath);
         this.setState({
             fullPath: nextFullPath,
         });
     };
 
     render() {
-        const { itemList } = this.state;
+        const { itemCollection } = this.props;
+        const { fullPath } = this.state;
+        const { cache, root } = this.buildCache(itemCollection);
+
+        if (!fullPath) {
+            this.setState({
+                fullPath: root,
+            });
+            return null;
+        }
+
+        const itemList = cache[fullPath];
+
         return (
             <Internationalize language="en-us" messages={{}}>
-                <VirtualizedTable className="ArchiveFilesTable" rowData={itemList} rowGetter={this.getRowData}>
+                <VirtualizedTable
+                    className="ArchiveFilesTable"
+                    rowData={itemList}
+                    rowGetter={this.getRowData(itemList)}
+                >
                     {intl => [
                         <Column
                             key="Filename"
                             cellRenderer={itemNameCellRenderer(intl, this.handleClick)}
                             dataKey={KEY_NAME}
                             disableSort
                             flexGrow={3}
-                            label="Filename"
+                            label={__('filename')}
                             width={1}
                         />,
                         <Column
@@ -135,7 +139,7 @@ class ArchiveExplorer extends React.Component {
                             dataKey={KEY_MODIFIED_AT}
                             disableSort
                             flexGrow={2}
-                            label="Last modified date"
+                            label={__('last_modified_date')}
                             width={1}
                         />,
                         <Column
@@ -144,7 +148,7 @@ class ArchiveExplorer extends React.Component {
                             dataKey="size"
                             disableSort
                             flexGrow={1}
-                            label="Size"
+                            label={__('size')}
                             width={1}
                         />,
                     ]}

diff --git a/src/lib/viewers/archive/ArchiveLoader.js b/src/lib/viewers/archive/ArchiveLoader.js
@@ -7,13 +7,13 @@ const VIEWERS = [
         NAME: 'Archive',
         CONSTRUCTOR: ArchiveViewer,
         REP: 'json',
-        EXT: ['zip'],
+        EXT: ['zip', 'jar'],
     },
     {
         NAME: 'Archive',
         CONSTRUCTOR: ArchiveViewer,
-        REP: ORIGINAL_REP_NAME,
-        EXT: ['zip'],
+        REP: ORIGINAL_REP_NAME, // for testing purposes, will remove later
+        EXT: ['zip', 'jar'],
     },
 ];
 
@@ -27,15 +27,6 @@ class ArchiveLoader extends AssetLoader {
         super();
         this.viewers = VIEWERS;
     }
-
-    /**
-     * @inheritdoc
-     */
-    determineViewer(file, disabledViewers = []) {
-        const viewer = super.determineViewer(file, disabledViewers);
-
-        return viewer;
-    }
 }
 
 export default new ArchiveLoader();
diff --git a/src/lib/viewers/archive/ArchiveViewer.js b/src/lib/viewers/archive/ArchiveViewer.js
@@ -225,43 +225,6 @@ const testData = [
     },
 ];
 
-const virtualizedTestData = [
-    {
-        id: 0,
-        name: "01 - Adam Sanders - Life I'm Livin'.m4a",
-        modified_at: '2019-05-10T18:02:30Z',
-        size: 6823316,
-        type: 'file',
-        modified_by: {
-            id: '666',
-            name: 'Mingze',
-            email: '[email protected]',
-            login: 'mxiao',
-        },
-        path: {
-            id: 0,
-            name: "01 - Adam Sanders - Life I'm Livin'.m4a",
-            size: 6823316,
-            itemPath: [{ name: 'folder1' }, { name: 'folder2' }],
-            itemType: 'file',
-        },
-    },
-    {
-        id: 1,
-        name: 'coraline.mp4',
-        modified_at: '2013-02-19T19:56:50Z',
-        size: 4464268,
-        type: 'file',
-        path: {
-            id: 1,
-            name: 'coraline.mp4',
-            size: 4464268,
-            itemPath: [{ id: '0' }],
-            itemType: 'file',
-        },
-    },
-];
-
 class ArchiveViewer extends BaseViewer {
     /**
      * @inheritdoc
@@ -315,18 +278,15 @@ class ArchiveViewer extends BaseViewer {
         const contentUrl = this.createContentUrlWithAuthParams(template);
         this.startLoadTimer();
 
-        this.api
-            .get(contentUrl)
-            .then(data => {
-                if (this.isDestroyed()) {
-                    return;
-                }
+        this.api.get(contentUrl).then(data => {
+            if (this.isDestroyed()) {
+                return;
+            }
 
-                this.data = testData;
+            this.data = testData;
 
-                this.finishLoading();
-            })
-            .catch(this.handleAssetError);
+            this.finishLoading();
+        });
     };
 
     /**
@@ -336,7 +296,10 @@ class ArchiveViewer extends BaseViewer {
      * @return {void}
      */
     finishLoading() {
-        /* global BoxArchive */
+        /*
+            global BoxArchive
+            The BoxArchive is loaded from archive.js
+        */
         this.archiveComponent = new BoxArchive(this.archiveEl, this.data);
 
         this.loaded = true;

diff --git a/src/lib/viewers/archive/BoxArchive.js b/src/lib/viewers/archive/BoxArchive.js
@@ -12,7 +12,7 @@ class BoxArchive {
      */
     constructor(archiveEl, data) {
         this.archiveEl = archiveEl;
-        this.archiveExplorer = ReactDOM.render(<ArchiveExplorer itemList={data} />, this.archiveEl);
+        this.archiveExplorer = ReactDOM.render(<ArchiveExplorer itemCollection={data} />, this.archiveEl);
     }
 
     /**