Skip to content

Commit

Permalink
feat(infiniteHits): add previous button (#3645)
Browse files Browse the repository at this point in the history
  • Loading branch information
yannickcr authored Apr 10, 2019
1 parent db9b91e commit 2c9e38d
Show file tree
Hide file tree
Showing 17 changed files with 838 additions and 27 deletions.
27 changes: 27 additions & 0 deletions .storybook/MemoryRouter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { action } from '@storybook/addon-actions';

const urlLogger = action('Routing state');

interface MemoryState {
[key: string]: string | number;
}

export class MemoryRouter {
private _memoryState: MemoryState;
constructor(initialState: MemoryState = {}) {
this._memoryState = initialState;
}
write(routeState: MemoryState) {
this._memoryState = routeState;
urlLogger(JSON.stringify(routeState, null, 2));
}
read() {
return this._memoryState;
}
createURL() {
return '';
}
onUpdate() {
return {};
}
}
2 changes: 1 addition & 1 deletion .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.1/themes/algolia.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.2.0/themes/algolia.min.css">
<link rel="stylesheet" href="storybook.css">
25 changes: 24 additions & 1 deletion src/components/InfiniteHits/InfiniteHits.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import Template from '../Template/Template';
const InfiniteHits = ({
results,
hits,
hasShowPrevious,
showPrevious,
showMore,
isFirstPage,
isLastPage,
cssClasses,
templateProps,
Expand All @@ -26,6 +29,21 @@ const InfiniteHits = ({

return (
<div className={cssClasses.root}>
{hasShowPrevious && (
<Template
{...templateProps}
templateKey="showPreviousText"
rootTagName="button"
rootProps={{
className: cx(cssClasses.loadPrevious, {
[cssClasses.disabledLoadPrevious]: isFirstPage,
}),
disabled: isFirstPage,
onClick: showPrevious,
}}
/>
)}

<ol className={cssClasses.list}>
{hits.map((hit, position) => (
<Template
Expand Down Expand Up @@ -64,13 +82,18 @@ InfiniteHits.propTypes = {
emptyRoot: PropTypes.string.isRequired,
list: PropTypes.string.isRequired,
item: PropTypes.string.isRequired,
loadPrevious: PropTypes.string.isRequired,
disabledLoadPrevious: PropTypes.string.isRequired,
loadMore: PropTypes.string.isRequired,
disabledLoadMore: PropTypes.string.isRequired,
}).isRequired,
hits: PropTypes.array.isRequired,
results: PropTypes.object.isRequired,
showMore: PropTypes.func,
hasShowPrevious: PropTypes.bool.isRequired,
showPrevious: PropTypes.func.isRequired,
showMore: PropTypes.func.isRequired,
templateProps: PropTypes.object.isRequired,
isFirstPage: PropTypes.bool.isRequired,
isLastPage: PropTypes.bool.isRequired,
};

Expand Down
98 changes: 98 additions & 0 deletions src/components/InfiniteHits/__tests__/InfiniteHits-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ describe('InfiniteHits', () => {
emptyRoot: 'emptyRoot',
item: 'item',
list: 'list',
loadPrevious: 'loadPrevious',
disabledLoadPrevious: 'disabledLoadPrevious',
loadMore: 'loadMore',
disabledLoadMore: 'disabledLoadMore',
};
Expand All @@ -26,8 +28,12 @@ describe('InfiniteHits', () => {
];

const props = {
hasShowPrevious: false,
showPrevious: () => {},
showMore: () => {},
results: { hits },
hits,
isFirstPage: true,
isLastPage: false,
templateProps: {
templates: {
Expand Down Expand Up @@ -56,8 +62,12 @@ describe('InfiniteHits', () => {
];

const props = {
hasShowPrevious: false,
showPrevious: () => {},
showMore: () => {},
results: { hits },
hits,
isFirstPage: false,
isLastPage: true,
templateProps: {
templates: {
Expand All @@ -77,8 +87,12 @@ describe('InfiniteHits', () => {
const hits = [];

const props = {
hasShowPrevious: false,
showPrevious: () => {},
showMore: () => {},
results: { hits },
hits,
isFirstPage: true,
isLastPage: false,
templateProps: {
templates: {
Expand All @@ -98,8 +112,12 @@ describe('InfiniteHits', () => {
const hits = [];

const props = {
hasShowPrevious: false,
showPrevious: () => {},
showMore: () => {},
results: { hits },
hits,
isFirstPage: false,
isLastPage: true,
templateProps: {
templates: {
Expand All @@ -114,5 +132,85 @@ describe('InfiniteHits', () => {

expect(tree).toMatchSnapshot();
});

it('should render <InfiniteHits /> with "Show previous" button on first page', () => {
const hits = [
{
objectID: 'one',
foo: 'bar',
},
{
objectID: 'two',
foo: 'baz',
},
];

const props = {
hasShowPrevious: true,
showPrevious: () => {},
showMore: () => {},
results: { hits },
hits,
isFirstPage: true,
isLastPage: false,
templateProps: {
templates: {
item: 'item',
showMoreText: 'showMoreText',
showPreviousText: 'showPreviousText',
},
},
cssClasses,
};

const tree = mount(<InfiniteHits {...props} />);

const previousButton = tree.find('.loadPrevious');

expect(previousButton.exists()).toEqual(true);
expect(previousButton.hasClass('disabledLoadPrevious')).toEqual(true);
expect(previousButton.props().disabled).toEqual(true);
expect(tree).toMatchSnapshot();
});

it('should render <InfiniteHits /> with "Show previous" button on last page', () => {
const hits = [
{
objectID: 'one',
foo: 'bar',
},
{
objectID: 'two',
foo: 'baz',
},
];

const props = {
hasShowPrevious: true,
showPrevious: () => {},
showMore: () => {},
results: { hits },
hits,
isFirstPage: false,
isLastPage: true,
templateProps: {
templates: {
item: 'item',
showMoreText: 'showMoreText',
showPreviousText: 'showPreviousText',
},
},
cssClasses,
};

const tree = mount(<InfiniteHits {...props} />);

const previousButton = tree.find('.loadPrevious');

expect(previousButton.exists()).toEqual(true);
expect(previousButton.hasClass('disabledLoadPrevious')).toEqual(false);
expect(previousButton.props().disabled).toEqual(false);
expect(tree).toMatchSnapshot();
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ exports[`InfiniteHits markup should render <InfiniteHits /> on first page 1`] =
}
}
disabled={false}
onClick={[Function]}
/>
</div>
`;
Expand Down Expand Up @@ -68,6 +69,101 @@ exports[`InfiniteHits markup should render <InfiniteHits /> on last page 1`] = `
}
}
disabled={true}
onClick={[Function]}
/>
</div>
`;

exports[`InfiniteHits markup should render <InfiniteHits /> with "Show previous" button on first page 1`] = `
<div
className="root"
>
<button
className="loadPrevious disabledLoadPrevious"
dangerouslySetInnerHTML={
Object {
"__html": "showPreviousText",
}
}
disabled={true}
onClick={[Function]}
/>
<ol
className="list"
>
<li
className="item"
dangerouslySetInnerHTML={
Object {
"__html": "item",
}
}
/>
<li
className="item"
dangerouslySetInnerHTML={
Object {
"__html": "item",
}
}
/>
</ol>
<button
className="loadMore"
dangerouslySetInnerHTML={
Object {
"__html": "showMoreText",
}
}
disabled={false}
onClick={[Function]}
/>
</div>
`;

exports[`InfiniteHits markup should render <InfiniteHits /> with "Show previous" button on last page 1`] = `
<div
className="root"
>
<button
className="loadPrevious"
dangerouslySetInnerHTML={
Object {
"__html": "showPreviousText",
}
}
disabled={false}
onClick={[Function]}
/>
<ol
className="list"
>
<li
className="item"
dangerouslySetInnerHTML={
Object {
"__html": "item",
}
}
/>
<li
className="item"
dangerouslySetInnerHTML={
Object {
"__html": "item",
}
}
/>
</ol>
<button
className="loadMore disabledLoadMore"
dangerouslySetInnerHTML={
Object {
"__html": "showMoreText",
}
}
disabled={true}
onClick={[Function]}
/>
</div>
`;
Expand Down
Loading

0 comments on commit 2c9e38d

Please sign in to comment.