From 33acfe5b338e45160bed3b35d6986821817ab3d3 Mon Sep 17 00:00:00 2001
From: Rajnish2105 <166371359+Rajnish2105@users.noreply.github.com>
Date: Sun, 22 Dec 2024 12:56:46 +0530
Subject: [PATCH 1/3] fixed Browser tab crashes when selecting a high number of
 room cards in the Explore community tab

---
 src/app/pages/client/explore/LimitWarning.tsx | 140 ++++++++++++++++++
 src/app/pages/client/explore/Server.tsx       |   7 +-
 2 files changed, 145 insertions(+), 2 deletions(-)
 create mode 100644 src/app/pages/client/explore/LimitWarning.tsx

diff --git a/src/app/pages/client/explore/LimitWarning.tsx b/src/app/pages/client/explore/LimitWarning.tsx
new file mode 100644
index 0000000000..78891c03b9
--- /dev/null
+++ b/src/app/pages/client/explore/LimitWarning.tsx
@@ -0,0 +1,140 @@
+import React, { FormEventHandler, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  config,
+} from 'folds';
+import { stopPropagation } from '../../../utils/keyboard';
+
+type RectCords = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type LimitButtonProps = {
+  limit: number;
+  onLimitChange: (limit: string) => void;
+  setMenuAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>;
+};
+
+export function LimitWarning({ limit, onLimitChange, setMenuAnchor }: LimitButtonProps) {
+  const [dialog, setDialog] = useState(false);
+  const [xlimit, setXLimit] = useState<number>(limit);
+
+  const checklimit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    const limitInput = evt.currentTarget.limitInput as HTMLInputElement;
+    if (!limitInput) return;
+    const newLimit = limitInput.value.trim();
+    if (!newLimit) return;
+    if (parseInt(newLimit, 10) > 9999) {
+      setDialog(true);
+      setXLimit(Number(newLimit));
+    } else {
+      onLimitChange(newLimit);
+      setMenuAnchor(undefined);
+    }
+  };
+
+  const handleLimitSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    onLimitChange(xlimit.toString());
+    setDialog(false);
+    setMenuAnchor(undefined);
+  };
+
+  return (
+    <>
+      <Overlay open={dialog} backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              clickOutsideDeactivates: true,
+              onDeactivate: () => setDialog(false),
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Dialog variant="Surface">
+              <Header
+                style={{
+                  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                  borderBottomWidth: config.borderWidth.B300,
+                }}
+                variant="Surface"
+                size="500"
+              >
+                <Box grow="Yes">
+                  <Text size="H4">Warning!!</Text>
+                </Box>
+                <IconButton size="300" onClick={() => setDialog(false)} radii="300">
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              </Header>
+              <Box
+                as="form"
+                onSubmit={handleLimitSubmit}
+                style={{ padding: config.space.S400 }}
+                direction="Column"
+                gap="400"
+              >
+                <Text priority="400">
+                  You are about to change the limit of items per page. Changing the limit higher
+                  than 9,999 may cause performance issues and may crash the app. It is recommended
+                  to keep the limit below 9,999 for the smooth functioning of the app. Are you sure
+                  you want to continue?
+                </Text>
+                <Box direction="Column" gap="200">
+                  <Button
+                    type="button"
+                    onClick={() => setDialog(false)}
+                    variant="Secondary"
+                    fill="Soft"
+                  >
+                    <Text size="B300">No</Text>
+                  </Button>
+                  <Button type="submit" variant="Secondary" fill="Soft">
+                    <Text size="B300">Continue</Text>
+                  </Button>
+                </Box>
+              </Box>
+            </Dialog>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+      <Box as="form" onSubmit={checklimit} direction="Column" gap="300">
+        <Box direction="Column" gap="100">
+          <Text size="L400">Custom Limit</Text>
+          <Input
+            name="limitInput"
+            size="300"
+            variant="Background"
+            defaultValue={limit}
+            min={1}
+            step={1}
+            outlined
+            type="number"
+            radii="400"
+            aria-label="Per Page Item Limit"
+          />
+        </Box>
+        <Button type="submit" size="300" variant="Primary" radii="400">
+          <Text size="B300">Change Limit</Text>
+        </Button>
+      </Box>
+    </>
+  );
+}
diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx
index 1f493df17f..b5528367df 100644
--- a/src/app/pages/client/explore/Server.tsx
+++ b/src/app/pages/client/explore/Server.tsx
@@ -45,6 +45,7 @@ import { getMxIdServer } from '../../../utils/matrix';
 import { stopPropagation } from '../../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { LimitWarning } from './LimitWarning';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -260,6 +261,7 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
     if (!limitInput) return;
     const newLimit = limitInput.value.trim();
     if (!newLimit) return;
+    // my work here
     onLimitChange(newLimit);
   };
 
@@ -301,7 +303,8 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
                   </Chip>
                 </Box>
               </Box>
-              <Box as="form" onSubmit={handleLimitSubmit} direction="Column" gap="300">
+              <LimitWarning limit={limit} onLimitChange={setLimit} setMenuAnchor={setMenuAnchor} />
+              {/* <Box as="form" onSubmit={handleLimitSubmit} direction="Column" gap="300">
                 <Box direction="Column" gap="100">
                   <Text size="L400">Custom Limit</Text>
                   <Input
@@ -320,7 +323,7 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
                 <Button type="submit" size="300" variant="Primary" radii="400">
                   <Text size="B300">Change Limit</Text>
                 </Button>
-              </Box>
+              </Box> */}
             </Box>
           </Menu>
         </FocusTrap>

From 2ba196b68c9f1492f77d48bc42a81651622a33b4 Mon Sep 17 00:00:00 2001
From: Rajnish2105 <166371359+Rajnish2105@users.noreply.github.com>
Date: Sun, 22 Dec 2024 13:06:22 +0530
Subject: [PATCH 2/3] Dialog made more informative

---
 src/app/pages/client/explore/LimitWarning.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/pages/client/explore/LimitWarning.tsx b/src/app/pages/client/explore/LimitWarning.tsx
index 78891c03b9..27bce62f3b 100644
--- a/src/app/pages/client/explore/LimitWarning.tsx
+++ b/src/app/pages/client/explore/LimitWarning.tsx
@@ -92,10 +92,10 @@ export function LimitWarning({ limit, onLimitChange, setMenuAnchor }: LimitButto
                 gap="400"
               >
                 <Text priority="400">
-                  You are about to change the limit of items per page. Changing the limit higher
-                  than 9,999 may cause performance issues and may crash the app. It is recommended
-                  to keep the limit below 9,999 for the smooth functioning of the app. Are you sure
-                  you want to continue?
+                  You are about to change the limit of items. Changing the limit higher than 9,999
+                  may cause performance issues and may crash the app. It is recommended to keep the
+                  limit below 9,999 for the smooth functioning of the app. Are you sure you want to
+                  continue?
                 </Text>
                 <Box direction="Column" gap="200">
                   <Button

From 64996107c05705c607b80783e46e4b6c3d313a28 Mon Sep 17 00:00:00 2001
From: Rajnish2105 <166371359+Rajnish2105@users.noreply.github.com>
Date: Mon, 6 Jan 2025 20:28:13 +0530
Subject: [PATCH 3/3] updated the input limit for pagesize

---
 src/app/pages/client/explore/LimitWarning.tsx | 140 ------------------
 src/app/pages/client/explore/Server.tsx       |  17 ++-
 2 files changed, 13 insertions(+), 144 deletions(-)
 delete mode 100644 src/app/pages/client/explore/LimitWarning.tsx

diff --git a/src/app/pages/client/explore/LimitWarning.tsx b/src/app/pages/client/explore/LimitWarning.tsx
deleted file mode 100644
index 27bce62f3b..0000000000
--- a/src/app/pages/client/explore/LimitWarning.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { FormEventHandler, useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import {
-  Box,
-  Button,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-  config,
-} from 'folds';
-import { stopPropagation } from '../../../utils/keyboard';
-
-type RectCords = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-type LimitButtonProps = {
-  limit: number;
-  onLimitChange: (limit: string) => void;
-  setMenuAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>;
-};
-
-export function LimitWarning({ limit, onLimitChange, setMenuAnchor }: LimitButtonProps) {
-  const [dialog, setDialog] = useState(false);
-  const [xlimit, setXLimit] = useState<number>(limit);
-
-  const checklimit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    const limitInput = evt.currentTarget.limitInput as HTMLInputElement;
-    if (!limitInput) return;
-    const newLimit = limitInput.value.trim();
-    if (!newLimit) return;
-    if (parseInt(newLimit, 10) > 9999) {
-      setDialog(true);
-      setXLimit(Number(newLimit));
-    } else {
-      onLimitChange(newLimit);
-      setMenuAnchor(undefined);
-    }
-  };
-
-  const handleLimitSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    onLimitChange(xlimit.toString());
-    setDialog(false);
-    setMenuAnchor(undefined);
-  };
-
-  return (
-    <>
-      <Overlay open={dialog} backdrop={<OverlayBackdrop />}>
-        <OverlayCenter>
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              clickOutsideDeactivates: true,
-              onDeactivate: () => setDialog(false),
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Dialog variant="Surface">
-              <Header
-                style={{
-                  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-                  borderBottomWidth: config.borderWidth.B300,
-                }}
-                variant="Surface"
-                size="500"
-              >
-                <Box grow="Yes">
-                  <Text size="H4">Warning!!</Text>
-                </Box>
-                <IconButton size="300" onClick={() => setDialog(false)} radii="300">
-                  <Icon src={Icons.Cross} />
-                </IconButton>
-              </Header>
-              <Box
-                as="form"
-                onSubmit={handleLimitSubmit}
-                style={{ padding: config.space.S400 }}
-                direction="Column"
-                gap="400"
-              >
-                <Text priority="400">
-                  You are about to change the limit of items. Changing the limit higher than 9,999
-                  may cause performance issues and may crash the app. It is recommended to keep the
-                  limit below 9,999 for the smooth functioning of the app. Are you sure you want to
-                  continue?
-                </Text>
-                <Box direction="Column" gap="200">
-                  <Button
-                    type="button"
-                    onClick={() => setDialog(false)}
-                    variant="Secondary"
-                    fill="Soft"
-                  >
-                    <Text size="B300">No</Text>
-                  </Button>
-                  <Button type="submit" variant="Secondary" fill="Soft">
-                    <Text size="B300">Continue</Text>
-                  </Button>
-                </Box>
-              </Box>
-            </Dialog>
-          </FocusTrap>
-        </OverlayCenter>
-      </Overlay>
-      <Box as="form" onSubmit={checklimit} direction="Column" gap="300">
-        <Box direction="Column" gap="100">
-          <Text size="L400">Custom Limit</Text>
-          <Input
-            name="limitInput"
-            size="300"
-            variant="Background"
-            defaultValue={limit}
-            min={1}
-            step={1}
-            outlined
-            type="number"
-            radii="400"
-            aria-label="Per Page Item Limit"
-          />
-        </Box>
-        <Button type="submit" size="300" variant="Primary" radii="400">
-          <Text size="B300">Change Limit</Text>
-        </Button>
-      </Box>
-    </>
-  );
-}
diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx
index b5528367df..c757dd79b3 100644
--- a/src/app/pages/client/explore/Server.tsx
+++ b/src/app/pages/client/explore/Server.tsx
@@ -45,7 +45,7 @@ import { getMxIdServer } from '../../../utils/matrix';
 import { stopPropagation } from '../../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { LimitWarning } from './LimitWarning';
+// import { LimitWarning } from './LimitWarning';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -301,18 +301,27 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
                   <Chip variant="SurfaceVariant" onClick={() => setLimit('96')} radii="Pill">
                     <Text size="T200">96</Text>
                   </Chip>
+                  <Chip variant="SurfaceVariant" onClick={() => setLimit('10000')} radii="Pill">
+                    <Text size="T200">Max</Text>
+                  </Chip>
                 </Box>
               </Box>
-              <LimitWarning limit={limit} onLimitChange={setLimit} setMenuAnchor={setMenuAnchor} />
-              {/* <Box as="form" onSubmit={handleLimitSubmit} direction="Column" gap="300">
+              <Box as="form" onSubmit={handleLimitSubmit} direction="Column" gap="300">
                 <Box direction="Column" gap="100">
                   <Text size="L400">Custom Limit</Text>
                   <Input
+                    placeholder="Max limit- 10000"
                     name="limitInput"
                     size="300"
                     variant="Background"
                     defaultValue={limit}
                     min={1}
+                    max={10000}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      if (parseInt(e.target.value) > 10000) {
+                        e.target.value = e.target.value.slice(0, 4);
+                      }
+                    }}
                     step={1}
                     outlined
                     type="number"
@@ -323,7 +332,7 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
                 <Button type="submit" size="300" variant="Primary" radii="400">
                   <Text size="B300">Change Limit</Text>
                 </Button>
-              </Box> */}
+              </Box>
             </Box>
           </Menu>
         </FocusTrap>