Skip to content
This repository was archived by the owner on Dec 30, 2022. It is now read-only.

Commit f2f5f6c

Browse files
authored
fix(refinements): use escaped value for refining (#3412)
* feat(refinements): use escaped value for refining FX-1135 same as algolia/instantsearch#5039 relies on algolia/algoliasearch-helper-js#889 and algolia/algoliasearch-helper-js#900 to show the escaped value (leading `-` gets transformed into `\-` * Update packages/react-instantsearch-core/src/connectors/connectRefinementList.js * use latest helper * update to latest helper pr * update to released helper * skip new helper for hooks (until vanilla updates)
1 parent 1699159 commit f2f5f6c

File tree

11 files changed

+74
-23
lines changed

11 files changed

+74
-23
lines changed

packages/react-instantsearch-core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
},
3838
"dependencies": {
3939
"@babel/runtime": "^7.1.2",
40-
"algoliasearch-helper": "^3.7.4",
40+
"algoliasearch-helper": "^3.8.0",
4141
"prop-types": "^15.6.2",
4242
"react-fast-compare": "^3.0.0"
4343
},

packages/react-instantsearch-core/src/connectors/__tests__/connectBreadcrumb.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,21 @@ describe('connectBreadcrumb', () => {
3232
{
3333
name: 'wat',
3434
path: 'wat',
35+
escapedValue: 'wat',
3536
count: 20,
3637
isRefined: true,
3738
data: [
3839
{
3940
name: 'wot',
4041
path: 'wat > wot',
42+
escapedValue: 'wat > wot',
4143
isRefined: true,
4244
count: 15,
4345
},
4446
{
4547
name: 'wut',
4648
path: 'wat > wut',
49+
escapedValue: 'wat > wut',
4750
isRefined: false,
4851
count: 5,
4952
},
@@ -52,6 +55,7 @@ describe('connectBreadcrumb', () => {
5255
{
5356
name: 'oy',
5457
path: 'oy',
58+
escapedValue: 'oy',
5559
isRefined: false,
5660
count: 10,
5761
},
@@ -148,18 +152,21 @@ describe('connectBreadcrumb', () => {
148152
{
149153
name: 'wat',
150154
path: 'wat',
155+
escapedValue: 'wat',
151156
count: 20,
152157
isRefined: true,
153158
data: [
154159
{
155160
name: 'wot',
156161
path: 'wat > wot',
162+
escapedValue: 'wat > wot',
157163
isRefined: true,
158164
count: 15,
159165
},
160166
{
161167
name: 'wut',
162168
path: 'wat > wut',
169+
escapedValue: 'wat > wut',
163170
isRefined: false,
164171
count: 5,
165172
},
@@ -168,6 +175,7 @@ describe('connectBreadcrumb', () => {
168175
{
169176
name: 'oy',
170177
path: 'oy',
178+
escapedValue: 'oy',
171179
isRefined: false,
172180
count: 10,
173181
},

packages/react-instantsearch-core/src/connectors/__tests__/connectHierarchicalMenu.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,23 +44,27 @@ describe('connectHierarchicalMenu', () => {
4444
{
4545
name: 'wat',
4646
path: 'wat',
47+
escapedValue: 'wat',
4748
count: 20,
4849
data: [
4950
{
5051
name: 'wot',
5152
path: 'wat > wot',
53+
escapedValue: 'wat > wot',
5254
count: 15,
5355
},
5456
{
5557
name: 'wut',
5658
path: 'wat > wut',
59+
escapedValue: 'wat > wut',
5760
count: 5,
5861
},
5962
],
6063
},
6164
{
6265
name: 'oy',
6366
path: 'oy',
67+
escapedValue: 'oy',
6468
count: 10,
6569
},
6670
],
@@ -338,33 +342,39 @@ describe('connectHierarchicalMenu', () => {
338342
{
339343
name: 'wat',
340344
path: 'wat',
345+
escapedValue: 'wat',
341346
count: 20,
342347
data: [
343348
{
344349
name: 'wot',
345350
path: 'wat > wot',
351+
escapedValue: 'wat > wot',
346352
count: 15,
347353
},
348354
{
349355
name: 'wut',
350356
path: 'wat > wut',
357+
escapedValue: 'wat > wut',
351358
count: 3,
352359
},
353360
{
354361
name: 'wit',
355362
path: 'wat > wit',
363+
escapedValue: 'wat > wit',
356364
count: 5,
357365
},
358366
],
359367
},
360368
{
361369
name: 'oy',
362370
path: 'oy',
371+
escapedValue: 'oy',
363372
count: 10,
364373
},
365374
{
366375
name: 'ay',
367376
path: 'ay',
377+
escapedValue: 'ay',
368378
count: 3,
369379
},
370380
],
@@ -419,33 +429,39 @@ describe('connectHierarchicalMenu', () => {
419429
{
420430
name: 'wat',
421431
path: 'wat',
432+
escapedValue: 'wat',
422433
count: 20,
423434
data: [
424435
{
425436
name: 'wot',
426437
path: 'wat > wot',
438+
escapedValue: 'wat > wot',
427439
count: 15,
428440
},
429441
{
430442
name: 'wut',
431443
path: 'wat > wut',
444+
escapedValue: 'wat > wut',
432445
count: 3,
433446
},
434447
{
435448
name: 'wit',
436449
path: 'wat > wit',
450+
escapedValue: 'wat > wit',
437451
count: 5,
438452
},
439453
],
440454
},
441455
{
442456
name: 'oy',
443457
path: 'oy',
458+
escapedValue: 'oy',
444459
count: 10,
445460
},
446461
{
447462
name: 'ay',
448463
path: 'ay',
464+
escapedValue: 'ay',
449465
count: 3,
450466
},
451467
],
@@ -785,23 +801,27 @@ describe('connectHierarchicalMenu', () => {
785801
{
786802
name: 'wat',
787803
path: 'wat',
804+
escapedValue: 'wat',
788805
count: 20,
789806
data: [
790807
{
791808
name: 'wot',
792809
path: 'wat > wot',
810+
escapedValue: 'wat > wot',
793811
count: 15,
794812
},
795813
{
796814
name: 'wut',
797815
path: 'wat > wut',
816+
escapedValue: 'wat > wut',
798817
count: 5,
799818
},
800819
],
801820
},
802821
{
803822
name: 'oy',
804823
path: 'oy',
824+
escapedValue: 'oy',
805825
count: 10,
806826
},
807827
],

packages/react-instantsearch-core/src/connectors/__tests__/connectMenu.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,13 @@ describe('connectMenu', () => {
8686
results.getFacetValues.mockImplementation(() => [
8787
{
8888
name: 'wat',
89+
escapedValue: 'wat',
8990
isRefined: true,
9091
count: 20,
9192
},
9293
{
9394
name: 'oy',
95+
escapedValue: 'oy',
9496
isRefined: false,
9597
count: 10,
9698
},
@@ -159,6 +161,7 @@ describe('connectMenu', () => {
159161
ok: [
160162
{
161163
value: 'wat',
164+
escapedValue: 'wat',
162165
count: 10,
163166
highlighted: 'wat',
164167
isRefined: false,
@@ -224,6 +227,7 @@ describe('connectMenu', () => {
224227
results.getFacetValues.mockImplementation(() => [
225228
{
226229
name: 'wat',
230+
escapedValue: 'wat',
227231
isRefined: true,
228232
count: 20,
229233
},
@@ -531,11 +535,13 @@ describe('connectMenu', () => {
531535
getFacetValues: jest.fn(() => [
532536
{
533537
name: 'oy',
538+
escapedValue: 'oy',
534539
isRefined: true,
535540
count: 10,
536541
},
537542
{
538543
name: 'wat',
544+
escapedValue: 'wat',
539545
isRefined: false,
540546
count: 20,
541547
},
@@ -576,11 +582,13 @@ describe('connectMenu', () => {
576582
getFacetValues: jest.fn(() => [
577583
{
578584
name: 'oy',
585+
escapedValue: 'oy',
579586
isRefined: true,
580587
count: 10,
581588
},
582589
{
583590
name: 'wat',
591+
escapedValue: 'wat',
584592
isRefined: false,
585593
count: 20,
586594
},
@@ -727,11 +735,13 @@ describe('connectMenu', () => {
727735
results.second.getFacetValues.mockImplementation(() => [
728736
{
729737
name: 'wat',
738+
escapedValue: 'wat',
730739
isRefined: true,
731740
count: 20,
732741
},
733742
{
734743
name: 'oy',
744+
escapedValue: 'oy',
735745
isRefined: false,
736746
count: 10,
737747
},
@@ -801,6 +811,7 @@ describe('connectMenu', () => {
801811
ok: [
802812
{
803813
value: 'wat',
814+
escapedValue: 'wat',
804815
count: 10,
805816
highlighted: 'wat',
806817
isRefined: false,
@@ -867,6 +878,7 @@ describe('connectMenu', () => {
867878
results.second.getFacetValues.mockImplementation(() => [
868879
{
869880
name: 'wat',
881+
escapedValue: 'wat',
870882
isRefined: true,
871883
count: 20,
872884
},

packages/react-instantsearch-core/src/connectors/__tests__/connectRefinementList.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,13 @@ describe('connectRefinementList', () => {
8282
results.getFacetValues.mockImplementation(() => [
8383
{
8484
name: 'wat',
85+
escapedValue: 'wat',
8586
isRefined: true,
8687
count: 20,
8788
},
8889
{
8990
name: 'oy',
91+
escapedValue: 'oy',
9092
isRefined: false,
9193
count: 10,
9294
},
@@ -135,6 +137,7 @@ describe('connectRefinementList', () => {
135137
ok: [
136138
{
137139
value: 'wat',
140+
escapedValue: 'wat',
138141
count: 10,
139142
highlighted: 'wat',
140143
isRefined: false,
@@ -220,7 +223,8 @@ describe('connectRefinementList', () => {
220223
{
221224
ok: [
222225
{
223-
value: ['wat'],
226+
value: 'wat',
227+
escapedValue: 'wat',
224228
label: 'wat',
225229
isRefined: true,
226230
count: 20,
@@ -234,8 +238,8 @@ describe('connectRefinementList', () => {
234238
_highlightResult: { label: { value: 'wat' } },
235239
count: 20,
236240
isRefined: true,
237-
label: ['wat'],
238-
value: [['wat']],
241+
label: 'wat',
242+
value: ['wat'],
239243
},
240244
]);
241245
expect(props.isFromSearch).toBe(true);

packages/react-instantsearch-core/src/connectors/connectBreadcrumb.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ function transformValue(values) {
1818
if (item.isRefined) {
1919
acc.push({
2020
label: item.name,
21-
// If dealing with a nested "items", "value" is equal to the previous value concatenated with the current label
22-
// If dealing with the first level, "value" is equal to the current label
23-
value: item.path,
21+
// If dealing with a nested "items", "value" is equal to the previous value concatenated with the current value
22+
// If dealing with the first level, "value" is equal to the current value
23+
value: item.escapedValue,
2424
});
2525
// Create a variable in order to keep the same acc for the recursion, otherwise "reduce" returns a new one
2626
if (item.data) {

packages/react-instantsearch-core/src/connectors/connectHierarchicalMenu.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ function getCurrentRefinement(props, searchState, context) {
2828
return currentRefinement;
2929
}
3030

31-
function getValue(path, props, searchState, context) {
31+
function getValue(value, props, searchState, context) {
3232
const { id, attributes, separator, rootPath, showParentLevel } = props;
3333

3434
const currentRefinement = getCurrentRefinement(props, searchState, context);
3535
let nextRefinement;
3636

3737
if (currentRefinement === null) {
38-
nextRefinement = path;
38+
nextRefinement = value;
3939
} else {
4040
const tmpSearchParameters = new algoliasearchHelper.SearchParameters({
4141
hierarchicalFacets: [
@@ -51,7 +51,7 @@ function getValue(path, props, searchState, context) {
5151

5252
nextRefinement = tmpSearchParameters
5353
.toggleHierarchicalFacetRefinement(id, currentRefinement)
54-
.toggleHierarchicalFacetRefinement(id, path)
54+
.toggleHierarchicalFacetRefinement(id, value)
5555
.getHierarchicalRefinement(id)[0];
5656
}
5757

@@ -61,7 +61,7 @@ function getValue(path, props, searchState, context) {
6161
function transformValue(value, props, searchState, context) {
6262
return value.map((v) => ({
6363
label: v.name,
64-
value: getValue(v.path, props, searchState, context),
64+
value: getValue(v.escapedValue, props, searchState, context),
6565
count: v.count,
6666
isRefined: v.isRefined,
6767
items: v.data && transformValue(v.data, props, searchState, context),
@@ -98,7 +98,7 @@ const sortBy = ['name:asc'];
9898
* websites. From a UX point of view, we suggest not displaying more than two levels deep.
9999
* @name connectHierarchicalMenu
100100
* @requirements To use this widget, your attributes must be formatted in a specific way.
101-
* If you want for example to have a hiearchical menu of categories, objects in your index
101+
* If you want for example to have a hierarchical menu of categories, objects in your index
102102
* should be formatted this way:
103103
*
104104
* ```json

0 commit comments

Comments
 (0)