From 8fc0dfb7634f1b56db932907188370416fa47ff4 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Fri, 13 Jan 2023 13:10:02 +0100
Subject: [PATCH] booking page: only scroll to bottom on mobile (#6453)

* move useMediaQuery into packages

* revert logo.tsx
---
 apps/web/lib/hooks/useMediaQuery.ts        |  1 +
 packages/features/calendars/DatePicker.tsx | 17 +++++++++++------
 packages/lib/hooks/useMediaQuery.ts        | 19 +++++++++++++++++++
 3 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 packages/lib/hooks/useMediaQuery.ts

diff --git a/apps/web/lib/hooks/useMediaQuery.ts b/apps/web/lib/hooks/useMediaQuery.ts
index 9d06c75005..a5512ecb73 100644
--- a/apps/web/lib/hooks/useMediaQuery.ts
+++ b/apps/web/lib/hooks/useMediaQuery.ts
@@ -1,3 +1,4 @@
+// lets refactor and move this into packages/lib/hooks/
 import { useState, useEffect } from "react";
 
 const useMediaQuery = (query: string) => {
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index fd05a13421..58be50d715 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -5,6 +5,7 @@ import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
 import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { weekdayNames } from "@calcom/lib/weekday";
 import { Button, Icon, SkeletonText } from "@calcom/ui";
 
@@ -135,6 +136,9 @@ const Days = ({
     const date = browsingDate.set("date", day);
     days.push(date);
   }
+
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
   return (
     <>
       {days.map((day, idx) => (
@@ -153,12 +157,13 @@ const Days = ({
               date={day}
               onClick={() => {
                 props.onChange(day);
-                setTimeout(() => {
-                  window.scrollTo({
-                    top: 360,
-                    behavior: "smooth",
-                  });
-                }, 500);
+                isMobile &&
+                  setTimeout(() => {
+                    window.scrollTo({
+                      top: 360,
+                      behavior: "smooth",
+                    });
+                  }, 500);
               }}
               disabled={
                 (includedDates && !includedDates.includes(yyyymmdd(day))) ||
diff --git a/packages/lib/hooks/useMediaQuery.ts b/packages/lib/hooks/useMediaQuery.ts
new file mode 100644
index 0000000000..9d06c75005
--- /dev/null
+++ b/packages/lib/hooks/useMediaQuery.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    window.addEventListener("resize", listener);
+    return () => window.removeEventListener("resize", listener);
+  }, [matches, query]);
+
+  return matches;
+};
+
+export default useMediaQuery;