Skip to content

Commit

Permalink
convert to pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@AshrafMd-1
AshrafMd-1 committed Oct 24, 2023
1 parent e22e639 commit 0a1f73c
Show file tree
Hide file tree
Showing 7 changed files with 415 additions and 408 deletions.
10 changes: 7 additions & 3 deletions src/CAREUI/misc/PaginatedList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function useContextualized<TItem>() {
const ctx = useContext(context);

if (ctx === null) {
throw new Error("PaginatedList must be used within a PaginatedList");
throw new Error("Component must be used within a PaginatedList");
}

return ctx as PaginatedListContext<TItem>;
Expand All @@ -42,11 +42,15 @@ export default function PaginatedList<TItem extends object>({
perPage = DEFAULT_PER_PAGE_LIMIT,
...queryOptions
}: Props<TItem>) {
const [currentPage, setPage] = useState(1);
const query = useQuery(route, {
...queryOptions,
query: { ...queryOptions.query, limit: perPage },
query: {
...queryOptions.query,
limit: perPage,
offset: (currentPage - 1) * perPage,
},
});
const [currentPage, setPage] = useState(1);

const items = query.data?.results ?? [];

Expand Down
181 changes: 71 additions & 110 deletions src/Components/Facility/Consultations/DailyRoundsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { navigate } from "raviger";
import { useEffect, useState } from "react";
import Pagination from "../../Common/Pagination";
import { DailyRoundsModel } from "../../Patient/models";
import VirtualNursingAssistantLogUpdateCard from "./DailyRounds/VirtualNursingAssistantLogUpdateCard";
import DefaultLogUpdateCard from "./DailyRounds/DefaultLogUpdateCard";
import { useTranslation } from "react-i18next";
import LoadingLogUpdateCard from "./DailyRounds/LoadingCard";
import routes from "../../../Redux/api";
import useQuery from "../../../Utils/request/useQuery";
import PaginatedList from "../../../CAREUI/misc/PaginatedList";

export const DailyRoundsList = (props: any) => {
const { t } = useTranslation();
Expand All @@ -18,116 +16,79 @@ export const DailyRoundsList = (props: any) => {
consultationData,
showAutomatedRounds,
} = props;
const [isDailyRoundLoading, setIsDailyRoundLoading] = useState(false);
const [dailyRoundsListData, setDailyRoundsListData] = useState<
Array<DailyRoundsModel>
>([]);
const [totalCount, setTotalCount] = useState(0);
const [offset, setOffset] = useState(0);
const [currentPage, setCurrentPage] = useState(1);
const limit = 14;

const { res, data, refetch } = useQuery(routes.getDailyReports, {
body: {
limit,
offset,
rounds_type: showAutomatedRounds ? "" : "NORMAL,VENTILATOR,ICU",
},
pathParams: { consultationId },
});

useEffect(() => {
setIsDailyRoundLoading(true);
if (res?.ok && data) {
setDailyRoundsListData(data.results);
setTotalCount(data.count);
}
setIsDailyRoundLoading(false);
}, [res, data]);

useEffect(() => {
refetch();
}, [currentPage, showAutomatedRounds, refetch]);

const handlePagination = (page: number, limit: number) => {
const offset = (page - 1) * limit;
setCurrentPage(page);
setOffset(offset);
};

let roundsList: any;

if (isDailyRoundLoading) {
roundsList = (
<>
{Array.from({ length: 3 }).map((_, i) => (
<LoadingLogUpdateCard key={i} />
))}
</>
);
} else if (dailyRoundsListData.length === 0) {
roundsList = (
<span className="flex justify-center rounded-lg bg-white p-3 text-gray-700 shadow">
{t("no_consultation_updates")}
</span>
);
} else if (dailyRoundsListData.length) {
roundsList = dailyRoundsListData.map((itemData, idx) => {
if (itemData.rounds_type === "AUTOMATED") {
return (
<VirtualNursingAssistantLogUpdateCard
round={itemData}
previousRound={dailyRoundsListData[idx + 1]}
/>
);
}

return (
<DefaultLogUpdateCard
round={itemData}
consultationData={consultationData}
onViewDetails={() => {
if (itemData.rounds_type === "NORMAL") {
navigate(
`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily-rounds/${itemData.id}`
);
} else {
navigate(
`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily_rounds/${itemData.id}`
);
}
}}
onUpdateLog={() => {
if (itemData.rounds_type === "NORMAL") {
navigate(
`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily-rounds/${itemData.id}/update`
);
} else {
navigate(
`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily_rounds/${itemData.id}/update`
);
}
}}
/>
);
});
}

return (
<div className="flex w-full flex-col gap-4">
<div className="flex max-h-[85vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
{roundsList}
</div>
{!isDailyRoundLoading && totalCount > limit && (
<div className="flex justify-center">
<Pagination
cPage={currentPage}
defaultPerPage={limit}
data={{ totalCount }}
onChange={handlePagination}
/>
<PaginatedList
route={routes.getDailyReports}
query={{
rounds_type: showAutomatedRounds ? "" : "NORMAL,VENTILATOR,ICU",
}}
>
{() => (
<div className="flex w-full flex-col gap-4">
<div className="flex max-h-[85vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
<PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
<span className="flex justify-center rounded-lg bg-white p-3 text-gray-700 shadow">
{t("no_consultation_updates")}
</span>
</PaginatedList.WhenEmpty>
<PaginatedList.WhenLoading>
<>
{Array.from({ length: 3 }).map((_, i) => (
<LoadingLogUpdateCard key={i} />
))}
</>
</PaginatedList.WhenLoading>
<PaginatedList.Items<
DailyRoundsModel[]
> className="my-8 flex grow flex-col gap-3 lg:mx-8">
{(items) => {
return items.map((itemData, idx) => {
if (itemData.rounds_type === "AUTOMATED") {
return (
<VirtualNursingAssistantLogUpdateCard
round={itemData}
previousRound={items[idx + 1]}
/>
);
}
return (
<DefaultLogUpdateCard
round={itemData}
consultationData={consultationData}
onViewDetails={() => {
if (itemData.rounds_type === "NORMAL") {
navigate(
`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily-rounds/${itemData.id}`
);
} else {
navigate(
`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily_rounds/${itemData.id}`
);
}
}}
onUpdateLog={() => {
if (itemData.rounds_type === "NORMAL") {
navigate(
`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily-rounds/${itemData.id}/update`
);
} else {
navigate(
`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily_rounds/${itemData.id}/update`
);
}
}}
/>
);
});
}}
</PaginatedList.Items>
<div className="flex w-full items-center justify-center">
<PaginatedList.Paginator hideIfSinglePage />
</div>
</div>
</div>
)}
</div>
</PaginatedList>
);
};
Loading

0 comments on commit 0a1f73c

Please sign in to comment.