feat(save-button): added a button for saving the form

package.json

@@ -27,6 +27,7 @@
     "@react-spring/web": "^9.7.3",
     "@supabase/auth-helpers-nextjs": "^0.8.0",
     "@supabase/supabase-js": "^2.33.1",
+    "@tanstack/react-query": "^5.8.1",
     "@types/node": "20.5.8",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",

src/app/service/building-website/contact/DraftButton.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { UseUserContext } from "@/context/User.context";
+import { supabase } from "@/utils/supabase";
+import { useContactStore } from "@/context/Contact.context";
+import { RotatingLines } from "react-loader-spinner";
+
+export default function DraftButton() {
+  const [status, setStatus] = useState({ isLoading: false, isSuccess: false });
+
+  const { currentUser } = UseUserContext();
+  const { name, email, page } = useContactStore();
+
+  const onDraftHandler = async () => {
+    setStatus({ isLoading: true, isSuccess: false });
+    await supabase.from("contact-form").upsert(
+      {
+        userId: currentUser?.user.user_metadata.provider_id,
+        email,
+        name,
+        page,
+        status: "DRAFT",
+      },
+      { onConflict: "email" }
+    );
+    setStatus({ isLoading: false, isSuccess: true });
+  };
+
+  return (
+    <Button variant={"outline"} size={"md"} onClick={onDraftHandler}>
+      {status.isLoading && (
+        <RotatingLines
+          strokeColor="white"
+          strokeWidth="3"
+          animationDuration="1"
+          width="16"
+          visible={true}
+        />
+      )}
+      {status.isSuccess ? "Saved" : "Save"}
+    </Button>
+  );
+}

src/app/service/building-website/contact/page.tsx

@@ -22,6 +22,7 @@ import { AiOutlineGoogle } from "react-icons/ai";
 import { RotatingLines } from "react-loader-spinner";
 import { BiSolidLock } from "react-icons/bi";
 import ImageItem from "./ImageItem";
+import DraftButton from "./DraftButton";
 
 type inputSelected = "name" | "email" | "page" | "url";
 
@@ -87,6 +88,19 @@ export default function Contact() {
     }
   };
 
+  useEffect(() => {
+    const fetchingData = async () => {
+      const { data } = await supabase
+        .from("contact-form")
+        .select("status")
+        .eq("userId", currentUser?.user.user_metadata.provider_id);
+
+      console.log(data);
+    };
+
+    fetchingData();
+  }, []);
+
   return currentUser ? (
     <form
       onSubmit={onSubmitHandler}
@@ -178,9 +192,16 @@ export default function Contact() {
           </div>
         )}
       </label>
-      <div className="pl-11">
-        <Button size={"md"} id="tab-form-page" onKeyDown={handleTabKey}>
-          Send
+      <div className="flex gap-2 pl-11">
+        <DraftButton />
+        <Button
+          size={"md"}
+          id="tab-form-page"
+          onKeyDown={handleTabKey}
+          type="button"
+          disabled
+        >
+          Under Construction
         </Button>
       </div>
     </form>

src/app/template.tsx

@@ -4,6 +4,7 @@ import React, { useState, type ReactNode, useEffect } from "react";
 
 import Navbar from "@/components/navbar";
 import { usePathname } from "next/navigation";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 interface Props {
   children: ReactNode;
@@ -19,8 +20,10 @@ export default function Template({ children }: Props) {
       : (document.body.style.overflow = "");
   }, [isNavbar]);
 
+  const queryClient = new QueryClient();
+
   return (
-    <div>
+    <QueryClientProvider client={queryClient}>
       {pathName !== "/login" && (
         <>
           <Navbar isNavbar={isNavbar} setIsNavbar={setIsNavbar} />
@@ -29,6 +32,6 @@ export default function Template({ children }: Props) {
       <main className={`duration-200 ${isNavbar ? "opacity-5" : ""}`}>
         {children}
       </main>
-    </div>
+    </QueryClientProvider>
   );
 }