From 4151e968765212609af7a7ac575122553b4f4101 Mon Sep 17 00:00:00 2001
From: Riccardo <riccardo.s@hey.com>
Date: Sun, 7 Jul 2024 23:07:14 +0200
Subject: [PATCH] feat: add redirect from index to single customer form

---
 app/customer-form/page.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/customer-form/page.tsx b/app/customer-form/page.tsx
index c94b93e..d1ec6a3 100644
--- a/app/customer-form/page.tsx
+++ b/app/customer-form/page.tsx
@@ -16,10 +16,12 @@ import {
   CustomerFormSchema
 } from '@utils/types';
 import axios from 'axios';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export default function CustomerForms() {
+  const router = useRouter();
   const [customerForms, setCustomerForms] = useState<CustomerForm[]>([]);
 
   const form = useForm<CustomerFormCreate>({
@@ -47,9 +49,11 @@ export default function CustomerForms() {
     })();
   }, []);
 
-  async function handleSubmit(values: CustomerFormCreate) {
-    console.log('values', values);
+  const redirectToCustomerForm = (id: string) => {
+    router.push(`/customer-form/${id}`);
+  };
 
+  async function handleSubmit(values: CustomerFormCreate) {
     try {
       const response = await axios.post(
         '/api/protected/customer-form',
@@ -64,8 +68,6 @@ export default function CustomerForms() {
         }
       );
 
-      console.log('response', response.data.data);
-
       const validatedResponse = CustomerFormSchema.safeParse(
         response.data.data
       );
@@ -86,9 +88,12 @@ export default function CustomerForms() {
       <h1>Forms</h1>
       {customerForms &&
         customerForms.map(customerForm => (
-          <div key={customerForm.id}>
-            <h2>{customerForm.type}</h2>
-            <p>{customerForm.text}</p>
+          <div
+            onClick={() => redirectToCustomerForm(customerForm.id)}
+            key={customerForm.id}
+          >
+            {customerForm.text}
+            of type {customerForm.type}
           </div>
         ))}
       <h1>New form</h1>