Skip to content

fix(web): close overlay after successful sync#1482

Merged
tyler-dane merged 10 commits intomainfrom
fix/1478-import-bug
Feb 28, 2026
Merged

fix(web): close overlay after successful sync#1482
tyler-dane merged 10 commits intomainfrom
fix/1478-import-bug

Conversation

@tyler-dane
Copy link
Contributor

Closes #1478

…mplates

- Removed unnecessary emoji from template names for a cleaner presentation.
- Eliminated the priority dropdown from the feature request template to streamline the submission process.
- Updated the bug report template to remove the emoji, enhancing consistency across issue templates.
- Adjusted the configuration file to reflect these changes, ensuring clarity in the issue submission process.
- Updated SocketProvider tests to utilize `act` for asynchronous callback invocations, ensuring proper handling of state updates during testing.
- Improved test reliability by wrapping callback executions in `act`, aligning with React's testing best practices.
- Introduced a new test case to verify the correct handling of import end events when the awaitingImportResults state changes mid-render.
- Utilized a ref to prevent stale closures, ensuring that the correct state is referenced during socket event processing.
- Enhanced the reliability of the useGcalSync hook by ensuring it properly processes events even when state changes occur asynchronously.
- Deleted the circle.svg file from the public SVG assets as it is no longer needed in the project.
- This cleanup helps streamline the asset management and reduces unnecessary file clutter.
Copilot AI review requested due to automatic review settings February 27, 2026 22:07
@tyler-dane tyler-dane changed the title fix(backend): close overlay after successful sync fix(web): close overlay after successful sync Feb 27, 2026
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Addresses #1478 by ensuring the Google Calendar import completion event reliably updates “awaiting import results” flows and triggers a refetch so the UI can exit the loading state after re-auth.

Changes:

  • Update useGcalSync to avoid stale state in socket event handlers by reading awaitingImportResults via a ref and triggering a fetch on successful import end.
  • Adjust/add tests around the import-start/import-end socket flow and wrap socket-callback invocations in act.
  • Remove an unused SVG asset and simplify GitHub issue template labels/names.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/web/src/socket/provider/SocketProvider.test.tsx Wraps socket callback invocations in act to ensure React state updates flush in tests.
packages/web/src/socket/hooks/useGcalSync.ts Uses a ref to read the latest “awaiting import results” state in socket callbacks; parses results; dispatches fetch trigger on import end.
packages/web/src/socket/hooks/useGcalSync.test.ts Adds coverage for the updated import flow and edge cases (payload formats, malformed JSON).
packages/web/src/public/svg/circle.svg Removes a previously committed SVG asset.
.github/ISSUE_TEMPLATE/config.yml Removes emojis from contact link names.
.github/ISSUE_TEMPLATE/2-bug-report.yml Removes emoji from template name.
.github/ISSUE_TEMPLATE/1-feature-request.yml Removes emoji from template name and removes a “Priority” dropdown.

tyler-dane and others added 3 commits February 27, 2026 14:15
- Update ref synchronously during render instead of in useEffect
  to fully eliminate race condition window
- Rename misleading test name (timeout -> successfully)
- Fix test assertions to validate action creator calls directly
  instead of using unused variable and dispatch-based assertions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Updated state management and selectors to reflect the new naming convention for clarity.
- Adjusted related components and tests to ensure consistency with the updated state name.
- This change enhances code readability and aligns with the overall naming strategy in the project.
- Removed the 1-second delay in the reconnect function, allowing for immediate reconnection after disconnection.
- Updated the corresponding test case to reflect the change in behavior, ensuring it accurately tests the immediate reconnection functionality.
- This change enhances the responsiveness of the socket client and improves the clarity of the test case.
Copilot AI review requested due to automatic review settings February 27, 2026 22:30
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 13 out of 14 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

packages/web/src/components/SyncEventsOverlay/SyncEventsOverlay.tsx:20

  • This component now selects selectIsImportPending, but the local variable and inline comments still refer to awaitingImportResults. Renaming the variable/comments to isImportPending (or similar) would reduce confusion when reading overlay activation logic.
  const awaitingImportResults = useAppSelector(selectIsImportPending);
  const isAuthenticating = useAppSelector(selectIsAuthenticating);

  // Show overlay when:
  // - isAuthenticating: User clicked sign-in, popup is open (from auth slice)
  // - awaitingImportResults: OAuth completed, waiting on import results
  // - importing: Calendar import in progress (from sync slice)
  const shouldBeActive = isAuthenticating || awaitingImportResults || importing;

- Removed the use of fake timers in the tests for useGcalSync, simplifying the test setup.
- Updated type definitions for event handler variables to allow for undefined values, enhancing type safety.
- This change improves test clarity and aligns with best practices for handling asynchronous events in React testing.
…tion flow

- Introduced a new test suite for the Google Calendar re-authentication process, validating user experience during import operations.
- Implemented tests to ensure the spinner visibility during import initiation, handling of socket events, and correct state updates upon import completion.
- Enhanced test reliability by utilizing `act` for asynchronous operations and capturing socket event callbacks.
- This addition improves coverage for the re-authentication flow and ensures a seamless user experience during Google Calendar synchronization.
- Updated the Redux action and corresponding function names to improve clarity and consistency in the import state management.
- Adjusted all related components and tests to reflect the new naming convention, ensuring seamless integration across the codebase.
- This change enhances code readability and aligns with the overall naming strategy in the project.
@tyler-dane tyler-dane merged commit ddd0437 into main Feb 28, 2026
5 of 6 checks passed
@tyler-dane tyler-dane deleted the fix/1478-import-bug branch February 28, 2026 01:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Re-authenticating after session expired flow causes indefinite spinner to load

2 participants