Skip to content

Commit

Permalink
feat(renderState): add connectNumericMenu (#4550)
Browse files Browse the repository at this point in the history 
* feat(renderState): add connectNumericMenu

DX-204

* Apply suggestions from code review

Co-authored-by: Yannick Croissant <[email protected]>

* Apply suggestions from code review

Co-authored-by: Yannick Croissant <[email protected]>
  • Loading branch information
@Haroenv
Haroenv and Yannick Croissant committed Nov 30, 2020
1 parent 239906c commit 5385edf
Show file tree
Hide file tree
Showing 3 changed files with 255 additions and 14 deletions.
218 changes: 218 additions & 0 deletions src/connectors/numeric-menu/__tests__/connectNumericMenu-test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1075,4 +1075,222 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/numeric-men
});
});
});

describe('getRenderState', () => {
it('returns the render state', () => {
const [widget, helper] = getInitializedWidget();

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

expect(renderState1.numericMenu).toEqual({
numerics: {
createURL: expect.any(Function),
hasNoResults: true,
items: [
{
isRefined: false,
label: 'below 10',
value: '%7B%22end%22:10%7D',
},
{
isRefined: false,
label: '10 - 20',
value: '%7B%22start%22:10,%22end%22:20%7D',
},
{
isRefined: false,
label: 'more than 20',
value: '%7B%22start%22:20%7D',
},
],
refine: expect.any(Function),
sendEvent: expect.any(Function),
widgetParams: {
attribute: 'numerics',
items: [
{
end: 10,
label: 'below 10',
},
{
end: 20,
label: '10 - 20',
start: 10,
},
{
label: 'more than 20',
start: 20,
},
],
},
},
});

const results = new SearchResults(helper.state, [
createSingleSearchResponse(),
]);

const renderState2 = widget.getRenderState(
{},
createRenderOptions({
helper,
state: helper.state,
results,
})
);

expect(renderState2.numericMenu).toEqual({
numerics: {
createURL: expect.any(Function),
refine: renderState1.numericMenu.numerics.refine,
sendEvent: renderState1.numericMenu.numerics.sendEvent,
hasNoResults: true,
items: [
{
isRefined: false,
label: 'below 10',
value: '%7B%22end%22:10%7D',
},
{
isRefined: false,
label: '10 - 20',
value: '%7B%22start%22:10,%22end%22:20%7D',
},
{
isRefined: false,
label: 'more than 20',
value: '%7B%22start%22:20%7D',
},
],
widgetParams: {
attribute: 'numerics',
items: [
{
end: 10,
label: 'below 10',
},
{
end: 20,
label: '10 - 20',
start: 10,
},
{
label: 'more than 20',
start: 20,
},
],
},
},
});
});
});

describe('getWidgetRenderState', () => {
it('returns the widget render state', () => {
const [widget, helper] = getInitializedWidget();

const renderState1 = widget.getWidgetRenderState(
createInitOptions({ state: helper.state, helper })
);

expect(renderState1).toEqual({
items: [
{
isRefined: false,
label: 'below 10',
value: '%7B%22end%22:10%7D',
},
{
isRefined: false,
label: '10 - 20',
value: '%7B%22start%22:10,%22end%22:20%7D',
},
{
isRefined: false,
label: 'more than 20',
value: '%7B%22start%22:20%7D',
},
],
createURL: expect.any(Function),
refine: expect.any(Function),
sendEvent: expect.any(Function),
hasNoResults: true,
widgetParams: {
attribute: 'numerics',
items: [
{
end: 10,
label: 'below 10',
},
{
end: 20,
label: '10 - 20',
start: 10,
},
{
label: 'more than 20',
start: 20,
},
],
},
});

const results = new SearchResults(helper.state, [
createSingleSearchResponse({}),
]);

const renderState2 = widget.getWidgetRenderState(
createRenderOptions({
helper,
state: helper.state,
results,
})
);

expect(renderState2).toEqual({
createURL: expect.any(Function),
hasNoResults: true,
items: [
{
isRefined: false,
label: 'below 10',
value: '%7B%22end%22:10%7D',
},
{
isRefined: false,
label: '10 - 20',
value: '%7B%22start%22:10,%22end%22:20%7D',
},
{
isRefined: false,
label: 'more than 20',
value: '%7B%22start%22:20%7D',
},
],
refine: renderState1.refine,
sendEvent: renderState1.sendEvent,
widgetParams: {
attribute: 'numerics',
items: [
{
end: 10,
label: 'below 10',
},
{
end: 20,
label: '10 - 20',
start: 10,
},
{
label: 'more than 20',
start: 20,
},
],
},
});
});
});
});
41 changes: 27 additions & 14 deletions src/connectors/numeric-menu/connectNumericMenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,8 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu(
return {
$$type,

init({ helper, createURL, instantSearchInstance }) {
init(initOptions) {
const { helper, createURL, instantSearchInstance } = initOptions;
connectorState.sendEvent = createSendEvent({
instantSearchInstance,
helper,
Expand All @@ -196,28 +197,19 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu(

renderFn(
{
createURL: connectorState.createURL(helper.state),
items: transformItems(prepareItems(helper.state)),
hasNoResults: true,
refine: connectorState.refine,
sendEvent: connectorState.sendEvent!,
...this.getWidgetRenderState(initOptions),
instantSearchInstance,
widgetParams,
},
true
);
},

render({ results, state, instantSearchInstance }) {
render(renderOptions) {
const { instantSearchInstance } = renderOptions;
renderFn(
{
createURL: connectorState.createURL!(state),
items: transformItems(prepareItems(state)),
hasNoResults: results.nbHits === 0,
refine: connectorState.refine!,
sendEvent: connectorState.sendEvent!,
...this.getWidgetRenderState(renderOptions),
instantSearchInstance,
widgetParams,
},
false
);
Expand Down Expand Up @@ -295,6 +287,27 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu(

return withMaxRefinement;
},

getRenderState(renderState, renderOptions) {
return {
...renderState,
numericMenu: {
...renderState.numericMenu,
[attribute]: this.getWidgetRenderState(renderOptions),
},
};
},

getWidgetRenderState({ results, state }) {
return {
createURL: connectorState.createURL!(state),
items: transformItems(prepareItems(state)),
hasNoResults: results ? results.nbHits === 0 : true,
refine: connectorState.refine!,
sendEvent: connectorState.sendEvent!,
widgetParams,
};
},
};
};
};
Expand Down
10 changes: 10 additions & 0 deletions src/types/widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ import {
} from '../connectors/hits/connectHits';
import { AnalyticsWidgetParams } from '../widgets/analytics/analytics';
import { PlacesWidgetParams } from '../widgets/places/places';
import {
NumericMenuConnectorParams,
NumericMenuRendererOptions,
} from '../connectors/numeric-menu/connectNumericMenu';
import {
PoweredByConnectorParams,
PoweredByRendererOptions,
Expand Down Expand Up @@ -240,6 +244,12 @@ export type IndexRenderState = Partial<{
}
>;
};
numericMenu: {
[attribute: string]: WidgetRenderState<
NumericMenuRendererOptions,
NumericMenuConnectorParams
>;
};
}>;

export type WidgetRenderState<
Expand Down

0 comments on commit 5385edf

Please sign in to comment.