Add newsletter signup form to the website

Author: MICHAEL JACKSON

website/modules/components/Footer.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Block, Inline } from "jsxstyle";
 import { DARK_GRAY, BRIGHT_GRAY, LIGHT_GRAY } from "../Theme";
-import NewsletterSignup from "./NewsletterSignup";
+import MailingListSignup from "./MailingListSignup";
 
 const FooterLink = ({ href, ...rest }) => (
   <Inline component="a" props={{ href }} {...rest} textDecoration="underline" />
@@ -27,7 +27,7 @@ const year = new Date().getFullYear();
 
 const Footer = () => (
   <Block>
-    <NewsletterSignup />
+    <MailingListSignup />
     <Block
       background={DARK_GRAY}
       color={BRIGHT_GRAY}

website/modules/components/MailingListSignup.js

@@ -0,0 +1,132 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Block, Flex } from "jsxstyle";
+
+import subscribeToMailingList from "../utils/subscribeToMailingList";
+import { RED } from "../Theme";
+import SmallScreen from "./SmallScreen";
+
+const Button = ({ children, ...props }) => (
+  <Block
+    component="button"
+    color="#fff"
+    padding="15px 10px"
+    background={RED}
+    borderRadius={0}
+    cursor="pointer"
+    border="none"
+    textShadow="none"
+    minWidth="80px"
+    children={children}
+    {...props}
+  />
+);
+
+Button.propTypes = {
+  children: PropTypes.node
+};
+
+const Input = ({ margin, ...props }) => (
+  <Block
+    component="input"
+    padding="10px 8px"
+    border="1px solid #d6d6d6"
+    borderRadius="0"
+    backgroundColor="white"
+    height="42px"
+    flex="1"
+    props={props}
+    margin={margin}
+  />
+);
+
+Input.propTypes = {
+  margin: PropTypes.any
+};
+
+class MailingListSignup extends Component {
+  state = {
+    email: "",
+    submitted: true
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+
+    if (this.state.email) {
+      subscribeToMailingList(this.state.email).then(() => {
+        this.setState({
+          email: "",
+          submitted: true
+        });
+      });
+    }
+  };
+
+  render() {
+    const { email, submitted } = this.state;
+
+    return (
+      <SmallScreen>
+        {isSmallScreen => (
+          <Block
+            background="white"
+            maxWidth="700px"
+            margin="auto"
+            padding={isSmallScreen ? "40px" : "80px"}
+          >
+            {submitted ? (
+              <Block textAlign="center">
+                <p>Thanks! You've been added to the list.</p>
+                <p style={{ marginTop: 10 }}>
+                  <a
+                    style={{ textDecoration: "underline", cursor: "pointer" }}
+                    onClick={() => this.setState({ submitted: false })}
+                  >
+                    Reset
+                  </a>
+                </p>
+              </Block>
+            ) : (
+              <div>
+                <Block
+                  margin="auto"
+                  paddingBottom={isSmallScreen ? "20px" : "40px"}
+                  textAlign="center"
+                  fontSize={isSmallScreen ? "100%" : "150%"}
+                  fontWeight="bold"
+                >
+                  Sign up to receive updates about React Router,{" "}
+                  <a
+                    href="https://reacttraining.com"
+                    style={{ textDecoration: "underline" }}
+                  >
+                    our React workshops
+                  </a>, and more:
+                </Block>
+                <form onSubmit={this.handleSubmit}>
+                  <Flex
+                    flexDirection={isSmallScreen ? "column" : "row"}
+                    justifyContent="space-around"
+                  >
+                    <Input
+                      value={email}
+                      onChange={e => this.setState({ email: e.target.value })}
+                      type="email"
+                      name="email"
+                      placeholder="[email protected]"
+                      margin={isSmallScreen ? "0 0 5px 0" : "0 5px 0 0"}
+                    />
+                    <Button type="submit">Subscribe</Button>
+                  </Flex>
+                </form>
+              </div>
+            )}
+          </Block>
+        )}
+      </SmallScreen>
+    );
+  }
+}
+
+export default MailingListSignup;

website/modules/components/NewsletterSignup.js

@@ -0,0 +1,19 @@
+import fetch from "isomorphic-fetch";
+import qs from "query-string";
+
+function subscribeToMailingList(email) {
+  return fetch("https://reacttraining.us16.list-manage.com/subscribe/post", {
+    method: "POST",
+    mode: "no-cors",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    },
+    body: qs.stringify({
+      u: "47df8ab2101d1dd83353427fc",
+      id: "83f54bda60",
+      MERGE0: email
+    })
+  });
+}
+
+export default subscribeToMailingList;

website/modules/utils/subscribeToMailingList.js

@@ -1,7 +1,6 @@
 {
   "private": true,
   "name": "react-router-website",
-  "version": "4.2.0",
   "scripts": {
     "build": "NODE_ENV=production webpack -p",
     "clean": "git clean -fdX .",
@@ -40,7 +39,9 @@
   "dependencies": {
     "animated": "^0.2.1",
     "cheerio": "^0.22.0",
+    "isomorphic-fetch": "^2.2.1",
     "prop-types": "^15.6.0",
+    "query-string": "^5.1.0",
     "react": "^16.2.0",
     "react-css-property-operations": "^15.4.1",
     "react-dom": "^16.2.0",