only loading discontinued prescriptions instead of all prescriptions

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 { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { computeActivityBounds } from "./utils";
 import useBreakpoints from "../../../Common/hooks/useBreakpoints";
 import SubHeading from "../../../CAREUI/display/SubHeading";
@@ -13,6 +13,7 @@ import useRangePagination from "../../../Common/hooks/useRangePagination";
 import MedicineAdministrationTable from "./AdministrationTable";
 import Loading from "../../Common/Loading";
 import ScrollOverlay from "../../../CAREUI/interactive/ScrollOverlay";
+import { Prescription } from "../models";
 
 interface Props {
   readonly?: boolean;
@@ -28,37 +29,48 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
   const [showDiscontinued, setShowDiscontinued] = useState(false);
 
   const filters = { is_prn, prescription_type: "REGULAR", limit: 100 };
+  const [prescriptionList, setPrescriptionList] = useState<Prescription[]>([]);
 
   const { data, loading, refetch } = useQuery(
     MedicineRoutes.listPrescriptions,
     {
       pathParams: { consultation },
-      query: { ...filters, discontinued: showDiscontinued ? undefined : false },
+      query: { ...filters, discontinued: false },
     }
   );
 
   const discontinuedPrescriptions = useQuery(MedicineRoutes.listPrescriptions, {
     pathParams: { consultation },
     query: {
       ...filters,
-      limit: showDiscontinued ? 100 : 1,
+      limit: 100,
       discontinued: true,
     },
     prefetch: !showDiscontinued,
   });
 
   const discontinuedCount = discontinuedPrescriptions.data?.count;
 
+  useEffect(() => {
+    if (!showDiscontinued) {
+      setPrescriptionList(data?.results ?? []);
+    } else {
+      const regularList = data?.results ?? [];
+      const discontinuedList = discontinuedPrescriptions.data?.results ?? [];
+      setPrescriptionList([...regularList, ...discontinuedList]);
+    }
+  }, [data, showDiscontinued]);
+
   const { activityTimelineBounds, prescriptions } = useMemo(
     () => ({
-      prescriptions: data?.results?.sort(
+      prescriptions: prescriptionList.sort(
         (a, b) => +a.discontinued - +b.discontinued
       ),
-      activityTimelineBounds: data
-        ? computeActivityBounds(data.results)
+      activityTimelineBounds: prescriptionList
+        ? computeActivityBounds(prescriptionList)
         : undefined,
     }),
-    [data]
+    [prescriptionList]
   );
 
   const daysPerPage = useBreakpoints({ default: 1, "2xl": 2 });