feat(tasks): add visual indicator for unsynced local changes #207
Conversation
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui
branch
2 times, most recently
from
1bd542e to
f7f9057
Compare
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui
branch
4 times, most recently
from
8ff6827 to
76df3ab
Compare
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui
branch
2 times, most recently
from
164a544 to
1dfb900
Compare
|
Hi @its-me-abhishek! |
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui
branch
from
1dfb900 to
d78e8f1
Compare
its-me-abhishek
left a comment
its-me-abhishek
left a comment
There was a problem hiding this comment.
hey, this does not really go along the lines that is intended for this feature. The feature shall simply just be a state of set that handles a set of UUIDs of tasks that have been recently modified, and hence display them using the set calls upon rendering.
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui
branch
from
d78e8f1 to
5e05fe7
Compare
|
@its-me-abhishek, Thanks for explaining! I've made the necessary changes, the "Unsynced" badge will now only appear when an existing task is edited, not when a new task is added. Quick question: Should I update the toast from "Task added successfully!" to "Task added! Sync to see it (or update)." to make it clearer? Or keep it as is? PR is ready for review. |
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui
branch
2 times, most recently
from
2934893 to
f35b309
Compare
|
Hi @its-me-abhishek, could you please review this PR when you get a chance? |
frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
Outdated
Show resolved
Hide resolved
frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
Outdated
Show resolved
Hide resolved
frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
Outdated
Show resolved
Hide resolved
frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
Outdated
Show resolved
Hide resolved
|
Are there any updates on this PR @ShivaGupta-14 ? |
|
Hi @its-me-abhishek! Yes, on it! I was travelling for a few days, so there was a slight delay. I’ll finish all the remaining work (review and updates) by tomorrow EOD |
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui
branch
from
f35b309 to
e66304e
Compare
- Implements a local state `unsyncedTaskUuids` to track items modified on the frontend but not yet pushed to the backend. - Adds an 'Unsynced' badge to task rows for immediate visual feedback on edit, completion, or deletion. - Implements optimistic UI updates for task status changes (completed/deleted) to improve perceived performance. - Automatically clears all unsynced indicators upon successful synchronization with the backend. - Displays the number of pending local changes on the button and includes unit tests. Fixes CCExtractor#143
ShivaGupta-14
force-pushed
the
feat/143-unsync-ui
branch
from
e66304e to
291cf21
Compare
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
|
Hi @its-me-abhishek! this is ready for review. please review whenever you get time. |
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: Link to see changes