fix(misc): fix github issues (#1015)

fetchai · Oct 24, 2024 · 454d011 · 454d011
1 parent 7e4178e
commit 454d011
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 125 deletions.
diff --git a/components/footer.module.css b/components/footer.module.css
@@ -174,10 +174,11 @@
   padding: 8px 12px;
   justify-content: center;
   align-items: center;
-  gap: 8px;
+  gap: 2px;
   border-radius: 8px;
   background: #5f38fb;
   color: #ffff;
+  align-items: center;
 }
 .signBtn:hover {
   border-radius: 8px;
@@ -205,3 +206,7 @@
   background: transparent;
   border: 1px solid var(--Dark-Mode-White-20, #4d4f57);
 }
+
+.textSuccess {
+  color: #17984b !important;
+}
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, useState, useCallback } from "react";
 import styles from "./footer.module.css";
 import { Anchor } from "theme/fetch-ai-docs/components";
 import { renderComponent } from "theme/fetch-ai-docs/utils";
@@ -15,90 +15,95 @@ import {
 import Logo from "./logo";
 
 const FooterLink = ({
-  content,
+  content: { description, path },
 }: {
-  content: {
-    description: string;
-    path: string;
-  };
+  content: { description: string; path: string };
 }) => {
-  const [hover, setHover] = useState<boolean>(false);
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
     <section
-      id={addUnderscoreInText(content.description)}
-      onClick={() => {
-        window.open(content.path, "_blank", "noopener, noreferrer");
-      }}
-      onMouseOver={() => {
-        setHover(true);
-      }}
-      onMouseLeave={() => {
-        setHover(false);
-      }}
+      id={addUnderscoreInText(description)}
+      onClick={() => window.open(path, "_blank", "noopener, noreferrer")}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <p
-        className={hover ? `${styles.footerTextHover}` : `${styles.footerText}`}
-      >
-        {content.description}
+      <p className={isHovered ? styles.footerTextHover : styles.footerText}>
+        {description}
       </p>
     </section>
   );
 };
 
 const Footer: React.FC = () => {
   const developers = [
-    {
-      description: "Main website",
-      path: "https://fetch.ai/",
-    },
-    {
-      description: "Integrations",
-      path: "https://fetch.ai/integrations",
-    },
-    {
-      description: "Events",
-      path: "https://fetch.ai/events",
-    },
-    {
-      description: "We’re hiring!",
-      path: "https://fetch.ai/careers",
-    },
+    { description: "Main website", path: "https://fetch.ai/" },
+    { description: "Integrations", path: "https://fetch.ai/integrations" },
+    { description: "Events", path: "https://fetch.ai/events" },
+    { description: "We’re hiring!", path: "https://fetch.ai/careers" },
   ];
 
-  const [email, setEmail] = useState<string>("");
-  const [message, setMessage] = useState<string>("");
-
-  const onClick = async () => {
-    if (email === "") {
-      setMessage("Please enter your email address.");
-      return;
-    } else if (!regex.test(email)) {
-      setMessage("Please enter a valid email address.");
-      return;
-    }
+  const [formData, setFormData] = useState({
+    email: "",
+    message: "",
+    successMsg: "",
+    loading: false,
+  });
 
-    const option = {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(email),
-    };
-    await fetch("/docs/api/newsletter", option);
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({ ...prev, email: event.target.value }));
   };
 
-  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  const handleBlur = () => {
-    if (email === "") {
-      setMessage("Please enter your email address.");
-    } else if (regex.test(email)) {
-      setMessage("");
-    } else {
-      setMessage("Please enter a valid email address.");
+  const validateEmail = useCallback(() => {
+    const { email } = formData;
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!email) {
+      setFormData((prev) => ({
+        ...prev,
+        message: "Please enter your email address.",
+      }));
+      return false;
+    }
+    if (!regex.test(email)) {
+      setFormData((prev) => ({
+        ...prev,
+        message: "Please enter a valid email address.",
+      }));
+      return false;
     }
+    return true;
+  }, [formData.email]);
+
+  const onBlur = useCallback(() => {
+    validateEmail();
     setTimeout(() => {
-      setMessage("");
+      setFormData((prev) => ({ ...prev, message: "" }));
     }, 5000);
+  }, [validateEmail]);
+
+  const handleSubmit = async () => {
+    if (!validateEmail()) return;
+
+    setFormData((prev) => ({ ...prev, loading: true }));
+
+    const response = await fetch("/docs/api/newsletter", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email: formData.email }),
+    });
+
+    if (response.ok) {
+      setFormData({
+        email: "",
+        message: "",
+        successMsg: "Thank you for signing up for developer updates!",
+        loading: false,
+      });
+      setTimeout(
+        () => setFormData((prev) => ({ ...prev, successMsg: "" })),
+        5000,
+      );
+    }
   };
 
   return (
@@ -109,9 +114,9 @@ const Footer: React.FC = () => {
         <div className={styles.footerUpper}>
           <Logo />
           <div className={styles.footerLinkSection}>
-            {developers.map((content, index) => {
-              return <FooterLink key={index} content={content} />;
-            })}
+            {developers.map((content, index) => (
+              <FooterLink key={index} content={content} />
+            ))}
           </div>
         </div>
         <div className={styles.footerLower}>
@@ -142,7 +147,6 @@ const Footer: React.FC = () => {
                 </>,
               )}
             </Anchor>
-
             <Anchor
               id="footer-social-discord"
               className="nx-text-current"
@@ -156,7 +160,6 @@ const Footer: React.FC = () => {
                 </>,
               )}
             </Anchor>
-
             <Anchor
               id="footer-social-github"
               className="nx-text-current"
@@ -179,7 +182,7 @@ const Footer: React.FC = () => {
               {renderComponent(
                 <>
                   <Youtube />
-                  <span className="nx-sr-only">Youtube</span>
+                  <span className="nx-sr-only">YouTube</span>
                 </>,
               )}
             </Anchor>
@@ -218,20 +221,51 @@ const Footer: React.FC = () => {
                 </span>
                 <div className={styles.inputBox}>
                   <input
-                    onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                      setEmail(event.target.value)
-                    }
-                    onBlur={handleBlur}
+                    onChange={handleInputChange}
+                    onBlur={onBlur}
                     className={styles.inputInner}
                     placeholder="Email address"
+                    value={formData.email}
                   />
                 </div>
               </div>
-              <button onClick={onClick} className={styles.signBtn}>
-                <span>Sign up</span>
+              <button onClick={handleSubmit} className={styles.signBtn}>
+                {formData.loading ? (
+                  <div role="status">
+                    <svg
+                      aria-hidden="true"
+                      role="status"
+                      className="text-white nx-inline nx-h-4 nx-w-4 nx-me-3 nx-animate-spin"
+                      viewBox="0 0 100 101"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                        fill="#E5E7EB"
+                      />
+                      <path
+                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3293 21.5636 82.5976 25.8506C85.1192 29.275 87.1043 33.0792 88.4642 37.1346C89.2472 39.4867 91.5422 40.778 93.9676 39.0409Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    Loading...
+                  </div>
+                ) : (
+                  "Sign up"
+                )}
               </button>
             </div>
-            <span className="nx-h-5 nx-ml-1 error-text">{message}</span>
+
+            {
+              <span
+                className={`nx-h-5 nx-ml-1 ${
+                  formData.successMsg && `${styles.textSuccess}`
+                } ${formData.message && "error-text"} `}
+              >
+                {formData.message || formData.successMsg}
+              </span>
+            }
           </div>
         </div>
       </section>

diff --git a/pages/api/newsletter.ts b/pages/api/newsletter.ts
@@ -6,23 +6,25 @@ export default async function handler(
 ) {
   const email = req.body;
   try {
-    const url = new URL(`${process.env.NEWSLETTER_BASE_URL}/v2/subscribers`);
     const headers = {
       Authorization: `Bearer ${process.env.SENDER_TOKEN}`,
       "Content-Type": "application/json",
       Accept: "application/json",
     };
 
     const data = {
-      email,
+      email: email,
       groups: ["e1rVB0"],
     };
 
-    const response = await fetch(url, {
-      method: "POST",
-      headers,
-      body: JSON.stringify(data),
-    }).then((response) => response.json());
+    const response = await fetch(
+      `${process.env.NEWSLETTER_BASE_URL}/v2/subscribers`,
+      {
+        method: "POST",
+        headers,
+        body: JSON.stringify(data),
+      },
+    ).then((response) => response.json());
     if (!response.success) {
       console.log("unable to subscribe user");
     }

diff --git a/styles/globals.css b/styles/globals.css
@@ -2561,7 +2561,6 @@ span:target + .subheading-anchor:after {
   font-style: normal !important;
   font-weight: 500 !important;
   line-height: normal !important;
-  text-transform: uppercase !important;
 }
 
 :is(html[class~="dark"] .first-title) {
@@ -4008,6 +4007,26 @@ input[type="search"]::-webkit-search-results-decoration {
   background: #d2d3d5;
 }
 
+.nx-bg-active-menu-os {
+  background-color: #efebff;
+}
+
+:is(html[class~="dark"] .dark\:nx-bg-active-menu-os) {
+  background: #363841;
+}
+
+.os-icon-normal {
+  fill: #8a9fb8;
+}
+
+.os-icon-active {
+  fill: #5f38fb;
+}
+
+:is(html[class~="dark"] .dark\:os-icon-active) {
+  fill: #bfaffd;
+}
+
 :is(html[class~="dark"] .dark\:nx-bg-indigo-500) {
   background-color: #5f38fb;
 }
@@ -5129,7 +5148,6 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 {
   align-items: flex-start;
   border-radius: 8px;
   border: var(--1, 1px) solid #b9c5d4;
-  margin-top: 6px;
 }
 
 :is(html[class~="dark"] .osmenu-container-nav) {
@@ -5144,9 +5162,6 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 {
   background-color: #363841;
 }
 
-:is(html[class~="dark"] .osmenu-tab-container) {
-  background-color: #20222c;
-}
 .osmenu-tab-container {
   display: flex;
   width: 44px;

diff --git a/theme/fetch-ai-docs/components/instant-algolia-search.tsx b/theme/fetch-ai-docs/components/instant-algolia-search.tsx
@@ -102,7 +102,7 @@ export const InstantAlgoliaSearch = ({
   const NoResultsBoundary = ({ fallback }: { fallback: string }) => {
     return (
       <div className="nx-mt-2 nx-absolute nx-w-full nx-h-full">
-        <div className="nx-flex nx-p-4 nx-font-normal nx-text-fetch-main nx-justify-center">{`${fallback}`}</div>
+        <div className="nx-flex nx-p-4 nx-font-normal nx-justify-center">{`${fallback}`}</div>
       </div>
     );
   };