feat: add read and delete customer form

app/customer-form/[id]/page.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
+import { Button } from '@components/Button';
 import { CustomerForm, CustomerFormSchema } from '@utils/types';
 import axios from 'axios';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 export default withPageAuthRequired(function SingleCustomerForm({
@@ -10,6 +12,7 @@ export default withPageAuthRequired(function SingleCustomerForm({
 }: {
   params: { id: string };
 }) {
+  const router = useRouter();
   const [customerForm, setCustomerForm] = useState<CustomerForm | null>(null);
 
   useEffect(() => {
@@ -31,13 +34,31 @@ export default withPageAuthRequired(function SingleCustomerForm({
     })();
   }, [params.id]);
 
+  async function handleDelete() {
+    if (!customerForm) {
+      return;
+    }
+
+    const result = await axios.delete(
+      `/api/protected/customer-form/${customerForm.id}`
+    );
+
+    if (result.status !== 200) {
+      console.error(result.data.error);
+      return;
+    }
+
+    router.push('/customer-form');
+  }
+
   if (!customerForm) {
     return <div>Loading...</div>;
   }
 
   return (
-    <div>
-      Form {params.id} {JSON.stringify(customerForm)}
-    </div>
+    <>
+      <div>Form {JSON.stringify(customerForm)}</div>
+      <Button onClick={handleDelete}>Delete</Button>
+    </>
   );
 });