feat(breadcrumb): Add the breadcrumb widget #2451

marielaures · 2017-10-04T15:09:56Z

Summary

Add a breadcrumb widget to improve navigability.
This has already been implemented on React InstantSearch and this pull request aims to provide the same functionality.

Result

…h.js into feat/2.2-breadcrumb

algobot · 2017-10-05T08:56:29Z

Deploy preview ready!

Built with commit 88ded98

https://deploy-preview-2451--algolia-instantsearch.netlify.com

bobylito

Nice job 💯 . Just a few remarks

bobylito · 2017-10-06T10:12:08Z

src/connectors/breadcrumb/connectBreadcrumb.js

+              facetSet.separator !== separator
+            ) {
+              console.warn(
+                'Using Breadcrumb & HierarchicalMenu on the same facet with different options'


Maybe we could be more specific on the next steps. What about adding that one of the configuration will be overriden and that they should check their options?

bobylito · 2017-10-06T10:14:41Z

src/connectors/breadcrumb/connectBreadcrumb.js

+    return {
+      getConfiguration: currentConfiguration => {
+        if (currentConfiguration.hierarchicalFacets) {
+          const facetSet = find(


Should be named isFacetSet instead of facetSet because it's a boolean (and I was confused by the usage of a set here)

bobylito · 2017-10-06T10:17:21Z

src/connectors/breadcrumb/connectBreadcrumb.js

+  }, []);
+}
+
+function processArray(array) {


processArray doesn't say much about the process that is applied to the array. In this case you're shifting the values, what about shiftItemsValues?

bobylito · 2017-10-06T10:20:50Z

src/connectors/breadcrumb/connectBreadcrumb.js

+function processArray(array) {
+  return array.map((x, idx) => ({
+    name: x.name,
+    value: idx + 1 == array.length ? null : array[idx + 1].value,


We should only use == when we want JS to make type coercion automatically. Since we're comparing numbers, it should not be an issue to use ===.

bobylito · 2017-10-06T10:23:46Z

src/widgets/breadcrumb/breadcrumb.js

+ */
+
+/**
+ * The breadcrumb widget is a secondary navigation scheme that allows the user to see where the current page is in relation to the website's hierarchy.


It might be a bit confusing to talk about website hierarchy because search is only a part of the website. I would go for something like 'facet hierarchy', WDYT?

bobylito · 2017-10-06T10:29:29Z

src/components/Breadcrumb/Breadcrumb.js

+          </a>
+        : <a
+            className={cssClasses.label}
+            href={createURL(items[idx].value)}


items[idx] === item so the code can be simplfied here.

bobylito · 2017-10-06T10:36:44Z

src/connectors/breadcrumb/connectBreadcrumb.js

+                  breadcrumb[0]
+                )
+              );
+            } else {


An function which does not explicitly return a value, actually returns undefined. So we don't need the last else block

bobylito · 2017-10-06T10:38:54Z

src/connectors/breadcrumb/connectBreadcrumb.js

+          (Array.isArray(state.hierarchicalFacets) &&
+            state.hierarchicalFacets.length === 0)
+        ) {
+          throw new Error(usage);


This message is sent too late. It should be done as soon as we have all the necessary information. Most likely before returning the widget object.

bobylito · 2017-10-06T10:45:26Z

This widget could be a nice addition to the e-commerce demo.

Review fixes.

bobylito · 2017-10-09T10:12:05Z

I think we're good to go here :) Thanks @marielaures and congrats on your first widget on IS.js, welcome to the contributors 🚀

Let's do the update of demo in another PR ;)

* feat(breadcrumb): kick-off connectBreadcrumb * chore(dev): add breadcrumb into storybook * feat(connectBreadcrumb): remove view logic * feat(widgets): export breadcrumb widget * feat(widget): breadcrumb * feat(component): kick-off breadcrumb component * feat(Breadcrumb): WIP * feat(Breadcrumb): modified separator * feat(Breadcrumb): display breadcrumb (without any links) * feat(Breadcrumb): WIP * feat(Breadcrumb): add css classes * feat(Breadcrumb): working on styling * feat(Breadcrumb): modified onClick prop * feat(Breadcrumb): Add headerFooter + autoHideContainer * feat(Breadcrumb): documentation * feat(Breadcrumb): remove cssClass root * enable use as a standalone widget * add template to widget * add custom label story * first series of tests * add logic for the onclick on "Home" * add templates for home and separator * warn the user if there's already a Breadcrumb used with the same facet * add cssClasses * add lifecycle test * modify template so it re renders when rootProps are modified * modify css classes applied to the home label * change the separator in the theme * more tests for connectBreadcrumb * add documentation * add createUrl + some refactoring * add default selected item story * WIP * WIP - fixing response data for hierarchical values * add createUrl + rootPath * add default selected item story * WIP * chore(test): test on second value * feat(Breadcrumb): update API of the connector * fix(dep): use same casing for isEqual * chore(doc): fix misc. errors * chore(breadcrumb): add more docs and validation * various code improvements Review fixes. Fix #2299

<a name=2.3.0-beta.1></a> # [2.3.0-beta.1](v2.2.0...v2.3.0-beta.1) (2017-10-16) ### Bug Fixes * **connectRangeSlider:** only clear the refinement on the current attribute ([#2459](#2459)) ([7cebf58](7cebf58)) * **menuSelect:** select in userCssClasses ([#2455](#2455)) ([0eb3dc8](0eb3dc8)) ### Features * **breadcrumb:** Add the breadcrumb widget ([#2451](#2451)) ([076e063](076e063)), closes [#2299](#2299) * **rangeInput:** add rangeInput widget ([#2440](#2440)) ([4be1ee8](4be1ee8))

* feat(breadcrumb): kick-off connectBreadcrumb * chore(dev): add breadcrumb into storybook * feat(connectBreadcrumb): remove view logic * feat(widgets): export breadcrumb widget * feat(widget): breadcrumb * feat(component): kick-off breadcrumb component * feat(Breadcrumb): WIP * feat(Breadcrumb): modified separator * feat(Breadcrumb): display breadcrumb (without any links) * feat(Breadcrumb): WIP * feat(Breadcrumb): add css classes * feat(Breadcrumb): working on styling * feat(Breadcrumb): modified onClick prop * feat(Breadcrumb): Add headerFooter + autoHideContainer * feat(Breadcrumb): documentation * feat(Breadcrumb): remove cssClass root * enable use as a standalone widget * add template to widget * add custom label story * first series of tests * add logic for the onclick on "Home" * add templates for home and separator * warn the user if there's already a Breadcrumb used with the same facet * add cssClasses * add lifecycle test * modify template so it re renders when rootProps are modified * modify css classes applied to the home label * change the separator in the theme * more tests for connectBreadcrumb * add documentation * add createUrl + some refactoring * add default selected item story * WIP * WIP - fixing response data for hierarchical values * add createUrl + rootPath * add default selected item story * WIP * chore(test): test on second value * feat(Breadcrumb): update API of the connector * fix(dep): use same casing for isEqual * chore(doc): fix misc. errors * chore(breadcrumb): add more docs and validation * various code improvements Review fixes. Fix #2299

<a name=2.3.0-beta.2></a> # [2.3.0-beta.2](v2.2.1...v2.3.0-beta.2) (2017-10-24) ### Bug Fixes * **connectHierarchicalMenu:** do not return if facet not set ([#2521](#2521)) ([26e99fb](26e99fb)) * **MenuSelect:** switch from react to preact-compat ([#2513](#2513)) ([06aa626](06aa626)) * **range-slider:** add option ([#2502](#2502)) ([e78399d](e78399d)), closes [#2501](#2501) ### Features * **breadcrumb:** Add the breadcrumb widget ([#2451](#2451)) ([11d78f0](11d78f0)), closes [#2299](#2299) * **connectRange:** round the range based on precision ([#2498](#2498)) ([d4df45d](d4df45d)) * **rangeInput:** add rangeInput widget ([#2440](#2440)) ([7916d16](7916d16))

<a name=2.3.0-beta.4></a> # [2.3.0-beta.4](v2.2.4...v2.3.0-beta.4) (2017-11-13) ### Features * **core:** InstantSearch hot remove/add widgets ([#2384](#2384)) ([cfc1710](cfc1710)) <a name=2.3.0-beta.3></a> # [2.3.0-beta.3](v2.3.0-beta.2...v2.3.0-beta.3) (2017-10-25) ### Bug Fixes * **connectors:** export as well ([0b78d75](0b78d75)) ### Features * **refinementList:** add escapeFacetHits parameter ([#2507](#2507)) ([9b1b7ee](9b1b7ee)) <a name=2.3.0-beta.2></a> # [2.3.0-beta.2](v2.2.1...v2.3.0-beta.2) (2017-10-24) ### Bug Fixes * **connectHierarchicalMenu:** do not return if facet not set ([#2521](#2521)) ([26e99fb](26e99fb)) ### Features * **breadcrumb:** Add the breadcrumb widget ([#2451](#2451)) ([11d78f0](11d78f0)), closes [#2299](#2299) * **connectRange:** round the range based on precision ([#2498](#2498)) ([d4df45d](d4df45d)) * **rangeInput:** add rangeInput widget ([#2440](#2440)) ([7916d16](7916d16))

<a name=2.3.0-beta.5></a> # [2.3.0-beta.5](v2.2.4...v2.3.0-beta.5) (2017-11-16) ### Features * **core:** InstantSearch hot remove/add widgets ([#2384](#2384)) ([cfc1710](cfc1710)) <a name=2.3.0-beta.3></a> # [2.3.0-beta.3](v2.3.0-beta.2...v2.3.0-beta.3) (2017-10-25) ### Bug Fixes * **connectors:** export as well ([0b78d75](0b78d75)) ### Features * **refinementList:** add escapeFacetHits parameter ([#2507](#2507)) ([9b1b7ee](9b1b7ee)) <a name=2.3.0-beta.2></a> # [2.3.0-beta.2](v2.2.1...v2.3.0-beta.2) (2017-10-24) ### Bug Fixes * **connectHierarchicalMenu:** do not return if facet not set ([#2521](#2521)) ([26e99fb](26e99fb)) ### Features * **breadcrumb:** Add the breadcrumb widget ([#2451](#2451)) ([11d78f0](11d78f0)), closes [#2299](#2299) * **connectRange:** round the range based on precision ([#2498](#2498)) ([d4df45d](d4df45d)) * **rangeInput:** add rangeInput widget ([#2440](#2440)) ([7916d16](7916d16))

<a name=2.3.0-beta.7></a> # [2.3.0-beta.7](v2.2.5...v2.3.0-beta.7) (2017-11-20) <a name=2.3.0-beta.6></a> # [2.3.0-beta.6](v2.3.0-beta.5...v2.3.0-beta.6) (2017-11-16) ### Bug Fixes * **connectors:** prefer wrappers over bind ([#2575](#2575)) ([f8e0e00](f8e0e00)) <a name=2.3.0-beta.5></a> # [2.3.0-beta.5](v2.2.4...v2.3.0-beta.5) (2017-11-16) ### Features * **core:** InstantSearch hot remove/add widgets ([#2384](#2384)) ([cfc1710](cfc1710)) <a name=2.3.0-beta.3></a> # [2.3.0-beta.3](v2.3.0-beta.2...v2.3.0-beta.3) (2017-10-25) ### Bug Fixes * **connectors:** export as well ([0b78d75](0b78d75)) ### Features * **refinementList:** add escapeFacetHits parameter ([#2507](#2507)) ([9b1b7ee](9b1b7ee)) <a name=2.3.0-beta.2></a> # [2.3.0-beta.2](v2.2.1...v2.3.0-beta.2) (2017-10-24) ### Bug Fixes * **connectHierarchicalMenu:** do not return if facet not set ([#2521](#2521)) ([26e99fb](26e99fb)) ### Features * **breadcrumb:** Add the breadcrumb widget ([#2451](#2451)) ([11d78f0](11d78f0)), closes [#2299](#2299) * **connectRange:** round the range based on precision ([#2498](#2498)) ([d4df45d](d4df45d)) * **rangeInput:** add rangeInput widget ([#2440](#2440)) ([7916d16](7916d16))

iam4x and others added 30 commits August 10, 2017 18:04

feat(breadcrumb): kick-off connectBreadcrumb

02211b8

chore(dev): add breadcrumb into storybook

32dc64c

feat(connectBreadcrumb): remove view logic

06f4e72

feat(widgets): export breadcrumb widget

cd38ab2

feat(widget): breadcrumb

c9bd97e

feat(component): kick-off breadcrumb component

5f85ed2

feat(Breadcrumb): WIP

265fcce

feat(Breadcrumb): modified separator

3eeaed9

feat(Breadcrumb): display breadcrumb (without any links)

0b00615

feat(Breadcrumb): WIP

cb437d8

feat(Breadcrumb): add css classes

5d684ec

feat(Breadcrumb): working on styling

05e31fc

feat(Breadcrumb): modified onClick prop

e0a1399

feat(Breadcrumb): Add headerFooter + autoHideContainer

be5473d

feat(Breadcrumb): documentation

f13b950

feat(Breadcrumb): remove cssClass root

51d9196

enable use as a standalone widget

2f95f52

add template to widget

dc144f6

add custom label story

b08495a

first series of tests

37d3c9a

add logic for the onclick on "Home"

813a2f8

add templates for home and separator

71ae51b

warn the user if there's already a Breadcrumb used with the same facet

4e8abce

add cssClasses

2904ff9

add lifecycle test

9e104a8

modify template so it re renders when rootProps are modified

954d0a3

modify css classes applied to the home label

3ed7f38

change the separator in the theme

dd9bda9

more tests for connectBreadcrumb

b673e71

add documentation

9857ff3

marielaures and others added 12 commits September 28, 2017 17:54

add default selected item story

5913478

WIP

89fe4e5

WIP - fixing response data for hierarchical values

8448ddc

add createUrl + rootPath

a964702

add default selected item story

d0c164f

WIP

6e50bc0

chore(test): test on second value

e336c15

Merge branch 'feat/2.2-breadcrumb' of github.com:algolia/instantsearc…

61e0740

…h.js into feat/2.2-breadcrumb

feat(Breadcrumb): update API of the connector

f4866fe

fix(dep): use same casing for isEqual

4f8abfc

chore(doc): fix misc. errors

c41c486

chore(breadcrumb): add more docs and validation

ec4effe

bobylito changed the base branch from develop to feat/2.3 October 4, 2017 15:13

Merge branch 'feat/2.3' into feat/2.2-breadcrumb

9b63631

bobylito suggested changes Oct 6, 2017

View reviewed changes

various code improvements

88ded98

Review fixes.

bobylito approved these changes Oct 9, 2017

View reviewed changes

bobylito merged commit 8e14e0b into feat/2.3 Oct 9, 2017

marielaures deleted the feat/2.2-breadcrumb branch October 11, 2017 15:10

marielaures mentioned this pull request Oct 17, 2017

chore(doc): add breadcrumb to e-commerce demo #2493

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(breadcrumb): Add the breadcrumb widget #2451

feat(breadcrumb): Add the breadcrumb widget #2451

marielaures commented Oct 4, 2017

algobot commented Oct 5, 2017 •

edited

Loading

bobylito left a comment

bobylito Oct 6, 2017

bobylito Oct 6, 2017

bobylito Oct 6, 2017

bobylito Oct 6, 2017

bobylito Oct 6, 2017

bobylito Oct 6, 2017

bobylito Oct 6, 2017

bobylito Oct 6, 2017

bobylito commented Oct 6, 2017

bobylito commented Oct 9, 2017

feat(breadcrumb): Add the breadcrumb widget #2451

feat(breadcrumb): Add the breadcrumb widget #2451

Conversation

marielaures commented Oct 4, 2017

algobot commented Oct 5, 2017 • edited Loading

bobylito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bobylito commented Oct 6, 2017

bobylito commented Oct 9, 2017

algobot commented Oct 5, 2017 •

edited

Loading