Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

website content update feedback #2440

Merged
merged 7 commits into from
Feb 6, 2025
Merged

website content update feedback #2440

merged 7 commits into from
Feb 6, 2025

Conversation

OchiengPaul442
Copy link
Contributor

@OchiengPaul442 OchiengPaul442 commented Feb 5, 2025

Summary of Changes (What does this PR do?)

  • Updated content on About Us page

Status of maturity (all need to be checked before merging):

  • I've tested this locally
  • I consider this code done

Screenshots (optional)

image
image

Summary by CodeRabbit

  • New Features

    • Introduced a new component for displaying sponsorship opportunities, including a section for sponsor logos.
    • Enhanced event selection and navigation based on URL parameters in the Clean Air Forum section.
    • Added a new section for displaying "Clean Air Forum Events" with clickable events.
  • Bug Fixes

    • Removed unnecessary console logging from the About page component.
  • Refactor

    • Updated the About page narrative for a more direct organizational voice.
    • Refactored the Clean Air Forum components to utilize Redux for state management.
    • Streamlined the partner display by removing the sponsorship section and adjusting section titles.
  • Style

    • Improved layout and visual presentation of the PaginatedSection component.
    • Adjusted the alignment of the logo grid in the PaginatedSection for better aesthetics.
  • Chores

    • Added DOMPurify for sanitizing HTML content across multiple components to enhance security.

Copy link

coderabbitai bot commented Feb 5, 2025

📝 Walkthrough

Walkthrough

The changes involve modifications to multiple components within the application. The AboutPage.tsx file updates a sentence in the "Our Story" section to shift from a third-person to a first-person narrative. The page.tsx file in the glossary section undergoes a significant refactor to utilize Redux for state management, enhancing interactivity. The layout.tsx file introduces new functionality for fetching and managing forum events. Additionally, the sponsorship sections across various components are removed or modified, streamlining the partner display. A new sponsorships/page.tsx component is introduced to manage sponsor-related content.

Changes

File Description
website2/.../AboutPage.tsx Updated sentence in "Our Story" section from third- to first-person narrative.
website2/.../glossary/page.tsx Refactored Page component to use Redux for state management; added createSlug utility.
website2/.../layout.tsx Enhanced CleanAirLayout to fetch and manage forum events using Redux.
website2/.../partners/page.tsx Removed handling and UI for "Sponsor Partner" entities; modified section headers.
website2/.../schedule/page.tsx Removed sponsorship section from the Page component.
website2/.../sponsorships/page.tsx Introduced new Page component for displaying sponsor partners and opportunities.
website2/.../index.ts Added new forum slice reducer to Redux store configuration.
website2/.../forumSlice.ts Created a new Redux slice for managing forum-related state with actions and interfaces.
website2/.../AboutPage.tsx Removed console logging statement from the AboutPage component.
website2/.../TabNavigation.tsx Refactored tab definitions and added smooth scroll functionality.
website2/.../PaginatedSection.tsx Updated prop types and layout for the PaginatedSection component.

Suggested reviewers

  • Baalmart
  • Codebmk

Poem

A tiny tweak in our story so bright,
Shifting voices to a first-person light.
A subtle change, precise and neat,
Making our narrative complete.
Cheers to updates, forward we ride!
🚀✨

Tip

🌐 Web search-backed reviews and chat
  • We have enabled web search-based reviews and chat for all users. This feature allows CodeRabbit to access the latest documentation and information on the web.
  • You can disable this feature by setting web_search: false in the knowledge_base settings.
  • Please share any feedback in the Discord discussion.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)
  • JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

github-actions bot commented Feb 5, 2025

New Website2 changes available for preview here

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🔭 Outside diff range comments (2)
website2/src/app/clean-air-forum/partners/page.tsx (1)

46-49: Address security concern with dangerouslySetInnerHTML.

Similar to the sponsorships page, this usage of dangerouslySetInnerHTML needs sanitization.

+import DOMPurify from 'dompurify';

 <div
   dangerouslySetInnerHTML={{
-    __html: renderContent(data.partners_text_section),
+    __html: DOMPurify.sanitize(renderContent(data.partners_text_section)),
   }}
 />
🧰 Tools
🪛 Biome (1.9.4)

[error] 46-46: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

website2/src/app/clean-air-forum/schedule/page.tsx (1)

35-37: Address security concern with dangerouslySetInnerHTML in AccordionItem.

The AccordionItem component uses dangerouslySetInnerHTML without sanitization.

+import DOMPurify from 'dompurify';

 <div
   className="text-sm text-gray-600"
   dangerouslySetInnerHTML={{ 
-    __html: renderContent(subText) 
+    __html: DOMPurify.sanitize(renderContent(subText))
   }}
 />
🧰 Tools
🪛 Biome (1.9.4)

[error] 36-36: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

🧹 Nitpick comments (8)
website2/src/app/clean-air-forum/sponsorships/page.tsx (1)

12-17: Add type safety to partner filtering.

The partner filtering logic uses any type which reduces type safety. Consider defining an interface for the partner object structure.

+interface Partner {
+  id: number;
+  category: string;
+  partner_logo_url: string;
+}
+
-  const sponsorPartner = data.partners
-    ?.filter((partner: any) => partner.category === 'Sponsor Partner')
+  const sponsorPartner = data.partners
+    ?.filter((partner: Partner) => partner.category === 'Sponsor Partner')
website2/src/app/clean-air-forum/glossary/page.tsx (1)

24-26: Use a slug generation library to handle edge cases.

The createSlug function may not cover all special characters or internationalization nuances. Utilizing a library ensures more reliable slug creation.

Apply this diff to use slugify:

+import slugify from 'slugify';
...
 const createSlug = (title: string) => {
-  return title.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-');
+  return slugify(title.split(',')[0].trim(), { lower: true });
 };

Install slugify with:

npm install slugify
website2/src/store/index.ts (1)

4-4: Maintain consistent naming conventions for reducers.

To keep the codebase consistent, consider renaming forum to forumReducer, aligning with modalReducer and countryReducer.

Apply this diff:

-import forum from './slices/forumSlice';
+import forumReducer from './slices/forumSlice';
...
   reducer: {
     modal: modalReducer,
     country: countryReducer,
-    forum: forum,
+    forum: forumReducer,
   },

Ensure the export in forumSlice.ts is updated if necessary.

Also applies to: 11-11

website2/src/store/slices/forumSlice.ts (1)

12-16: Define a specific type for activeTab to enhance type safety.

Currently, activeTab is a general string, which might lead to invalid values. Defining a union type restricts it to accepted tab names.

Apply this diff:

+type ForumTab = 'About' | 'Agenda' | 'Speakers'; // Add other tabs as needed
...
 interface ForumState {
   events: ForumEvent[];
   selectedEventIndex: number;
-  activeTab: string;
+  activeTab: ForumTab;
 }
 
 const initialState: ForumState = {
   events: [],
   selectedEventIndex: 0,
-  activeTab: 'About',
+  activeTab: 'About',
 };

This ensures activeTab only holds valid tab names, improving reliability.

Also applies to: 18-22

website2/src/views/Forum/TabNavigation.tsx (2)

13-23: Consider adding type safety to the tabs array.

While moving tabs to a separate array improves maintainability, adding a type definition would enhance type safety and documentation.

+type Tab = {
+  href: string;
+  text: string;
+};
+
-const tabs = [
+const tabs: Tab[] = [
   { href: '/clean-air-forum', text: 'About' },
   // ... rest of the tabs
];

33-46: Consider using href as key instead of index.

Using array indices as keys might cause issues with React's reconciliation process if the tabs array order changes.

-{tabs.map((link, index) => (
+{tabs.map((link) => (
   <Link
-    key={index}
+    key={link.href}
     href={link.href}
     // ... rest of the props
   >
website2/src/app/clean-air-forum/layout.tsx (2)

41-61: Extract slug matching logic to a utility function.

The slug matching logic is complex and could benefit from being moved to a separate utility function for better maintainability and testability.

+const findEventIndexBySlug = (events: Event[], slug: string): number => {
+  const normalizedSlug = slug.replace(/-/g, ' ').toLowerCase();
+  return events.findIndex((event) => {
+    const cleanTitle = event.title
+      .split(',')[0]
+      .trim()
+      .toLowerCase()
+      .replace(/-/g, ' ');
+    return cleanTitle === normalizedSlug;
+  });
+};

 useEffect(() => {
   if (slug && events.length > 0) {
-    const normalizedSlug = slug.replace(/-/g, ' ').toLowerCase();
-    const index = events.findIndex((event) => {
-      const cleanTitle = event.title
-        .split(',')[0]
-        .trim()
-        .toLowerCase()
-        .replace(/-/g, ' ');
-      return cleanTitle === normalizedSlug;
-    });
+    const index = findEventIndexBySlug(events, slug);
     if (index !== -1 && index !== selectedEventIndex) {
       dispatch(selectEvent(index));
     }
   }
 }, [slug, events, selectedEventIndex, dispatch]);

69-71: Consider adding a fallback UI instead of returning null.

A fallback UI would provide better user experience when no event is selected.

 if (!selectedEvent) {
-  return null;
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <p className="text-gray-500">No event selected. Please try again later.</p>
+    </div>
+  );
 }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a9cc155 and bed4d3b.

📒 Files selected for processing (10)
  • website2/src/app/clean-air-forum/glossary/page.tsx (1 hunks)
  • website2/src/app/clean-air-forum/layout.tsx (1 hunks)
  • website2/src/app/clean-air-forum/partners/page.tsx (2 hunks)
  • website2/src/app/clean-air-forum/schedule/page.tsx (1 hunks)
  • website2/src/app/clean-air-forum/sponsorships/page.tsx (1 hunks)
  • website2/src/store/index.ts (1 hunks)
  • website2/src/store/slices/forumSlice.ts (1 hunks)
  • website2/src/views/Forum/AboutPage.tsx (0 hunks)
  • website2/src/views/Forum/TabNavigation.tsx (1 hunks)
  • website2/src/views/cleanairforum/PaginatedSection.tsx (2 hunks)
💤 Files with no reviewable changes (1)
  • website2/src/views/Forum/AboutPage.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
website2/src/app/clean-air-forum/sponsorships/page.tsx

[error] 28-28: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

website2/src/app/clean-air-forum/glossary/page.tsx

[error] 80-80: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build-push-website2-deploy-preview
🔇 Additional comments (5)
website2/src/views/cleanairforum/PaginatedSection.tsx (1)

15-18: LGTM! Good improvement in type definitions.

The updated type definitions for the logos prop provide better type safety and clarity.

website2/src/app/clean-air-forum/partners/page.tsx (1)

60-61: LGTM! Clear and descriptive section titles.

The updated titles "Convening partners and Collaborators" and "Funding Partners and Sponsors" better reflect the content organization.

Also applies to: 102-103

website2/src/app/clean-air-forum/schedule/page.tsx (1)

17-24: LGTM! Good error handling in time formatting.

The formatTime function includes proper error handling and fallback for invalid time values.

website2/src/views/Forum/TabNavigation.tsx (2)

6-6: Nice type definition!

Explicit type definition as React.FC improves type safety and code clarity.


25-27: Good UX improvement!

The smooth scroll to top after tab navigation enhances user experience.

Comment on lines 28 to 31
dangerouslySetInnerHTML={{
__html: renderContent(data.sponsorship_opportunities_partners),
}}
/>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Address security concern with dangerouslySetInnerHTML.

Using dangerouslySetInnerHTML with user-provided content can expose the application to XSS attacks.

Consider using a secure HTML sanitizer:

+import DOMPurify from 'dompurify';

 <div
   dangerouslySetInnerHTML={{
-    __html: renderContent(data.sponsorship_opportunities_partners),
+    __html: DOMPurify.sanitize(renderContent(data.sponsorship_opportunities_partners)),
   }}
 />
📝 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.

Suggested change
dangerouslySetInnerHTML={{
__html: renderContent(data.sponsorship_opportunities_partners),
}}
/>
import DOMPurify from 'dompurify';
// ... other imports and code
<div
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(renderContent(data.sponsorship_opportunities_partners)),
}}
/>
🧰 Tools
🪛 Biome (1.9.4)

[error] 28-28: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

Comment on lines 80 to 83
dangerouslySetInnerHTML={{
__html: renderContent(selectedEvent.glossary_details),
}}
></div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Avoid using dangerouslySetInnerHTML to prevent XSS vulnerabilities.

Using dangerouslySetInnerHTML can expose the application to cross-site scripting (XSS) attacks. It's safer to sanitize the HTML content before rendering or avoid using this prop altogether.

Consider sanitizing the content using a library like dompurify:

+import DOMPurify from 'dompurify';
...
 <div
   className="md:w-2/3 space-y-4"
   dangerouslySetInnerHTML={{
-    __html: renderContent(selectedEvent.glossary_details),
+    __html: DOMPurify.sanitize(renderContent(selectedEvent.glossary_details)),
   }}
 ></div>

Remember to install dompurify:

npm install dompurify
🧰 Tools
🪛 Biome (1.9.4)

[error] 80-80: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

Comment on lines +21 to +31
// Fetch forum events from the API.
const { data: forumEvents, isLoading } = useForumEvents();
const dispatch = useDispatch();
const searchParams = useSearchParams();

// When events are fetched, update the Redux slice.
useEffect(() => {
if (forumEvents && forumEvents.length > 0) {
dispatch(setEvents(forumEvents));
}
}, [forumEvents, dispatch]);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling for API failures.

While the Redux integration is clean, the code should handle potential API failures gracefully.

 const { data: forumEvents, isLoading } = useForumEvents();
+const { data: forumEvents, isLoading, error } = useForumEvents();
 const dispatch = useDispatch();

 useEffect(() => {
+  if (error) {
+    // Handle error appropriately
+    console.error('Failed to fetch forum events:', error);
+    return;
+  }
   if (forumEvents && forumEvents.length > 0) {
     dispatch(setEvents(forumEvents));
   }
-}, [forumEvents, dispatch]);
+}, [forumEvents, error, dispatch]);

Committable suggestion skipped: line range outside the PR's diff.

Copy link
Contributor

github-actions bot commented Feb 6, 2025

New Website2 changes available for preview here

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
website2/src/app/clean-air-forum/partners/page.tsx (2)

32-38: Consider adding proper TypeScript interfaces for partner objects.

The implementation is good, but using any type reduces type safety. Consider defining a proper interface for partner objects to improve maintainability and catch potential issues at compile time.

+interface Partner {
+  id: string;
+  category: string;
+  partner_logo_url: string;
+}
+
+interface PartnerLogo {
+  id: string;
+  logoUrl: string;
+}

-  const programPartners = data.partners
-    ?.filter((partner: any) => partner.category === 'Program Partner')
-    .map((partner: any) => ({
+  const programPartners = data.partners
+    ?.filter((partner: Partner) => partner.category === 'Program Partner')
+    .map((partner: Partner): PartnerLogo => ({

102-102: Remove empty comment.

The empty comment on line 102 should be removed or replaced with meaningful content.

-      {/*  */}
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bed4d3b and 38b1ecf.

📒 Files selected for processing (1)
  • website2/src/app/clean-air-forum/partners/page.tsx (4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build-push-website2-deploy-preview
🔇 Additional comments (2)
website2/src/app/clean-air-forum/partners/page.tsx (2)

68-68: Header updates look good!

The updated section headers maintain consistent formatting while better reflecting the partner categories.

Also applies to: 131-131


103-121: Program Partners section implementation looks good!

The section follows the established pattern and maintains consistency with other partner sections.

Copy link
Contributor

github-actions bot commented Feb 6, 2025

New Website2 changes available for preview here

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🔭 Outside diff range comments (1)
website2/src/app/clean-air-forum/program-committee/page.tsx (1)

15-24: Add type definitions for committee members.

Replace any type with proper interfaces to improve type safety.

+interface Person {
+  id: string;
+  category: string;
+}

 const committeeMembers = useMemo(
   () =>
     data?.persons?.filter(
-      (person: any) =>
+      (person: Person) =>
         person.category === 'Committee Member' ||
         person.category === 'Committee Member and Key Note Speaker' ||
         person.category === 'Speaker and Committee Member',
     ),
   [data?.persons],
 );
🧹 Nitpick comments (6)
website2/src/app/clean-air-forum/logistics/page.tsx (1)

10-10: Add type safety for the data object.

Consider adding proper type definitions for the data object returned by useForumData() to improve type safety and maintainability.

-  const data = useForumData();
+  interface ForumData {
+    travel_logistics_vaccination_details: string;
+    travel_logistics_visa_details: string;
+  }
+  const data = useForumData() as ForumData;
website2/src/app/clean-air-forum/glossary/page.tsx (1)

25-27: Extract slug creation logic to a utility function.

Consider moving the slug creation logic to a separate utility file for reusability and testing.

// utils/stringUtils.ts
+export const createSlug = (title: string): string => {
+  return title.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-');
+};

// page.tsx
-  const createSlug = (title: string) => {
-    return title.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-');
-  };
+import { createSlug } from '@/utils/stringUtils';
website2/src/app/clean-air-forum/schedule/page.tsx (1)

3-3: Consider extracting HTML sanitization logic into a utility function.

The DOMPurify sanitization is repeated in multiple places. Let's create a reusable utility function to reduce code duplication.

+// In utils/sanitizeUtils.ts
+import DOMPurify from 'dompurify';
+import { renderContent } from './quillUtils';
+
+export const sanitizeContent = (content: string) => {
+  return DOMPurify.sanitize(renderContent(content));
+};

-__html: DOMPurify.sanitize(renderContent(data?.schedule_details)),
+__html: sanitizeContent(data?.schedule_details),

-__html: DOMPurify.sanitize(
-  renderContent(data?.registration_details),
-),
+__html: sanitizeContent(data?.registration_details),

Also applies to: 91-91, 119-121

website2/src/app/clean-air-forum/speakers/page.tsx (1)

22-26: Add TypeScript interfaces for person data structure.

The filtering logic uses type 'any' which could lead to runtime errors. Let's add proper typing.

+interface Person {
+  id: string;
+  category: string;
+}

-const KeyNoteSpeakers = data?.persons?.filter(
-  (person: any) =>
+const KeyNoteSpeakers = data?.persons?.filter(
+  (person: Person) =>

-const Speakers = data?.persons?.filter(
-  (person: any) =>
+const Speakers = data?.persons?.filter(
+  (person: Person) =>

Also applies to: 28-32

website2/src/app/clean-air-forum/partners/page.tsx (2)

18-47: Refactor partner filtering logic to reduce duplication.

The partner filtering and mapping logic is repeated for each partner type. Let's create a utility function.

+const filterPartners = (partners: any[], category: string) => 
+  partners?.filter(partner => partner.category === category)
+    .map(partner => ({
+      id: partner.id,
+      logoUrl: partner.partner_logo_url,
+    }));

-const conveningPartners = data.partners
-  ?.filter((partner: any) => partner.category === 'Co-Convening Partner')
-  .map((partner: any) => ({
-    id: partner.id,
-    logoUrl: partner.partner_logo_url,
-  }));
+const conveningPartners = filterPartners(data.partners, 'Co-Convening Partner');

105-105: Remove empty comment.

The empty comment on line 105 should be removed.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 38b1ecf and 13d70bf.

⛔ Files ignored due to path filters (1)
  • website2/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (8)
  • website2/package.json (1 hunks)
  • website2/src/app/clean-air-forum/glossary/page.tsx (1 hunks)
  • website2/src/app/clean-air-forum/logistics/page.tsx (3 hunks)
  • website2/src/app/clean-air-forum/partners/page.tsx (6 hunks)
  • website2/src/app/clean-air-forum/program-committee/page.tsx (2 hunks)
  • website2/src/app/clean-air-forum/schedule/page.tsx (3 hunks)
  • website2/src/app/clean-air-forum/speakers/page.tsx (2 hunks)
  • website2/src/app/clean-air-forum/sponsorships/page.tsx (1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
website2/src/app/clean-air-forum/sponsorships/page.tsx

[error] 30-30: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

website2/src/app/clean-air-forum/schedule/page.tsx

[error] 90-90: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

website2/src/app/clean-air-forum/glossary/page.tsx

[error] 81-81: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build-push-website2-deploy-preview
🔇 Additional comments (5)
website2/src/app/clean-air-forum/logistics/page.tsx (1)

27-31: LGTM! Proper HTML sanitization implemented.

Good job implementing DOMPurify to sanitize the HTML content before rendering, protecting against XSS attacks.

Also applies to: 48-52

🧰 Tools
🪛 Biome (1.9.4)

[error] 27-27: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

website2/src/app/clean-air-forum/sponsorships/page.tsx (1)

30-35: LGTM! HTML content is properly sanitized.

Good implementation of DOMPurify for sanitizing HTML content before rendering.

🧰 Tools
🪛 Biome (1.9.4)

[error] 30-30: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

website2/src/app/clean-air-forum/program-committee/page.tsx (1)

55-59: LGTM! HTML content is properly sanitized.

Good implementation of DOMPurify for sanitizing HTML content before rendering.

🧰 Tools
🪛 Biome (1.9.4)

[error] 55-55: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

website2/src/app/clean-air-forum/glossary/page.tsx (1)

81-85: LGTM! HTML content is properly sanitized.

Good implementation of DOMPurify for sanitizing HTML content before rendering.

🧰 Tools
🪛 Biome (1.9.4)

[error] 81-81: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

website2/package.json (1)

30-30: LGTM! Dependencies updated appropriately.

The addition of DOMPurify and the Next.js version update are appropriate for the changes being made.

Also applies to: 34-34

Comment on lines +13 to +18
const sponsorPartner = data.partners
?.filter((partner: any) => partner.category === 'Sponsor Partner')
.map((partner: any) => ({
id: partner.id,
logoUrl: partner.partner_logo_url,
}));
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add type definitions for partner data.

Replace any type with proper interfaces to improve type safety and maintainability.

+interface Partner {
+  id: string;
+  category: string;
+  partner_logo_url: string;
+}
+
+interface SponsorPartner {
+  id: string;
+  logoUrl: string;
+}

-  const sponsorPartner = data.partners
+  const sponsorPartner: SponsorPartner[] = data.partners
     ?.filter((partner: Partner) => partner.category === 'Sponsor Partner')
     .map((partner: Partner) => ({
       id: partner.id,
       logoUrl: partner.partner_logo_url,
     }));
📝 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.

Suggested change
const sponsorPartner = data.partners
?.filter((partner: any) => partner.category === 'Sponsor Partner')
.map((partner: any) => ({
id: partner.id,
logoUrl: partner.partner_logo_url,
}));
interface Partner {
id: string;
category: string;
partner_logo_url: string;
}
interface SponsorPartner {
id: string;
logoUrl: string;
}
const sponsorPartner: SponsorPartner[] = data.partners
?.filter((partner: Partner) => partner.category === 'Sponsor Partner')
.map((partner: Partner) => ({
id: partner.id,
logoUrl: partner.partner_logo_url,
}));

const router = useRouter();
const dispatch = useDispatch();
// Retrieve forum events and selected event index from Redux.
const { events, selectedEventIndex } = useSelector((state) => state.forum);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add type definitions for Redux state.

Define proper types for the Redux state to improve type safety.

+interface ForumEvent {
+  id: string;
+  title: string;
+  glossary_details: string;
+}
+
+interface ForumState {
+  events: ForumEvent[];
+  selectedEventIndex: number;
+}

-  const { events, selectedEventIndex } = useSelector((state) => state.forum);
+  const { events, selectedEventIndex } = useSelector((state: { forum: ForumState }) => state.forum);
📝 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.

Suggested change
const { events, selectedEventIndex } = useSelector((state) => state.forum);
+interface ForumEvent {
+ id: string;
+ title: string;
+ glossary_details: string;
+}
+
+interface ForumState {
+ events: ForumEvent[];
+ selectedEventIndex: number;
+}
- const { events, selectedEventIndex } = useSelector((state) => state.forum);
+ const { events, selectedEventIndex } = useSelector((state: { forum: ForumState }) => state.forum);

Copy link
Contributor

github-actions bot commented Feb 6, 2025

New Website2 changes available for preview here

@Baalmart Baalmart merged commit 02327fd into staging Feb 6, 2025
31 checks passed
@Baalmart Baalmart deleted the website-update-codebase branch February 6, 2025 16:13
@Baalmart Baalmart mentioned this pull request Feb 6, 2025
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants