fix: browser back button not working #13345

abhijeetsingh-22 · 2024-01-20T23:23:04Z

What does this PR do?

Fixes a bug due to which the back button on the booking page was not working.
The issue was due to multiple calls to setQueryParams and removeQueryParams as it was pushing multiple URLs to the browser history.

My fix

Instead of pushing to the history I am now replacing the last entry in the history.

Fixes #13324

Calcom.Back.button.fix.mp4

Type of change

Bug fix (non-breaking change which fixes an issue)

How should this be tested?

Go to the booking page of a user with multiple events present.
Open one of the events and change the date selected.
Press the browser back button (You should be taken back to the user page.)
Try repeating this with the other event .

Mandatory Tasks

[ x] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

vercel · 2024-01-20T23:23:10Z

@abhijeetsingh-22 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2024-01-20T23:23:17Z

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link.

github-actions · 2024-01-20T23:32:05Z

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

vercel · 2024-01-21T13:06:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 23, 2024 7:56am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Jan 23, 2024 7:56am

packages/features/calendars/DatePicker.tsx

Udit-takkar

Screen.Recording.2024-01-22.at.2.31.28.PM.mov

I should be back to the booking form page and not /[user]

emrysal · 2024-01-22T12:58:58Z

@abhijeetsingh-22 looks like Udit is right; not an issue with your PR but it looks like the history is not set properly (perhaps due to next router) when coming from the booking page?

abhijeetsingh-22 · 2024-01-22T23:03:19Z

@abhijeetsingh-22 looks like Udit is right; not an issue with your PR but it looks like the history is not set properly (perhaps due to next router) when coming from the booking page?

@emrysal The problem is not the next-router but the way we are handling the queryParams in the /[user]/[type] . I have made the changes have a look

Kapture.2024-01-23.at.04.26.14.mp4

abhijeetsingh-22 · 2024-01-23T08:14:18Z

packages/features/bookings/Booker/Booker.tsx

@@ -213,6 +213,10 @@ const BookerComponent = ({
    return setBookerState("booking");
  }, [event, selectedDate, selectedTimeslot, setBookerState]);

+  const slot = getQueryParam("slot");
+  useEffect(() => {
+    setSelectedTimeslot(slot || null);


This makes sure that the selectedTimeslot updates in the store when it is changed in the query param. And it sets it to null when the slot query param is not present

abhijeetsingh-22 · 2024-01-23T08:22:51Z

packages/features/bookings/Booker/utils/query-param.ts

  } else {
    url.searchParams.set(param, `${value}`);
  }
-
-  window.history.pushState({}, "", url.href);
+  if (param == "slot") {


For the desired behavior, we need to smartly choose between pushState and replaceState so that the browser history is created the way we want. This is in-line with the change that @Udit-takkar requested earlier.

review again pls

CarinaWolli

The changes cause booking-limits e2e tests to fail.

I found one issue that happens in https://github.com/calcom/cal.com/blob/main/apps/web/playwright/booking-limits.e2e.ts#L306. For monthly duration limits, it doesn't redirect to the booking page but stays on the availability page instead

abhijeetsingh-22 · 2024-03-05T16:21:03Z

I will look into it

re review

algora-pbc · 2024-04-22T22:43:11Z

🎉🎈 @abhijeetsingh-22 has been awarded $20! 🎈🎊

fixed the browser back button not woking

8b475bc

keithwillcode added this to the v3.8 milestone Jan 21, 2024

keithwillcode added Medium priority Created by Linear-GitHub Sync booking-page area: booking page, public booking page, booker community Created by Linear-GitHub Sync labels Jan 21, 2024

keithwillcode requested a review from a team January 21, 2024 12:04

PeerRich added High priority Created by Linear-GitHub Sync and removed Medium priority Created by Linear-GitHub Sync labels Jan 21, 2024

PeerRich added ⚡ Quick Wins A collection of quick wins/quick fixes that are less than 30 minutes of work 📉 regressing This used to work. Now it doesn't anymore. labels Jan 21, 2024

PeerRich reviewed Jan 21, 2024

View reviewed changes

packages/features/calendars/DatePicker.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview – dev January 21, 2024 13:20 View deployment

abhijeetsingh-22 requested a review from PeerRich January 21, 2024 14:24

Udit-takkar previously requested changes Jan 22, 2024

View reviewed changes

fix back button

f5e25c7

github-actions bot added the Medium priority Created by Linear-GitHub Sync label Jan 22, 2024

github-actions bot added the 🚨 merge conflict This PR has a merge conflict that has to be addressed label Jan 23, 2024

Merge branch 'main' into fix_browser_back_button

f55f2ab

abhijeetsingh-22 requested a review from Udit-takkar January 23, 2024 07:56

abhijeetsingh-22 commented Jan 23, 2024

View reviewed changes

Udit-takkar requested a review from emrysal January 23, 2024 10:00

Merge branch 'main' into fix_browser_back_button

2d9ac01

Merge branch 'main' into fix_browser_back_button

d870926

CarinaWolli previously requested changes Mar 5, 2024

View reviewed changes

keithwillcode marked this pull request as draft March 7, 2024 12:48

auto-merge was automatically disabled March 7, 2024 12:48
Pull request was converted to draft

CarinaWolli modified the milestones: v3.9, v4.0 Mar 18, 2024

keithwillcode added 2 commits April 4, 2024 13:36

Merge branch 'main' into fix_browser_back_button

6cd0b4c

Merge branch 'main' into fix_browser_back_button

9f9d6ca

keithwillcode modified the milestones: v4.0, v4.1 Apr 15, 2024

dosubot bot removed this from the v4.1 milestone Apr 15, 2024

keithwillcode added this to the v4.1 milestone Apr 16, 2024

Merge branch 'main' into fix_browser_back_button

aaec6f6

github-actions bot added the 💎 Bounty A bounty on Algora.io label Apr 17, 2024

fix: test

7fa800e

Udit-takkar dismissed stale reviews from sean-brydon and emrysal via 7fa800e April 18, 2024 19:11

vercel bot deployed to Preview – api April 18, 2024 19:12 View deployment

vercel bot deployed to Preview – dev April 18, 2024 19:24 View deployment

Merge branch 'main' into fix_browser_back_button

6d9636a

Udit-takkar marked this pull request as ready for review April 18, 2024 19:50

dosubot bot added the 🐛 bug Something isn't working label Apr 18, 2024

Merge branch 'main' into fix_browser_back_button

07c9065

CarinaWolli approved these changes Apr 19, 2024

View reviewed changes

Merge branch 'main' into fix_browser_back_button

5d358ae

CarinaWolli merged commit 9215725 into calcom:main Apr 22, 2024
30 of 38 checks passed

algora-pbc bot added the 💰 Rewarded Rewarded bounties on Algora.io label Apr 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: browser back button not working #13345

fix: browser back button not working #13345

abhijeetsingh-22 commented Jan 20, 2024

vercel bot commented Jan 20, 2024

github-actions bot commented Jan 20, 2024 •

edited

github-actions bot commented Jan 20, 2024 •

edited

vercel bot commented Jan 21, 2024 •

edited

Udit-takkar left a comment

emrysal commented Jan 22, 2024

abhijeetsingh-22 commented Jan 22, 2024

abhijeetsingh-22 Jan 23, 2024

abhijeetsingh-22 Jan 23, 2024

CarinaWolli left a comment

abhijeetsingh-22 commented Mar 5, 2024

algora-pbc bot commented Apr 22, 2024

fix: browser back button not working #13345

fix: browser back button not working #13345

Conversation

abhijeetsingh-22 commented Jan 20, 2024

What does this PR do?

My fix

Type of change

How should this be tested?

Mandatory Tasks

vercel bot commented Jan 20, 2024

github-actions bot commented Jan 20, 2024 • edited

github-actions bot commented Jan 20, 2024 • edited

📦 Next.js Bundle Analysis for @calcom/web

vercel bot commented Jan 21, 2024 • edited

Udit-takkar left a comment

Choose a reason for hiding this comment

emrysal commented Jan 22, 2024

abhijeetsingh-22 commented Jan 22, 2024

abhijeetsingh-22 Jan 23, 2024

Choose a reason for hiding this comment

abhijeetsingh-22 Jan 23, 2024

Choose a reason for hiding this comment

CarinaWolli left a comment

Choose a reason for hiding this comment

abhijeetsingh-22 commented Mar 5, 2024

algora-pbc bot commented Apr 22, 2024

github-actions bot commented Jan 20, 2024 •

edited

github-actions bot commented Jan 20, 2024 •

edited

vercel bot commented Jan 21, 2024 •

edited