Skip to content

refactor: pass only required fields to useBookingForm and useBookings hooks#22494

Closed
hbjORbj wants to merge 7 commits intomainfrom
devin/1752528664-refactor-booker-hook-event-params
Closed

refactor: pass only required fields to useBookingForm and useBookings hooks#22494
hbjORbj wants to merge 7 commits intomainfrom
devin/1752528664-refactor-booker-hook-event-params

Conversation

@hbjORbj
Copy link
Contributor

@hbjORbj hbjORbj commented Jul 14, 2025

refactor: pass only required fields to useBookingForm and useBookings hooks

Summary

Refactored the BookerWebWrapper component to pass only the required fields to the useBookingForm and useBookings hooks instead of passing the entire event object. This optimization reduces memory usage and makes the data flow more explicit.

Changes made:

  • useBookingForm: Now receives only { bookingFields: event.data.bookingFields } instead of the full event.data
  • useBookings: Now receives a filtered event object containing only the fields specified in the IUseBookings interface: id, slug, subsetOfHosts, requiresConfirmation, isDynamic, metadata, forwardParamsSuccessRedirect, successRedirectUrl, length, recurringEvent, schedulingType, and subsetOfUsers

The refactoring maintains the same event structure (with data property) to avoid breaking the hook implementations while significantly reducing the amount of data passed between components.

Review & Testing Checklist for Human

⚠️ YELLOW RISK - Moderate risk due to core functionality impact without end-to-end testing

  • Test the complete booking flow end-to-end - Create a test booking to ensure no runtime errors occur and all functionality works correctly
  • Verify hook interfaces match reality - Check that the useBookingForm and useBookings hooks don't internally access any event properties beyond what's defined in their interfaces
  • Check for hidden data dependencies - Ensure the extracted fields don't have nested references to other parts of the event object that could cause runtime issues

Diagram

%%{ init : { "theme" : "default" }}%%
graph TD
    BWW["BookerWebWrapper.tsx<br/>(EDITED)"]:::major-edit
    UBF["useBookingForm.ts<br/>(hook interface)"]:::context
    UB["useBookings.ts<br/>(hook interface)"]:::context
    IUseBookingForm["IUseBookingForm<br/>(interface)"]:::context
    IUseBookings["IUseBookings<br/>(interface)"]:::context
    
    BWW -->|"filtered: { bookingFields }"| UBF
    BWW -->|"filtered: { id, slug, etc. }"| UB
    IUseBookingForm -->|"defines required fields"| UBF
    IUseBookings -->|"defines required fields"| UB
    
    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit
        L3[Context/No Edit]:::context
    end
    
    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#ADD8E6
    classDef context fill:#FFFFFF
Loading

Notes

  • Type checking passed: All TypeScript checks pass, confirming the filtered data structure matches the hook interfaces
  • Performance improvement: Reduces memory usage by only passing required fields instead of the entire event object
  • Maintainability: Makes data dependencies explicit and easier to track
  • Session info: Requested by benny@cal.com (@hbjORbj) - Session: https://app.devin.ai/sessions/7197f6bb9f0043a8a65d33e61d386c7d

⚠️ Important: While the interfaces suggest this refactoring is safe, the booking flow should be tested manually to ensure no hidden dependencies exist between the hooks and the full event object.

… hooks

- Extract only bookingFields from event.data for useBookingForm hook
- Extract only required event properties for useBookings hook based on IUseBookings interface
- Reduces memory usage and makes data flow more explicit
- Maintains same event structure to avoid breaking hook implementations

Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
@devin-ai-integration
Copy link
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@vercel
Copy link

vercel bot commented Jul 14, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
cal Ignored Ignored Preview Aug 18, 2025 0:35am
cal-eu Ignored Ignored Preview Aug 18, 2025 0:35am

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jul 14, 2025

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch devin/1752528664-refactor-booker-hook-event-params

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@keithwillcode keithwillcode added core area: core, team members only foundation labels Jul 14, 2025
@delve-auditor
Copy link

delve-auditor bot commented Jul 14, 2025

No security or compliance issues detected. Reviewed everything up to 0e073ab.

Security Overview
  • 🔎 Scanned files: 5 changed file(s)
Detected Code Changes
Change Type Relevant files
Refactor ► useBookingForm.ts
    Update interface and parameters for event booking fields
► useBookings.ts
    Refactor type imports and interfaces
► useInitialFormValues.ts
    Refactor booking fields handling
► BookerPlatformWrapper.tsx
    Update booking form initialization
► BookerWebWrapper.tsx
    Update booking form and event handling

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

@github-actions
Copy link
Contributor

github-actions bot commented Jul 14, 2025

E2E results are ready!

dakshgup added a commit to dakshgup/cal.com that referenced this pull request Jul 14, 2025
…okingForm and useBookings hooks

Originally by: hbjORbj

# refactor: pass only required fields to useBookingForm and useBookings hooks

## Summary

Refactored the `BookerWebWrapper` component to pass only the required fields to the `useBookingForm` and `useBookings` hooks instead of passing the entire `event` object. This optimization reduces memory usage and makes the data flow more explicit.

**Changes made:**
- **useBookingForm**: Now receives only `{ bookingFields: event.data.bookingFields }` instead of the full `event.data`
- **useBookings**: Now receives a filtered event object containing only the fields specified in the `IUseBookings` interface: `id`, `slug`, `subsetOfHosts`, `requiresConfirmation`, `isDynamic`, `metadata`, `forwardParamsSuccessRedirect`, `successRedirectUrl`, `length`, `recurringEvent`, `schedulingType`, and `subsetOfUsers`

The refactoring maintains the same event structure (with `data` property) to avoid breaking the hook implementations while significantly reducing the amount of data passed between components.

## Review & Testing Checklist for Human

**⚠️ YELLOW RISK** - Moderate risk due to core functionality impact without end-to-end testing

- [ ] **Test the complete booking flow end-to-end** - Create a test booking to ensure no runtime errors occur and all functionality works correctly
- [ ] **Verify hook interfaces match reality** - Check that the `useBookingForm` and `useBookings` hooks don't internally access any event properties beyond what's defined in their interfaces
- [ ] **Check for hidden data dependencies** - Ensure the extracted fields don't have nested references to other parts of the event object that could cause runtime issues

---

### Diagram

```mermaid
%%{ init : { "theme" : "default" }}%%
graph TD
    BWW["BookerWebWrapper.tsx<br/>(EDITED)"]:::major-edit
    UBF["useBookingForm.ts<br/>(hook interface)"]:::context
    UB["useBookings.ts<br/>(hook interface)"]:::context
    IUseBookingForm["IUseBookingForm<br/>(interface)"]:::context
    IUseBookings["IUseBookings<br/>(interface)"]:::context

    BWW -->|"filtered: { bookingFields }"| UBF
    BWW -->|"filtered: { id, slug, etc. }"| UB
    IUseBookingForm -->|"defines required fields"| UBF
    IUseBookings -->|"defines required fields"| UB

    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit
        L3[Context/No Edit]:::context
    end

    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#ADD8E6
    classDef context fill:#FFFFFF
```

### Notes

- **Type checking passed**: All TypeScript checks pass, confirming the filtered data structure matches the hook interfaces
- **Performance improvement**: Reduces memory usage by only passing required fields instead of the entire event object
- **Maintainability**: Makes data dependencies explicit and easier to track
- **Session info**: Requested by benny@cal.com (@hbjORbj) - Session: https://app.devin.ai/sessions/7197f6bb9f0043a8a65d33e61d386c7d

**⚠️ Important**: While the interfaces suggest this refactoring is safe, the booking flow should be tested manually to ensure no hidden dependencies exist between the hooks and the full event object.
@github-actions
Copy link
Contributor

This PR is being marked as stale due to inactivity.

@github-actions github-actions bot added the Stale label Jul 31, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Sep 2, 2025

This PR is being marked as stale due to inactivity.

@github-actions github-actions bot added the Stale label Sep 2, 2025
@hbjORbj hbjORbj closed this Sep 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

core area: core, team members only foundation ready-for-e2e Stale

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants