feat(tasks): Add visual indicator for unsynced task modifications #310
Conversation
|
Thank you for opening this PR! Before a maintainer takes a look, it would be really helpful if you could walk through your changes using GitHub's review tools. Please take a moment to:
More information on how to conduct a self review: This helps make the review process smoother and gives us a clearer understanding of your thought process. Once you've added your self-review, we'll continue from our side. Thank you! |
There was a problem hiding this comment.
shows animated unsynced badge when task has local changes pending sync. Added aria-labels for accessibility
There was a problem hiding this comment.
added unsyncedTaskUuids state using sets, adds task UUID to set whenever any field is modified locally, clears all unsynced indicators after successful sync, passes isUnsynced prop to TaskDialog to display visual indicator and total count of unsync tasks on sync button
There was a problem hiding this comment.
added tests for unsynced badge visibility based on isUnsynced prop
There was a problem hiding this comment.
new test cases for unsync tasks
ShivaGupta-14
left a comment
ShivaGupta-14
left a comment
There was a problem hiding this comment.
self review completed! open to any suggestions
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui-implementation
branch
2 times, most recently
from
e81a968 to
825f594
Compare
|
Hi @its-me-abhishek!, could you please review this, I updated the badge to red border as discussed on channel |
|
Unable to merge due to conflicts |
|
resolving that.. |
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui-implementation
branch
from
825f594 to
98bd87c
Compare
- Implement `unsyncedTaskUuids` state to track locally modified tasks - Add red border to task rows for immediate visual feedback - Display pending unsynced count on Sync button via notification badge - Auto-clear unsynced indicators on successful backend sync - Add unit tests for red border visibility, counter, and state clearing Fixes: CCExtractor#143
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui-implementation
branch
from
98bd87c to
7eaefae
Compare
|
solved the conflicts and added this functionality to bulk complete/delete also and added new test cases for them |
2 participants
Description
This PR implements visual indicators for unsynced task modifications. When a task is edited, completed, or deleted, the UI immediately marks it as "Unsynced" until the backend successfully synchronizes all pending changes.
Key Changes
State Management: Implements a local state
unsyncedTaskUuidsto track tasks modified on the frontend but not yet synced to the backend.Visual Indicators:
Optimistic UI Updates: Immediately updates UI for task status changes (completed/deleted) to enhance perceived performance.
Sync Logic: Automatically clears all unsynced indicators once backend synchronization succeeds.
Testing
test.eachfor repetitive date editing tests, reducing code duplication.Checklist
npx prettier --write .(for formatting)gofmt -w .(for Go backend)npm test(for JS/TS testing)Additional Notes
Video:
Screen.Recording.2025-12-27.at.12.00.03.AM.mov