fix useIsScrollable dependencies

ohcnetwork · Oct 12, 2023 · ed97541 · ed97541
1 parent 60d8223
commit ed97541
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 15 deletions.
diff --git a/src/Common/hooks/useIsScrollable.ts b/src/Common/hooks/useIsScrollable.ts
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 
-const useIsScrollable = () => {
+const useIsScrollable = (deps?: unknown[]) => {
   const [isScrollable, setIsScrollable] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -27,7 +27,7 @@ const useIsScrollable = () => {
     return () => {
       div?.removeEventListener("scroll", handleScroll);
     };
-  }, [ref.current]); // Re-run effect if divRef.current changes
+  }, [ref.current, ...(deps || [])]); // Re-run effect if divRef.current changes
 
   return { isScrollable, ref };
 };

diff --git a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import useSlug from "../../../Common/hooks/useSlug";
 import useQuery from "../../../Utils/request/useQuery";
 import MedicineRoutes from "../routes";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { computeActivityBounds } from "./utils";
 import useBreakpoints from "../../../Common/hooks/useBreakpoints";
 import SubHeading from "../../../CAREUI/display/SubHeading";
@@ -25,8 +25,6 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
   const { t } = useTranslation();
   const consultation = useSlug("consultation");
 
-  const { isScrollable, ref } = useIsScrollable();
-
   const [showDiscontinued, setShowDiscontinued] = useState(false);
 
   const filters = { is_prn, prescription_type: "REGULAR", limit: 100 };
@@ -62,16 +60,7 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
     defaultEnd: true,
   });
 
-  const divRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (divRef.current) {
-      const isScrollable =
-        divRef.current.scrollHeight > divRef.current.clientHeight;
-
-      console.log(`Is div scrollable? ${isScrollable ? "Yes" : "No"}`);
-    }
-  }, [prescriptions]);
+  const { isScrollable, ref } = useIsScrollable([data?.results?.length]);
 
   return (
     <div>