From 1d8752fc054baf0c8ffe94ae8bf48f6436bc59ed Mon Sep 17 00:00:00 2001
From: "Yeyang (Justin) Sun" <i@jsun.lol>
Date: Mon, 19 Feb 2024 11:36:03 +1030
Subject: [PATCH] fix(admin): update member payment checkbox properly (#77)

---
 src/app/admin/MemberForm.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/MemberForm.tsx b/src/app/admin/MemberForm.tsx
index 2a8456c9..a4296635 100644
--- a/src/app/admin/MemberForm.tsx
+++ b/src/app/admin/MemberForm.tsx
@@ -2,25 +2,32 @@
 
 import Autocomplete from '@/components/Autocomplete';
 import { fetcher } from '@/lib/fetcher';
-import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
 import useSWRMutation from 'swr/mutation';
 import type { Member } from './page';
 
 const getMemberStr = (member: Member) => `${member.email} - ${member.firstName} ${member.lastName}`;
 
 function MemberDetail({ member }: { member: Member }) {
-    const { paid, ...details } = member;
-
     const [payment, setPayment] = useState(member.paid);
+    useEffect(() => {
+        setPayment(member.paid);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [member.id]);
+
+    const router = useRouter();
     const updatePayment = useSWRMutation('payment', fetcher.put.mutate, {
         onSuccess: () => {
             setPayment(!payment);
+            router.refresh();
         },
     });
     const handlePaymentChange = () => {
         updatePayment.trigger({ id: member.id, paid: !payment });
     };
 
+    const { paid, ...details } = member;
     return (
         <table className="relative [&>tbody>*>*]:border [&>tbody>*>*]:border-grey [&>tbody>*>*]:px-4 [&>tbody>*>*]:py-2">
             <tbody>