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

Building @mentions with createConnector #71

Closed
hypervillain opened this Issue Apr 27, 2017 · 15 comments

Comments

Projects
None yet
4 participants
@hypervillain
Copy link

hypervillain commented Apr 27, 2017

Hi all,

I'm trying to build an @mention into a textarea, using antd Mention component. But it seems that new props aren't communicated properly to the connected component.

I created a small Fiddle to show the issue : https://jsfiddle.net/8r928c4y/16/

If it is a misuse rather than a bug, feel free to close the ticket of course ;)

Bug: What is the current behavior?
I believe new props are not communicated to child component. If the Fiddle, you can see that getProvidedProps is called on state change and returns hits as it should.

Bug: What is the expected behavior?
To retrieve matching hits from the Mention component

Bug: What browsers are impacted? Which versions?
Chrome v 49 at least

Thanks!

@Haroenv

This comment has been minimized.

Copy link
Member

Haroenv commented Apr 28, 2017

Hey, this seems like a great use case!

However, the jsfiddle you shared doesn't use react-instantsearch as far as I can see. Can you show what you've tried? A createConnector should be able to help here, where you connect to both the query and the hits.

Thanks for trying this!

@hypervillain

This comment has been minimized.

Copy link
Author

hypervillain commented Apr 28, 2017

Ahah, it seems like I forgot to save it.. Meh. Will rewrite something when I'm at work, sorry for the inconvenience!

@hypervillain

This comment has been minimized.

Copy link
Author

hypervillain commented Apr 28, 2017

There you go! I just forgot to save the draft! ;)

So, as you can see : getProvidedProps gets new hits from the onSearchChange Mention callback, and returns hits. But new props aren't communicated, at least the way I thought they would!

@hypervillain

This comment has been minimized.

Copy link
Author

hypervillain commented Apr 28, 2017

Oh ok, I changed the call on line 49 and it's all working fine now. Just had to explicitly bind props.hits to the hit formatting. React behavior misunderstanding I guess?

I'm updating and cleaning the Fiddle, feel free to share if it's needed, it's the least I can do ;)

https://jsfiddle.net/8r928c4y/16/

@Haroenv

This comment has been minimized.

Copy link
Member

Haroenv commented Apr 28, 2017

That's amazing, we will definitely make a guide for this. If you want and are as ⚡️ fast as you are on this issue, feel free to make a PR. Either in /examples or as a guide!

I gave it a small update (https://jsfiddle.net/8r928c4y/16/) so that the map on L33 was terminated correctly

@hypervillain

This comment has been minimized.

Copy link
Author

hypervillain commented Apr 28, 2017

Sure! I'll push something in the evening

@mthuret

This comment has been minimized.

Copy link
Member

mthuret commented Apr 28, 2017

@THook if you need to access hits, query and refine depending of an entry, then you can try the connectAutoComplete connector. It's available with the v4.0.0-beta.

@hypervillain

This comment has been minimized.

Copy link
Author

hypervillain commented Apr 30, 2017

Quick heads up : I came back to the fiddle in order to make a PR but it doesn't work as expected anymore. It seems like the query state is never updated. See logs of https://jsfiddle.net/8r928c4y/17/ . It happens both in my app and in the Fiddle

@mthuret

This comment has been minimized.

Copy link
Member

mthuret commented Apr 30, 2017

Hi @THook, can you give me a heads up about what you're expecting when typing something in the mention textarea? I'm a bit lost with your functional use case.

@hypervillain

This comment has been minimized.

Copy link
Author

hypervillain commented Apr 30, 2017

Hello @mthuret , I am expecting the dropdown values to match my query, exactly like Github mentions work. Typing "@A" and "@z" doesn't update anymore the dropdown suggestions accordingly. When you log the connector state, you can see that the query doesn't get updated on search change, at least on my chrome version

Hope it helps!

@Haroenv

This comment has been minimized.

Copy link
Member

Haroenv commented Apr 30, 2017

I made it work with connectAutocomplete (after #75 is merged) @THook.

2017-04-30 18_00_27

Here’s the code for an app with the Mention component, to be made in a guide when #75 is merged.

import React from 'react';
import PropTypes from 'prop-types';
import Mention from 'antd/lib/mention';
import 'antd/lib/mention/style/css';
import { InstantSearch } from '../../../dist/dom';
import { connectAutoComplete } from '../../../dist/connectors';

const _formatHitsForAutoSuggest = hits => hits.map(hit => hit.name);

const AsyncMention = ({ hits, refine }) => (
  <Mention
    style={{ width: 500, height: 100 }}
    prefix="#"
    notFoundContent={'No suggestion'}
    placeholder="tag something here"
    suggestions={_formatHitsForAutoSuggest(hits)}
    onSearchChange={value => refine(value)}
  />
);

AsyncMention.propTypes = {
  hits: PropTypes.array,
  refine: PropTypes.func,
};

const ConnectedAsyncMention = connectAutoComplete(AsyncMention);

const App = () => (
  <InstantSearch
    appId="latency"
    apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
    indexName="bestbuy"
  >
    <ConnectedAsyncMention />
  </InstantSearch>
);

export default App;
@mthuret

This comment has been minimized.

Copy link
Member

mthuret commented May 2, 2017

Hey @THook, we just released a new beta with the connectAutoComplete fix. Here's a jsfiddle https://jsfiddle.net/q3t2mLvb/3/ to illustrate how it works.

Haroenv added a commit that referenced this issue May 2, 2017

@mthuret

This comment has been minimized.

Copy link
Member

mthuret commented May 2, 2017

We added this example as a possible usage of the connectAutoComplete connector (see: #76).

@mthuret mthuret closed this May 2, 2017

mthuret added a commit that referenced this issue May 2, 2017

docs(Autocomplete): add @mentions to possible use of Autocomplete (#76)
* remove old Hits And Facets example
* docs(Autocomplete): add mentions to possible use of Autocomplete

fixes #71

Same dataset as the [guide](https://www.algolia.com/doc/guides/search/autocomplete-textarea/) that uses the helper etc.

![]()

* update readme
@bwanlin

This comment has been minimized.

Copy link

bwanlin commented May 2, 2017

How can you add multi-index search in this mention component? thanks !

@mthuret

This comment has been minimized.

Copy link
Member

mthuret commented May 2, 2017

@bwanlin: what is the desired output?

The hits forwarded props of the connectAutoComplete has the following form [{index1: hits, index2: hits, ...}] when used with Index. See this example to have an idea.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment