Filter for domains in filter drop down

[blackforestboi]

Like the bookmarks filter, there should be the ability to filter for domains in the filter drop down.

[abhigyank]

Hey! I would like to work on this. Can you please help me get started? This is my first issue on Memex.

[poltak]

Hey @abhigyank, thanks for the offer! I would suggest starting with the UI part, as that's the main thing and can be done without worrying about the search logic. The current view for that filters dropdown exists in src/overview/components/Filters module. Would need an additional custom <input>-based view like in the mockups + relevant UI state to keep the raw input + entered domains (may be derived from the raw input state).

Apart from UI, will also need a slight change to hook up with the search request interface, but nothing too difficult - can do that last.

[blackforestboi]

@poltak I leave it here, as it related to it: The subdomain filter does not work properly. So i can't filter for docs.google.com

@abhigyank Thanks for offering us your help :) Much appreciated. Let us know any way we can help you. See you soon with the first PR :)

[abhigyank]

I have created the input field as in the issue post screenshot. However I don't have a clue as to how to do the part shown in second screenshot, i.e. putting the website name like that in the box. Can you guide me as to how to do that? Thanks.

[poltak]

Maybe I would make two main view components: MultiInput and Pill (names are just suggestions). Pill would be the selections, maybe a <div> and it would need a <button> somewhere to afford the cancel/delete functionality. MultiInput would be the actual <input> (+ other needed surrounding markup) and would take 0-many Pill components as props.children. Then use CSS to position everything so it looks like one big input. Hundreds of ways to do it though, and probably ways much better than this idea.

React-select's "multiselect" component may be a good reference (without the selection dropdown): https://jedwatson.github.io/react-select. Open up dev tools and you can see the DOM structure and styles for that example

You will need clarification on the intended behaviour of the input though. Some obvious things:

• how do the pills get generated? automatically as soon as a domain-like pattern is detected in the input value, or after user types some delimiter character, like ,?
• what happens if the pills take up the entire width of the input? scroll horizontally?

@oliversauter should be able to provide his thoughts on behaviour

[abhigyank]

@poltak I am having difficulty incorporating react-select in Filters.jsx. I am trying to use https://github.com/JedWatson/react-select/blob/master/examples/src/components/Creatable.js for the purpose. Haven't worked much with react, any help would be appreciated.

[mukeshkharita]

Closed with #267