fix: improve difficulty badge visibility when problem row is selected(hover)#158
Conversation
|
@kalsariyaarpan is attempting to deploy a commit to the Kunal Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
🚀 PR Received SuccessfullyHello @kalsariyaarpan, Thank you for taking the initiative to contribute to this project. Please ensure that your PR follows all project guidelines properly before requesting review.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe PR refactors the difficulty badge rendering in the ProblemRow component, adjusting the wrapper and badge span classes for improved responsive styling while preserving the difficulty label text and color-driven classes. ChangesDifficulty Badge UI Refactor
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@coderabbitai please check is this PR ready to merge ? and the work done in this PR is compatible to rest nearby codes |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Get the full PracticePage.jsx content on PR branch
cat frontend/src/pages/PracticePage.jsxLength of output: 29029 🏁 Script executed: #!/bin/bash
# Get the git diff for this PR
git diff origin/main...HEAD -- frontend/src/pages/PracticePage.jsxLength of output: 1223 The PR description images show:
✅ Fix CorrectnessThe core bug fix is correct. The old code had
✅ ResponsivenessNo regression. The badge wrapper retains
|
|
@coderabbitai you are correct about that pre-existing bug and just now I visited the page and tried to click on clear and I got an error in browser console : So please make a separate issue for this bug and make sure you describe the problem in detail so that contributors can understand and learn in deep about this and make use of this error got in browser console that I pasted above and some more stuff as you like |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Extract the clearAll function and useDebounce/debouncedSearch usage
rg -n "clearAll|debouncedSearch|useDebounce|setDebouncedSearch" frontend/src/pages/PracticePage.jsx -A 3 -B 1Length of output: 2617 🏁 Script executed: #!/bin/bash
gh issue create \
--repo kunalverma2512/CodeLens \
--title "bug: ReferenceError: setDebouncedSearch is not defined when clicking 'Clear All' on Practice Page" \
--body "## Bug Report
**Reported by:** `@kunalverma2512`
**Related PR:** https://github.com/kunalverma2512/CodeLens/pull/158#issuecomment-$(date +%s)
---
## Summary
Clicking the **\"Clear All\"** button (or **\"Clear All Filters\"** button) on the Practice Page crashes with a \`ReferenceError\` in the browser console. The page becomes unresponsive to filter clearing.
---
## Browser Console Error
\`\`\`
index-CyhY7F8s.js:105 Uncaught ReferenceError: setDebouncedSearch is not defined
at N (index-CyhY7F8s.js:105:54932)
at Td (index-CyhY7F8s.js:8:126341)
at index-CyhY7F8s.js:8:131334
at un (index-CyhY7F8s.js:8:15081)
at Ad (index-CyhY7F8s.js:8:127568)
at _p (index-CyhY7F8s.js:9:28475)
at hp (index-CyhY7F8s.js:9:28297)
\`\`\`
---
## Steps to Reproduce
1. Go to the **Practice Page** (the page listing Codeforces problems).
2. Type something in the search box, or select a tag/rating filter.
3. Click the **\"Clear All\"** button that appears in the active filter chips area, or click **\"Clear All Filters\"** in the no-results state.
4. Observe the \`ReferenceError\` in the browser DevTools console (F12 → Console tab).
---
## Root Cause (Technical Explanation for Contributors)
**File:** \`frontend/src/pages/PracticePage.jsx\`
The \`useDebounce\` hook is used to delay the search query update so that the problems list does not re-filter on every single keystroke:
\`\`\`js
// Line 203
const debouncedSearch = useDebounce(searchQuery, 300);
\`\`\`
The \`useDebounce\` hook returns **only the debounced value** — it does not expose a setter function. This is the standard pattern for debounce hooks in React: you own the source state (\`searchQuery\` / \`setSearchQuery\`), and the hook derives a delayed read-only copy from it.
However, the \`clearAll\` function (around line 333) incorrectly tries to call a non-existent \`setDebouncedSearch\` setter:
\`\`\`js
const clearAll = () => {
setSearchQuery(\"\"); // ✅ Correct — resets the source state
setDebouncedSearch(\"\"); // ❌ Bug — this function does not exist anywhere!
setSelectedTags([]);
setRatingIdx(0);
setSortBy(\"rating-asc\");
};
\`\`\`
Because \`setDebouncedSearch\` is never declared or imported, JavaScript throws a \`ReferenceError\` the moment \`clearAll\` is invoked — preventing any of the reset logic below it from executing.
---
## Why Does the Filter Look Like It Doesn't Clear Immediately?
When \`setSearchQuery(\"\")\` is called, the debounce timer starts. After 300 ms, \`debouncedSearch\` will automatically become \`\"\"\` and the problem list will re-filter correctly. So the manual \`setDebouncedSearch(\"\")\` call was likely added in an attempt to make the clear feel instant — but since the function doesn't exist, it breaks everything instead.
---
## Suggested Fix
Simply remove the invalid \`setDebouncedSearch(\"\")\` call from the \`clearAll\` function. Resetting \`searchQuery\` via \`setSearchQuery(\"\")\` is sufficient; \`debouncedSearch\` will follow automatically within 300 ms:
\`\`\`js
const clearAll = () => {
setSearchQuery(\"\");
// Remove: setDebouncedSearch(\"\"); ← this line causes the crash
setSelectedTags([]);
setRatingIdx(0);
setSortBy(\"rating-asc\");
};
\`\`\`
If an **instant** (zero-delay) clear is preferred UX-wise, the \`useDebounce\` hook (\`frontend/src/hooks/useDebounce.js\`) can be extended to return a \`[debouncedValue, setValue]\` tuple — similar to how \`useState\` works — so callers can manually override the debounced value when needed.
---
## Affected Buttons
There are **two** buttons that both call \`clearAll\`:
1. The inline **\"Clear All\"** chip that appears next to active filter badges (line ~515).
2. The **\"Clear All Filters\"** button shown in the empty-results state (line ~570).
Both are broken by this bug.
---
## Environment
- **File:** \`frontend/src/pages/PracticePage.jsx\`
- **Hook:** \`frontend/src/hooks/useDebounce.js\` (or \`.ts\`)
- **Framework:** React (Vite build, minified output \`index-CyhY7F8s.js\`)
---
## Acceptance Criteria
- [ ] Clicking \"Clear All\" clears search, tags, rating, and sort without any console errors.
- [ ] The problems list resets correctly after clearing.
- [ ] No regression to the debounce behaviour during normal typing."Length of output: 4582
Here's what's included in it to help contributors:
(╯°□°）╯ bugs beware — good catch confirming this in the browser! |
kunalverma2512
added
good first issue
|
@kalsariyaarpan this time I have merged the PR but make sure to write issue no |
2 participants
Summary
closes #156
Fixes the difficulty badge visibility issue when a problem row is highlighted (hovered).
Previously, when a row background changed to a dark color on hover, difficulty badges could become difficult to read due to insufficient contrast. This update ensures that badge text and borders remain clearly visible during the hover state.
Changes Made
Testing
Verified visibility for all difficulty levels:
Confirmed that badges remain readable when a problem row is hovered and that no visual regressions were introduced.
Before
After
Summary by CodeRabbit