Hooks Reference

import { formsClient } from "@/lib/forms-client";

// Query hooks return { data, loading, error }
const { data, loading, error } = formsClient.useForm({ path: { slug: "contact" } });

// Mutation hooks return { mutate, loading, error }
const { mutate, loading, error } = formsClient.useCreateForm();

function FormDisplay() {
  const { data: form, loading, error } = formsClient.useForm({
    path: { slug: "contact" },
  });

  if (loading) return <div>Loading form...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!form) return <div>Form not found</div>;

  return (
    <div>
      <h1>{form.title}</h1>
      <p>{form.description}</p>
      {/* Render form using form.dataSchema and form.uiSchema */}
    </div>
  );
}

function ContactForm() {
  const { mutate: submit, data: responseId, loading, error } = formsClient.useSubmitForm();
  const [formData, setFormData] = useState({});

  const handleSubmit = async () => {
    await submit({
      path: { slug: "contact" },
      body: {
        data: formData,
        // securityToken: turnstileToken, // Optional
      },
    });
  };

  if (responseId) {
    return <p>Thank you! Submission ID: {responseId}</p>;
  }

  return (
    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
      {/* Form fields */}
      <button type="submit" disabled={loading}>
        {loading ? "Submitting..." : "Submit"}
      </button>
      {error && <p>Error: {error.message}</p>}
    </form>
  );
}

function FormsList() {
  const { data: forms, loading, error } = formsClient.useForms();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {forms?.map((form) => (
        <li key={form.id}>
          <span>{form.title}</span>
          <span>Status: {form.status}</span>
        </li>
      ))}
    </ul>
  );
}

function FormEditor({ formId }: { formId: string }) {
  const { data: form, loading, error } = formsClient.useFormById({
    path: { id: formId },
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!form) return <div>Form not found</div>;

  return (
    <div>
      <h1>Editing: {form.title}</h1>
      <p>Slug: {form.slug}</p>
      <p>Version: {form.version}</p>
      {/* Form editor UI */}
    </div>
  );
}

function CreateFormButton() {
  const { mutate: createForm, loading, error } = formsClient.useCreateForm();

  const handleCreate = async () => {
    const formId = await createForm({
      body: {
        title: "Feedback Survey",
        slug: "feedback-survey",
        status: "open",
        description: "Help us improve our service",
        dataSchema: {
          type: "object",
          properties: {
            rating: { type: "integer", minimum: 1, maximum: 5 },
            comments: { type: "string" },
          },
          required: ["rating"],
        },
        uiSchema: {
          type: "VerticalLayout",
          elements: [
            { type: "Control", scope: "#/properties/rating" },
            { type: "Control", scope: "#/properties/comments", options: { multi: true } },
          ],
        },
      },
    });
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={loading}>
        Create Form
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

function CloseFormButton({ formId }: { formId: string }) {
  const { mutate: updateForm, loading, error } = formsClient.useUpdateForm();

  const handleClose = async () => {
    const success = await updateForm({
      path: { id: formId },
      body: { status: "closed" },
    });
  };

  return (
    <div>
      <button onClick={handleClose} disabled={loading}>
        Close Form
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

function DeleteFormButton({ formId }: { formId: string }) {
  const { mutate: deleteForm, loading, error } = formsClient.useDeleteForm();

  const handleDelete = async () => {
    if (!confirm("Are you sure you want to delete this form?")) return;

    const success = await deleteForm({
      path: { id: formId },
    });
  };

  return (
    <div>
      <button onClick={handleDelete} disabled={loading}>
        Delete Form
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

function SubmissionsList({ formId }: { formId: string }) {
  const { data: submissions, loading, error } = formsClient.useSubmissions({
    path: { id: formId },
    query: { sortOrder: "desc" }, // Newest first
  });

  if (loading) return <div>Loading submissions...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Submitted At</th>
          <th>Data</th>
        </tr>
      </thead>
      <tbody>
        {submissions?.map((submission) => (
          <tr key={submission.id}>
            <td>{submission.id}</td>
            <td>{new Date(submission.submittedAt).toLocaleString()}</td>
            <td>{JSON.stringify(submission.data)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function SubmissionDetail({ submissionId }: { submissionId: string }) {
  const { data: submission, loading, error } = formsClient.useSubmission({
    path: { id: submissionId },
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!submission) return <div>Submission not found</div>;

  return (
    <div>
      <h2>Submission Details</h2>
      <p>ID: {submission.id}</p>
      <p>Form ID: {submission.formId}</p>
      <p>Form Version: {submission.formVersion}</p>
      <p>Submitted: {new Date(submission.submittedAt).toLocaleString()}</p>
      <h3>Response Data:</h3>
      <pre>{JSON.stringify(submission.data, null, 2)}</pre>
    </div>
  );
}

function DeleteSubmissionButton({ submissionId }: { submissionId: string }) {
  const { mutate: deleteSubmission, loading, error } = formsClient.useDeleteSubmission();

  const handleDelete = async () => {
    if (!confirm("Are you sure you want to delete this submission?")) return;

    const success = await deleteSubmission({
      path: { id: submissionId },
    });
  };

  return (
    <div>
      <button onClick={handleDelete} disabled={loading}>
        Delete
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}