From 61b1fe1d6ede6f571c219891a3e3dd1c83e690d1 Mon Sep 17 00:00:00 2001
From: Gorbachev Egor <7gorbachevm@gmail.com>
Date: Thu, 23 Nov 2023 13:25:33 +0700
Subject: [PATCH] iOS prevent swipe down hack

---
 .../prevent-telegram-swipe-down-closing.tsx   | 33 +++++--------------
 src/lib/throttle/throttle.ts                  | 16 +++++++++
 src/screens/app.tsx                           | 30 ++++++++++++-----
 src/screens/deck-review/deck-screen.tsx       | 13 ++------
 4 files changed, 48 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/throttle/throttle.ts

diff --git a/src/lib/telegram/prevent-telegram-swipe-down-closing.tsx b/src/lib/telegram/prevent-telegram-swipe-down-closing.tsx
index 5e930f17..befe5f30 100644
--- a/src/lib/telegram/prevent-telegram-swipe-down-closing.tsx
+++ b/src/lib/telegram/prevent-telegram-swipe-down-closing.tsx
@@ -1,31 +1,15 @@
-// @ts-nocheck
 import React, { ReactNode, useEffect, useRef } from "react";
 import WebApp from "@twa-dev/sdk";
 import { css } from "@emotion/css";
-
-function throttle(func, limit) {
-  let inThrottle;
-  return function () {
-    // eslint-disable-next-line
-    const args = arguments;
-    // eslint-disable-next-line
-    const context = this;
-    if (!inThrottle) {
-      func.apply(context, args);
-      inThrottle = true;
-      setTimeout(() => (inThrottle = false), limit);
-    }
-  };
-}
+import { throttle } from "../throttle/throttle.ts";
 
 type Props = {
   condition: boolean;
   children: ReactNode;
-  withScroll: boolean;
 };
 
 export const PreventTelegramSwipeDownClosing = (props: Props) => {
-  const { condition, children, withScroll } = props;
+  const { condition, children } = props;
   const ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -33,8 +17,13 @@ export const PreventTelegramSwipeDownClosing = (props: Props) => {
       return;
     }
     const scrollableElement = ref.current;
+    if (!scrollableElement) {
+      return;
+    }
+
+    const onTouchMove = throttle((e: MouseEvent) => {
+      const withScroll = (ref.current?.scrollHeight || 0) > window.innerHeight;
 
-    const onTouchMove = throttle((e) => {
       if (withScroll) {
         requestAnimationFrame(() => {
           e.preventDefault();
@@ -85,13 +74,9 @@ export const PreventTelegramSwipeDownClosing = (props: Props) => {
 
 export const PreventTelegramSwipeDownClosingIos = (props: {
   children: ReactNode;
-  withScroll: boolean;
 }) => {
   return (
-    <PreventTelegramSwipeDownClosing
-      condition={WebApp.platform === "ios"}
-      withScroll={props.withScroll}
-    >
+    <PreventTelegramSwipeDownClosing condition={WebApp.platform === "ios"}>
       {props.children}
     </PreventTelegramSwipeDownClosing>
   );
diff --git a/src/lib/throttle/throttle.ts b/src/lib/throttle/throttle.ts
new file mode 100644
index 00000000..244b5dfd
--- /dev/null
+++ b/src/lib/throttle/throttle.ts
@@ -0,0 +1,16 @@
+// @ts-nocheck
+
+export function throttle(func, limit) {
+  let inThrottle;
+  return function() {
+    // eslint-disable-next-line
+    const args = arguments;
+    // eslint-disable-next-line
+    const context = this;
+    if (!inThrottle) {
+      func.apply(context, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
diff --git a/src/screens/app.tsx b/src/screens/app.tsx
index 56cbbc40..89e9c83f 100644
--- a/src/screens/app.tsx
+++ b/src/screens/app.tsx
@@ -22,20 +22,32 @@ export const App = observer(() => {
   return (
     <div>
       <VersionWarning />
-      {screenStore.screen.type === "main" && <MainScreen />}
+      {screenStore.screen.type === "main" && (
+        <PreventTelegramSwipeDownClosingIos>
+          <MainScreen />
+        </PreventTelegramSwipeDownClosingIos>
+      )}
       {screenStore.isDeckPreviewScreen && (
-        <ReviewStoreProvider>
-          <DeckScreen />
-        </ReviewStoreProvider>
+        <PreventTelegramSwipeDownClosingIos>
+          <ReviewStoreProvider>
+            <DeckScreen />
+          </ReviewStoreProvider>
+        </PreventTelegramSwipeDownClosingIos>
       )}
       {screenStore.screen.type === "deckForm" && (
-        <DeckFormStoreProvider>
-          <DeckFormScreen />
-        </DeckFormStoreProvider>
+        <PreventTelegramSwipeDownClosingIos>
+          <DeckFormStoreProvider>
+            <DeckFormScreen />
+          </DeckFormStoreProvider>
+        </PreventTelegramSwipeDownClosingIos>
+      )}
+      {screenStore.screen.type === "cardQuickAddForm" && (
+        <PreventTelegramSwipeDownClosingIos>
+          <QuickAddCardForm />
+        </PreventTelegramSwipeDownClosingIos>
       )}
-      {screenStore.screen.type === "cardQuickAddForm" && <QuickAddCardForm />}
       {screenStore.screen.type === "userSettings" && (
-        <PreventTelegramSwipeDownClosingIos withScroll={false}>
+        <PreventTelegramSwipeDownClosingIos>
           <UserSettingsStoreProvider>
             <UserSettingsMain />
           </UserSettingsStoreProvider>
diff --git a/src/screens/deck-review/deck-screen.tsx b/src/screens/deck-review/deck-screen.tsx
index d495f7fb..55d21b58 100644
--- a/src/screens/deck-review/deck-screen.tsx
+++ b/src/screens/deck-review/deck-screen.tsx
@@ -4,23 +4,14 @@ import { Review } from "./review.tsx";
 import { DeckPreview } from "./deck-preview.tsx";
 import { useReviewStore } from "../../store/review-store-context.tsx";
 import { DeckFinished } from "./deck-finished.tsx";
-import { PreventTelegramSwipeDownClosingIos } from "../../lib/telegram/prevent-telegram-swipe-down-closing.tsx";
 
 export const DeckScreen = observer(() => {
   const reviewStore = useReviewStore();
 
   if (reviewStore.isFinished) {
-    return (
-      <PreventTelegramSwipeDownClosingIos withScroll={false}>
-        <DeckFinished />
-      </PreventTelegramSwipeDownClosingIos>
-    );
+    return <DeckFinished />;
   } else if (reviewStore.currentCardId) {
-    return (
-      <PreventTelegramSwipeDownClosingIos withScroll={false}>
-        <Review />
-      </PreventTelegramSwipeDownClosingIos>
-    );
+    return <Review />;
   }
   return <DeckPreview />;
 });