Implement comment sorting and nesting
Problem: Implement Comment Sorting and Nesting UI
You are tasked with implementing the frontend behavior for a comment user interface, given a flat array of mock comment data. Each comment object has the following structure:
id: A unique identifier for the comment.userId: The ID of the user who authored the comment.timestamp: The creation time of the comment.content: The textual content of the comment.parentId: A nullable ID referencing the parent comment, indicating a nested reply.
Your implementation must fulfill the following requirements:
- Sorting: Display comments sorted by either
timestamporuserId. - Sort Order: Support both ascending and descending order for the selected sort field.
- Persistence: Preserve the user's selected sort field and sort direction across page refreshes.
- Nesting: Construct a hierarchical, nested view of comments from the flat input data, utilizing the
parentIdfield. No changes to a backend system are permitted or required. - Filtering: Implement a text filter based on the
contentfield. When a filter is applied, only comments whosecontentmatches the filter text, along with all of their descendants (regardless of whether the descendants themselves match the filter), should be displayed. Any comment branches that do not contain a matching comment must be entirely hidden.
You may assume all data is provided locally as mock data on the frontend.
AI interview prep
Core dilemma
Efficiently managing and rendering a dynamic, hierarchical data structure on the client-side, specifically the complex interaction between nesting, sorting, and the tree-traversal required for the specific filtering rule.
3 tradeoffs and 2 stress tests locked
Interview prep
Unlock the interviewer X-Ray rubric, tradeoff matrix, stress tests, clarifying questions, and key concepts.
Implement comment sorting and nesting
Problem: Implement Comment Sorting and Nesting UI
You are tasked with implementing the frontend behavior for a comment user interface, given a flat array of mock comment data. Each comment object has the following structure:
id: A unique identifier for the comment.userId: The ID of the user who authored the comment.timestamp: The creation time of the comment.content: The textual content of the comment.parentId: A nullable ID referencing the parent comment, indicating a nested reply.
Your implementation must fulfill the following requirements:
- Sorting: Display comments sorted by either
timestamporuserId. - Sort Order: Support both ascending and descending order for the selected sort field.
- Persistence: Preserve the user's selected sort field and sort direction across page refreshes.
- Nesting: Construct a hierarchical, nested view of comments from the flat input data, utilizing the
parentIdfield. No changes to a backend system are permitted or required. - Filtering: Implement a text filter based on the
contentfield. When a filter is applied, only comments whosecontentmatches the filter text, along with all of their descendants (regardless of whether the descendants themselves match the filter), should be displayed. Any comment branches that do not contain a matching comment must be entirely hidden.
You may assume all data is provided locally as mock data on the frontend.