Add bytes email signup

Author: benadam11

src/components/App.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Helmet from "react-helmet";
-import { StaticQuery, graphql, withPrefix } from "gatsby";
+import { StaticQuery, graphql } from "gatsby";
 import ogImage from "./../../static/img/og-image-2.png";
 import "./global.css";
 

src/components/EmailSignup.js

@@ -1,24 +1,59 @@
 import React, { useState } from "react";
+import { useStaticQuery } from "gatsby";
 import fetch from "unfetch";
 import styled from "styled-components";
+import toast from "react-hot-toast";
 import analytics from "./../utils/analytics.js";
 
+function sendBytesOptIn({ email, source }) {
+  return fetch(`https://bytes.dev/api/bytes-optin-cors`, {
+    method: "POST",
+    body: JSON.stringify({ email, source }),
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+  }).then((res) => res.json());
+}
+
+function useBytesCount() {
+  const {
+    bytes: { subcount },
+  } = useStaticQuery(graphql`
+    query subCountQuery {
+      bytes {
+        subcount
+      }
+    }
+  `);
+
+  return subcount;
+}
+
 const EmailSignup = () => {
+  const subcount = useBytesCount();
+  const [isLoading, setIsLoading] = useState(false);
   const [subscribed, setSubscribed] = useState(false);
   const [email, setEmail] = useState("");
 
   const subscribe = (event) => {
     event.preventDefault();
     if (!email) return;
-    analytics.track("subscribe");
-    setSubscribed(true);
-    return fetch("https://usehooks-next.vercel.app/api/subscribe", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ email }),
-    }).then((r) => r.json());
+    setIsLoading(true);
+    return sendBytesOptIn({ email, source: "useHooks" }).then((res) => {
+      if (res.error) {
+        setEmail("");
+        setIsLoading(false);
+        return toast.error(
+          "There was an error. Check to see if your email is correct."
+        );
+      }
+      analytics.track("subscribe");
+      setSubscribed(true);
+      setIsLoading(false);
+      setEmail("");
+      return toast.success(`Check your email to confirm your subscription.`);
+    });
   };
 
   return (
@@ -33,12 +68,21 @@ const EmailSignup = () => {
           </div>
         ) : (
           <>
-            <Title>
+            <h4 className="subtitle is-5">
               <span role="img" aria-label="letter">
                 📩
               </span>
-              &nbsp;&nbsp;Get new recipes in your inbox
-            </Title>
+              &nbsp;&nbsp;Subscribe to Bytes
+            </h4>
+            <p>
+              Most newsletters are terrible. Thats why we created Bytes. Our
+              goal was to create a JavaScript newsletter that was both
+              educational and entertaining. <b>{subcount.toLocaleString()}</b>{" "}
+              subscribers and an almost 50% weekly open rate later, it looks
+              like we did it...
+            </p>
+            <br />
+
             <form onSubmit={subscribe}>
               <div className="field has-addons">
                 <div className="control is-expanded">
@@ -53,26 +97,28 @@ const EmailSignup = () => {
                 </div>
                 <div className="control">
                   <button
+                    disabled={isLoading}
                     className="button is-primary has-text-weight-semibold"
                     type="submit"
                   >
-                    Subscribe
+                    {isLoading ? "Loading..." : "Subscribe"}
                   </button>
                 </div>
               </div>
             </form>
-            <Extra>Join 7,031 subscribers. No spam ever.</Extra>
+            <Extra>
+              Join {subcount.toLocaleString()} subscribers. No spam ever. <br />
+              <a href="https://bytes.dev/archives" target="_blank">
+                See the most recent issue.
+              </a>
+            </Extra>
           </>
         )}
       </div>
     </div>
   );
 };
 
-const Title = styled("div").attrs({ className: "subtitle is-5" })`
-  margin-bottom: 1.2rem;
-`;
-
 const Extra = styled("div")`
   margin-top: 1rem;
   font-size: 0.8rem;