diff --git a/src/client-registry/client-registry-data/client-registry-data.component.tsx b/src/client-registry/client-registry-data/client-registry-data.component.tsx
index e306775..c11252b 100644
--- a/src/client-registry/client-registry-data/client-registry-data.component.tsx
+++ b/src/client-registry/client-registry-data/client-registry-data.component.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import {
extractErrorMessagesFromResponse,
@@ -11,7 +11,6 @@ import {
parseDate,
showNotification,
showSnackbar,
- usePagination,
} from "@openmrs/esm-framework";
import {
DataTable,
@@ -37,15 +36,35 @@ const ClientRegistryData: React.FC = () => {
const { t } = useTranslation();
const [isLoading, setIsLoading] = useState(false);
- const { patients, isLoading: loading, mutate } = usePatients("sarah", false);
+ const [searchQuery, setSearchQuery] = useState("");
+ const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery);
+
+ // Debounce the search input
+ useEffect(() => {
+ const handler = setTimeout(() => {
+ setDebouncedSearchQuery(searchQuery);
+ }, 500);
+
+ return () => {
+ clearTimeout(handler);
+ };
+ }, [searchQuery]);
+
+ const {
+ patients,
+ isLoading: loading,
+ mutate,
+ } = usePatients(debouncedSearchQuery, false);
const pageSizes = [10, 20, 30, 40, 50];
const [currentPageSize, setPageSize] = useState(10);
- const {
- goTo,
- results: paginatedPatientEntries,
- currentPage,
- } = usePagination(patients, currentPageSize);
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const paginatedPatientEntries = useMemo(() => {
+ const startIndex = (currentPage - 1) * currentPageSize;
+ const endIndex = startIndex + currentPageSize;
+ return patients?.slice(startIndex, endIndex) || [];
+ }, [patients, currentPage, currentPageSize]);
const tableHeaders = useMemo(
() => [
@@ -67,42 +86,8 @@ const ClientRegistryData: React.FC = () => {
[t]
);
- const startClientRegistry = async (e) => {
- e.preventDefault();
- setIsLoading(true);
- startClientRegistryTask().then(
- () => {
- mutate();
- setIsLoading(false);
- showSnackbar({
- isLowContrast: true,
- title: t("runTask", "Start Client Registry Task"),
- kind: "success",
- subtitle: t(
- "successfullyStarted",
- `You have successfully started Client Registry`
- ),
- });
- },
- (error) => {
- const errorMessages = extractErrorMessagesFromResponse(error);
-
- mutate();
- setIsLoading(false);
- showNotification({
- title: t(
- `errorStartingTask', 'Error Starting client registry task"),`
- ),
- kind: "error",
- critical: true,
- description: errorMessages.join(", "),
- });
- }
- );
- };
-
const tableRows = useMemo(() => {
- return patients?.map((patient, index) => ({
+ return paginatedPatientEntries.map((patient, index) => ({
...patient,
id: patient?.uuid,
name: patient?.person?.display,
@@ -144,13 +129,54 @@ const ClientRegistryData: React.FC = () => {
>
),
}));
- }, [patients]);
+ }, [paginatedPatientEntries]);
+
+ const startClientRegistry = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ startClientRegistryTask().then(
+ () => {
+ mutate();
+ setIsLoading(false);
+ showSnackbar({
+ isLowContrast: true,
+ title: t("runTask", "Start Client Registry Task"),
+ kind: "success",
+ subtitle: t(
+ "successfullyStarted",
+ `You have successfully started Client Registry`
+ ),
+ });
+ },
+ (error) => {
+ const errorMessages = extractErrorMessagesFromResponse(error);
+
+ mutate();
+ setIsLoading(false);
+ showNotification({
+ title: t("errorStartingTask", "Error Starting client registry task"),
+ kind: "error",
+ critical: true,
+ description: errorMessages.join(", "),
+ });
+ }
+ );
+ };
+
+ const handlePageChange = ({ pageSize, page }) => {
+ if (pageSize !== currentPageSize) {
+ setPageSize(pageSize);
+ setCurrentPage(1); // Reset to the first page when page size changes
+ } else if (page !== currentPage) {
+ setCurrentPage(page);
+ }
+ };
if (loading) {
return ;
@@ -158,13 +184,29 @@ const ClientRegistryData: React.FC = () => {
return (
-