Amalesh - Create Refresh Button for Disconnected Timer

[Ramaruva]

Description

Related PRS (if any):
This frontend PR is related to the development branch of the backend.

Main changes explained:

• src/components/Timer/Timer.jsx
• src/components/Timer/Timer.module.css
• src/components/Timer/TimerStatus.jsx

How to test:

Method 1:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log in as a user
5. Go to Network tab in the Browser DevTools
6. Enable Request Blocking:
   • Click the ⋮ (three dots) menu in Network tab
   • Select "More tools" → "Request blocking"
   • Click "+ Add pattern"
   • Enter pattern: *timer-service*
   • Enable the checkbox next to the pattern
7. Refresh the page
8. Verify Disconnected State:
   • The timer preview area should show "Disconnected" in red text
   • A refresh icon (circular arrows) should appear next to "Disconnected"
9. Test Reconnection:
   • Unblock the timer-service pattern (uncheck the checkbox in Request Blocking)
   • Click the refresh icon
   • Wait a few seconds
   • Timer should reconnect and show the time display (e.g., "00:15:00")
   • The "Disconnected" message should disappear

Method 2:

1. If the above method doesn't work:
   • Keep the app loaded on the page with the timer visible
   • Turn off Wi-Fi without refreshing the page
   • Wait a few seconds
2. Verify Disconnected State:
   • The timer preview area should show "Disconnected" in red text
   • A refresh icon (circular arrows) should appear next to "Disconnected"
   • A side panel message should appear saying the connection with the timer service is closed
3. Test Reconnection:
   • Turn Wi-Fi back on
   • Wait a few seconds for the connection to return
   • Click the refresh icon
   • Wait a few seconds
   • Timer should reconnect and show the time display again (for example, "00:15:00")
   • The "Disconnected" message should disappear

Screenshots or videos of changes:

PR.4459.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	43c185f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69bd4bcfe3f4650008e9cc4a
😎 Deploy Preview	https://deploy-preview-4459--highestgoodnetwork-dev.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.

[sonarqubecloud]

Quality Gate passed

Issues
12 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Anusha-Gali]

Hi Amalesh,

I have reviewed your PR locally and unfortunately the timer did not stop even though i followed all the instructions mentioned.

4459.mov

[HemanthNidamanuru]

Hi Amalesh,

I reviewed your PR locally and followed the steps outlined in the description. However, the timer still continues to run and does not stop as expected.

[Amalesh-A]

Hello @Anusha-Gali and @HemanthNidamanuru! I’ve updated the instructions. Could you please review them and let me know if any further changes are needed? Thanks!

[sonarqubecloud]

Quality Gate passed

Issues
12 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[HemanthNidamanuru]

Hi Amalesh,

I reviewed your PR locally and followed the second method outlined in the description. However, when Wi-Fi is turned off, the timer does not show the "Disconnected" state and continues to run. The red "Disconnected" text, refresh icon, and side panel message do not appear as expected.

[Anusha-Gali]

Hi Amalesh,

I tried your method 2 but it does not seem to work when network is offline as well as when wifi is disconnected. You can also observe the time difference between screenshot taken and the the time in video to see that no changes are observed.

4459.mp4