feat: observation list toggle by cimigree · Pull Request #1795 · digidem/comapeo-mobile

cimigree · 2026-03-30T19:37:13Z

added on top of #1782
closes #1711

Summary

When Early Access in enabled, Adds a filter toggle to the Observations List
Users can switch between All (all observations) and Just You (only observations created on this device)
Filter state persists across navigation and resets to "All" on app restart or after 1 hour of inactivity, and when switching projects

Implementation details

New ObservationFilterContext (Zustand + MMKV persistence) manages filter state
Filtering uses the createdBy field on observation/track documents to match the current device ID
Both observations and tracks are filtered

Testing

Adds E2E test (tests/e2e/specs/observations/observation-filter-toggle.test.ts) covering:
- Toggle appears when Early Access is on, hidden when off
- Default state is "All" active
- Toggling between All and Just You updates active state correctly
- Observations remain visible after toggling (single-device test)
- I can't actually test whether or not the filter really works because I can't get the observations from another device, so I will add that to the manual testing document.
Updated docs/EndToEndTests/Observations.md

Screenshots

No Toggle (no early access)

All

Just You

…mes early adopter to early access.

ErikSin

I think we can get ride of the provider completely and hold all the state in observationsList/index.tsx. Because it is a tab IT always remain mounted, so if the user sets state in that page, that state does not reset when the user navigates away (like it normally does in react). So therefore we dont actually need a context to hold the state.

Eg:

export function ObservationList(){

 const isEarlyAccessEnabled = useEarlyAccessState(s => s.isEarlyAccessEnabled);
 const [filterMode, setFilterMode] = React.useState<'all' | 'mine'>('all');
 const lastInteractionRef = React.useRef<number | null>(null);

useFocusEffect(
    // check on every navigation event back to this page whether it has been an hour and the filter should reset
    React.useCallback(() => {
      if (
        lastInteractionRef.current !== null &&
        Date.now() - lastInteractionRef.current > 1_HOUR
      ) {
        setFilterMode('all');
        lastInteractionRef.current = null;
      }
    }, []),
  );

 function handleFilterModeChange(mode: 'all' | 'mine'){
   setFilterMode(mode);
   lastInteractionRef.current = Date.now();
 {

 const filteredData = //filtered data here
 
 return (
   {isEarlyAccessEnabled && (
        <ObservationFilterToggle
          filterMode={filterMode}
          onFilterModeChange={handleFilterModeChange}
        />
      )}

   < observations={filteredData}
     ...REST OF OBSERVATION LIST />
 )
}

What do you think? This feel a little more verbose, but simpler architecturally

ErikSin · 2026-04-06T21:58:05Z

+  createJSONStorage,
+  persist as createPersistedState,
+} from 'zustand/middleware';
+import * as v from 'valibot';


I don't think we should use a persisted store here. The requirement is that when the app resets, the state reset (it goes back to showing all observations). In otherwords it does not need to know the state before it was reset since its alway shows all observations and therefore, the state does not need to be persisted.

ErikSin · 2026-04-06T21:58:07Z

                                    <EarlyAccessStoreProvider
                                      value={earlyAccessStore}>
-                                      <AuthProvider>{children}</AuthProvider>
+                                      <ObservationFilterStoreProvider


I think we should scope this provider. The ObservationFilterStoreProvider is only being used by the observation list, so lets just wrap the observation list in this context so its not being consumed by the entire app

Upon further thought, I don't think we need a provider. The state can live all in the observation list

ErikSin · 2026-04-06T22:25:29Z

+  React.useEffect(() => {
+    if (isEarlyAccessEnabled) {
+      checkAndResetIfNeeded();
+    }
+  }, [isEarlyAccessEnabled, checkAndResetIfNeeded]);


this check should happen everytime the user is navigated back to this page. The requirement is that it should reset every hour. Right now it will only reset if early access is enabled or disabled.

There could be the case where the user is on this page for over an hour (and hasn't navigated away and back to this page). If thats the case, it wont reset, but I think that is ok. We would have to create a timer, which feel like overkill and I think it ok to just check on navigation events.

…in the observation list.

cimigree · 2026-04-07T15:40:43Z

@ErikSin, I am afraid to say I didn't realize the state was not reset when the user navigated away! So I think your solution is a great one given that truth.
I updated to include your changes. I also had to add a useEffect to reset when the early access mode is turned off...

ErikSin · 2026-04-07T17:58:47Z

@ErikSin, I am afraid to say I didn't realize the state was not reset when the user navigated away!

I only know this from spending DAYS trying to figure out why the location hook we were using in the map screen was not unmounting when the user navigated away.

ErikSin

It looks good. Sorry you had to go through the work of creating and deleting the provider, but the subsequent changes are architecturally really simple which is nice.

1 minor problem, but not a blocker

ErikSin · 2026-04-07T19:21:58Z

+        setFilterMode('all');
+        lastInteractionRef.current = null;
+      }
+    }, []),
+  );
+
+  React.useEffect(() => {
+    if (!isEarlyAccessEnabled) {
+      setFilterMode('all');
+      lastInteractionRef.current = null;
+    }
+  }, [isEarlyAccessEnabled]);
+
+  function handleFilterModeChange(mode: 'all' | 'mine') {
+    setFilterMode(mode);
+    lastInteractionRef.current = Date.now();


There is a slight discrepancy in how we are setting the lastInteractionRef. In the useFocusEffect and the useEffect when filterMode is being set to all we are setting lastInteractionRef to null. In the handleFilterModeChange we are setting lastInteractionRef to a date regardless.

I think the best would be to just change it in handleFilterModeChange

eg:

function handleFilterModeChange(mode: 'all' | 'mine') { setFilterMode(mode); lastInteractionRef.current = mode === 'mine' ? Date.now() : null; }

ErikSin · 2026-04-07T19:34:50Z

+  React.useEffect(() => {
+    if (!isEarlyAccessEnabled) {
+      setFilterMode('all');
+      lastInteractionRef.current = null;
+    }
+  }, [isEarlyAccessEnabled]);


Sorry, one more thing, I think we can get rid of this useEffect entitely. I think the filteredData handles the early access state.

If the user had it filterMode set to 'mine' and then turned off the early access, the state would not be reset (but the user would still see ALL observations). And then if they turn early access on again (before 1 hour has passed), THEN the state would be set to 'mine' which i don't think is a problem

cimigree added 7 commits March 26, 2026 14:24

removes environment variable so early access feature is visible. Rena…

8f1df90

…mes early adopter to early access.

Adds back E2E test.

e292ea2

Initial implementation of observation list toggle.

7163a40

Adds end to end test, updates test ids, updates documentation.

50a6e0b

Adds context and provider to test setup.

91b2f6b

Fix to test.

0a5f957

Tweaks to test.

8238487

cimigree requested a review from ErikSin March 30, 2026 21:45

ErikSin mentioned this pull request Apr 6, 2026

chore: add back early access #1782

Closed

ErikSin requested changes Apr 6, 2026

View reviewed changes

cimigree added 2 commits April 7, 2026 11:07

Merge branch 'develop' into feat/obs-list-toggle

762af81

Removes context and provider for observation list toggle and puts it …

de0c680

…in the observation list.

cimigree requested a review from ErikSin April 7, 2026 15:40

ErikSin approved these changes Apr 7, 2026

View reviewed changes

ErikSin reviewed Apr 7, 2026

View reviewed changes

Removes use effect. Fixes ref to be consistent.

4921d1e

cimigree merged commit b50579d into develop Apr 8, 2026
11 checks passed

cimigree deleted the feat/obs-list-toggle branch April 8, 2026 15:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: observation list toggle#1795

feat: observation list toggle#1795
cimigree merged 10 commits intodevelopfrom
feat/obs-list-toggle

cimigree commented Mar 30, 2026

Uh oh!

ErikSin left a comment

Uh oh!

ErikSin Apr 6, 2026

Uh oh!

ErikSin Apr 6, 2026

Uh oh!

ErikSin Apr 6, 2026

Uh oh!

ErikSin Apr 6, 2026

Uh oh!

cimigree commented Apr 7, 2026

Uh oh!

ErikSin commented Apr 7, 2026

Uh oh!

ErikSin left a comment

Uh oh!

ErikSin Apr 7, 2026

Uh oh!

cimigree Apr 8, 2026

Uh oh!

ErikSin Apr 7, 2026

Uh oh!

cimigree Apr 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

cimigree commented Mar 30, 2026

Summary

Implementation details

Testing

Screenshots

Uh oh!

ErikSin 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!

cimigree commented Apr 7, 2026

Uh oh!

ErikSin commented Apr 7, 2026

Uh oh!

ErikSin 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants