Reactivesearch: Result Card/List UI+Ux Issues

[siddharthlatest]

I'm submitting a ...

• [x] bug report

Current behavior:

• [x] Returning a null result throws typeError and crashes #158
• [x] It should be possible to render a markup for the title prop
• [x] desc should be called description
• [x] url prop when present opens links in the same tab. Is there a way to control this? Ideally, there should be - sometimes it makes sense to open them in the same tab, other times as an external link in a new tab
• [x] In innerClass prop, the already specified CSS properties by the lib can only be overridden by a !important suffix. (An example of fail case: The TodoMVC class-injection, or any time the classes are written by an external lib will fail) without a normal cascade behavior. This will be handled by css-specificity.
• [x] Default font-size of resultStats text should be similar to the default font-size of sort dropdown text. 12px or its equivalent in rem works well imo.
• [x] In ResultCard, on hovering over a card - the shadow disappears. It is hard to tell that the card is clickable. In the following image, left card is in hover state.
  
  Ideally, the shadow should subtly increase to highlight a current selection.

[siddharthlatest]

@metagrover How can the url prop be opened in a new tab?

[metagrover]

We have added the support for target prop here.

target is same as that of native attribute on a tag.

[aol-nnov]

sorry to bumping a closed ticket, but could you please give me some guides on how to use ResultCard with react-router? (I know, it's on the list in #143, but it'd be awesome if you shed some light on it)
Also I'm wondering if it'd be handy to create some component, that would represent a result item and pass it as a property to ResultCard component, where it will be rendered for each result?
It seems to me, that it will make result item way more customisable.

Thanks in advance!

[divyanshu013]

Hi @aol-nnov. ResultCard works like any other react component if you wish to use it with react-router. Are you trying to use different ResultCard components on different routes or is there anything else you're trying? Let me know.

You can use the onData prop and use it to render your own component with the data. For example,

// in the parent react component
renderData(res) {
  return {
    description: <MyCustomComponent data={res} />
  }
}

// inside render function
<ResultCard
  ...
  onData={this.renderData}}
/>

Then in your MyCustomComponent you can render the data in your own way. Hope this helps 🙂

[aol-nnov]

@divyanshu013 thanks for the snippet, but the way you propose only allows to modify description part of an item.
But I was proposing to somehow make the whole Card https://github.com/appbaseio/reactivesearch/blob/dev/packages/web/src/components/result/ResultCard.js#L343 customisable by allowing to replace it with custom component passed from outside, which will bring result item customisation to the new level.

As for my ResultCard usage, my idea was to navigate to another react route (not another page) on result item click.
So, I was hoping that I could wrap each result item into react-router's Link component.

May be there is another way around, I've just started with it! :)

[divyanshu013]

@aol-nnov the way ResultCard works is if you only pass description then it would take the entire space in the Card. So, here the Card provides only the layout and the CSS for card.

If you wish to have your own component instead of Card, you can try ReactiveList which lets you roll out your own result item. The usage is pretty similar to ResultCard but you return a JSX (or a react component) in the onData method. Here is an example where I'm using ReactiveList to render my custom card component.

Note that in ReactiveList it needs you to specify the layout styles. There is also a blog post for the above usage of ReactiveList if you would like to know about it in more detail here.

As for the usage with Link component, yes you can just wrap the result item and it would work fine :)

[aol-nnov]

@divyanshu013 thank you for all the hints!

[gabzon]

Hey guys I know this is a closed issue. I don't know if you prefer me to open a new one. I wrote here because it is the same problem I am trying to solve regarding React Router/Link and the ReactiveList component.

@divyanshu013 I'm trying to use your solution of ReactiveList. Unfortunatelly It gives me a white page. I'm using RS v^3.0.0-alpha.4

I tried to recreate everything from scratch using this example codesandbox - ReactiveList and it works perfectly with v^2.16.1, if I change it to v^3.0.0-alpha.4 it doesn't work, it gives me a white page.

Do you know if any property has change? Do I need to use another type of approach?

[metagrover]

Hi @gabzon, there are some breaking changes b/w v2 and v3 of reactivesearch. Please refer to this migration guide to upgrade to v3.

Please note that v3 is still in alpha currently.

[gabzon]

Great I'll follow the guide! Thx!
Yes don't worry about the alpha. I'm not building anything for production yet.