feat(frontend): implement real-time quest and submission status updat…

[shogun444]

Summary

Closes #1675

This PR adds real-time quest and submission status synchronization by integrating the existing backend Socket.IO gateway with the frontend. A reusable useQuestSocket hook has been introduced to manage authenticated WebSocket connections, room subscriptions, reconnection handling, and listener cleanup while reusing the backend's existing event contract.

The hook has been integrated into the relevant quest and submission components so that status updates are reflected immediately without requiring a page refresh.

Changes

• Added a reusable useQuestSocket hook for authenticated Socket.IO communication.
• Reused the backend's existing authentication, subscription protocol, and event contract without introducing new gateway events or room names.
• Implemented a shared Socket.IO client to avoid duplicate connections across multiple hook instances.
• Added automatic room subscription and cleanup for quest and submission channels.
• Added automatic reconnection using Socket.IO's native exponential backoff support.
• Prevented duplicate event listeners through a callback registry and proper listener lifecycle management.
• Integrated real-time quest updates into QuestCard.
• Integrated real-time submission status updates into SubmissionDetail.
• Added unit tests covering connection setup, authentication, subscriptions, and cleanup behavior.

Verification

• npm run typecheck
• npm run test:unit
• npm run lint
• npm run build

Result

• Quest status updates are reflected immediately without requiring a page refresh.
• Submission status updates are reflected in real time.
• Socket.IO reconnects automatically after disconnects.
• Room subscriptions are restored after reconnection.
• Event listeners are properly cleaned up on component unmount.
• No duplicate Socket.IO event listeners are registered across re-renders.

[drips-wave]

@shogun444 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[RUKAYAT-CODER]

Thank you for contributing to the project