feat: add success page

AkeruAI · Apr 14, 2024 · ed9bdb9 · ed9bdb9
1 parent e5c39a3
commit ed9bdb9
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 15 deletions.
diff --git a/packages/akeru-frontend/app/components/section/hero-section/hero-section.tsx b/packages/akeru-frontend/app/components/section/hero-section/hero-section.tsx
@@ -1,9 +1,16 @@
 "use client";
 import { useCallback, useState } from "react";
 import Form from "../../ui/form/Form";
+import { useFormState } from "react-dom";
+import { handleSubmit } from "@/app/server";
+
+const initialState = {
+  email: "",
+};
 
 function HeroSection() {
   const [showForm, setShowForm] = useState(false);
+  const [state, formAction] = useFormState(handleSubmit, initialState);
 
   const handleWaitlistForm = useCallback(() => {
     setShowForm(true);
@@ -21,20 +28,18 @@ function HeroSection() {
         </p>
       </div>
 
-      {showForm === false && (
-        <div className="mt-5">
-          <button
-            onClick={handleWaitlistForm}
-            className="font-montserrat text-sm bg-buttonBg py-2 w-3/12 rounded font-medium hover:bg-buttonBgHover hover:text-black transition-transform duration-500 sm:w-full"
-          >
-            Try Akeru
-          </button>
-        </div>
-      )}
+      <div className="mt-5">
+        <button
+          onClick={handleWaitlistForm}
+          className="font-montserrat text-sm bg-buttonBg py-2 w-3/12 rounded font-medium hover:bg-buttonBgHover hover:text-black transition-transform duration-500 sm:w-full"
+        >
+          Try Akeru
+        </button>
+      </div>
 
       {showForm && (
         <div className="w-full mt-5">
-          <Form />
+          <Form formAction={formAction} />
         </div>
       )}
     </section>

diff --git a/packages/akeru-frontend/app/components/ui/form/Form.tsx b/packages/akeru-frontend/app/components/ui/form/Form.tsx
@@ -2,9 +2,13 @@ import { useCallback, useState } from "react";
 import FormInput from "./FormInput";
 import { handleSubmit } from "@/app/server";
 
-function Form() {
+type FormProps = {
+  formAction: (payload: FormData) => void;
+};
+
+function Form({ formAction}: FormProps) {
   return (
-    <form className="w-full" action={handleSubmit}>
+    <form className="w-full" action={formAction}>
       <div className="mt-2.5 tablet_max:mt-2 mobile_lg:mt-3.5">
         <FormInput
           type="email"

diff --git a/packages/akeru-frontend/app/server.tsx b/packages/akeru-frontend/app/server.tsx
@@ -1,8 +1,13 @@
 "use server";
 
-export const handleSubmit = async (formData: FormData) => {
+import { redirect } from "next/navigation";
+
+export const handleSubmit = async (
+  prevState: { email: string },
+  formData: FormData
+) => {
   const url = process.env.NEXT_GOOGLE_SHEETS_API!;
-  const rawFormData = { email: formData.get("emailAddress") };
+  let rawFormData = { email: formData.get("emailAddress") };
 
   try {
     const response = await fetch(url, {
@@ -24,4 +29,5 @@ export const handleSubmit = async (formData: FormData) => {
   } catch (error) {
     console.error("Error:", error);
   }
+  redirect("/success");
 };
diff --git a/packages/akeru-frontend/app/success/page.tsx b/packages/akeru-frontend/app/success/page.tsx
@@ -0,0 +1,11 @@
+export default function Success() {
+  return (
+    <main className="flex min-h-screen justify-center pt-40  text-center">
+      <div  className="sm:w-[95%]">
+        <p className="text-7xl lg:text-6xl air:text-5xl md:text-4xl sm:text-3xl font-extrabold ">
+          Thank you for registering
+        </p>
+      </div>
+    </main>
+  );
+}