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:
Knee Cola
2025-12-07 16:57:00 +01:00
parent cfa6a4c5b7
commit 0f8b5678f4
4 changed files with 32 additions and 13 deletions

View File

@@ -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);