feat(sync): RN-1717: Sync bugs

[chris-bes]

Changes:

• Fixing found bugs when testing for datatrak offline

[gemini-code-assist]

Summary of Changes

Hello @chris-bes, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a comprehensive overhaul of the client-side synchronization mechanism, focusing on providing users with real-time feedback on sync progress and status. It establishes a robust event-driven system for managing sync states, including distinct stages for pushing, pulling, and persisting data, and integrates this feedback directly into the user interface. Additionally, the changes enhance the application's progressive web app capabilities by implementing a user-friendly prompt for service worker updates, ensuring users are always on the latest version.

Highlights

• Enhanced Sync Progress Tracking: Implemented a detailed, staged progress tracking system within the ClientSyncManager with distinct stages (Push, Pull, Persist) and percentage updates, providing granular feedback on synchronization status.
• Real-time Sync UI Updates: The SyncPage now dynamically displays sync status, progress percentage, current stage, and messages using an event-driven architecture (mitt), offering a more interactive and informative user experience.
• Improved Service Worker Handling: Added logic to main.tsx to detect new service worker versions and proactively prompt the user to update and reload the application, ensuring users are always on the latest version for Progressive Web App (PWA) deployments.
• Refactored Sync Logic: The ClientSyncManager was significantly refactored to manage sync state, handle urgent synchronization requests, and emit events for UI consumption, making the overall sync process more observable and controllable.
• New Sync UI Components: Introduced HeaderRight to house a mobile-specific sync button and LastSyncDetails to display counts of pushed and pulled records after a successful synchronization, enhancing the user interface's functionality.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a significant feature for data synchronization, including a new sync manager, UI pages for sync status, and service worker updates. The implementation is comprehensive, with detailed progress tracking and state management. My review focuses on improving robustness, fixing potential bugs, and enhancing code quality. Key feedback includes addressing a critical null-safety issue in the SyncContext, correcting event handling in the SyncPage component, and fixing a potential bug in the sync event type definitions. I've also included suggestions for better UX with service worker updates and general code cleanup.

[gemini-code-assist]

The clientSyncManager is initialized as null and set asynchronously in a useEffect. However, its type in SyncContextType is non-nullable, and you're using a non-null assertion (!) when providing it to the context. This can lead to runtime errors if a consumer accesses clientSyncManager before it's initialized.

To ensure type safety and prevent potential crashes, you should prevent rendering the children of SyncProvider until clientSyncManager has been initialized.

Suggested change

	return (
	<SyncContext.Provider
	value={{ clientSyncManager: clientSyncManager!, refetchSyncedProjectIds }}
	>
	{children}
	</SyncContext.Provider>
	);
	if (!clientSyncManager) {
	// Or return a loading indicator
	return null;
	}
	return (
	<SyncContext.Provider value={{ clientSyncManager, refetchSyncedProjectIds }}>
	{children}
	</SyncContext.Provider>
	);

[gemini-code-assist]

The constants SYNC_ERROR and SYNC_RECORD_ERROR have the same value 'syncRecordError'. This is likely a copy-paste error and can lead to bugs where two distinct events are treated as the same. These values should be unique to ensure correct event handling.

Suggested change

	SYNC_ERROR: 'syncRecordError',
	SYNC_RECORD_ERROR: 'syncRecordError',
	SYNC_ERROR: 'syncError',
	SYNC_RECORD_ERROR: 'syncRecordError',

[gemini-code-assist]

This useEffect hook is missing a dependency array. This will cause it to run on every render, re-subscribing and un-subscribing the event handler (syncManager.emitter.on('*', ...) and syncManager.emitter.off('*', ...)). This is inefficient and can lead to memory leaks or unexpected behavior. You should add syncManager to the dependency array to ensure the effect only runs when the syncManager instance changes.

  useEffect(() => {
    const handler = (action: any, data: any): void => {
      switch (action) {
        case SYNC_EVENT_ACTIONS.SYNC_IN_QUEUE:
          setProgress(0);
          setIsQueuing(true);
          setIsSyncing(false);
          setErrorMessage(null);
          setProgressMessage(syncManager.progressMessage);
          break;
        case SYNC_EVENT_ACTIONS.SYNC_STARTED:
          setIsQueuing(false);
          setSyncStarted(true);
          setIsSyncing(true);
          setProgress(0);
          setProgressMessage('Initialising sync');
          setErrorMessage(null);
          // activateKeepAwake(); // don't let the device sleep while syncing
          break;
        case SYNC_EVENT_ACTIONS.SYNC_ENDED:
          setIsQueuing(false);
          setIsSyncing(false);
          setProgress(0);
          setProgressMessage('');
          // deactivateKeepAwake();
          break;
        case SYNC_EVENT_ACTIONS.SYNC_STATE_CHANGED:
          setSyncStage(syncManager.syncStage);
          setProgress(syncManager.progress);
          setProgressMessage(syncManager.progressMessage);
          setFormattedLastSuccessfulSyncTime(
            formatlastSuccessfulSyncTime(syncManager.lastSuccessfulSyncTime),
          );
          setLastSyncPushedRecordsCount(syncManager.lastSyncPushedRecordsCount);
          setLastSyncPulledRecordsCount(syncManager.lastSyncPulledRecordsCount);
          break;
        case SYNC_EVENT_ACTIONS.SYNC_ERROR:
          setIsQueuing(false);
          setErrorMessage(data.error);
          break;
        default:
          break;
      }
    };
    syncManager.emitter.on('*', handler);
    return () => {
      syncManager.emitter.off('*', handler);
    };
  }, [syncManager]);

[gemini-code-assist]

The Logo styled component is defined but never used within this file. It appears to be dead code and should be removed to improve code clarity and maintainability.

[gemini-code-assist]

Using the browser's native confirm() dialog is blocking and can provide a disruptive user experience that doesn't match the application's styling. Consider replacing this with a non-blocking UI element, such as a snackbar or toast notification, with an "Update" button to inform the user about the new version and allow them to update at their convenience.

[gemini-code-assist]

Calling registration.update() inside the updatefound event listener is redundant. The updatefound event is fired after a check for updates (e.g., from navigator.serviceWorker.register()) has found a new service worker version. Calling update() again here immediately re-triggers a check. Periodic checks for updates should be handled separately, for example, on an interval or on subsequent page loads, not in response to finding an update.

[gemini-code-assist]

Using any for the error type in a catch block is discouraged as it bypasses type checking. It's safer to type the error as unknown and then perform a type check before accessing its properties. This improves type safety and makes error handling more robust.

    } catch (error: unknown) {
      const message = error instanceof Error ? error.message : String(error);
      this.emitter.emit(SYNC_EVENT_ACTIONS.SYNC_ERROR, { error: message });
    }

[gemini-code-assist]

The useCallback hook for manualSync is missing syncManager in its dependency array. Since manualSync uses syncManager in its implementation, it should be included in the dependencies to prevent the callback from capturing a stale syncManager instance.

Suggested change

	const manualSync = useCallback(() => {
	syncManager.triggerUrgentSync(projectsInSync);
	}, [projectsInSync]);
	const manualSync = useCallback(() => {
	syncManager.triggerUrgentSync(projectsInSync);
	}, [syncManager, projectsInSync]);

[cursor]

Bug: Misplaced onConflictMerge Leads to SQL Failure.

The onConflictMerge option is applied after query.as() but must be applied immediately after the query method (INSERT) and before other query modifiers. In Knex, onConflict().merge() only works with INSERT queries and must be chained directly after the insert operation. Placing it after as(), offset(), and name aliasing will cause the conflict resolution to fail or produce incorrect SQL.

 

[cursor]

Bug: Broken Task Queries: Missing Survey Link

The findCompletedTasks method filters by 'survey.project_id' (via getTaskMetricsBaseQuery) but doesn't include the required join with the survey table in the query options. The method should pass getTaskMetricsBaseJoin() as the second parameter to this.find() to ensure the survey table is joined, otherwise the query will fail because survey.project_id won't be available.

 

[cursor]

Bug: Unnecessary Loading Screens Degrade User Experience

The useUser query is configured with staleTime: 0, cacheTime: 0, and refetchOnMount: 'always', which causes the query to refetch on every component mount. Since CurrentUserContextProvider shows a FullPageLoader when isLoading is true, users will see a loading screen every time the component re-renders or remounts, creating a poor user experience. The query should use reasonable caching to avoid unnecessary refetches and loading states.