Custom HierarchicalMenu Connector

I am using the react-instantsearch hierarchicalmenu connector in order to add a custom onclick event to each of the links. I have create seperate components for the menu, the itemlist and the items. Everything is working great with the exception that the page refreshes on every link clicked. This is not desired and I am at a loss as to what I am doing wrong to cause this. any aid in this would be very appreciateted

Can you share with us a little jsfiddle illustrating your issue? Here’s a template: https://jsfiddle.net/vvoyer/ar80rgpc/2/

Sorry but would take a lot to set up in fiddle. Here is the code from the 3 files I mentioned before. If this is not enough please let me know and I can share repo if needed:

HierarchicalMenu.js

import React, { Component } from ‘react’;
import HierarchicalList from ‘./hierarchicalList’;
import {connectHierarchicalMenu} from ‘react-instantsearch/connectors’;

class customHierarchicalMenu extends Component {

getChildContext() {
    return {
        createURL: this.props.createURL,
        refine: this.props.refine
    }
}

render() {
    return (
        <div className="ais-HierarchicalMenu__root">
           <HierarchicalList items={this.props.items}/>
        </div>

    );
}

}

customHierarchicalMenu.childContextTypes = {
createURL: React.PropTypes.func,
refine: React.PropTypes.func
};

const HierarchicalMenu = connectHierarchicalMenu(customHierarchicalMenu);

export default HierarchicalMenu;


HierarchicalList.js

import React, { Component } from ‘react’;
import HierarchicalItem from ‘./hierarchicalItem’;

class HierarchicalList extends Component {
render() {
return (


{this.props.items.map((item) => (
)
)}

);
}
}

HierarchicalList.propTypes = {
items: React.PropTypes.array.isRequired
}

export default HierarchicalList;


HierarchicalItem.js

import React, { Component } from ‘react’;
import HierarchicalList from ‘./hierarchicalList’;

class HierarchicalItem extends Component {
constructor(props) {
super(props);
this.hierarchicalMenuAnalyticsPost = this.hierarchicalMenuAnalyticsPost.bind(this);
}

hierarchicalMenuAnalyticsPost(item) {
    this.props.refine(item.value);
    //add analytics logging
}

renderChildren(items) {
    if(items) {
        let _props = {
            createURL: this.props.createURL,
            refine: this.props.refine
        };

        return (
            <HierarchicalList props={_props} items={items}/>
        )
    }

}

render() {
    let _props = {
        createURL: this.context.createURL,
        refine: this.context.refine,
        hierarchicalMenuAnalyticsPost: this.hierarchicalMenuAnalyticsPost
    };

    let itemClasses = "ais-HierarchicalMenu__item";
    itemClasses += (this.props.item.isRefined) ? " ais-HierarchicalMenu__itemSelected" : "";
    itemClasses += (this.props.item.hasOwnProperty('items')) ? " ais-HierarchicalMenu__itemParent" : "";

    let linkProps = {
        className: "ais-HierarchicalMenu__itemLink",
        onClick: () =>  {_props.hierarchicalMenuAnalyticsPost(this.props.item)},
        href: _props.createURL(this.props.item.value)
    }

    return (
        <div className={itemClasses}>
            <a {...linkProps}>
                <span className="ais-HierarchicalMenu__itemLabel">{this.props.item.label}</span>
                <span className="ais-RefinementList__itemCount">{this.props.item.count}</span>
            </a>
            {this.renderChildren(this.props.item.items, _props)}
        </div>
    );
}

}

HierarchicalItem.contextTypes = {
createURL: React.PropTypes.func,
refine: React.PropTypes.func
}

HierarchicalItem.propTypes = {
item: React.PropTypes.object.isRequired
}

export default HierarchicalItem;

Having some code working would be easier for us to help you debug it.

The jsfiddle I provide you is already configured with the dependencies so it shouldn’t be that long to make it run. Otherwise, you can just link us a working repo.

Thanks @nbeach!

Repo Location

https://github.com/nexnbeach/algolia_web_only.git

I found the issue. Forgot that when using React Events that need to call preventDefault to stop links from redirecting. Sorry for the wasted time.

Hi @nbeach

Yes I was going to tell you that :slight_smile:

But actually I’m interesting by knowing why you need to reimplement a custom hierarchical menu?

It seems that you want to perform some kind of analytics? I don’t know if this could fit all your needs, but you can listen to all the refinements selected by a user through the onSearchStateChange function on InstantSearch.

In any case, I would be happy to learn more!

Cheers!

The client actually not only what’s to know when each refinement changes but also how. They are using a custom analytics service that tracks both query changes and user interaction on the page.