frontend-mini-challenges
frontend-mini-challenges copied to clipboard
Updated Reset feature, If Async disbaled Sync should be disabled also
Title and Issue number
Title :
Issue No. :
Code Stack :
Close #<issue_no>
Checklist:
- [] I have mentioned the issue number in my Pull Request.
- [] I have commented my code, particularly in hard-to-understand areas
- [] I have created a helpful and easy to understand
README.md - [] I have updated the Index.html file for my contribution
Summary by CodeRabbit
-
Bug Fixes
- Reset now restores value, delay, and step to their default settings for a consistent fresh start.
- Async increment/decrement buttons are temporarily disabled while operations are in progress, preventing accidental double actions.
- Step control input now permits entering 0 while still enforcing the configured minimum at runtime, avoiding invalid states.
-
UX Improvements
- Clearer button disabling feedback during async timers for smoother interaction.
Deploy Preview for frontend-mini-challenges ready!
| Name | Link |
|---|---|
| Latest commit | 4da73f5e2af82096a25984c16d1bfd3b93c889ae |
| Latest deploy log | https://app.netlify.com/projects/frontend-mini-challenges/deploys/68a04cad4559bb0008f9f89b |
| Deploy Preview | https://deploy-preview-527--frontend-mini-challenges.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
Walkthrough
AdvancedCounter.reset now resets value, delay, and step to initial values. AsyncControls introduces a local disabled state to block interactions during async operations and updates button disabled logic. StepControl changes the input’s min attribute to 0 while still clamping to minStep in logic.
Changes
| Cohort / File(s) | Summary |
|---|---|
Reset behavior updateapps/react/src/challenges/advanced-counter/advanced-counter.tsx |
reset now sets value=0, delay=1, and step=1 instead of only value=0. |
Async interaction gatingapps/react/src/challenges/advanced-counter/components/async-controls.tsx |
Added local disabled state toggled during async ops; async buttons disabled when respective timer active or disabled flag true. |
Step input min UI tweakapps/react/src/challenges/advanced-counter/components/step-control.tsx |
Input min changed to 0; runtime clamping still enforces minStep via handleChange. |
Sequence Diagram(s)
sequenceDiagram
participant U as User
participant AC as AsyncControls
participant T as Timer (setTimeout)
participant S as State
U->>AC: Click Increment Async
AC->>AC: setDisabled(true)
AC->>T: start timer
T-->>AC: timer fires
AC->>S: apply increment
AC->>AC: setDisabled(false)
U->>AC: Click Decrement Async
AC->>AC: setDisabled(true)
AC->>T: start timer
T-->>AC: timer fires
AC->>S: apply decrement
AC->>AC: setDisabled(false)
sequenceDiagram
participant U as User
participant C as AdvancedCounter
participant S as State
U->>C: Click Reset
C->>S: set value=0
C->>S: set delay=1
C->>S: set step=1
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
A bunny taps the plus, then waits—be still!
Timers tick like clover on the hill.
Reset snaps back: step and delay in line,
The counter’s carrots stacked just fine.
Min hops to zero, bounds hold true—
Async paws pause, then zoom on through. 🥕✨
[!TIP]
🔌 Remote MCP (Model Context Protocol) integration is now available!
Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.
✨ Finishing Touches
- [ ] 📝 Generate Docstrings
🧪 Generate unit tests
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
🪧 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.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. - PR comments: Tag
@coderabbitaiin 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
CodeRabbit Commands (Invoked using PR/Issue comments)
Type @coderabbitai help to get the list of available commands.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile 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
Status, Documentation and Community
- Visit our Status Page to check the current availability of CodeRabbit.
- 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.