Merge pull request #132 from uidotdev/bytes-email

Bytes email

Author: benadam11

gatsby-config.js

@@ -21,6 +21,7 @@ module.exports = {
     },
     "gatsby-plugin-styled-components",
     "gatsby-plugin-react-helmet",
+    "custom-bytes-subscriber-count-plugin",
     {
       resolve: "gatsby-source-filesystem",
       options: {

package-lock.json

@@ -20,6 +20,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
+    "react-hot-toast": "^2.2.0",
     "react-syntax-highlighter": "^13.0.0",
     "serve": "^11.3.2",
     "styled-components": "^5.1.1",

package.json

@@ -0,0 +1,28 @@
+const fetch = require("node-fetch");
+
+exports.sourceNodes = async ({
+  actions,
+  createNodeId,
+  createContentDigest,
+}) => {
+  try {
+    const res = await fetch(`https://bytes.dev/api/subcount`).then((res) =>
+      res.json()
+    );
+
+    if (res.error) {
+      throw res.error;
+    }
+
+    actions.createNode({
+      subcount: res.subcount,
+      id: createNodeId(`bytes-subcount`),
+      internal: {
+        type: "bytes",
+        contentDigest: createContentDigest({ subcount: res.subcount }),
+      },
+    });
+  } catch (e) {
+    console.log(`Error in custom-bytes-subscriber-count-plugin`, e.message);
+  }
+};

plugins/custom-bytes-subscriber-count-plugin/gatsby-node.js

@@ -0,0 +1 @@
+{}

plugins/custom-bytes-subscriber-count-plugin/package.json

@@ -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/App.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,28 @@ 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{" "}
+              <a
+                target="_blank"
+                href="https://twitter.com/uidotdev/timelines/1428028877129936899"
+              >
+                we did it
+              </a>{" "}
+              ...
+            </p>
+            <br />
+
             <form onSubmit={subscribe}>
               <div className="field has-addons">
                 <div className="control is-expanded">
@@ -53,26 +104,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. {""}
+              <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;

src/components/EmailSignup.js

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import App from "./App";
 import EmailSignup from "./EmailSignup";
 import analytics from "./../utils/analytics.js";
+import { Toaster } from "react-hot-toast";
 
 export const Layout = ({ children }) => {
   return (
@@ -46,10 +47,10 @@ export const Layout = ({ children }) => {
         <Container>
           <div className="columns is-vcentered ">
             <div className="column is-6">
-              <div className="title is-5">What's all this about?</div>
+              <h4 className="title is-5">What's all this about?</h4>
               <p>
-                <i>Hooks</i> are a new addition in React that lets you use state
-                and other React features without writing a class. This website
+                <i>Hooks</i> are a feature in React that allow you use state and
+                other React features without writing classes. This website
                 provides easy to understand code examples to help you learn how
                 hooks work and inspire you to take advantage of them in your
                 next project.
@@ -129,6 +130,14 @@ export const Layout = ({ children }) => {
           </FooterLevel>
         </div>
       </div>
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          success: {
+            duration: 3000,
+          },
+        }}
+      />
     </App>
   );
 };