fix(admin): update member payment checkbox properly

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>