PLANET-8110: Dynamic rendering in the Search page#2897
Open
PLANET-8110: Dynamic rendering in the Search page#2897
Conversation
- Initial implementation
- Improve the load more button and the search title
- Apply filters
- Update the Load More button text
- Remove unused elements
- Create additional components
- Add filter components
- Add form component
- Do some clean-up
- Add the post types filter component
- Avoid duplicate code
- Add component for the sorting select
- More clean-up
- Add the action types filter
- Clean up more duplicated code
- Fix get search term on page reload
- Replace "tease-search" template with component
- Remove active filters
- Reduce more duplicated code
- Keep checked the applied filter
- Fetch results when filters are applied
- Update the active filters when filters are modified
- Fix title issue
- Apply modal filter components
mardelnet
added
PoC
- Fix lint issues
planet-4
added a commit
to greenpeace/planet4-test-sinope
that referenced
this pull request
Feb 17, 2026
/unhold bfe1b3c5-8344-4b8b-86ae-0720dba20fa1
Contributor
Test instance is ready 🚀🌑 sinope | admin | blocks report | CircleCI | composer-local.json ⌚ 2026.02.24 14:12:22 |
planet-4
added a commit
to greenpeace/planet4-test-sinope
that referenced
this pull request
Feb 18, 2026
/unhold e90675be-266e-442b-a46d-383026233730
- Show loading message
planet-4
added a commit
to greenpeace/planet4-test-sinope
that referenced
this pull request
Feb 18, 2026
/unhold cc791aca-f289-4481-8af8-c52383744070
planet-4
added a commit
to greenpeace/planet4-test-sinope
that referenced
this pull request
Feb 24, 2026
/unhold 83872a6f-c71e-4d10-aba1-7becd5e74edf
- Simplify logic
- Simplify filters logic
- Change sorting order
- Filter by post type
planet-4
added a commit
to greenpeace/planet4-test-sinope
that referenced
this pull request
Feb 24, 2026
/unhold 31559a3f-ddd9-41ac-9ba4-2ff4c953eaaa
planet-4
added a commit
to greenpeace/planet4-test-sinope
that referenced
this pull request
Feb 24, 2026
/unhold e7c9711a-8d5a-4bc6-b786-d28f6fc16bc5
mleray
reviewed
Feb 25, 2026
| } | ||
|
|
||
| // Load More button component: | ||
| function LoadMoreButton({foundPosts, currentPage, postsPerLoad, onLoadMore}) { |
Contributor
There was a problem hiding this comment.
I personally prefer using const for declaring components, over function, i.e.
const LoadMoreButton = ({...}) => {...}```
Contributor
There was a problem hiding this comment.
Also, in order to reduce this file's size, I would declare all these components in separate files
mleray
reviewed
Feb 25, 2026
| const valueToShow = remainingPosts < postsPerLoad ? remainingPosts : postsPerLoad; | ||
| const showMore = currentPage * postsPerLoad < foundPosts; | ||
|
|
||
| if (!showMore) {return null;} |
Contributor
There was a problem hiding this comment.
Any reason here to return null instead of nothing like line 168?
mleray
reviewed
Feb 25, 2026
| if (!showMore) {return null;} | ||
|
|
||
| return ( | ||
| <button |
Contributor
There was a problem hiding this comment.
I think that this button should have more attributes, for GA in particular
mleray
reviewed
Feb 25, 2026
| return ( | ||
| <ul className="list-unstyled"> | ||
| {posts.map(post => { | ||
| return ( |
Contributor
There was a problem hiding this comment.
You should be able to remove this return and directly use
posts.map(post => (...))
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR is an investigation into the feasibility of making the front-end responsible for the dynamic rendering in the Search page. The results determine that the implementation, while not simple, is possible with our current infrastructure.
To do so, default JavaScript (mainly the
assets/src/js/search.jsfile) was replaced with React, and PHP/Twig with JSX. TheApi/Search.phpfile was modified to stop returning HTML and only return plain data, and a new API endpoint was added to get a list of filters associated with the user search (categories, post types, etc.). Many elements of thetemplates/search.twigfile and also the completetemplates/tease-search.twigfile were removed, since now React is in charge of rendering them using specific components. The core of this implementation is theassets/src/js/search_results.jsfile. This file dynamically renders all the Search page components (the form, the results, the load more button, the filters, etc.) and controls the data in a reactive way.Ref: https://greenpeace-planet4.atlassian.net/browse/PLANET-8110
Testing
npm run elastic:activate), build the theme (npm i --legacy-peer-deps && npm run build && npm start), and clear the Timber cache (npx wp-env run cli wp timber clear_cache)