refactor: email and community

kudos-ink · Feb 13, 2024 · ac7c856 · ac7c856
1 parent 6742a07
commit ac7c856
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/components/community.tsx b/components/community.tsx
@@ -45,7 +45,7 @@ const Community = ({ children }: ICommunityProps) => (
         {COMMUNITY_TITLE}
       </h2>
     </Link>
-    <div className="flex flex-row items-center mx-auto md:container">
+    <div className="grid gap-12 md:grid-cols-2">
       <div>
         <h3 className="text-3xl text-center mt-4">
           <strong className="font-bold">Stay in the loop</strong>

diff --git a/components/email.tsx b/components/email.tsx
@@ -4,11 +4,7 @@ import { Input } from "@nextui-org/input";
 import { Button } from "@nextui-org/button";
 
 import { isValidEmail } from "@/utils/mail";
-import { GetServerSideProps, NextPage } from "next";
 
-type Props = {
-  csrfToken: string;
-};
 type ColorType =
   | "default"
   | "success"
@@ -51,13 +47,22 @@ const Email = () => {
       return true;
     }
   };
-  const handleOnBlur = () => {
-    //TODO: fix
+  const handleOnChange = () => {
     if (isInvalid) {
       validateEmail();
     }
   };
+
+  const handleKeyDown = async (event: { key: string }) => {
+    if (event.key === "Enter") {
+      await registerEmail();
+    }
+  };
   const handleOnClick = async () => {
+    await registerEmail();
+  };
+
+  const registerEmail = async () => {
     if (!validateEmail()) {
       return;
     }
@@ -75,17 +80,16 @@ const Email = () => {
         },
       });
       setButtonLoading(false);
-      console.log(response);
       if (response.status == 201) {
         setButtonLoading(false);
-        setButtonMessage("Success");
+        setButtonMessage("Success!");
         setButtonColor("success");
       } else {
         setButtonMessage("Error");
         setButtonColor("danger");
       }
     } catch (e) {
-      setButtonLoading(false);
+      console.error(e);
     } finally {
       setButtonLoading(false);
     }
@@ -95,23 +99,23 @@ const Email = () => {
     <div className="flex flex-row gap-2">
       <Input
         value={email}
-        size="sm"
         type="email"
         variant="bordered"
         label="Enter your email"
         isInvalid={isInvalid}
         color={isInvalid ? "danger" : "default"}
         errorMessage={errorMessage}
-        onBlur={handleOnBlur}
+        onChange={handleOnChange}
         onValueChange={setEmail}
-        className="max-w-[220px]"
+        onKeyDown={handleKeyDown}
+        className="h-24"
       />
 
       <Button
         color={buttonColor}
-        size="md"
         isLoading={buttonLoading}
         onClick={handleOnClick}
+        className="h-14"
       >
         {buttonMessage}
       </Button>