useFormSubmit React Hook

formComponent.js

import React from 'react';
import useFormSubmit from './useFormSubmit';

const FormComponent = () => {
  const { formRef, handleSubmit } = useFormSubmit(
    'http://localhost:3000',  // Bazowy URL API
    'submit',  // Ścieżka endpointu API
    (data) => { console.log('Success:', data); },
    (error) => { console.error('Error:', error); }
  );

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" required />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormComponent;

server.js

const { Hono } = require('hono');
const app = new Hono();

app.use('*', async (c, next) => {
  c.req.body = await c.req.parseBody();
  await next();
});

app.post('/submit', (c) => {
  const { name, email } = c.req.body;
  console.log('Name:', name);
  console.log('Email:', email);
  return c.text('Data received');
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

useFormSubmit.js

import { useRef } from 'react';
import { Client } from 'hono/client';

const useFormSubmit = (baseUrl, endpoint, onSuccess, onError) => {
  const formRef = useRef(null);
  const client = new Client({ baseURL: baseUrl });

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!formRef.current) {
      console.error("Form reference is not set.");
      return;
    }

    const formData = new FormData(formRef.current);
    const data = Object.fromEntries(formData.entries());

    try {
      const response = await client[endpoint].$post({ body: data });
      if (onSuccess) {
        onSuccess(response);
      }
    } catch (error) {
      if (onError) {
        onError(error);
      }
    }
  };

  return { formRef, handleSubmit };
};

export default useFormSubmit;