Rewrite search page in Preact

[benhalpern]

Feature Request or Task

As a user, I will want additional filters to narrow things down in my search. e.g. #360, but we don't currently have a great base for adding to the valnilla page.

Technical details

Right now, all the code for search is in _search.html.erb basically it's inline on the search page.

We want to move it to app/javascript. Create a new component in the src file called SearchResults and add a new pack called SearchResults, and then add <%= javascript_pack_tag "SearchResults", defer: true %> to _search.html.erb

Definition of Done

The current functionality has been replicated in clean, tested Preact code.

[nickytonline]

Not sure why I didn't see #360 before. I'll outline what needs to be done as I migrated the first part of search to preact. I should have some free time coming up to grab this or I'd be happy to pair with someone, if they want to learn the ropes a bit.

[ascii-dev]

@nickytonline I would like to work on this while learning the ropes and I'll be happy to pair up with you on it.

[benhalpern]

Yeah, @nickytonline @ascii-dev I think that would be a great match. I think you two pairing would be awesome.

[nickytonline]

Still settling in to the new job, but gonna start looking into this as not much activity happening here at the moment.

[nickytonline]

So buildArticleHTML.js.erb can be converted into stateless functional components. I've started working on that.

Most of what's in _algolia_search.html.erb can go into the utilty functions of search, ./app/javascript/src/utils/search.js.

The search results have their own container element that we'll need to rerender to. This ties in to the SearchResults pack that @benhalpern mentions in the initial story.

Still digging to see what else is required.

[ascii-dev]

Hi, @nickytonline I've also not been able to look into this because of work. But anyway I might be needed on it?

[mstruve]

Ah look at this there is an Issue for the refactor I asked @nickytonline to do, little outdated but definitely still looking to get this done in Elasticsearch!

[nickytonline]

Just dropping some thoughts on this:

• Even though we'll be moving this to a Preact component, the state should still be driven by the URL so that it can be bookmarked or come back to so the search results filter is preserved, e.g. https://dev.to/search?q=javascript&filters=class_name:PodcastEpisode&sort_by=published_at&sort_direction=desc
• Check the work done in Prep work to sync mobile search in #10424 #11525. It might not affect the work in this PR, but double check
• There is a back-end component to this. Currently we return a search page results page with the results rendered on the server side as markup. We would need to have this return JSON instead if we go forward with Preactifiying this.

[mstruve]

Currently we return a search page results page with the results rendered on the server-side as markup.

Where are you seeing this? If you look at the search controller you will see that all of the endpoints return JSON so I think we are good to go on the backend.

[nickytonline]

Ahh, I wasn't aware that they all return JSON. Thanks @mstruve!

[vaidehijoshi]

This should be a RFC :)

[vaidehijoshi]

@benhalpern I'll leave it to you to close this issue out if/when you decide to convert it into a RFC. Maybe @nickytonline can help champion it, too :)