Fix "Related Posts" persistence when sidebar is closed#3249
Fix "Related Posts" persistence when sidebar is closed#3249alecgeatches merged 10 commits intodevelopfrom
Conversation
📝 WalkthroughWalkthroughThe changes modify the related posts component by shifting from local state management to using the WordPress data hooks Changes
Suggested labels
Suggested reviewers
Possibly related PRs
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: .coderabbit.yaml ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
🧰 Additional context used📓 Path-based instructions (1)`**/*.{js,ts,tsx,jsx}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the code to ensure it is well-structured and adheres to best ...
🔇 Additional comments (9)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/content-helper/editor-sidebar/related-posts/store.ts (4)
1-3: Add a JSDoc block for the file overview.
Although this file introduces a new WordPress data store, it lacks an overarching JSDoc comment explaining its purpose. Consider adding a top-level doc block describing what the store manages and including an@sincetag per WordPress standards.
8-13: Augment thePostsStateinterface with JSDoc.
Each property inPostsStatewould benefit from doc comments and an@sincetag. This ensures clarity on when and why each property was introduced.+/** + * Represents the state for Related Posts. + * + * @since 1.0.0 + */ interface PostsState { isFirstRun: boolean; isLoading: boolean; filters: PostFilters; posts: PostData[]; }
48-75: Provide a doc block for the store definition.
When creating and registering a store in WordPress, add a JSDoc block at the creation point to describe its purpose, scope, and an@sincetag to match WordPress coding standards.+/** + * The Redux store for managing the state of Related Posts in the editor sidebar. + * + * @since 1.0.0 + */ export const RelatedPostsStore = createReduxStore( 'wp-parsely/related-posts', { ... } );
77-101: Document each action creator with JSDoc.
To comply with WordPress standards, provide doc comments (including@since) for each action creator (setFirstRun,setLoading, etc.). This helps maintain clarity and consistency across the codebase.actions: { + /** + * Sets whether this is the first run. + * + * @since 1.0.0 + * @param {boolean} isFirstRun Whether it is the first run. + * @return {SetFirstRunAction} Action object for setting first run. + */ setFirstRun( isFirstRun: boolean ): SetFirstRunAction { ...
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
build/content-helper/editor-sidebar.asset.phpis excluded by!build/**build/content-helper/editor-sidebar.jsis excluded by!build/**
📒 Files selected for processing (2)
src/content-helper/editor-sidebar/related-posts/component.tsx(7 hunks)src/content-helper/editor-sidebar/related-posts/store.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{js,ts,tsx,jsx}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the code to ensure it is well-structured and adheres to best ...
**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards.
- Ensure the code is well-documented.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/editor-sidebar/related-posts/component.tsxsrc/content-helper/editor-sidebar/related-posts/store.ts
🧬 Code Graph Analysis (2)
src/content-helper/editor-sidebar/related-posts/component.tsx (2)
src/content-helper/editor-sidebar/related-posts/store.ts (9)
RelatedPostsStore(48-119)isFirstRun(106-108)isLoading(109-111)getPosts(112-114)getFilters(115-117)setLoading(83-88)setPosts(89-94)setFirstRun(77-82)setFilters(95-100)src/content-helper/common/utils/constants.ts (1)
PostFilters(52-56)
src/content-helper/editor-sidebar/related-posts/store.ts (2)
src/content-helper/common/utils/constants.ts (1)
PostFilters(52-56)src/content-helper/common/utils/post.tsx (1)
PostData(18-30)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: E2E against WordPress latest
🔇 Additional comments (5)
src/content-helper/editor-sidebar/related-posts/component.tsx (5)
9-9: Adoption ofuseDispatchanduseSelectlooks good.
These hooks correctly connect the component to the new store for state management.
143-156: Ensure correct re-render behavior withuseSelect.
You're returning selectors in an arrow function with an empty dependency array. By default,useSelectsubscribes to store updates, so this is valid. However, confirm there's no need to memoize or short-circuit re-renders if the data changes frequently.
225-253: Well-structured async fetch with retries.
The doc block is handled well with@since 3.17.0, and the logic includes retries. Verify that different failure cases (e.g., authentication errors) are handled upstream or remain intentionally unhandled here.
277-293: Filters update logic is clear and complies with coding guidelines.
TheupdateFiltersfunction uses a well-defined flow, updates the store, and callsfetchPosts. Ensure consistent doc blocks and@sincetags remain updated over time.
368-372: Good conditional check to avoid early empty-state message.
The logic for not showing the "No related posts found." message on the first run helps avoid confusing the user before the initial fetch.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
tests/js/content-helper/structure.test.tsx (1)
126-130: Add a period at the end of the comment and verify compliance with WordPress guidelines.The code correctly resets the store in each test for consistency. However, the inline comment should end with a period to meet the requirement requiring each line comment to conclude with a period.
- // Reset RelatedPostsStore so that <RelatedPostsPanel /> is in the initial state each test + // Reset RelatedPostsStore so that <RelatedPostsPanel /> is in the initial state each test.src/content-helper/editor-sidebar/related-posts/store.ts (4)
1-12: Ensure doc block consistency and completeness.While the doc block for the file-level explanation includes a
@sincetag, confirm that all JSDoc comments end with periods and consider whether each doc block needs clarifying, final statements to align with the WordPress coding standard.
13-45: Add JSDoc tags for action interfaces.Each of these interfaces (e.g.,
SetFirstRunAction,SetLoadingAction) benefits from a short description and a@sincetag to reflect their introduction, aligning with the plugin’s documentation rules for exported or significantly used interfaces.
46-55: Optional: document the defaultState object.Although this is an internal constant, adding a short doc block (with
@sinceand a final period) can improve clarity regarding default values, especially for new contributors.
57-147: Add JSDoc comments for all action creators.Currently, only
reset()includes a doc block with@since. For completeness and consistency, each action (e.g.,setFirstRun,setLoading,setPosts,setFilters) should have a JSDoc comment and a@sinceannotation describing when it was introduced and what it does. This supports better discoverability and adheres to WordPress coding standards.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/content-helper/editor-sidebar/related-posts/store.ts(1 hunks)tests/js/content-helper/structure.test.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{js,ts,tsx,jsx}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the code to ensure it is well-structured and adheres to best ...
**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards.
- Ensure the code is well-documented.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."
tests/js/content-helper/structure.test.tsxsrc/content-helper/editor-sidebar/related-posts/store.ts
🧬 Code Graph Analysis (2)
tests/js/content-helper/structure.test.tsx (1)
src/content-helper/editor-sidebar/related-posts/store.ts (1)
RelatedPostsStore(62-147)
src/content-helper/editor-sidebar/related-posts/store.ts (2)
src/content-helper/common/utils/constants.ts (1)
PostFilters(52-56)src/content-helper/common/utils/post.tsx (1)
PostData(18-30)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: E2E against WordPress latest
🔇 Additional comments (3)
tests/js/content-helper/structure.test.tsx (2)
25-27: No concerns regarding these imports.These imports correctly reference the newly introduced store for resetting state as needed during testing.
32-32: Importingdispatchfrom@wordpress/datais appropriate.This enables resetting and dispatching actions on the store, ensuring the test environment is consistently managed.
src/content-helper/editor-sidebar/related-posts/store.ts (1)
149-149: Good practice registering the store.Registering the store ensures it is recognized by the WordPress data system. This looks correct and aligns with best practices.
|
@acicovic This is ready for review! Note that I ran into some test failures after implementing the store: These have been addressed, but essentially every test was waiting for the "Loading..." message to appear, but with the store in place this only happens on the first render. There were some other inconsistencies that relied on the previous non-stateful behavior. I tried a few different approaches but what ended up working was adding a Let me know if you have any questions or thoughts! |
…-parsely into fix/related-posts-persistence
acicovic
left a comment
acicovic
left a comment
There was a problem hiding this comment.
Great work!
I really like the before/after presentation, as well as all the details you've given which makes it easier to review the PR and understand why some changes took place.
Noting that I've pushed 6cc87b3, a nitpick commit which doesn't change any functionality.
We're good to merge this, unless you have comments about my own commit. Note that some import reordering was made by VSCode, not me. Thanks!
…tence Fix "Related Posts" persistence when sidebar is closed" (fdbb644)
2 participants
Description
In
develop, when the "Related Posts" sidebar tab is closed and re-opened, the set of related posts reloads each time. Additionally, some of the fields (section, tags) are not persisted between reopens:Screen.Recording.2025-04-10.at.12.17.13.PM.mov
This component has been modified to use a store for persistence:
Screen.Recording.2025-04-10.at.12.18.05.PM.mov
How has this been tested?
This has been tested manually in the editor. To test:
Summary by CodeRabbit
New Features
Refactor