From 23aae73e3762ef245afb8fbb62f437faabb27827 Mon Sep 17 00:00:00 2001
From: "bitbuilder-ai[bot]"
 <65095814+bitbuilder-ai[bot]@users.noreply.github.com>
Date: Tue, 17 Oct 2023 18:47:12 +0000
Subject: [PATCH] implement #53;

---
 src/pages/forms/[id].tsx | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/pages/forms/[id].tsx b/src/pages/forms/[id].tsx
index 283abdb..af10eab 100644
--- a/src/pages/forms/[id].tsx
+++ b/src/pages/forms/[id].tsx
@@ -61,6 +61,19 @@ export default function FormDetailPage() {
     : 'bg-red-100 text-red-800';
   const camelCaseTitle =
     form.name.charAt(0).toUpperCase() + form.name.slice(1, form.name.length);
+
+  const toggleFormStatus = async () => {
+    const { data, error } = await supabase
+      .from('forms')
+      .update({ is_open: !form.is_open })
+      .eq('id', form.id);
+    if (error) {
+      console.error('Error updating form status:', error);
+    } else {
+      setForm({ ...form, is_open: !form.is_open });
+    }
+  };
+
   return (
     <Page pageTitle={`${camelCaseTitle}`} user={user}>
       <div className="flex min-w-0 gap-x-4 mb-6 text-xs p-4">
@@ -78,11 +91,20 @@ export default function FormDetailPage() {
               </span>
             </div>
 
-            <Link href={'/forms/fill/' + form.id}>
-              <button className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
-                View live form
+            <div className="flex gap-x-4">
+              <button
+                onClick={toggleFormStatus}
+                className="rounded-md bg-white text-red-600 px-3 py-2 text-sm font-semibold shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+              >
+                {form.is_open ? 'Close form' : 'Open form'}
               </button>
-            </Link>
+
+              <Link href={'/forms/fill/' + form.id}>
+                <button className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                  View live form
+                </button>
+              </Link>
+            </div>
           </div>
           {form.created_at && (
             <p className="text-xs text-gray-600">
@@ -151,4 +173,4 @@ function respectNewLines(text: string | null | undefined) {
       <br />
     </span>
   ));
-}
+}
\ No newline at end of file