Skip to content

Fix React Hooks ESLint warnings in Filters and AnnouncementHero components #5126

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.

Sign up for GitHub

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

Open
luckyxhq wants to merge 2 commits into
base: master
Choose a base branch
from
+28 −15
Open

Fix React Hooks ESLint warnings in Filters and AnnouncementHero components #5126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a0097e
change in the propertiese code
luckyxhq Jan 24, 2026
91ea324
fix: resolve React Hooks ESLint warnings in Filters and AnnouncementHero
luckyxhq Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 25 additions & 12 deletions components/campaigns/AnnouncementHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,39 @@ interface IAnnouncementHeroProps {
* @param {Boolean} props.hideVideo - Whether the video should be hidden
* @description The announcement hero
*/
export default function AnnouncementHero({ className = '', small = false }: IAnnouncementHeroProps) {
export default function AnnouncementHero({
className = '',
small = false,
}: IAnnouncementHeroProps) {
const [activeIndex, setActiveIndex] = useState(0);

const visibleBanners = useMemo(() => banners.filter((banner) => shouldShowBanner(banner.cfpDeadline)), [banners]);
const visibleBanners = useMemo(
() => banners.filter((banner) => shouldShowBanner(banner.cfpDeadline)),
[],
);
Comment on lines +21 to +30
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

CI is failing: formatting does not match project Prettier/ESLint config.

The pipeline reports 20+ errors across this file. Two recurring categories:

  1. Double quotes → single quotes: The project enforces single quotes for JSX attributes (e.g., 'text-white' not "text-white").
  2. Trailing commas & multiline expansion: The Prettier config expects inline formatting and no trailing commas in many of these positions.

Please run npx prettier --write components/campaigns/AnnouncementHero.tsx (or the project's configured formatter) and re-commit to fix all formatting violations in one pass.

Also applies to: 34-36, 40-42, 50-53, 65-66, 73-73, 76-77, 101-101, 119-119

🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 21-21: prettier/prettier: Replace ⏎··className·=·'',⏎··small·=·false,⏎ with ·className·=·'',·small·=·false·

[error] 23-23: prettier/prettier: Unexpected trailing comma. comma-dangle

[error] 27-27: prettier/prettier: Replace ⏎····()·=>·banners.filter((banner)·=>·shouldShowBanner(banner.cfpDeadline)),⏎····[],⏎·· with ()·=>·banners.filter((banner)·=>·shouldShowBanner(banner.cfpDeadline)),·[]

[error] 29-29: prettier/prettier: Unexpected trailing comma. comma-dangle

🤖 Prompt for AI Agents 
In `@components/campaigns/AnnouncementHero.tsx` around lines 21 - 30, The file
AnnouncementHero has many formatting violations (JSX attributes using double
quotes, unwanted trailing commas, and multiline/inline inconsistencies) causing
CI failures; to fix, run the project's formatter (e.g., npx prettier --write
components/campaigns/AnnouncementHero.tsx) and ensure JSX uses single quotes and
Prettier/ESLint rules are respected around the useMemo block that defines
visibleBanners, the AnnouncementHero component props, and other JSX elements;
after formatting, re-commit the updated file so that the code around
AnnouncementHero, visibleBanners, banners, and shouldShowBanner matches the repo
style.

const numberOfVisibleBanners = visibleBanners.length;

const goToPrevious = () => {
setActiveIndex((prevIndex) => (prevIndex === 0 ? numberOfVisibleBanners - 1 : prevIndex - 1));
setActiveIndex((prevIndex) =>
prevIndex === 0 ? numberOfVisibleBanners - 1 : prevIndex - 1,
);
};

const goToNext = () => {
setActiveIndex((prevIndex) => (prevIndex === numberOfVisibleBanners - 1 ? 0 : prevIndex + 1));
setActiveIndex((prevIndex) =>
prevIndex === numberOfVisibleBanners - 1 ? 0 : prevIndex + 1,
);
};

const goToIndex = (index: number) => {
setActiveIndex(index);
};

useEffect(() => {
const interval = setInterval(() => setActiveIndex((index) => (index + 1) % numberOfVisibleBanners), 10000);
const interval = setInterval(
() => setActiveIndex((index) => (index + 1) % numberOfVisibleBanners),
10000,
);

return () => {
clearInterval(interval);
Expand All @@ -49,19 +62,19 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
}

return (
<Container as='section' padding='' className='text-center'>
<div className='relative flex flex-row items-center justify-center overflow-x-hidden md:gap-4'>
<Container as="section" padding="" className="text-center">
<div className="relative flex flex-row items-center justify-center overflow-x-hidden md:gap-4">
{numberOfVisibleBanners > 1 && (
<div
className={`absolute left-0 top-1/2 z-10 mb-2 flex size-8 -translate-y-1/2 cursor-pointer
items-center justify-center rounded-full bg-primary-500 opacity-50 hover:bg-primary-600 md:opacity-100`}
onClick={goToPrevious}
>
<ArrowLeft className='text-white' />
<ArrowLeft className="text-white" />
</div>
)}
<div className='relative flex w-4/5 md:w-5/6 flex-col items-center justify-center gap-2'>
<div className='relative flex min-h-72 w-full justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]'>
<div className="relative flex w-4/5 md:w-5/6 flex-col items-center justify-center gap-2">
<div className="relative flex min-h-72 w-full justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]">
{visibleBanners.map((banner, index) => {
// Only render the active banner
const isVisible = index === activeIndex;
Expand All @@ -85,7 +98,7 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
);
})}
</div>
<div className='m-auto flex justify-center'>
<div className="m-auto flex justify-center">
{visibleBanners.map((banner, index) => (
<div
key={index}
Expand All @@ -103,7 +116,7 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
rounded-full bg-primary-500 opacity-50 hover:bg-primary-600 md:opacity-100`}
onClick={goToNext}
>
<ArrowRight className='text-white' />
<ArrowRight className="text-white" />
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/table/Filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function useOutsideAlerter(ref: RefObject<any>, setOpen: (open: boolean) => void
// Unbind the event listener on clean up
document.removeEventListener('mousedown', handleClickOutside);
};
}, [ref]);
}, [ref, setOpen]);
}

/**
Expand Down
4 changes: 2 additions & 2 deletions config/3.0.0.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"$ref": "#/definitions/specificationExtension"
}
},
"properties": {
"properties": { #there the properties change i create
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Remove inline comment to keep JSON valid.

# is not valid in JSON and will cause schema parsing to fail. Please remove the inline comment or move the note elsewhere (e.g., README or a separate doc).

🔧 Proposed fix 
-    "properties": { `#there` the properties change i create 
+    "properties": {
📝 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
"properties": { #there the properties change i create
"properties": {
🧰 Tools
🪛 Biome (2.3.13)

[error] 15-15: unexpected character #

(parse)

🤖 Prompt for AI Agents 
In `@config/3.0.0.json` at line 15, The JSON contains an inline comment after the
"properties" key which invalidates the file; remove the comment text beginning
with "#" so the line becomes a valid JSON key ("properties": { ), or relocate
the explanatory note to external documentation (README) instead; search for the
"properties" key in the shown diff to find and fix the offending inline comment.

"asyncapi": {
"type": "string",
"const": "3.0.0",
Expand Down Expand Up @@ -8968,4 +8968,4 @@
}
},
"description": "!!Auto generated!! \n Do not manually edit. "
}
}
Loading