Fix client-side cache staleness after proof of payment upload
Added cache revalidation to ensure ViewLocationCard reflects uploaded proof of payment when navigating back from ViewBillCard: - Server-side: Added revalidatePath() to upload actions in billActions and locationActions to invalidate Next.js server cache - Client-side: Added router.refresh() calls in ViewBillCard and ViewLocationCard to refresh client router cache after successful upload This maintains the current UX (no redirect on upload) while ensuring fresh data is displayed on navigation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2,14 +2,14 @@
|
||||
|
||||
import { z } from 'zod';
|
||||
import { getDbClient } from '../dbClient';
|
||||
import { Bill, BilledTo, FileAttachment, BillingLocation, YearMonth } from '../db-types';
|
||||
import { Bill, BilledTo, FileAttachment, BillingLocation } from '../db-types';
|
||||
import { ObjectId } from 'mongodb';
|
||||
import { withUser } from '@/app/lib/auth';
|
||||
import { AuthenticatedUser } from '../types/next-auth';
|
||||
import { gotoHome, gotoHomeWithMessage } from './navigationActions';
|
||||
import { gotoHomeWithMessage } from './navigationActions';
|
||||
import { getTranslations, getLocale } from "next-intl/server";
|
||||
import { IntlTemplateFn } from '@/app/i18n';
|
||||
import { unstable_noStore } from 'next/cache';
|
||||
import { unstable_noStore, revalidatePath } from 'next/cache';
|
||||
|
||||
export type State = {
|
||||
errors?: {
|
||||
@@ -116,6 +116,8 @@ const serializeAttachment = async (billAttachment: File | null): Promise<FileAtt
|
||||
*/
|
||||
export const updateOrAddBill = withUser(async (user: AuthenticatedUser, locationId: string, billId: string | undefined, billYear: number | undefined, billMonth: number | undefined, prevState: State, formData: FormData) => {
|
||||
|
||||
unstable_noStore();
|
||||
|
||||
const { id: userId } = user;
|
||||
|
||||
const t = await getTranslations("bill-edit-form.validation");
|
||||
@@ -351,6 +353,7 @@ export const fetchBillByUserAndId = withUser(async (user:AuthenticatedUser, loca
|
||||
|
||||
export const fetchBillById = async (locationID: string, billID: string, includeAttachmentBinary: boolean = false) => {
|
||||
|
||||
unstable_noStore();
|
||||
|
||||
const dbClient = await getDbClient();
|
||||
|
||||
@@ -387,6 +390,8 @@ export const fetchBillById = async (locationID: string, billID: string, includeA
|
||||
|
||||
export const deleteBillById = withUser(async (user: AuthenticatedUser, locationID: string, billID: string, year: number, month: number, _prevState: any, formData?: FormData) => {
|
||||
|
||||
unstable_noStore();
|
||||
|
||||
const { id: userId } = user;
|
||||
|
||||
const dbClient = await getDbClient();
|
||||
@@ -488,6 +493,7 @@ export const deleteBillById = withUser(async (user: AuthenticatedUser, locationI
|
||||
* @returns Promise with success status
|
||||
*/
|
||||
export const uploadProofOfPayment = async (locationID: string, billID: string, formData: FormData): Promise<{ success: boolean; error?: string }> => {
|
||||
|
||||
unstable_noStore();
|
||||
|
||||
try {
|
||||
@@ -503,7 +509,7 @@ export const uploadProofOfPayment = async (locationID: string, billID: string, f
|
||||
}
|
||||
|
||||
// Validate file type
|
||||
if (attachmentFile && attachmentFile.size > 0 && attachmentFile.type !== 'application/pdf') {
|
||||
if (file && file.size > 0 && file.type !== 'application/pdf') {
|
||||
return { success: false, error: 'Only PDF files are accepted' };
|
||||
}
|
||||
|
||||
@@ -564,6 +570,9 @@ export const uploadProofOfPayment = async (locationID: string, billID: string, f
|
||||
]
|
||||
});
|
||||
|
||||
// Invalidate the location view cache
|
||||
revalidatePath(`/share/location/${locationID}`, 'page');
|
||||
|
||||
return { success: true };
|
||||
} catch (error: any) {
|
||||
console.error('Error uploading proof of payment for a bill:', error);
|
||||
|
||||
Reference in New Issue
Block a user