From 982f847267b3317c0170a44e8ad0ff88bd6fb228 Mon Sep 17 00:00:00 2001
From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com>
Date: Wed, 30 Aug 2023 13:28:15 +0530
Subject: [PATCH] Update waitlist firebase

---
 renderer/components/UpscaylCloudModal.tsx | 53 ++++++++++++++---------
 {common => renderer}/firebase.ts          |  6 ++-
 renderer/pages/index.tsx                  |  4 +-
 3 files changed, 38 insertions(+), 25 deletions(-)
 rename {common => renderer}/firebase.ts (83%)

diff --git a/renderer/components/UpscaylCloudModal.tsx b/renderer/components/UpscaylCloudModal.tsx
index f593174..f7e79ed 100644
--- a/renderer/components/UpscaylCloudModal.tsx
+++ b/renderer/components/UpscaylCloudModal.tsx
@@ -1,6 +1,6 @@
-import { doc, setDoc } from "@firebase/firestore";
 import { useState } from "react";
-import { waitlistCollection } from "@common/firebase";
+import { waitlistCollection } from "../firebase";
+import { doc, setDoc } from "firebase/firestore";
 
 const nameRegex = /^[A-Za-z\s.'-]+$/;
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
@@ -30,21 +30,10 @@ export const UpscaylCloudModal = ({ show, setShow }) => {
           <p>😴 Upscayl while you sleep</p>
         </div>
 
-        <div className="gap-2 flex">
-          <input
-            type="text"
-            className="input input-bordered"
-            placeholder="Name"
-          />
-          <input
-            type="text"
-            className="input input-bordered"
-            placeholder="Email"
-          />
-        </div>
-        <button
-          className="bg-success text-success-content rounded-2xl px-4 py-2"
-          onClick={async () => {
+        <form
+          className="flex flex-col items-center gap-3"
+          onSubmit={async (e) => {
+            e.preventDefault();
             if (
               name &&
               email &&
@@ -52,14 +41,16 @@ export const UpscaylCloudModal = ({ show, setShow }) => {
               emailRegex.test(email)
             ) {
               try {
-                const result = await setDoc(doc(waitlistCollection, email), {
+                await setDoc(doc(waitlistCollection, email), {
                   name,
                   email,
                 });
               } catch (error) {
-                alert("Error joining the waitlist. Please try again later...");
+                alert("Error joining the waitlist. Please try again...");
                 return;
               }
+              setName("");
+              setEmail("");
               alert(
                 "Thank you for joining the waitlist! We will notify you when Upscayl Cloud is ready for you."
               );
@@ -67,8 +58,28 @@ export const UpscaylCloudModal = ({ show, setShow }) => {
               alert("Please fill in all the fields correctly.");
             }
           }}>
-          Join the waitlist
-        </button>
+          <div className="gap-2 flex">
+            <input
+              type="text"
+              className="input input-bordered"
+              placeholder="Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+            <input
+              type="email"
+              className="input input-bordered"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <button
+            type="submit"
+            className="bg-success text-success-content rounded-2xl px-4 py-2">
+            Join the waitlist
+          </button>
+        </form>
       </div>
 
       <form method="dialog" className="modal-backdrop">
diff --git a/common/firebase.ts b/renderer/firebase.ts
similarity index 83%
rename from common/firebase.ts
rename to renderer/firebase.ts
index 4546fbf..71f4f36 100644
--- a/common/firebase.ts
+++ b/renderer/firebase.ts
@@ -20,9 +20,13 @@ const firebaseConfig = {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
+console.log("🚀 => file: firebase.ts:23 => db:", db);
 
 const createCollection = <T = DocumentData>(collectionName: string) => {
   return collection(db, collectionName) as CollectionReference<T>;
 };
 
-export const waitlistCollection = createCollection("waitlist");
+export const waitlistCollection = createCollection<{
+  name: string;
+  email: string;
+}>("waitlist");
diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index 3dfc27f..fbd3446 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -457,9 +457,7 @@ const Home = () => {
           <div className="pt-8 mac-titlebar"></div>
         )}
         {/* HEADER */}
-        <div className="flex flex-row items-center">
-          <Header version={version} />
-        </div>
+        <Header version={version} />
         <button
           className="mb-5 rounded-btn p-1 mx-5 bg-success shadow-lg shadow-success/40 text-slate-50 animate-pulse text-sm"
           onClick={() => {