frontend-mini-challenges icon indicating copy to clipboard operation
frontend-mini-challenges copied to clipboard

Updated Reset feature, If Async disbaled Sync should be disabled also

Open SaunakNandi opened this issue 3 months ago • 2 comments

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.

SaunakNandi avatar Aug 16 '25 09:08 SaunakNandi

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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify[bot] avatar Aug 16 '25 09:08 netlify[bot]

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 update
apps/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 gating
apps/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 tweak
apps/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 @coderabbitai in a new review comment at the desired location with your query.
  • 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 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 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 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

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.

coderabbitai[bot] avatar Aug 16 '25 09:08 coderabbitai[bot]