fix(offline): make the app a pwa #16
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR transforms the application into a Progressive Web App (PWA) with offline support capabilities. The implementation moves away from a custom offline storage system to leverage modern browser APIs and query persistence for better performance and reliability.
- Configures PWA manifest and service worker for offline functionality
- Implements query persistence using TanStack Query for offline data caching
- Refactors voting and notes system to use React Query mutations instead of custom offline hooks
- Simplifies component architecture by removing offline-specific props and state management
Reviewed Changes
Copilot reviewed 63 out of 65 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | PWA configuration with service worker and manifest setup |
| src/main.tsx | Query persistence configuration for offline data caching |
| src/hooks/useOnlineStatus.ts | New hook for detecting online/offline status |
| src/components/ui/OfflineIndicator.tsx | Visual indicator for offline state |
| Multiple voting/notes components | Refactored to use React Query mutations directly |
| Multiple offline-specific files | Removed custom offline storage and related services |
Comments suppressed due to low confidence (1)
src/pages/SetDetails/SetVotingButtons.tsx:1
- The function call uses
getVoteValue(voteType)but should useconfig.valuesincevoteTypeis already the key from VOTES_TYPES array, not the actual vote value.
import { Button } from "@/components/ui/button";
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| onClick={() => handleDelete(note.id)} |
There was a problem hiding this comment.
The function handleDelete is called but not defined in scope. The function is defined after the return statement but is not accessible due to incorrect placement.
| /> | ||
| <div className="flex items-center space-x-2"> | ||
| <Button | ||
| onClick={handleSave} |
There was a problem hiding this comment.
The function handleSave is called but not defined in scope. The function is defined after the return statement but is not accessible due to incorrect placement.
| </Button> | ||
| <Button | ||
| variant="outline" | ||
| onClick={handleCancel} |
There was a problem hiding this comment.
The function handleCancel is called but not defined in scope. The function is defined after the return statement but is not accessible due to incorrect placement.
| </div> | ||
| ); | ||
|
|
||
| function handleVote(voteType: number) { |
There was a problem hiding this comment.
The function handleVote is called on line 27 but is defined after the return statement, making it inaccessible. This will cause a reference error.
| const value = getVoteValue(voteType); | ||
| if (onVote && value) { | ||
| onVote(set.id, value); | ||
| async function handleVote(voteType: number) { |
There was a problem hiding this comment.
The function handleVote is called on line 56 but is defined after the return statement, making it inaccessible. This will cause a reference error.
No description provided.