Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(archive): Add sortable columns to ArchiveExplorer #1126

Merged
merged 6 commits into from
Dec 19, 2019
Merged

feat(archive): Add sortable columns to ArchiveExplorer #1126

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6f30f82
feat(archive): Add sortable columns to ArchiveExplorer
mickr Dec 18, 2019
a66119b
feat(archive): Add handling for search
mickr Dec 19, 2019
a0030dc
feat(archive): Adding more context to jsdoc
mickr Dec 19, 2019
62bc0cc
feat(archive): PR Feedback
mickr Dec 19, 2019
452f107
feat(archive): PR Feedback
mickr Dec 19, 2019
ad5e874
Merge branch 'master' into archive-sortable-columns
mickr Dec 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 47 additions & 9 deletions src/lib/viewers/archive/ArchiveExplorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import getProp from 'lodash/get';
import sortBy from 'lodash/sortBy';
import elementsMessages from 'box-elements-messages'; // eslint-disable-line
import intlLocaleData from 'react-intl-locale-data'; // eslint-disable-line
import Internationalize from 'box-ui-elements/es/elements/common/Internationalize';
import fuzzySearch from 'box-ui-elements/es/utils/fuzzySearch';
import {
itemNameCellRenderer,
readableTimeCellRenderer,
sizeCellRenderer,
itemNameCellRenderer,
sortableColumnHeaderRenderer,
} from 'box-ui-elements/es/features/virtualized-table-renderers';
import VirtualizedTable from 'box-ui-elements/es/features/virtualized-table';
import { addLocaleData } from 'react-intl';
import { Column } from 'react-virtualized/dist/es/Table/index';
import { Column, SortDirection } from 'react-virtualized/dist/es/Table/index';
import Breadcrumbs from './Breadcrumbs';
import SearchBar from './SearchBar';
import { TABLE_COLUMNS, VIEWS } from './constants';
Expand Down Expand Up @@ -69,6 +71,8 @@ class ArchiveExplorer extends React.Component {
this.state = {
fullPath: props.itemCollection.find(info => !info.parent).absolute_path,
searchQuery: '',
sortType: '',
sortDirection: SortDirection.ASC,
view: VIEW_FOLDER,
};
}
Expand Down Expand Up @@ -144,6 +148,16 @@ class ArchiveExplorer extends React.Component {
view: query.trim() ? VIEW_SEARCH : VIEW_FOLDER,
});

/**
* Handle sort click
*
* @param {object} sort
* @param {string} sort.sortBy - Used to sort
* @param {string} sort.sortDirection - Set direction of sort either ASC | DESC
* @return {void}
*/
handleSort = ({ sortBy: sortType, sortDirection }) => this.setState({ sortType, sortDirection });

/**
* Filter item collection for search query
*
Expand All @@ -156,50 +170,74 @@ class ArchiveExplorer extends React.Component {
return itemCollection.filter(item => fuzzySearch(trimmedQuery, item.name, 0));
};

/**
* Sort the item list depending on the key or direction
* @param {Array<Object>} itemList - Array of Item objects
* @return {Array<Object>} filtered items for search query
*/
sortItemList(itemList) {
const { sortType, sortDirection } = this.state;

if (!sortType.length) {
return itemList;
}

const sortedItems = sortBy(itemList, sortType);

return sortDirection === SortDirection.ASC ? sortedItems : sortedItems.reverse();
}

/**
* render data
*
* @return {jsx} VirtualizedTable
*/
render() {
const { itemCollection } = this.props;
const { fullPath, searchQuery, view } = this.state;
const itemList =
const { fullPath, searchQuery, sortType, sortDirection, view } = this.state;
const itemList = this.sortItemList(
view === VIEW_SEARCH
? this.getSearchResult(itemCollection, searchQuery)
: this.getItemList(itemCollection, fullPath);
: this.getItemList(itemCollection, fullPath),
);

return (
<Internationalize language={language} messages={elementsMessages}>
<div className="bp-ArchiveExplorer">
<SearchBar onSearch={this.handleSearch} searchQuery={searchQuery} />
<Breadcrumbs fullPath={fullPath} onClick={this.handleBreadcrumbClick} view={view} />
<VirtualizedTable rowData={itemList} rowGetter={this.getRowData(itemList)}>
<VirtualizedTable
rowData={itemList}
rowGetter={this.getRowData(itemList)}
sort={this.handleSort}
sortBy={sortType}
sortDirection={sortDirection}
>
{intl => [
<Column
key={KEY_NAME}
cellRenderer={itemNameCellRenderer(intl, this.handleItemClick)}
dataKey={KEY_NAME}
disableSort
flexGrow={3}
headerRenderer={sortableColumnHeaderRenderer}
label={__('filename')}
width={1}
/>,
<Column
key={KEY_MODIFIED_AT}
cellRenderer={readableTimeCellRenderer}
dataKey={KEY_MODIFIED_AT}
disableSort
flexGrow={2}
headerRenderer={sortableColumnHeaderRenderer}
label={__('last_modified_date')}
width={1}
/>,
<Column
key={KEY_SIZE}
cellRenderer={sizeCellRenderer()}
dataKey={KEY_SIZE}
disableSort
flexGrow={1}
headerRenderer={sortableColumnHeaderRenderer}
label={__('size')}
width={1}
/>,
Expand Down
73 changes: 66 additions & 7 deletions src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { TABLE_COLUMNS, VIEWS } from '../constants';
const sandbox = sinon.sandbox.create();
let data;

const getComponent = props => shallow(<ArchiveExplorer {...props} />); // eslint-disable-line

describe('lib/viewers/archive/ArchiveExplorer', () => {
beforeEach(() => {
data = [
Expand Down Expand Up @@ -69,7 +71,7 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {

describe('render()', () => {
it('should render correct components', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);
const component = getComponent({ itemCollection: data });

expect(component.find('.bp-ArchiveExplorer').length).to.equal(1);
expect(component.find('SearchBar').length).to.equal(1);
Expand All @@ -81,7 +83,7 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {

describe('handleItemClick()', () => {
it('should set state when handleItemClick() is called', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);
const component = getComponent({ itemCollection: data });

component.instance().handleItemClick({ fullPath: 'test/subfolder/' });

Expand All @@ -93,7 +95,7 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {

describe('handleBreadcrumbClick()', () => {
it('should set state when handleBreadcrumbClick() is called', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);
const component = getComponent({ itemCollection: data });

component.instance().handleBreadcrumbClick('test/subfolder/');

Expand All @@ -103,7 +105,7 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {

describe('getRowData()', () => {
it('should return correct row data', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);
const component = getComponent({ itemCollection: data });

const rowData = component.instance().getRowData(data)({ index: 0 });

Expand All @@ -126,7 +128,7 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {

describe('getItemList()', () => {
it('should return correct item list', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);
const component = getComponent({ itemCollection: data });

const itemList = component.instance().getItemList(data, 'test/');

Expand All @@ -136,7 +138,7 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {

describe('handleSearch()', () => {
it('should set correct state when search query is not empty', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);
const component = getComponent({ itemCollection: data });

component.instance().handleSearch('test');
expect(component.state().searchQuery).to.equal('test');
Expand All @@ -154,7 +156,7 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {

describe('getSearchResult()', () => {
it('should return correct item list', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);
const component = getComponent({ itemCollection: data });

const itemList = component.instance().getSearchResult(data, 'level-1');
const fuzzyList = component.instance().getSearchResult(data, 'leel1');
Expand All @@ -163,4 +165,61 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {
expect(fuzzyList).to.eql([data[1], data[2]]);
});
});

describe('handleSort()', () => {
it('should set the sort direction and type', () => {
const component = getComponent({ itemCollection: data });
const instance = component.instance();

instance.handleSort({ sortBy: 'name', sortDirection: 'DESC' });

expect(component.state().sortType).to.equal('name');
expect(component.state().sortDirection).to.equal('DESC');
});
});

describe('sortItemList()', () => {
it('should sort itemList by size and be in ASC order', () => {
const component = getComponent({ itemCollection: data });
const instance = component.instance();
const itemList = instance.getItemList(data, 'test/');

instance.handleSort({ sortBy: 'size', sortDirection: 'ASC' });
const sortedList = instance.sortItemList(itemList);

expect(sortedList[0]).to.equal(data[1]);
});

it('should sort itemList by name and be in DESC order', () => {
const component = getComponent({ itemCollection: data });
const instance = component.instance();
const itemList = instance.getItemList(data, 'test/');

instance.handleSort({ sortBy: 'name', sortDirection: 'DESC' });
const sortedList = instance.sortItemList(itemList);

expect(sortedList[0]).to.equal(data[2]);
});

it('should sort itemList by name and be in ASC order', () => {
const component = getComponent({ itemCollection: data });
const instance = component.instance();
const itemList = instance.getItemList(data, 'test/');

instance.handleSort({ sortBy: 'name', sortDirection: 'ASC' });
const sortedList = instance.sortItemList(itemList);

expect(sortedList[0]).to.equal(data[1]);
});

it('should not sort itemList', () => {
const component = getComponent({ itemCollection: data });
const instance = component.instance();
const itemList = instance.getItemList(data, 'test/');

const sortedList = instance.sortItemList(itemList);

expect(sortedList[0]).to.equal(itemList[0]);
});
});
});