subscribe with email

Author: idoubi

app/(default)/_components/hero/index.tsx

@@ -12,10 +12,13 @@ export default function () {
           Discover awesome AI Videos made with Sora.
         </h2>
 
+        <Input />
+
         <div className="mx-auto max-w-6xl text-slate-400 text-sm mt-4 text-center">
-          Sora text-to-video API is not available, all the videos are generated
-          by OpenAI's red team.
+          Sora text-to-video API is not available, we'll get you notified when
+          it's live.
         </div>
+
         <svg
           viewBox="0 0 1024 1024"
           className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"

app/(default)/_components/input/index.tsx

@@ -7,33 +7,37 @@ import { useRouter } from "next/navigation";
 
 export default function () {
   const router = useRouter();
-  const [description, setDescription] = useState("");
+  const [email, setEmail] = useState("");
 
   const handleSubmit = async () => {
-    if (!description) {
-      toast.error("please descibe your story");
+    if (!email) {
+      toast.error("please enter your email");
       return;
     }
 
     try {
       const params = {
-        description: description,
+        email: email,
       };
-      const resp = await fetch("/api/gen-video", {
+      const resp = await fetch("/api/save-user", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(params),
       });
       const { code, message, data } = await resp.json();
+      if (code !== 0) {
+        toast.error(message);
+        return;
+      }
       if (data) {
-        toast.success("We generated an random video for your story.");
-        router.push(`/video/${data.uuid}`);
+        toast.success("subscribe ok");
+        setEmail("");
       }
     } catch (e) {
-      toast.error("gen video failed");
-      console.log("gen video failed", e);
+      toast.error("subscribe failed");
+      console.log("subscribe failed", e);
     }
   };
 
@@ -49,20 +53,20 @@ export default function () {
   return (
     <div className="mx-auto mt-6 flex max-w-md gap-x-4">
       <input
-        type="text"
+        type="email"
         required
         className="min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6"
-        placeholder="Describe your story"
-        value={description}
-        onChange={(e) => setDescription(e.target.value)}
+        placeholder="Enter your email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
         onKeyDown={handleInputKeydown}
       />
       <button
         type="button"
         className="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
         onClick={handleSubmit}
       >
-        Surprise me
+        Subscribe
       </button>
     </div>
   );

app/(default)/video/[uuid]/page.tsx

@@ -35,9 +35,9 @@ export default async function ({ params }: { params: { uuid: string } }) {
         <h1 className="mx-auto max-w-4xl text-center text-3xl font-bold tracking-tight text-primary sm:text-6xl">
           Sora AI Video Showcase
         </h1>
-        <h2 className="mx-auto mt-2 max-w-xl text-center text-xl leading-8 text-gray-300">
-          AI Video made with Sora.
-        </h2>
+        <p className="mx-auto mt-2 px-4 max-w-xl text-center text-xl leading-8 text-gray-300">
+          This video is made with Sora, by OpenAI's red team.
+        </p>
 
         {video && (
           <div className="relative z-10 mt-8 bg-gray-900 pb-20 sm:mt-16 sm:pb-24 xl:pb-0">

app/api/save-user/route.ts

@@ -0,0 +1,36 @@
+import { respData, respErr } from "@/lib/resp";
+
+import { User } from "@/types/user";
+import { genUuid } from "@/lib";
+import { saveUser } from "@/services/user";
+
+export async function POST(req: Request) {
+  try {
+    const { email } = await req.json();
+    if (!email) {
+      return respErr("invalid params");
+    }
+    if (!email.includes("@")) {
+      return respErr("invalid email");
+    }
+
+    const created_at = new Date().toISOString();
+    const user_uuid = genUuid();
+
+    const user: User = {
+      email: email,
+      nickname: "",
+      avatar_url: "",
+      created_at: created_at,
+      uuid: user_uuid,
+    };
+    console.log("save user info", user);
+
+    await saveUser(user);
+
+    return respData(user);
+  } catch (e) {
+    console.log("save user failed", e);
+    return respErr("save user failed");
+  }
+}

services/user.ts

@@ -0,0 +1,14 @@
+import { findUserByEmail, insertUser } from "@/models/user";
+
+import { User } from "@/types/user";
+
+export async function saveUser(user: User) {
+  try {
+    const existUser = await findUserByEmail(user.email);
+    if (!existUser) {
+      await insertUser(user);
+    }
+  } catch (e) {
+    console.log("save user failed: ", e);
+  }
+}