From a85780fef41380b0d8e36eefa40e35a8bc1752fd Mon Sep 17 00:00:00 2001
From: Ashutosh Tanwar <ashutoshtanwar@sharechat.co>
Date: Thu, 17 Mar 2022 16:43:35 +0530
Subject: [PATCH 1/3] Reloads page whenever window is resized.

---
 lib/SwipeableWrapper/index.jsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/lib/SwipeableWrapper/index.jsx b/lib/SwipeableWrapper/index.jsx
index fb2adf9..08c085a 100644
--- a/lib/SwipeableWrapper/index.jsx
+++ b/lib/SwipeableWrapper/index.jsx
@@ -9,8 +9,6 @@ import PropTypes from "prop-types";
 import { useDrag } from "@use-gesture/react";
 import { useLayoutEffect, useRaf } from "../helpers";
 
-const innerHeight = typeof window !== "undefined" ? window.innerHeight : 0;
-
 const scrollToTop = () => {
   const isSmoothScrollSupported =
     "scrollBehavior" in document.documentElement.style;
@@ -34,6 +32,8 @@ const checkParent = (el, filterIds) => {
   return checkParent(el.parentNode, filterIds);
 };
 
+const reloadPage = () => window.location.reload(true);
+
 const SwipeableWrapper = forwardRef(
   (
     {
@@ -61,7 +61,7 @@ const SwipeableWrapper = forwardRef(
         rAF(() => {
           onSlideChange(index.current);
           scrollToTop();
-          const height = innerHeight - elementRef.current.clientTop;
+          const height = window.innerHeight - elementRef.current.clientTop;
           elementRef.current.children[prevIndex].style.height = `${height}px`;
           elementRef.current.children[currIndex].style.height = "auto";
         });
@@ -147,6 +147,7 @@ const SwipeableWrapper = forwardRef(
         pointer: { touch: true },
       },
     );
+
     useLayoutEffect(() => {
       if (bottomBarRef?.current) {
         bottomBarRef.current.style.transition = "transform";
@@ -154,18 +155,23 @@ const SwipeableWrapper = forwardRef(
           transitionTimingFunction;
       }
       swipeToIndex(initialIndex, true);
-      const el = elementRef?.current;
+      const { current: el = null } = elementRef;
       if (el) {
-        totalWidth.current = el.parentElement.offsetWidth;
-        const height = innerHeight - el.clientTop;
+        totalWidth.current = Math.min(
+          el.parentElement.offsetWidth,
+          window.innerWidth,
+        );
+        const height = window.innerHeight - el.clientTop;
         for (let i = 0; i < children.length; i += 1) {
           el.children[i].style.height =
             initialIndex === i ? "auto" : `${height}px`;
         }
         el.ontransitionend = onRestFn;
       }
+      window.addEventListener("resize", reloadPage);
       return () => {
         el.ontransitionend = () => {};
+        window.removeEventListener("resize", reloadPage);
       };
     }, []);
 

From 20737d258a5169a94c81d08bd51276811e320414 Mon Sep 17 00:00:00 2001
From: Ashutosh Tanwar <ashutoshtanwar@sharechat.co>
Date: Thu, 17 Mar 2022 18:14:10 +0530
Subject: [PATCH 2/3] Recalculate styles on resize of window

---
 lib/SwipeableWrapper/index.jsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/lib/SwipeableWrapper/index.jsx b/lib/SwipeableWrapper/index.jsx
index 08c085a..ebdb1e0 100644
--- a/lib/SwipeableWrapper/index.jsx
+++ b/lib/SwipeableWrapper/index.jsx
@@ -32,8 +32,6 @@ const checkParent = (el, filterIds) => {
   return checkParent(el.parentNode, filterIds);
 };
 
-const reloadPage = () => window.location.reload(true);
-
 const SwipeableWrapper = forwardRef(
   (
     {
@@ -148,13 +146,7 @@ const SwipeableWrapper = forwardRef(
       },
     );
 
-    useLayoutEffect(() => {
-      if (bottomBarRef?.current) {
-        bottomBarRef.current.style.transition = "transform";
-        bottomBarRef.current.style.transitionTimingFunction =
-          transitionTimingFunction;
-      }
-      swipeToIndex(initialIndex, true);
+    const recalculateStyles = useCallback(() => {
       const { current: el = null } = elementRef;
       if (el) {
         totalWidth.current = Math.min(
@@ -166,12 +158,25 @@ const SwipeableWrapper = forwardRef(
           el.children[i].style.height =
             initialIndex === i ? "auto" : `${height}px`;
         }
+      }
+    }, []);
+
+    useLayoutEffect(() => {
+      if (bottomBarRef?.current) {
+        bottomBarRef.current.style.transition = "transform";
+        bottomBarRef.current.style.transitionTimingFunction =
+          transitionTimingFunction;
+      }
+      swipeToIndex(initialIndex, true);
+      recalculateStyles();
+      const { current: el = null } = elementRef;
+      if (el) {
         el.ontransitionend = onRestFn;
       }
-      window.addEventListener("resize", reloadPage);
+      window.addEventListener("resize", recalculateStyles);
       return () => {
         el.ontransitionend = () => {};
-        window.removeEventListener("resize", reloadPage);
+        window.removeEventListener("resize", recalculateStyles);
       };
     }, []);
 

From df9e45365e38917aff5bdc96aace3a0c3f54e30f Mon Sep 17 00:00:00 2001
From: Ashutosh Tanwar <ashutoshtanwar@sharechat.co>
Date: Mon, 21 Mar 2022 13:10:29 +0530
Subject: [PATCH 3/3] Comment resolved.

---
 lib/SwipeableWrapper/index.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/lib/SwipeableWrapper/index.jsx b/lib/SwipeableWrapper/index.jsx
index ebdb1e0..340e05f 100644
--- a/lib/SwipeableWrapper/index.jsx
+++ b/lib/SwipeableWrapper/index.jsx
@@ -59,9 +59,12 @@ const SwipeableWrapper = forwardRef(
         rAF(() => {
           onSlideChange(index.current);
           scrollToTop();
-          const height = window.innerHeight - elementRef.current.clientTop;
-          elementRef.current.children[prevIndex].style.height = `${height}px`;
-          elementRef.current.children[currIndex].style.height = "auto";
+          const { current: el = null } = elementRef;
+          if (el) {
+            const height = window.innerHeight - el.clientTop;
+            el.children[prevIndex].style.height = `${height}px`;
+            el.children[currIndex].style.height = "auto";
+          }
         });
         previousIndex.current = index.current;
       }