fix: noShow status conflict

[sanjeevs9]

What does this PR do?

This PR fixes an issue where two components were performing the same task but were not synced. As a result, updates made in one component were not reflected in the other, leading to inconsistencies. The fix ensures that both components are properly synchronized, so changes made in one are instantly reflected in the other without requiring a page refresh.

• Fixes [CAL-4715] No show status not updated #17633
• Fixes CAL-4715

20241115163001.mp4

-Removed unnecessary state logic: Simplified state management by removing redundant useState for noShow.
-Added type definitions: Improved type safety and maintainability with explicit type annotations.
-Defined a global state for mutation: Implemented a global state to manage mutation handling across components.

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

• What is expected (happy path) to have (input and output)?

apps\web\components\booking\BookingListItem.tsx

• Any other important info that could help to test that PR

Checklist

[vercel]

@sanjeevs9 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

Unknown release type "Fix" found in pull request title "Fix: noShow Status conflict". 

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[graphite-app]

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (11/15/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (11/15/24)

1 label was added to this PR based on Keith Williams's automation.

"Add ready-for-e2e label" took an action on this PR • (11/17/24)

1 label was added to this PR based on Keith Williams's automation.

[sanjeevs9]

This is my first PR on Cal.com. I would appreciate your reviews.

[vikaspatil0021]

@Udit-takkar

[Praashh]

This is my first PR on Cal.com. I would appreciate your reviews.

can you please sign CLA ?

[Praashh]

LGTM!!

[github-actions]

E2E results are ready!

• Workflow #38757.1 latest results

[sanjeevs9]

LGTM!!

fixed the type error!!

[Udit-takkar]

I think we can go with a much simpler approach of just updating the attendee no show status inside booking.get infinite query cache.

you can checkout apps/web/modules/event-types/views/event-types-listing-view.tsx to check how can we do that

[sanjeevs9]

I think we can go with a much simpler approach of just updating the attendee no show status inside booking.get infinite query cache.

you can checkout apps/web/modules/event-types/views/event-types-listing-view.tsx to check how can we do that

Earlier, we were managing three local states for attendee, group attendee, and no-show attendee dialogue boxes. The issue was that they were not synchronized . I removed all the individual logic and created a single global state to maintain consistency. Additionally, the attendee order in the dialogue box now matches the attendee order on the card, as both are sorted based on the ID

and also i checked this
apps/web/modules/event-types/views/event-types-listing-view.tsx
the 'Hide from Profile' button on the card is synced with the dialogue box using global mutation only.

if i am missing something pls let me know or if you want some another approach
@Praashh @Udit-takkar

[Praashh]

I think we can go with a much simpler approach of just updating the attendee no show status inside booking.get infinite query cache.
you can checkout apps/web/modules/event-types/views/event-types-listing-view.tsx to check how can we do that

Earlier, we were managing three local states for attendee, group attendee, and no-show attendee dialogue boxes. The issue was that they were not synchronized . I removed all the individual logic and created a single global state to maintain consistency. Additionally, the attendee order in the dialogue box now matches the attendee order on the card, as both are sorted based on the ID

and also i checked this apps/web/modules/event-types/views/event-types-listing-view.tsx the 'Hide from Profile' button on the card is synced with the dialogue box using global mutation only.

if i am missing something pls let me know or if you want some another approach @Praashh @Udit-takkar

If you recheck the issue, the problem will be in the dialog box's state. I don't know if you noticed or not. but previously if you marked a booking as a no-show and refreshed then the booking was marked as a no-show. I believe it was just for the dialog box state.