Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(refinementList): show more count #5593

Open
wants to merge 41 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
0a17972
feat(refinementList): show more count
mikedavis77 Apr 12, 2023
52c3811
feat(refinementList): updated react test
mikedavis77 Apr 12, 2023
86c4020
feat(refinementList): updated count check
mikedavis77 Apr 17, 2023
cdae18c
feat(refinementList): updated tests
mikedavis77 Apr 17, 2023
fed1d7c
Merge branch 'master' into feat/refinement-list-show-more-count
mikedavis77 Apr 17, 2023
b4ce94b
feat(refinementList): Applied change to hierarchicalMenu & menu
mikedavis77 Apr 19, 2023
2c0b70f
feat(refinementList): updated tests
mikedavis77 Apr 20, 2023
bf50452
feat(refinementList): updated tests
mikedavis77 Apr 21, 2023
a84d505
feat(refinementList): updated storybook
mikedavis77 Apr 21, 2023
a68b0ac
feat(refinementList): show more count
mikedavis77 Apr 12, 2023
b3b77e3
feat(refinementList): updated react test
mikedavis77 Apr 12, 2023
8a97806
feat(refinementList): updated count check
mikedavis77 Apr 17, 2023
b06f2ad
feat(refinementList): updated tests
mikedavis77 Apr 17, 2023
f78041b
feat(refinementList): Applied change to hierarchicalMenu & menu
mikedavis77 Apr 19, 2023
ab54c9d
feat(refinementList): updated tests
mikedavis77 Apr 20, 2023
ef3b18a
feat(refinementList): updated tests
mikedavis77 Apr 21, 2023
0a8dd3b
Merge branch 'feat/refinement-list-show-more-count' of github.com:alg…
mikedavis77 Apr 26, 2023
68e1d24
feat(refinementList): added new tests
mikedavis77 May 6, 2023
f4a82b6
Merge branch 'master' into feat/refinement-list-show-more-count
mikedavis77 May 6, 2023
21fadcf
feat(refinementList): added new tests
mikedavis77 May 6, 2023
af8a5fa
Apply suggestions from code review
mikedavis77 May 17, 2023
c6be31f
fix lint errors
mikedavis77 May 17, 2023
5aa3037
updated Vue package with showMoreCount
mikedavis77 May 17, 2023
e98802a
Merge branch 'master' into feat/refinement-list-show-more-count
mikedavis77 Jul 3, 2023
666e359
feat(refinementList): show more count
mikedavis77 Apr 12, 2023
22e7ef7
feat(refinementList): updated react test
mikedavis77 Apr 12, 2023
08b9e2b
feat(refinementList): updated count check
mikedavis77 Apr 17, 2023
e6151fc
feat(refinementList): updated tests
mikedavis77 Apr 17, 2023
bd85946
feat(refinementList): Applied change to hierarchicalMenu & menu
mikedavis77 Apr 19, 2023
edd04bb
feat(refinementList): updated tests
mikedavis77 Apr 20, 2023
c16b4b7
feat(refinementList): updated tests
mikedavis77 Apr 21, 2023
f1282a7
feat(refinementList): updated storybook
mikedavis77 Apr 21, 2023
3bc5eea
merge conflict from rebase
mikedavis77 Jan 25, 2024
92977be
feat(refinementList): updated count check
mikedavis77 Apr 17, 2023
188f752
feat(refinementList): added new tests
mikedavis77 May 6, 2023
493912f
feat(refinementList): added new tests
mikedavis77 May 6, 2023
4875312
Apply suggestions from code review
mikedavis77 May 17, 2023
50c41fb
fix lint errors
mikedavis77 May 17, 2023
b00aa8b
updated Vue package with showMoreCount
mikedavis77 May 17, 2023
2a562d2
Merge branch 'feat/refinement-list-show-more-count' of github.com:alg…
mikedavis77 Jan 25, 2024
825f8be
refactoring: move show more count tests to common suite (#5638)
dhayab Jan 26, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export type RefinementListProps<TTemplates extends Templates> = {
showMore?: boolean;
toggleShowMore?: () => void;
isShowingMore?: boolean;
showMoreCount?: number;
hasExhaustiveItems?: boolean;
canToggleShowMore?: boolean;
className?: string;
Expand Down Expand Up @@ -302,6 +303,7 @@ class RefinementList<TTemplates extends Templates> extends Component<
}}
data={{
isShowingMore: this.props.isShowingMore,
showMoreCount: this.props.showMoreCount,
}}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -620,6 +620,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
attributes: ['anotherCategory', 'anotherSubCategory'],
},
isShowingMore: false,
showMoreCount: 0,
toggleShowMore: () => {},
canToggleShowMore: false,
},
Expand All @@ -641,6 +642,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
sendEvent: expect.any(Function),
widgetParams: { attributes: ['category', 'subCategory'] },
isShowingMore: false,
showMoreCount: 0,
toggleShowMore: expect.any(Function),
canToggleShowMore: false,
},
Expand Down Expand Up @@ -713,6 +715,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
sendEvent: expect.any(Function),
widgetParams: { attributes: ['category', 'subCategory'] },
isShowingMore: false,
showMoreCount: 0,
toggleShowMore: expect.any(Function),
canToggleShowMore: false,
});
Expand Down Expand Up @@ -751,6 +754,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
createURL: expect.any(Function),
widgetParams: { attributes: ['category', 'subCategory'] },
isShowingMore: false,
showMoreCount: 0,
toggleShowMore: expect.any(Function),
canToggleShowMore: false,
});
Expand Down Expand Up @@ -821,6 +825,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
createURL: expect.any(Function),
widgetParams: { attributes: ['category', 'subCategory'] },
isShowingMore: false,
showMoreCount: 0,
toggleShowMore: expect.any(Function),
canToggleShowMore: false,
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,10 @@ export type HierarchicalMenuRenderState = {
* True if the menu is displaying all the menu items.
*/
isShowingMore: boolean;
/**
* Total number of facet values that can be displayed for 'show more'.
*/
showMoreCount: number;
/**
* Toggles the number of values displayed between `limit` and `showMoreLimit`.
*/
Expand Down Expand Up @@ -222,6 +226,7 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
let _refine: HierarchicalMenuRenderState['refine'] | undefined;

let isShowingMore = false;
let showMoreCount = 0;

function createToggleShowMore(
renderOptions: RenderOptions,
Expand Down Expand Up @@ -347,6 +352,7 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
}

if (results) {
const currentLimit = getLimit();
const facetValues = results.getFacetValues(hierarchicalFacetName, {
sortBy,
facetOrdering: sortBy === DEFAULT_SORT,
Expand All @@ -363,9 +369,17 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
// Because this is used for making the search of facets unable or not, it is important
// to be conservative here.
const hasExhaustiveItems =
(state.maxValuesPerFacet || 0) > getLimit()
? facetItems.length <= getLimit()
: facetItems.length < getLimit();
(state.maxValuesPerFacet || 0) > currentLimit
? facetItems.length <= currentLimit
: facetItems.length < currentLimit;

if (showMore) {
const showMoreTotalCount = Math.min(
showMoreLimit,
facetItems.length
);
showMoreCount = showMoreTotalCount - currentLimit;
}

canToggleShowMore =
showMore && (isShowingMore || !hasExhaustiveItems);
Expand All @@ -383,6 +397,7 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
sendEvent,
widgetParams,
isShowingMore,
showMoreCount,
toggleShowMore: cachedToggleShowMore,
canToggleShowMore,
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -628,6 +628,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
sendEvent: expect.any(Function),
canRefine: false,
isShowingMore: false,
showMoreCount: 0,
toggleShowMore: expect.any(Function),
canToggleShowMore: false,
widgetParams: { attribute: 'brand' },
Expand Down Expand Up @@ -673,6 +674,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
createURL: expect.any(Function),
widgetParams: { attribute: 'brand' },
isShowingMore: false,
showMoreCount: 0,
toggleShowMore: expect.any(Function),
canToggleShowMore: false,
},
Expand Down Expand Up @@ -706,6 +708,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
sendEvent: expect.any(Function),
canRefine: false,
isShowingMore: false,
showMoreCount: 0,
toggleShowMore: expect.any(Function),
canToggleShowMore: false,
widgetParams: { attribute: 'brand' },
Expand Down Expand Up @@ -765,6 +768,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
sendEvent: expect.any(Function),
canRefine: true,
isShowingMore: false,
showMoreCount: 0,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there should probably be a test where showMoreCount isn't 0

toggleShowMore: expect.any(Function),
canToggleShowMore: false,
widgetParams: { attribute: 'brand' },
Expand Down
19 changes: 17 additions & 2 deletions packages/instantsearch.js/src/connectors/menu/connectMenu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,10 @@ export type MenuRenderState = {
* True if the menu is displaying all the menu items.
*/
isShowingMore: boolean;
/**
* Total number of facet values that can be displayed for 'show more'.
*/
showMoreCount: number;
/**
* Toggles the number of values displayed between `limit` and `showMore.limit`.
*/
Expand Down Expand Up @@ -182,6 +186,7 @@ const connectMenu: MenuConnector = function connectMenu(
// Provide the same function to the `renderFn` so that way the user
// has to only bind it once when `isFirstRendering` for instance
let isShowingMore = false;
let showMoreCount = 0;
let toggleShowMore = () => {};
function createToggleShowMore(
renderOptions: RenderOptions,
Expand Down Expand Up @@ -289,6 +294,7 @@ const connectMenu: MenuConnector = function connectMenu(
}

if (results) {
const currentLimit = getLimit();
const facetValues = results.getFacetValues(attribute, {
sortBy,
facetOrdering: sortBy === DEFAULT_SORT,
Expand All @@ -298,12 +304,20 @@ const connectMenu: MenuConnector = function connectMenu(
? facetValues.data
: [];

if (showMore) {
const showMoreTotalCount = Math.min(
showMoreLimit,
facetItems.length
);
showMoreCount = showMoreTotalCount - currentLimit;
Comment on lines +308 to +312
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if the number given to the template shouldn't be showMoreTotalCount, as that's the number of items that will be visible. Not "show x more items", but "10 items / 13 items". You can still easily calculate "total - current" to get the difference. What do you think?

}

canToggleShowMore =
showMore && (isShowingMore || facetItems.length > getLimit());
showMore && (isShowingMore || facetItems.length > currentLimit);

items = transformItems(
facetItems
.slice(0, getLimit())
.slice(0, currentLimit)
.map(({ name: label, escapedValue: value, path, ...item }) => ({
...item,
label,
Expand All @@ -321,6 +335,7 @@ const connectMenu: MenuConnector = function connectMenu(
canRefine: items.length > 0,
widgetParams,
isShowingMore,
showMoreCount,
toggleShowMore: cachedToggleShowMore,
canToggleShowMore,
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1091,6 +1091,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
showMoreLimit: 2,
},
isShowingMore: false,
showMoreCount: 1,
canToggleShowMore: true,
toggleShowMore: expect.any(Function),
hasExhaustiveItems: false,
Expand Down Expand Up @@ -1125,6 +1126,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
showMoreLimit: 2,
},
isShowingMore: false,
showMoreCount: 1,
canToggleShowMore: false,
toggleShowMore: expect.any(Function),
hasExhaustiveItems: false,
Expand Down Expand Up @@ -1160,6 +1162,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
showMoreLimit: 2,
},
isShowingMore: false,
showMoreCount: 1,
canToggleShowMore: true,
toggleShowMore: expect.any(Function),
hasExhaustiveItems: false,
Expand Down Expand Up @@ -1201,6 +1204,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
showMoreLimit: 2,
},
isShowingMore: true,
showMoreCount: 0,
canToggleShowMore: true,
toggleShowMore: expect.any(Function),
hasExhaustiveItems: false,
Expand Down Expand Up @@ -2455,6 +2459,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
hasExhaustiveItems: true,
isFromSearch: false,
isShowingMore: false,
showMoreCount: 0,
items: [],
refine: expect.any(Function),
searchForItems: expect.any(Function),
Expand Down Expand Up @@ -2515,6 +2520,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
hasExhaustiveItems: true,
isFromSearch: false,
isShowingMore: false,
showMoreCount: 0,
items: [
{
count: 88,
Expand Down Expand Up @@ -2575,6 +2581,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
hasExhaustiveItems: true,
isFromSearch: false,
isShowingMore: false,
showMoreCount: 0,
items: [],
refine: expect.any(Function),
searchForItems: expect.any(Function),
Expand Down Expand Up @@ -2618,6 +2625,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
hasExhaustiveItems: true,
isFromSearch: false,
isShowingMore: false,
showMoreCount: 0,
items: [],
refine: expect.any(Function),
searchForItems: expect.any(Function),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,10 @@ export type RefinementListRenderState = {
* True if the menu is displaying all the menu items.
*/
isShowingMore: boolean;
/**
* Total number of facet values that can be displayed for 'show more'.
*/
showMoreCount: number;
/**
* Toggles the number of values displayed between `limit` and `showMoreLimit`.
*/
Expand Down Expand Up @@ -235,6 +239,7 @@ const connectRefinementList: RefinementListConnector =
let sendEvent: RefinementListRenderState['sendEvent'] | undefined;

let isShowingMore = false;
let showMoreCount = 0;
// Provide the same function to the `renderFn` so that way the user
// has to only bind it once when `isFirstRendering` for instance
let toggleShowMore = () => {};
Expand Down Expand Up @@ -322,6 +327,7 @@ const connectRefinementList: RefinementListConnector =
}),
items: normalizedFacetValues,
canToggleShowMore: false,
showMoreCount,
canRefine: true,
isFromSearch: true,
instantSearchInstance,
Expand Down Expand Up @@ -371,6 +377,7 @@ const connectRefinementList: RefinementListConnector =
renderOptions;
let items: RefinementListItem[] = [];
let facetValues: SearchResults.FacetValue[] | FacetHit[] = [];
showMoreCount = 0;

if (!sendEvent || !triggerRefine || !searchForFacetValues) {
sendEvent = createSendEventForFacet({
Expand Down Expand Up @@ -415,6 +422,14 @@ const connectRefinementList: RefinementListConnector =
lastResultsFromMainSearch = results;
lastItemsFromMainSearch = items;

if (showMore) {
const showMoreTotalCount = Math.min(
showMoreLimit,
facetValues.length
);
showMoreCount = showMoreTotalCount - currentLimit;
}

if (renderOptions.results) {
toggleShowMore = createToggleShowMore(renderOptions, this);
}
Expand Down Expand Up @@ -443,6 +458,7 @@ const connectRefinementList: RefinementListConnector =
canRefine: items.length > 0,
widgetParams,
isShowingMore,
showMoreCount,
canToggleShowMore,
toggleShowMore: cachedToggleShowMore,
sendEvent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ type HierarchicalMenuTemplates = Partial<{
cssClasses: HierarchicalMenuCSSClasses;
}>;
/**
* Template used for the show more text, provided with `isShowingMore` data property.
* Template used for the show more text, provided with `isShowingMore`, `showMoreCount` data properties.
*/
showMoreText: Template<{ isShowingMore: boolean }>;
showMoreText: Template<{ isShowingMore: boolean; showMoreCount: number }>;
}>;

export type HierarchicalMenuCSSClasses = Partial<{
Expand Down Expand Up @@ -208,6 +208,7 @@ const renderer =
refine,
instantSearchInstance,
isShowingMore,
showMoreCount,
toggleShowMore,
canToggleShowMore,
}: HierarchicalMenuRenderState &
Expand All @@ -233,6 +234,7 @@ const renderer =
showMore={showMore}
toggleShowMore={toggleShowMore}
isShowingMore={isShowingMore}
showMoreCount={showMoreCount}
canToggleShowMore={canToggleShowMore}
/>,
containerNode
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ exports[`menu render renders transformed items 1`] = `
],
"isShowingMore": false,
"showMore": undefined,
"showMoreCount": 0,
"templateProps": {
"templates": {
"item": [Function],
Expand Down Expand Up @@ -96,6 +97,7 @@ exports[`menu render snapshot 1`] = `
],
"isShowingMore": false,
"showMore": undefined,
"showMoreCount": 0,
"templateProps": {
"templates": {
"item": [Function],
Expand Down
Loading