Offline Mode

[renatodellosso]

Only has pit reports for now.

Data that was collected while offline is not overwritten when you reconnect to WiFi. However, remote data will be displayed instead. For example, if you submit a report online and then reconnect, your report will be saved, but it will appear unsubmitted until you sync your offline and online data.

The PWA (progressive web app) is done using the Serwist library. Serwist provides the ability to install Gearbox as a desktop app and cache fetch requests. A LocalStorageDbInterface is used to store cached data in local storage.

Offline pages are disabled in dev mode! You need to run Gearbox in production mode to test offline mode (npm run build + npm run start).

[Copilot]

Pull Request Overview

This pull request implements an offline mode by migrating several pages from server‐side rendering to client‐side data fetching and by updating service worker configurations and database interface methods. Key changes include:

• Removing getServerSideProps in favor of useEffect‑based fetching in pages for seasons, competitions, and pit reports.
• Updating service worker configuration and related imports.
• Refactoring various database interface methods to use updated findObjectBySlugLookUp imports.

Reviewed Changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
pages/[teamSlug]/[seasonSlug]/index.tsx	Converted page to client‑side data fetching and removed SSR props.
pages/[teamSlug]/[seasonSlug]/[competitonSlug]/pit/[...pitreportId].tsx	Updated pit report form to fetch data client‑side and refactored prop usage.
pages/[teamSlug]/[seasonSlug]/[competitonSlug]/index.tsx	Refactored competition page to use client‑side state extraction.
next.config.ts	Moved service worker source and added cacheOnNavigation option.
lib/slugToId.ts & dbinterfaces	Updated imports to use the new findObjectBySlugLookUp implementation.
Other API and component files	Minor refactors to align with the new offline mode design.

Comments suppressed due to low confidence (1)

pages/[teamSlug]/[seasonSlug]/[competitonSlug]/index.tsx:92

• [nitpick] The route parameter name 'competitonSlug' appears to be a typo. Consider verifying if this is intentional or if it should be 'competitionSlug' for clarity.

const compSlug = router.query?.competitonSlug as string | undefined;

[Copilot]

The retrieval of pitReportId appears incorrect. Consider casting router.query.pitreportId to a string array (e.g. (router.query.pitreportId as string[])[0]) to safely access the first element.

Suggested change

	const pitReportId = (router.query.pitreportId as string[0])?.[0];
	const pitReportId = (router.query.pitreportId as string[])?.[0];

[Copilot]

Pull Request Overview

This PR introduces an offline mode proof of concept with initial support for pit reports. Key changes include:

• New game modules (IntoTheDeep and CenterStage) with updated layouts and pit report configurations for offline use.
• Enhancements to database interfaces (via adding addOrUpdateObject and updating imports) and local storage utilities to enable offline data persistence.
• Updates to service worker and UI components (e.g. CompHeaderCard, MatchScheduleCard, SignInMenu) to support offline syncing and caching of competition data.

Reviewed Changes

Copilot reviewed 40 out of 40 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
lib/games/IntoTheDeep.ts	Adds offline pit report layouts and data classes for the IntoTheDeep game.
lib/games/CenterStage.ts	Introduces similar offline support and layouts for the CenterStage game.
lib/client/sw.ts	Disables navigationPreload to improve offline caching; includes a developer note.
lib/client/dbinterfaces/*.ts	Refactors import statements and adds addOrUpdateObject APIs for local/in-memory DB interfaces.
lib/client/LocalStorageInterface.ts	New interface and implementations for local storage-based state persistence.
lib/api/*	Includes new offline sync helpers and updates ClientApiUtils for handling offline data sync.
components/*	UI components updated/refactored to integrate offline functionality and improve user experience.

Comments suppressed due to low confidence (1)

lib/client/sw.ts:17

• Consider reviewing the change to disable navigationPreload; if this configuration is critical for performance or caching, verify that disabling it does not introduce unexpected side effects at runtime.

navigationPreload: false, // Not 100% sure this should be disabled, but it made stuff work