change: form actions to safe client side handlers

src/app/[name]/(Main)/chat/[id]/page.tsx

@@ -42,7 +42,9 @@ function ChatIndex({ }: Props) {
         })
     }
 
-    const submitMessage = async (formData: FormData) => {
+    const submitMessage = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
         const content = formData.get('textMessage');
         if (!content) return;
         const model: MessageModel = {
@@ -105,7 +107,7 @@ function ChatIndex({ }: Props) {
 
                 <section aria-labelledby={t("InputMessage.AriaLabelBy")} className="w-full">
                     <form
-                        action={submitMessage}
+                        onSubmit={submitMessage}
                         className="focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-[#D0D0D0] h-12 rounded-xl py-2.5 px-2"
                     >
                         <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1">

src/app/[name]/(Main)/rating/[orderId]/page.tsx

@@ -49,7 +49,9 @@ function RatingOrderIndex({ }: Props) {
         )
     }
 
-    const submitForm = (formData: FormData) => {
+    const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
         console.log(formData.get('rating'))
     }
 
@@ -57,7 +59,7 @@ function RatingOrderIndex({ }: Props) {
         <section className='flex flex-col h-full pt-6'>
             <h1 className='font-medium'>{t("Heading")}</h1>
 
-            <form action={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
+            <form onSubmit={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
 
                 <div>
                     <div className='w-full'>

src/app/[name]/(Profile)/profile/address/new/page.tsx

@@ -91,7 +91,7 @@ function OrderTrackingPage() {
 
     const handlePositionSelect = (position: [number, number]) => {
         setSelectedPosition((prev) => {
-            if(prev === position) {
+            if (prev === position) {
                 return prev;
             }
             setSelectedAddress(null);
@@ -142,8 +142,10 @@ function OrderTrackingPage() {
         }
     };
 
-    const submitAddressAction = () => {
-
+    const submitAddressAction = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        console.log(formData);
     }
 
     return (
@@ -203,7 +205,7 @@ function OrderTrackingPage() {
                         onClick={toggleBottomSheet2}
                         overrideClassName='bg-container!'
                     >
-                        <form action={submitAddressAction}>
+                        <form onSubmit={submitAddressAction}>
                             <div className='px-4'>
                                 <div className='px-4 mt-2 bg-container'>
                                     <span className='text-sm'>