From 301b57c7244c39a5c55b6a58b2dad028b425e8f5 Mon Sep 17 00:00:00 2001
From: Mingze Xiao <mxiao@box.com>
Date: Wed, 18 Dec 2019 10:02:42 -0800
Subject: [PATCH] feat(archive-viewer): address comments

---
 src/i18n/en-US.properties                     |  2 +
 src/lib/viewers/archive/ArchiveExplorer.js    | 29 +++++---------
 src/lib/viewers/archive/SearchBar.js          | 38 +++++++++----------
 .../__tests__/ArchiveExplorer-test-react.js   | 12 +++---
 4 files changed, 35 insertions(+), 46 deletions(-)

diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties
index a51a5b77e..3f99af0fc 100644
--- a/src/i18n/en-US.properties
+++ b/src/i18n/en-US.properties
@@ -86,6 +86,8 @@ filename=Filename
 last_modified_date=Last modified date
 # Label for size column name
 size=Size
+# Shown as search accessibility label.
+search=Search
 # Shown as the title in the breadcrumbs while searching.
 search_results=Search Results
 # Shown as a placeholder in the search bar.
diff --git a/src/lib/viewers/archive/ArchiveExplorer.js b/src/lib/viewers/archive/ArchiveExplorer.js
index 1cfb5f459..685792ca1 100644
--- a/src/lib/viewers/archive/ArchiveExplorer.js
+++ b/src/lib/viewers/archive/ArchiveExplorer.js
@@ -117,20 +117,20 @@ class ArchiveExplorer extends React.Component {
     };
 
     /**
-     * Handle click event, update fullPath state, reset search and view
+     * Handle item click event, update fullPath state, reset search and view
      *
      * @param {Object} cellValue - the cell being clicked
      * @return {void}
      */
-    handleClick = ({ fullPath }) => this.setState({ view: VIEW_FOLDER, fullPath, searchQuery: '' });
+    handleItemClick = ({ fullPath }) => this.setState({ view: VIEW_FOLDER, fullPath, searchQuery: '' });
 
     /**
-     * Handle click event, update fullPath state
+     * Handle breadcrumb click event, update fullPath state
      *
      * @param {string} fullPath - target folder path
      * @return {void}
      */
-    handleClickFullPath = fullPath => this.setState({ fullPath });
+    handleBreadcrumbClick = fullPath => this.setState({ fullPath });
 
     /**
      * Handle search input, update view state
@@ -138,20 +138,11 @@ class ArchiveExplorer extends React.Component {
      * @param {string} query - raw query string in the search bar
      * @return {void}
      */
-    handleSearch = query => {
-        const trimmedQuery = query.trim();
-        const newState = {
+    handleSearch = query =>
+        this.setState({
             searchQuery: query,
-        };
-
-        if (!query) {
-            newState.view = VIEW_FOLDER;
-        } else if (trimmedQuery) {
-            newState.view = VIEW_SEARCH;
-        }
-
-        this.setState(newState);
-    };
+            view: query.trim() ? VIEW_SEARCH : VIEW_FOLDER,
+        });
 
     /**
      * Filter item collection for search query
@@ -182,12 +173,12 @@ class ArchiveExplorer extends React.Component {
             <Internationalize language={language} messages={elementsMessages}>
                 <div className="bp-ArchiveExplorer">
                     <SearchBar onSearch={this.handleSearch} searchQuery={searchQuery} />
-                    <Breadcrumbs fullPath={fullPath} onClick={this.handleClickFullPath} view={view} />
+                    <Breadcrumbs fullPath={fullPath} onClick={this.handleBreadcrumbClick} view={view} />
                     <VirtualizedTable rowData={itemList} rowGetter={this.getRowData(itemList)}>
                         {intl => [
                             <Column
                                 key={KEY_NAME}
-                                cellRenderer={itemNameCellRenderer(intl, this.handleClick)}
+                                cellRenderer={itemNameCellRenderer(intl, this.handleItemClick)}
                                 dataKey={KEY_NAME}
                                 disableSort
                                 flexGrow={3}
diff --git a/src/lib/viewers/archive/SearchBar.js b/src/lib/viewers/archive/SearchBar.js
index 6549c1f65..96b56f88b 100644
--- a/src/lib/viewers/archive/SearchBar.js
+++ b/src/lib/viewers/archive/SearchBar.js
@@ -2,27 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './SearchBar.scss';
 
-class SearchBar extends React.PureComponent {
-    static propTypes = {
-        onSearch: PropTypes.func.isRequired,
-        searchQuery: PropTypes.string.isRequired,
-    };
+const SearchBar = ({ onSearch, searchQuery }) => {
+    return (
+        <div className="bp-SearchBar">
+            <input
+                aria-label={__('search')}
+                onChange={({ currentTarget }) => onSearch(currentTarget.value)}
+                placeholder={__('search_placeholder')}
+                type="search"
+                value={searchQuery}
+            />
+        </div>
+    );
+};
 
-    render() {
-        const { onSearch, searchQuery } = this.props;
-        const search = ({ currentTarget }) => onSearch(currentTarget.value);
-        return (
-            <div className="bp-SearchBar">
-                <input
-                    aria-label="search"
-                    onChange={search}
-                    placeholder={__('search_placeholder')}
-                    type="search"
-                    value={searchQuery}
-                />
-            </div>
-        );
-    }
-}
+SearchBar.propTypes = {
+    onSearch: PropTypes.func.isRequired,
+    searchQuery: PropTypes.string.isRequired,
+};
 
 export default SearchBar;
diff --git a/src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js b/src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js
index a72984b58..00c9fb56d 100644
--- a/src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js
+++ b/src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js
@@ -79,11 +79,11 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {
         });
     });
 
-    describe('handleClick()', () => {
-        it('should set state when handleClick() is called', () => {
+    describe('handleItemClick()', () => {
+        it('should set state when handleItemClick() is called', () => {
             const component = shallow(<ArchiveExplorer itemCollection={data} />);
 
-            component.instance().handleClick({ fullPath: 'test/subfolder/' });
+            component.instance().handleItemClick({ fullPath: 'test/subfolder/' });
 
             expect(component.state().fullPath).to.equal('test/subfolder/');
             expect(component.state().view).to.equal(VIEWS.VIEW_FOLDER);
@@ -91,11 +91,11 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {
         });
     });
 
-    describe('handleClickFullPath()', () => {
-        it('should set state when handleClickFullPath() is called', () => {
+    describe('handleBreadcrumbClick()', () => {
+        it('should set state when handleBreadcrumbClick() is called', () => {
             const component = shallow(<ArchiveExplorer itemCollection={data} />);
 
-            component.instance().handleClickFullPath('test/subfolder/');
+            component.instance().handleBreadcrumbClick('test/subfolder/');
 
             expect(component.state().fullPath).to.equal('test/subfolder/');
         });