Fix Run and Submit button Execution API (RapidAPI -> Wandbox)

[hansikareddy29]

---

name: "📦 Pull Request"
title: "PR: Fix Code Execution Fallback"

📌 Related Issue

• Connected to Issue #144

---

✨ Changes Introduced

• Fixed: The broken "Run" button in the CodeEditor by switching the backend execution engine.

---

🤔 Why This Change?

• Impact: Users can once again compile and run their code directly in the browser without errors.

---

🖼️ Screenshots

Before	After
None	None

---

🧪 Testing

• Ran unit tests (npm test)
• Ran integration tests (npm run test:integration)
• Tested manually (describe below):
  • Test case 1: Open the POTD/Questions Code Editor, select Python/Java/C++, write standard output code, and click "Run". Expected Result: Successfully returns stdout from Wandbox.
• Tested on different browsers/devices (if UI change)
• Verified no console warnings/errors

---

📝 Documentation Updates

• Updated README/docs
• Added code comments (Documented the Wandbox compiler mappings)
• Updated API documentation (if applicable)
• Added JSDoc comments for new functions

---

✅ Checklist

• Created a new branch for PR
• Have starred the repository ⭐
• Follows JavaScript Styleguide
• No console warnings/errors
• Commit messages follow Git Guidelines
• Self-reviewed my code
• Added tests for new functionality
• All tests pass locally
• Code follows project conventions
• No breaking changes (or clearly documented if intentional)

---

👥 Reviewers

• Requested review from maintainers
• Tag specific reviewers if needed: @aviralsaxena16 @Jagath-P

---

🚀 Deployment Notes

• Requires environment variables update
• Requires database migration
• Requires third-party service configuration
• Breaking changes that need coordination

---

💬 Community & Support

Need help or want to discuss this PR?
Join our Discord community 👉 CanonForces Discord

---

💡 Additional Notes (If any)

(None)

Summary by CodeRabbit

Release Notes

• New Features

  • Added Run button to execute your code and instantly view the output results
  • Added Submit button to submit your solutions and track your problem-solving progress
  • Improved code execution reliability with automatic fallback support for better uptime

• Style

  • New Run and Submit button UI with interactive states, hover effects, and clear visual feedback

[vercel]

@hansikareddy29 is attempting to deploy a commit to the aviralsaxena16's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for Your Contribution to CanonForces! ☺️

We'll review it as soon as possible. In the meantime, please:

• ✅ Double-check the file changes.
• ✅ Ensure that all commits are clean and meaningful.
• ✅ Link the PR to its related issue (e.g., Closes #123).
• ✅ Resolve any unaddressed review comments promptly.

💬 Need help or want faster feedback?
Join our Discord 👉 CanonForces Discord

Thanks again for contributing 🙌 – @hansikareddy29!
cc: @aviralsaxena16

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The PR adds run and submit functionality to coding questions by updating the CodeEditor component to accept and pass run/submit callbacks, styling new Run/Submit buttons in the Output component, enhancing the code execution API with RapidAPI and Wandbox fallback handling, and implementing client-side workflows for executing and submitting user code to Firestore.

Changes

Cohort / File(s)	Summary
CodeEditor Component Updates src/common/components/CodeEditor/CodeEditor.tsx, src/common/components/CodeEditor/Output.tsx	Added optional onRun and onSubmit callback props to both components. Output now renders Run and Submit buttons in a header actions section, with Run button showing "Running..." state while isRunning is true. Both buttons are disabled during code execution.
Output Component Styling src/common/components/CodeEditor/Output.module.css	New styles for headerActions container and runButton/submitButton elements with distinct color schemes (green for Run, blue for Submit). Includes disabled, hover, and active states for all button variations.
Code Execution API src/pages/api/hello.ts	Enhanced API route with language_id derivation, input validation for language and codeValue, robust RapidAPI/Wandbox fallback mechanism for handling API failures, structured error response handling with status mapping, and request/result logging.
Question Page Implementation src/pages/questions/[id].tsx	Implemented handleRun function that POSTs code to /api/hello with error/success handling and toast notifications, handleSubmit that saves solutions to Firestore with POTD integration, and markAsSolved that updates user coins and streak via Firestore transactions. CodeEditor now receives wired onRun and onSubmit handlers.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CodeEditor
    participant API
    participant RapidAPI
    participant Wandbox
    participant Firestore
    
    rect rgba(100, 150, 200, 0.5)
    Note over User,Firestore: Run Code Flow
    User->>CodeEditor: Click Run Button
    CodeEditor->>API: POST /api/hello (code, language, input)
    API->>RapidAPI: Submit code execution request
    alt RapidAPI Success
        RapidAPI-->>API: Execution result
    else RapidAPI Fails
        API->>Wandbox: Fallback: Submit to Wandbox
        Wandbox-->>API: Execution result
    end
    API-->>CodeEditor: Response (output or error)
    CodeEditor->>User: Display execution result
    end
    
    rect rgba(150, 150, 100, 0.5)
    Note over User,Firestore: Submit Solution Flow
    User->>CodeEditor: Click Submit Button
    CodeEditor->>API: Verify user authentication
    API->>Firestore: Save submission to contest_submissions
    Firestore-->>API: Submission saved
    API->>Firestore: Check POTD alignment
    alt Is Problem of the Day
        API->>Firestore: Update user coins & streak (transaction)
        Firestore-->>API: Transaction complete
    end
    API-->>User: Submission confirmed with feedback
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Caching content: Caching the user stats and making submission sync to codeforces #132: Modifies the run/submit workflow in src/pages/questions/[id].tsx; this PR adds new handleRun/handleSubmit handlers while that PR removes the previous implementation, creating interdependencies in the same code paths.

Suggested reviewers

• Jagath-P
• aviralsaxena16

Poem

🐰 With buttons new and green so bright,
We hop through code with pure delight!
From run to submit, the flow takes flight,
Fallbacks ensure we get it right! ✨
A rabbit's work—now code can play! 🚀

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}