LF- 5213: Farm notes offline support by SayakaOno · Pull Request #4108 · LiteFarmOrg/LiteFarm

SayakaOno · 2026-04-08T21:29:55Z

Description

Update API error handling in the components
- Prevent error snackbars from showing for network errors. (network errors are handled in the API slices)
Add optimistic UI for farm notes and the farm notes unread dot
Update getFarmNotes endpoint
- When offline, queryFn returns the cached data to keep the query in "fulfilled" status; otherwise optimistic updates won't appear on the UI once the query moves to "rejected".
Sync farm notes
- Update useServiceWorkerListener to handle farm note routes, consolidating snackbar messages in one place.
- Add farm note routes to RETRY_ROUTES in sw.js.

Jira link: https://lite-farm.atlassian.net/browse/LF-5213

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Passes test case
UI components visually reviewed on desktop view
UI components visually reviewed on mobile view
Other (please explain)

Checklist:

I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
The precommit and linting ran successfully
I have added or updated language tags for text that's part of the UI
I have ordered translation keys alphabetically (optional: run pnpm i18n to help with this)
I have added the GNU General Public License to all new files

* fix broken translation by converting object to function * add missing enqueueErrorSnackbar

SayakaOno · 2026-04-08T21:36:23Z

-  onSuccess: () => void;
-  onCancel: () => void;


Renamed onSuccess and onCancel to a single onClose callback to make it clearer why it's called after a network error.

SayakaOno · 2026-04-08T22:01:17Z

Extracted snackbar messages and the function into a separate file. Let me know if I broke your original intent!

Thank you for making it so much cleaner + more extensible ❤️ It had become truly behemoth since that original file!

kathyavini

Thank you so much for taking on this development task, and for figuring out all the nuances of working with RTK Query for this!! Just a few hours of pnpm build + pnpm preview testing reminded me OFFLINE IS SO HARD! Thank you for establishing the patterns we can use going forward 🙏

The code looked excellent, and the only bug I could spot was in the isNetworkError function, which was giving false positive to all API errors.

kathyavini · 2026-04-08T22:49:16Z

+        "ONLINE": "Note updated. Will save when you're back online",
+        "SUCCESS": "Note updated offline has been saved successfully"
+      },
+      "FAILED": "Task changes failed to save",


"Note changes failed to save?"

kathyavini · 2026-04-09T20:22:37Z

Thank you for making it so much cleaner + more extensible ❤️ It had become truly behemoth since that original file!

kathyavini · 2026-04-09T20:29:19Z

+  'farm_notes.create': {
+    successMessage: i18n.t('message:FARM_NOTE.SYNC.ADD.SUCCESS'),
+    errors: {},
+    retryMessage: i18n.t('message:FARM_NOTE.SYNC.ADD.NETWORK_ERROR'),


Were you at all bothered by the task pattern being <FEATURE>.<ACTION>.SYNC and this one being <FEATURE>.SYNC.<ACTION>? 😅

I guess it's probably easier to group the SYNC messages together top-level so that should be our pattern going forward, right?

I think so; it made more sense to me.

The task pattern uses <FEATURE> as the top-level key, but in farm note, it's already nested under SUCCESS/ERROR, so adding <FEATURE> felt redundant (here's how farm note looks with the task pattern).
If I'm missing something, please let me know!

kathyavini · 2026-04-09T20:36:28Z

+        try {
+          await queryFulfilled;
+        } catch (error: any) {
+          if (isNetworkError(error)) {


Edit: how did this comment lose it's formatting??! 😅 Lost its link too

In tasks, we only show the to-be-synced snackbar when offline, not in the case of the API being down (which is also a network error). Here the to-be-synced when online would be shown in both cases. I think the original concern from tasks (two snackbars) doesn't exist anymore now that the queue is always replayed manually, though? 🤔

Should we remove the if (isOffline) check in the task sagas now so these two features behave equivalently?

In an ideal world, I think in both places we would use the NETWORK_ERROR string if the user is online, and the ONLINE string if the user is offline. Do you think that's worth the refactor in tasks? Or is it too much of edge case? I don't love where tasks ended up... when the API is down you get:

optimistic update

no snackbar explaining it

and then (on replay of the queue) the series of "task ____ when offline" snackbars! 😬

Here you get the wrong (offline) snackbars, but it's still less confusing!

Thank you for bringing this up, I didn't remember the discussion 🙏

In an ideal world, I think in both places we would use the NETWORK_ERROR string if the user is online, and the ONLINE string if the user is offline.

Let me quickly update it!

Ah, the context aware-snackbars ARE so pleasing!! I love them.

kathyavini · 2026-04-09T20:39:45Z

+          if (isNetworkError(error)) {
+            dispatch(enqueueSuccessSnackbar(i18n.t('message:FARM_NOTE.SYNC.ADD.ONLINE')));
+          } else {
+            // Server error: rollback the optimistic updateconsole.error(error);


Is the console.error(error) meant to be active / on its own line?

🫨 The component logs it, so it shouldn't be here. Thank you for catching 🙏🙏🙏

kathyavini · 2026-04-09T20:49:31Z

+
+export type QueryResult<T> = { data: T } | { error: FetchBaseQueryError };
+
+// In RTK Query, network errors result in undefined status or specific error structure


In which case were you able to create an error with undefined status? I saw both the offline case and the API down case matching the type of FetchBaseQueryError (the one imported in this file) which always had a status of 'FETCH_ERROR`!

Additionally, although this works in the component context (with .unwrap), when it's called from onQueryStarted, it is giving a false positive to every API error, because status is nested within error like this for a regular HTTP error:

So regular API errors like 404 were also giving the sync snackbar (from onQueryStarted) and then the regular error snackbar from the component:

Screen.Recording.2026-04-09.at.12.39.16.PM.mov

I think the logic can be updated like this:

export const isNetworkError = (error: any) => { const status = error?.error?.status ?? error?.status; return status === 'FETCH_ERROR'; };

but again I wasn't able to identify an undefined status state (which this would not work for)...!

I'm so sorry, that was an AI hallucination I didn’t catch 😭
Thank you so much!!!

SayakaOno

Thank you so much for reviewing!
I addressed your comments and added storeActivity('/', 'open_farm_notes') to record the event in offline_event_log table.
I'd appreciate another review 🙏

SayakaOno · 2026-04-13T17:58:23Z

+  'farm_notes.create': {
+    successMessage: i18n.t('message:FARM_NOTE.SYNC.ADD.SUCCESS'),
+    errors: {},
+    retryMessage: i18n.t('message:FARM_NOTE.SYNC.ADD.NETWORK_ERROR'),


I think so; it made more sense to me.

The task pattern uses <FEATURE> as the top-level key, but in farm note, it's already nested under SUCCESS/ERROR, so adding <FEATURE> felt redundant (here's how farm note looks with the task pattern).
If I'm missing something, please let me know!

SayakaOno · 2026-04-13T18:04:25Z

+          if (isNetworkError(error)) {
+            dispatch(enqueueSuccessSnackbar(i18n.t('message:FARM_NOTE.SYNC.ADD.ONLINE')));
+          } else {
+            // Server error: rollback the optimistic updateconsole.error(error);


🫨 The component logs it, so it shouldn't be here. Thank you for catching 🙏🙏🙏

SayakaOno · 2026-04-13T19:03:21Z

+        try {
+          await queryFulfilled;
+        } catch (error: any) {
+          if (isNetworkError(error)) {


Thank you for bringing this up, I didn't remember the discussion 🙏

In an ideal world, I think in both places we would use the NETWORK_ERROR string if the user is online, and the ONLINE string if the user is offline.

Let me quickly update it!

SayakaOno · 2026-04-13T19:39:09Z

+
+export type QueryResult<T> = { data: T } | { error: FetchBaseQueryError };
+
+// In RTK Query, network errors result in undefined status or specific error structure


I'm so sorry, that was an AI hallucination I didn’t catch 😭
Thank you so much!!!

kathyavini

Looks fantastic!! Thank you!

SayakaOno added 20 commits April 8, 2026 13:53

LF-5213 Registered farm note endpoints in SW retry queue

2aeb782

LF-5213 Add translation strings

bfb200a

LF-5213 Add optimistic updates to addFarmNote

0c949a2

LF-5213 Add optimistic updates to farmNote edit and delete

b9e7055

LF-5213 Add optimistic updates to markFarmNotesRead

58c3fab

LF-5213 Add sync translation strings

a820c51

LF-5213 Add sync translation strings

c3cdd58

LF-5213 Add missing dispatch

0f09209

LF-5213 Fix error handling in farm note mutations

0c2815d

LF-5213 Prevent getFarmNotes from reaching rejected state while offline

1dd715d

LF-5213 Add isNetworkError function

5ad25c8

LF-5213 Check network error when handling errors in components

26dc3e1

LF-5213 Adjust and cleanup farmNoteApi

52f96c0

LF-5213 Update translation keys

a3201cd

LF-5213 Move QueryResult type to util file

687d389

LF-5213 Add comment for getFarmNotes queryFn

2547571

LF-5213 Extract feedbackMessages

6cd75b4

LF-5213 Resolve circular reference

c0a41f3

LF-5213 Bug fix and tweaks

8379846

* fix broken translation by converting object to function * add missing enqueueErrorSnackbar

LF-5213 Enhance readability

7174eb6

SayakaOno self-assigned this Apr 8, 2026

SayakaOno added enhancement New feature or request new translations New translations to be sent to CrowdIn are present labels Apr 8, 2026

SayakaOno commented Apr 8, 2026

View reviewed changes

SayakaOno marked this pull request as ready for review April 8, 2026 22:02

SayakaOno requested review from a team as code owners April 8, 2026 22:02

SayakaOno requested review from kathyavini and removed request for a team April 8, 2026 22:02

SayakaOno mentioned this pull request Apr 9, 2026

LF-5231: Fix unread indicator missing for notes fetched after seen at is set #4110

Merged

16 tasks

Merge branch 'integration' into LF-5213/Farm_notes_offline_support

6278185

kathyavini reviewed Apr 9, 2026

View reviewed changes

SayakaOno added 6 commits April 13, 2026 10:35

LF-5213 Fix translation

a71e6b1

LF-5213 Fix comment

493607f

LF-5213 Add server down snackbar messages

a57490a

LF-5213 Add server down snackbar messages for task operations

22097f1

LF-5213 Fix isNetworkError function

ae07ac6

LF-5213 Log offline farm notes open event

a5c4364

SayakaOno commented Apr 13, 2026

View reviewed changes

kathyavini approved these changes Apr 13, 2026

View reviewed changes

kathyavini added this pull request to the merge queue Apr 13, 2026

Merged via the queue into integration with commit bb7fe45 Apr 13, 2026
4 checks passed

SayakaOno deleted the LF-5213/Farm_notes_offline_support branch April 13, 2026 21:13


		export type QueryResult<T> = { data: T } \| { error: FetchBaseQueryError };

		// In RTK Query, network errors result in undefined status or specific error structure

Conversation

SayakaOno commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SayakaOno left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SayakaOno commented Apr 8, 2026 •

edited

Loading

kathyavini Apr 9, 2026 •

edited

Loading

kathyavini Apr 9, 2026 •

edited

Loading