Skip to content

Commit

Permalink
feat(sortBy): implement getRenderState and getWidgetRenderState (#…
Browse files Browse the repository at this point in the history 
…4568)

* feat(sortBy): implement `getRenderState` and `getWidgetRenderState`

* feat(sortBy): implement `getRenderState` and `getWidgetRenderState`
  • Loading branch information
@shortcuts @Haroenv
shortcuts authored and Haroenv committed Nov 30, 2020
1 parent 8f82eaa commit fd249f7
Show file tree
Hide file tree
Showing 2 changed files with 187 additions and 12 deletions.
164 changes: 164 additions & 0 deletions src/connectors/sort-by/__tests__/connectSortBy-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
createInitOptions,
createRenderOptions,
} from '../../../../test/mock/createWidget';
import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';

describe('connectSortBy', () => {
describe('Usage', () => {
Expand Down Expand Up @@ -257,6 +258,169 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/sort-by/js/
}
});

describe('getRenderState', () => {
test('returns the render state', () => {
const renderFn = jest.fn();
const unmountFn = jest.fn();
const createSortBy = connectSortBy(renderFn, unmountFn);
const sortBy = createSortBy({
items: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
});
const helper = algoliasearchHelper(
createSearchClient(),
'index_default',
{
index: 'index_default',
}
);

const renderState1 = sortBy.getRenderState(
{
sortBy: {},
},
createInitOptions({ helper })
);

expect(renderState1.sortBy).toEqual({
currentRefinement: 'index_default',
refine: undefined,
hasNoResults: true,
options: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
widgetParams: {
items: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
},
});

sortBy.init(createInitOptions({ helper }));
sortBy.getWidgetRenderState({ helper }).refine('index_desc');

const renderState2 = sortBy.getRenderState(
{ sortBy: {} },
createRenderOptions({
helper,
state: helper.state,
results: new SearchResults(helper.state, [
createSingleSearchResponse({
hits: [
{ brand: 'samsung', objectID: '1' },
{ brand: 'apple', objectID: '2' },
{ brand: 'sony', objectID: '3' },
],
hitsPerPage: 1,
}),
]),
})
);

expect(renderState2.sortBy).toEqual({
currentRefinement: 'index_desc',
refine: expect.any(Function),
hasNoResults: false,
options: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
widgetParams: {
items: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
},
});
});
});

describe('getWidgetRenderState', () => {
test('returns the widget render state', () => {
const renderFn = jest.fn();
const unmountFn = jest.fn();
const createSortBy = connectSortBy(renderFn, unmountFn);
const sortBy = createSortBy({
items: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
});
const helper = algoliasearchHelper(createSearchClient(), 'index_desc', {
index: 'index_desc',
});

const renderState1 = sortBy.getWidgetRenderState(
createInitOptions({ helper })
);

expect(renderState1).toEqual({
currentRefinement: 'index_desc',
refine: undefined,
hasNoResults: true,
options: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
widgetParams: {
items: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
},
});

sortBy.init(createInitOptions({ helper }));
sortBy.getWidgetRenderState({ helper }).refine('index_default');

const renderState2 = sortBy.getWidgetRenderState(
createRenderOptions({
helper,
state: helper.state,
results: new SearchResults(helper.state, [
createSingleSearchResponse({
hits: [
{ brand: 'samsung', objectID: '1' },
{ brand: 'apple', objectID: '2' },
],
hitsPerPage: 20,
}),
]),
})
);

expect(renderState2).toEqual({
currentRefinement: 'index_default',
refine: expect.any(Function),
hasNoResults: false,
options: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
widgetParams: {
items: [
{ label: 'default', value: 'index_default' },
{ label: 'asc', value: 'index_asc' },
{ label: 'desc', value: 'index_desc' },
],
},
});
});
});

describe('options', () => {
describe('items', () => {
test('uses the helper index by default', () => {
Expand Down
35 changes: 23 additions & 12 deletions src/connectors/sort-by/connectSortBy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@ export default function connectSortBy(renderFn, unmountFn = noop) {
return {
$$type: 'ais.sortBy',

init({ helper, instantSearchInstance, parent }) {
init(initOptions) {
const { helper, instantSearchInstance, parent } = initOptions;
const currentIndex = helper.state.index;
const isCurrentIndexInItems = find(
items,
Expand All @@ -122,25 +123,18 @@ export default function connectSortBy(renderFn, unmountFn = noop) {

renderFn(
{
currentRefinement: currentIndex,
options: transformItems(items),
refine: this.setIndex,
hasNoResults: true,
widgetParams,
...this.getWidgetRenderState(initOptions),
instantSearchInstance,
},
true
);
},

render({ helper, results, instantSearchInstance }) {
render(renderOptions) {
const { instantSearchInstance } = renderOptions;
renderFn(
{
currentRefinement: helper.state.index,
options: transformItems(items),
refine: this.setIndex,
hasNoResults: results.nbHits === 0,
widgetParams,
...this.getWidgetRenderState(renderOptions),
instantSearchInstance,
},
false
Expand All @@ -153,6 +147,23 @@ export default function connectSortBy(renderFn, unmountFn = noop) {
return state.setIndex(this.initialIndex);
},

getRenderState(renderState, renderOptions) {
return {
...renderState,
sortBy: this.getWidgetRenderState(renderOptions),
};
},

getWidgetRenderState({ results, helper }) {
return {
currentRefinement: helper.state.index,
options: transformItems(items),
refine: this.setIndex,
hasNoResults: results ? results.nbHits === 0 : true,
widgetParams,
};
},

getWidgetUiState(uiState, { searchParameters }) {
const currentIndex = searchParameters.index;
const isInitialIndex = currentIndex === this.initialIndex;
Expand Down

0 comments on commit fd249f7

Please sign in to comment.