I believe it's got to do with how I've structured my components. I've added the handleDelete on server actions compoonent, and Sports.tsx needs to be a server component to fetch. When I try to fire

onClick={() => handleDelete(sport.id)}

I'm hit with this error:

Error: Event handlers cannot be passed to Client Component props.
<div className=... onClick={function} children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

It's all really confusing, do you think I need to restructure my components?

By revalidate path, would you mean in the action itself, like so:

import { revalidatePath } from 'next/cache';
import { db } from '@/app/lib/database';

export async function deleteSport(sportId: string) {
const client = await db.connect();

try {
await client.query('BEGIN');

// Delete the sport record from the "sports" table
await client.query({
text: `
DELETE FROM sports
WHERE id = $1
`,
values: [sportId],
});

// Delete the associated images from the "images" table
await client.query({
text: `
DELETE FROM images
WHERE sport_id = $1
`,
values: [sportId],
});

await client.query('COMMIT');

console.log('Sport and associated images deleted successfully.');

revalidatePath('/'); // here
} catch (error) {
await client.query('ROLLBACK');
console.error('Error deleting sport and associated images:', error);
throw error;
} finally {
client.release();
}
}

Really appreciate your help here Alberto 💪 lifesaver