Gitead/DentalManagement2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(queryKey) : queryKey applied with one approach

Browse Source
This commit is contained in:
Potenz
2025-09-05 01:50:15 +05:30
parent 2652cc71a1
commit 22c344cd9e
8 changed files with 99 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/Frontend/src/components/claims/claims-recent-table.tsx
View File

@@ -51,6 +51,17 @@ interface ClaimsRecentTableProps {
patientId?: number;
}
// 🔑 exported base key
export const QK_CLAIMS_BASE = ["claims-recent"] as const;
// helper for specific pages/patient scope
export const qkClaimsRecent = (opts: {
patientId?: number | null;
page: number;
}) =>
opts.patientId
? ([...QK_CLAIMS_BASE, "patient", opts.patientId, opts.page] as const)
: ([...QK_CLAIMS_BASE, "global", opts.page] as const);
export default function ClaimsRecentTable({
allowEdit,
allowView,
@@ -89,17 +100,17 @@ export default function ClaimsRecentTable({
setCurrentPage(1);
}, [patientId]);
const getClaimsQueryKey = () =>
patientId
? ["claims-recent", "patient", patientId, currentPage]
: ["claims-recent", "global", currentPage];
const queryKey = qkClaimsRecent({
patientId: patientId ?? undefined,
page: currentPage,
});
const {
data: claimsData,
isLoading,
isError,
} = useQuery<ClaimApiResponse, Error>({
queryKey: getClaimsQueryKey(),
queryKey,
queryFn: async () => {
const endpoint = patientId
@@ -134,9 +145,7 @@ export default function ClaimsRecentTable({
description: "Claim updated successfully!",
variant: "default",
});
queryClient.invalidateQueries({
queryKey: getClaimsQueryKey(),
});
queryClient.invalidateQueries({ queryKey: QK_CLAIMS_BASE });
},
onError: (error) => {
toast({
@@ -154,9 +163,7 @@ export default function ClaimsRecentTable({
},
onSuccess: () => {
setIsDeleteClaimOpen(false);
queryClient.invalidateQueries({
queryKey: getClaimsQueryKey(),
});
queryClient.invalidateQueries({ queryKey: QK_CLAIMS_BASE });
toast({
title: "Success",
description: "Claim deleted successfully!",

43
apps/Frontend/src/components/patients/patient-table.tsx
View File

@@ -56,6 +56,12 @@ interface PatientTableProps {
onSearchChange?: (searchTerm: string) => void;
}
// 🔑 exported base key
export const QK_PATIENTS_BASE = ["patients"] as const;
// helper (optional) – mirrors your current key structure
export const qkPatients = (page: number, search: string) =>
[...QK_PATIENTS_BASE, { page, search }] as const;
export function PatientTable({
allowEdit,
allowView,
@@ -101,18 +107,14 @@ export function PatientTable({
}
};
const searchKeyPart = debouncedSearchCriteria?.searchTerm || "recent";
const {
data: patientsData,
isLoading,
isError,
} = useQuery<PatientApiResponse, Error>({
queryKey: [
"patients",
{
page: currentPage,
search: debouncedSearchCriteria?.searchTerm || "recent",
},
],
queryKey: qkPatients(currentPage, searchKeyPart),
queryFn: async () => {
const trimmedTerm = debouncedSearchCriteria?.searchTerm?.trim();
const isSearch = trimmedTerm && trimmedTerm.length > 0;
@@ -176,17 +178,11 @@ export function PatientTable({
const res = await apiRequest("PUT", `/api/patients/${id}`, patient);
return res.json();
},
onSuccess: () => {
onSuccess: async () => {
setIsAddPatientOpen(false);
queryClient.invalidateQueries({
queryKey: [
"patients",
{
page: currentPage,
search: debouncedSearchCriteria?.searchTerm || "recent",
},
],
});
// this query every page,
await queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
toast({
title: "Success",
description: "Patient updated successfully!",
@@ -207,17 +203,10 @@ export function PatientTable({
const res = await apiRequest("DELETE", `/api/patients/${id}`);
return;
},
onSuccess: () => {
onSuccess: async () => {
setIsDeletePatientOpen(false);
queryClient.invalidateQueries({
queryKey: [
"patients",
{
page: currentPage,
search: debouncedSearchCriteria?.searchTerm || "recent",
},
],
});
await queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
toast({
title: "Success",
description: "Patient deleted successfully!",

21
apps/Frontend/src/components/payments/payment-ocr-block.tsx
View File

@@ -3,9 +3,9 @@ import * as React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Upload, Image as ImageIcon, X, Plus, Minus } from "lucide-react";
import { Upload, Image as ImageIcon, X, Plus } from "lucide-react";
import { useMutation } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { toast } from "@/hooks/use-toast";
import {
@@ -14,7 +14,8 @@ import {
flexRender,
ColumnDef,
} from "@tanstack/react-table";
import { convertOCRDate } from "@/utils/dateUtils";
import { QK_PAYMENTS_RECENT_BASE } from "@/components/payments/payments-recent-table";
import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
// ---------------- Types ----------------
@@ -211,6 +212,20 @@ export default function PaymentOCRBlock() {
if (!res.ok) throw new Error("Failed to save OCR payments");
toast({ title: "Saved", description: "OCR rows saved successfully" });
// 🔄 REFRESH both tables (all pages/filters)
await Promise.all([
queryClient.invalidateQueries({ queryKey: QK_PAYMENTS_RECENT_BASE }), // all recent payments
queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE }), // recent patients list
]);
// ✅ CLEAR UI: remove files and table rows
setUploadedImages([]);
setRows([]);
setColumns([]);
setError(null);
setIsDragging(false);
if (fileInputRef.current) fileInputRef.current.value = "";
} catch (err: any) {
toast({
title: "Error",

47
apps/Frontend/src/components/payments/payments-recent-table.tsx
View File

@@ -58,6 +58,22 @@ interface PaymentsRecentTableProps {
patientId?: number;
}
// 🔑 exported base key (so others can invalidate all pages/filters)
export const QK_PAYMENTS_RECENT_BASE = ["payments-recent"] as const;
// 🔑 exported helper for specific pages/scopes
export const qkPaymentsRecent = (opts: {
patientId?: number | null;
page: number;
}) =>
opts.patientId
? ([
...QK_PAYMENTS_RECENT_BASE,
"patient",
opts.patientId,
opts.page,
] as const)
: ([...QK_PAYMENTS_RECENT_BASE, "global", opts.page] as const);
export default function PaymentsRecentTable({
allowEdit,
allowDelete,
@@ -94,17 +110,17 @@ export default function PaymentsRecentTable({
}
};
const getPaymentsQueryKey = () =>
patientId
? ["payments-recent", "patient", patientId, currentPage]
: ["payments-recent", "global", currentPage];
const queryKey = qkPaymentsRecent({
patientId: patientId ?? undefined,
page: currentPage,
});
const {
data: paymentsData,
isLoading,
isError,
} = useQuery<PaymentApiResponse>({
queryKey: getPaymentsQueryKey(),
queryKey,
queryFn: async () => {
const endpoint = patientId
? `/api/payments/patient/${patientId}?limit=${paymentsPerPage}&offset=${offset}`
@@ -141,8 +157,9 @@ export default function PaymentsRecentTable({
description: "Payment updated successfully!",
});
queryClient.invalidateQueries({
queryKey: getPaymentsQueryKey(),
// 🔄 refresh this table page
await queryClient.invalidateQueries({
queryKey: QK_PAYMENTS_RECENT_BASE,
});
// Fetch updated payment and set into local state
@@ -193,8 +210,8 @@ export default function PaymentsRecentTable({
description: "Payment Status updated successfully!",
});
queryClient.invalidateQueries({
queryKey: getPaymentsQueryKey(),
await queryClient.invalidateQueries({
queryKey: QK_PAYMENTS_RECENT_BASE,
});
// Fetch updated payment and set into local state
@@ -233,12 +250,14 @@ export default function PaymentsRecentTable({
}
return response.json();
},
onSuccess: () => {
onSuccess: async () => {
toast({
title: "Success",
description: "Payment updated successfully!",
});
queryClient.invalidateQueries({ queryKey: getPaymentsQueryKey() });
await queryClient.invalidateQueries({
queryKey: QK_PAYMENTS_RECENT_BASE,
});
},
onError: (error: any) => {
toast({
@@ -271,10 +290,10 @@ export default function PaymentsRecentTable({
return;
},
onSuccess: () => {
onSuccess: async () => {
setIsDeletePaymentOpen(false);
queryClient.invalidateQueries({
queryKey: getPaymentsQueryKey(),
await queryClient.invalidateQueries({
queryKey: QK_PAYMENTS_RECENT_BASE,
});
toast({
title: "Deleted",

9
apps/Frontend/src/pages/claims-page.tsx
View File

@@ -20,7 +20,9 @@ import {
} from "@/redux/slices/seleniumClaimSubmitTaskSlice";
import { SeleniumTaskBanner } from "@/components/ui/selenium-task-banner";
import { formatLocalDate } from "@/utils/dateUtils";
import ClaimsRecentTable from "@/components/claims/claims-recent-table";
import ClaimsRecentTable, {
QK_CLAIMS_BASE,
} from "@/components/claims/claims-recent-table";
import ClaimsOfPatientModal from "@/components/claims/claims-of-patient-table";
import {
Claim,
@@ -128,10 +130,7 @@ export default function ClaimsPage() {
return res.json();
},
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ["claims-recent"],
exact: false,
});
queryClient.invalidateQueries({ queryKey: QK_CLAIMS_BASE });
toast({
title: "Claim created successfully",

6
apps/Frontend/src/pages/dashboard.tsx
View File

@@ -29,11 +29,14 @@ import {
Patient,
UpdateAppointment,
} from "@repo/db/types";
import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
// Type for the ref to access modal methods
type AddPatientModalRef = {
shouldSchedule: boolean;
shouldClaim: boolean;
navigateToSchedule: (patientId: number) => void;
navigateToClaim: (patientId: number) => void;
};
export default function Dashboard() {
@@ -84,7 +87,8 @@ export default function Dashboard() {
},
onSuccess: (newPatient) => {
setIsAddPatientOpen(false);
queryClient.invalidateQueries({ queryKey: ["patients"] });
queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
toast({
title: "Success",
description: "Patient added successfully!",

3
apps/Frontend/src/pages/insurance-eligibility-page.tsx
View File

@@ -24,6 +24,7 @@ import { SeleniumTaskBanner } from "@/components/ui/selenium-task-banner";
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
import { InsertPatient, Patient } from "@repo/db/types";
import { DateInput } from "@/components/ui/dateInput";
import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
export default function InsuranceEligibilityPage() {
const { user } = useAuth();
@@ -77,7 +78,7 @@ export default function InsuranceEligibilityPage() {
return res.json();
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["patients"] });
queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
toast({
title: "Success",
description: "Patient added successfully!",

5
apps/Frontend/src/pages/patients-page.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useRef } from "react";
import { useMutation } from "@tanstack/react-query";
import { PatientTable } from "@/components/patients/patient-table";
import { PatientTable, qkPatients } from "@/components/patients/patient-table";
import { AddPatientModal } from "@/components/patients/add-patient-modal";
import { FileUploadZone } from "@/components/file-upload/file-upload-zone";
import { Button } from "@/components/ui/button";
@@ -18,6 +18,7 @@ import { useAuth } from "@/hooks/use-auth";
import useExtractPdfData from "@/hooks/use-extractPdfData";
import { useLocation } from "wouter";
import { InsertPatient, Patient } from "@repo/db/types";
import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
// Type for the ref to access modal methods
type AddPatientModalRef = {
@@ -52,7 +53,7 @@ export default function PatientsPage() {
},
onSuccess: (newPatient) => {
setIsAddPatientOpen(false);
queryClient.invalidateQueries({ queryKey: ["patients"] });
queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
toast({
title: "Success",
description: "Patient added successfully!",