Website: Remove glossary duplicate data #2477
Conversation
📝 WalkthroughWalkthroughThe changes refine the logic in the glossary page of the Clean Air Forum by introducing a new filtering mechanism. The updated code defines a constant, Changes
Sequence Diagram(s)sequenceDiagram
participant GP as GlossaryPage
participant SE as SelectedEvent
participant FS as Filter Mechanism
participant UI as Renderer
GP->>SE: Retrieve event sections
SE-->>GP: Return sections array
GP->>FS: Apply filtering (contains 'glossary' & non-empty)
FS-->>GP: Return filtered sections (glossarySections)
GP->>UI: Render the filtered sections
Suggested reviewers
Poem
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
website2/src/app/clean-air-forum/glossary/page.tsx (2)
104-108: Add error handling and loading states for section rendering.The section rendering could benefit from additional safeguards:
- Loading state while filtering/rendering sections
- Error boundary for render failures
- Validation for section IDs used as keys
Consider wrapping the section rendering with error boundaries and loading states:
+ import { ErrorBoundary } from '@/components/ErrorBoundary'; + {glossarySections && glossarySections.length > 0 && ( <> + <ErrorBoundary fallback={<div>Error loading sections</div>}> + {glossarySections.some(section => !section.id) && + console.warn('Some sections are missing IDs')} {glossarySections.map((section: any) => ( <SectionDisplay key={section.id} section={section} /> ))} + </ErrorBoundary> </> )}
16-113: Add JSDoc documentation for the GlossaryPage component.The component would benefit from comprehensive documentation explaining its purpose, dependencies, and security measures.
Consider adding this documentation:
+ /** + * GlossaryPage Component + * + * Renders the glossary page of the Clean Air Forum, including: + * - List of forum events + * - Main glossary content + * - Additional glossary sections + * + * Security: + * - Uses DOMPurify for HTML sanitization + * - Validates glossary content before rendering + */ const GlossaryPage: React.FC = () => {🧰 Tools
🪛 Biome (1.9.4)
[error] 95-95: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
[error] 105-109: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website2/src/app/clean-air-forum/glossary/page.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-push-website2-deploy-preview
| const glossarySections = selectedEvent.sections?.filter((section: any) => { | ||
| if (!section.pages.includes('glossary')) return false; | ||
| const html = renderContent(section.content); | ||
| return html.trim().length > 0; | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve type safety and performance of section filtering.
The current implementation has a few areas for improvement:
- Replace
anytype with a proper interface - Add memoization to prevent unnecessary re-renders
- Add proper error handling
Consider this improved implementation:
+ interface ForumSection {
+ id: string;
+ pages: string[];
+ content: string;
+ }
+
- const glossarySections = selectedEvent.sections?.filter((section: any) => {
+ const glossarySections = React.useMemo(() =>
+ selectedEvent.sections?.filter((section: ForumSection) => {
+ if (!section?.pages?.includes('glossary')) return false;
const html = renderContent(section.content);
return html.trim().length > 0;
- });
+ }), [selectedEvent.sections]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const glossarySections = selectedEvent.sections?.filter((section: any) => { | |
| if (!section.pages.includes('glossary')) return false; | |
| const html = renderContent(section.content); | |
| return html.trim().length > 0; | |
| }); | |
| interface ForumSection { | |
| id: string; | |
| pages: string[]; | |
| content: string; | |
| } | |
| const glossarySections = React.useMemo( | |
| () => | |
| selectedEvent.sections?.filter((section: ForumSection) => { | |
| if (!section?.pages?.includes('glossary')) return false; | |
| const html = renderContent(section.content); | |
| return html.trim().length > 0; | |
| }), | |
| [selectedEvent.sections] | |
| ); |
|
New Website2 changes available for preview here |
Summary of Changes (What does this PR do?)
Status of maturity (all need to be checked before merging):
Screenshots (optional)
Summary by CodeRabbit