Skip to content

Commit 2e6137b

Browse files
yannickcryannickcr
authored
feat(infiniteHits): add previous button (#3675)
1 parent 387f41f commit 2e6137b

File tree

17 files changed

+904
-27
lines changed

17 files changed

+904
-27
lines changed

‎.storybook/MemoryRouter.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { action } from '@storybook/addon-actions';
2+
3+
const urlLogger = action('Routing state');
4+
5+
interface MemoryState {
6+
[key: string]: string | number;
7+
}
8+
9+
export class MemoryRouter {
10+
private _memoryState: MemoryState;
11+
constructor(initialState: MemoryState = {}) {
12+
this._memoryState = initialState;
13+
}
14+
write(routeState: MemoryState) {
15+
this._memoryState = routeState;
16+
urlLogger(JSON.stringify(routeState, null, 2));
17+
}
18+
read() {
19+
return this._memoryState;
20+
}
21+
createURL() {
22+
return '';
23+
}
24+
onUpdate() {
25+
return {};
26+
}
27+
}

‎.storybook/preview-head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.1/themes/algolia.min.css">
1+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia.min.css">
22
<link rel="stylesheet" href="storybook.css">

‎src/components/InfiniteHits/InfiniteHits.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import Template from '../Template/Template';
66
const InfiniteHits = ({
77
results,
88
hits,
9+
hasShowPrevious,
10+
showPrevious,
911
showMore,
12+
isFirstPage,
1013
isLastPage,
1114
cssClasses,
1215
templateProps,
@@ -26,6 +29,21 @@ const InfiniteHits = ({
2629

2730
return (
2831
<div className={cssClasses.root}>
32+
{hasShowPrevious && (
33+
<Template
34+
{...templateProps}
35+
templateKey="showPreviousText"
36+
rootTagName="button"
37+
rootProps={{
38+
className: cx(cssClasses.loadPrevious, {
39+
[cssClasses.disabledLoadPrevious]: isFirstPage,
40+
}),
41+
disabled: isFirstPage,
42+
onClick: showPrevious,
43+
}}
44+
/>
45+
)}
46+
2947
<ol className={cssClasses.list}>
3048
{hits.map((hit, position) => (
3149
<Template
@@ -64,13 +82,18 @@ InfiniteHits.propTypes = {
6482
emptyRoot: PropTypes.string.isRequired,
6583
list: PropTypes.string.isRequired,
6684
item: PropTypes.string.isRequired,
85+
loadPrevious: PropTypes.string.isRequired,
86+
disabledLoadPrevious: PropTypes.string.isRequired,
6787
loadMore: PropTypes.string.isRequired,
6888
disabledLoadMore: PropTypes.string.isRequired,
6989
}).isRequired,
7090
hits: PropTypes.array.isRequired,
7191
results: PropTypes.object.isRequired,
72-
showMore: PropTypes.func,
92+
hasShowPrevious: PropTypes.bool.isRequired,
93+
showPrevious: PropTypes.func.isRequired,
94+
showMore: PropTypes.func.isRequired,
7395
templateProps: PropTypes.object.isRequired,
96+
isFirstPage: PropTypes.bool.isRequired,
7497
isLastPage: PropTypes.bool.isRequired,
7598
};
7699

‎src/components/InfiniteHits/__tests__/InfiniteHits-test.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ describe('InfiniteHits', () => {
88
emptyRoot: 'emptyRoot',
99
item: 'item',
1010
list: 'list',
11+
loadPrevious: 'loadPrevious',
12+
disabledLoadPrevious: 'disabledLoadPrevious',
1113
loadMore: 'loadMore',
1214
disabledLoadMore: 'disabledLoadMore',
1315
};
@@ -26,8 +28,12 @@ describe('InfiniteHits', () => {
2628
];
2729

2830
const props = {
31+
hasShowPrevious: false,
32+
showPrevious: () => {},
33+
showMore: () => {},
2934
results: { hits },
3035
hits,
36+
isFirstPage: true,
3137
isLastPage: false,
3238
templateProps: {
3339
templates: {
@@ -56,8 +62,12 @@ describe('InfiniteHits', () => {
5662
];
5763

5864
const props = {
65+
hasShowPrevious: false,
66+
showPrevious: () => {},
67+
showMore: () => {},
5968
results: { hits },
6069
hits,
70+
isFirstPage: false,
6171
isLastPage: true,
6272
templateProps: {
6373
templates: {
@@ -77,8 +87,12 @@ describe('InfiniteHits', () => {
7787
const hits = [];
7888

7989
const props = {
90+
hasShowPrevious: false,
91+
showPrevious: () => {},
92+
showMore: () => {},
8093
results: { hits },
8194
hits,
95+
isFirstPage: true,
8296
isLastPage: false,
8397
templateProps: {
8498
templates: {
@@ -98,8 +112,12 @@ describe('InfiniteHits', () => {
98112
const hits = [];
99113

100114
const props = {
115+
hasShowPrevious: false,
116+
showPrevious: () => {},
117+
showMore: () => {},
101118
results: { hits },
102119
hits,
120+
isFirstPage: false,
103121
isLastPage: true,
104122
templateProps: {
105123
templates: {
@@ -114,5 +132,85 @@ describe('InfiniteHits', () => {
114132

115133
expect(tree).toMatchSnapshot();
116134
});
135+
136+
it('should render <InfiniteHits /> with "Show previous" button on first page', () => {
137+
const hits = [
138+
{
139+
objectID: 'one',
140+
foo: 'bar',
141+
},
142+
{
143+
objectID: 'two',
144+
foo: 'baz',
145+
},
146+
];
147+
148+
const props = {
149+
hasShowPrevious: true,
150+
showPrevious: () => {},
151+
showMore: () => {},
152+
results: { hits },
153+
hits,
154+
isFirstPage: true,
155+
isLastPage: false,
156+
templateProps: {
157+
templates: {
158+
item: 'item',
159+
showMoreText: 'showMoreText',
160+
showPreviousText: 'showPreviousText',
161+
},
162+
},
163+
cssClasses,
164+
};
165+
166+
const tree = mount(<InfiniteHits {...props} />);
167+
168+
const previousButton = tree.find('.loadPrevious');
169+
170+
expect(previousButton.exists()).toEqual(true);
171+
expect(previousButton.hasClass('disabledLoadPrevious')).toEqual(true);
172+
expect(previousButton.props().disabled).toEqual(true);
173+
expect(tree).toMatchSnapshot();
174+
});
175+
176+
it('should render <InfiniteHits /> with "Show previous" button on last page', () => {
177+
const hits = [
178+
{
179+
objectID: 'one',
180+
foo: 'bar',
181+
},
182+
{
183+
objectID: 'two',
184+
foo: 'baz',
185+
},
186+
];
187+
188+
const props = {
189+
hasShowPrevious: true,
190+
showPrevious: () => {},
191+
showMore: () => {},
192+
results: { hits },
193+
hits,
194+
isFirstPage: false,
195+
isLastPage: true,
196+
templateProps: {
197+
templates: {
198+
item: 'item',
199+
showMoreText: 'showMoreText',
200+
showPreviousText: 'showPreviousText',
201+
},
202+
},
203+
cssClasses,
204+
};
205+
206+
const tree = mount(<InfiniteHits {...props} />);
207+
208+
const previousButton = tree.find('.loadPrevious');
209+
210+
expect(previousButton.exists()).toEqual(true);
211+
expect(previousButton.hasClass('disabledLoadPrevious')).toEqual(false);
212+
expect(previousButton.props().disabled).toEqual(false);
213+
expect(tree).toMatchSnapshot();
214+
});
117215
});
118216
});

‎src/components/InfiniteHits/__tests__/__snapshots__/InfiniteHits-test.js.snap‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ exports[`InfiniteHits markup should render <InfiniteHits /> on first page 1`] =
3232
}
3333
}
3434
disabled={false}
35+
onClick={[Function]}
3536
/>
3637
</div>
3738
`;
@@ -68,6 +69,101 @@ exports[`InfiniteHits markup should render <InfiniteHits /> on last page 1`] = `
6869
}
6970
}
7071
disabled={true}
72+
onClick={[Function]}
73+
/>
74+
</div>
75+
`;
76+
77+
exports[`InfiniteHits markup should render <InfiniteHits /> with "Show previous" button on first page 1`] = `
78+
<div
79+
className="root"
80+
>
81+
<button
82+
className="loadPrevious disabledLoadPrevious"
83+
dangerouslySetInnerHTML={
84+
Object {
85+
"__html": "showPreviousText",
86+
}
87+
}
88+
disabled={true}
89+
onClick={[Function]}
90+
/>
91+
<ol
92+
className="list"
93+
>
94+
<li
95+
className="item"
96+
dangerouslySetInnerHTML={
97+
Object {
98+
"__html": "item",
99+
}
100+
}
101+
/>
102+
<li
103+
className="item"
104+
dangerouslySetInnerHTML={
105+
Object {
106+
"__html": "item",
107+
}
108+
}
109+
/>
110+
</ol>
111+
<button
112+
className="loadMore"
113+
dangerouslySetInnerHTML={
114+
Object {
115+
"__html": "showMoreText",
116+
}
117+
}
118+
disabled={false}
119+
onClick={[Function]}
120+
/>
121+
</div>
122+
`;
123+
124+
exports[`InfiniteHits markup should render <InfiniteHits /> with "Show previous" button on last page 1`] = `
125+
<div
126+
className="root"
127+
>
128+
<button
129+
className="loadPrevious"
130+
dangerouslySetInnerHTML={
131+
Object {
132+
"__html": "showPreviousText",
133+
}
134+
}
135+
disabled={false}
136+
onClick={[Function]}
137+
/>
138+
<ol
139+
className="list"
140+
>
141+
<li
142+
className="item"
143+
dangerouslySetInnerHTML={
144+
Object {
145+
"__html": "item",
146+
}
147+
}
148+
/>
149+
<li
150+
className="item"
151+
dangerouslySetInnerHTML={
152+
Object {
153+
"__html": "item",
154+
}
155+
}
156+
/>
157+
</ol>
158+
<button
159+
className="loadMore disabledLoadMore"
160+
dangerouslySetInnerHTML={
161+
Object {
162+
"__html": "showMoreText",
163+
}
164+
}
165+
disabled={true}
166+
onClick={[Function]}
71167
/>
72168
</div>
73169
`;

0 commit comments

Comments
 (0)