add newsletter sign up

Author: dwwoelfel

.env

@@ -1,3 +1,4 @@
 
 RAZZLE_ONEGRAPH_APP_ID="570a3d6b-6ff3-4b7a-9b0d-fe4cf6384388"
+RAZZLE_ENABLE_MAILCHIMP_SIGNUP=true
 REPOSITORY_FIXED_VARIABLES='{"repoName": "onegraph-changelog", "repoOwner": "onegraph"}'

README.md

@@ -103,8 +103,6 @@ The project can be deployed with Netlify and Netlify functions. The config lives
 To deploy
 
 ```
-yarn build
-yarn build:netlify-functions
 yarn deploy:netlify
 ```
 

src/App.js

@@ -13,11 +13,20 @@ import Link from './PreloadLink';
 import idx from 'idx';
 import {NotificationContainer} from './Notifications';
 import OneGraphLogo from './oneGraphLogo';
-import {Grommet, Grid, Box, Heading, Text, Anchor} from 'grommet';
+import {
+  Grommet,
+  Grid,
+  Box,
+  Heading,
+  Text,
+  Anchor,
+  ResponsiveContext,
+} from 'grommet';
 import {StatusCritical} from 'grommet-icons';
 import ScrollMemory from 'react-router-scroll-memory';
 import {matchPath} from 'react-router-dom';
 import UserContext from './UserContext';
+import NewsletterSignup from './NewsletterSignup';
 
 import type {App_ViewerQueryResponse} from './__generated__/App_Query.graphql';
 import type {Environment} from 'relay-runtime';
@@ -218,54 +227,75 @@ export default class App extends React.Component<
         }}>
         <NotificationContainer>
           <Grommet theme={theme}>
-            <Grid
-              fill
-              rows={['auto', 'flex']}
-              columns={['flex']}
-              areas={[
-                {name: 'header', start: [0, 0], end: [1, 0]},
-                {name: 'main', start: [0, 1], end: [1, 1]},
-              ]}>
-              <Box
-                gridArea="header"
-                direction="row"
-                align="center"
-                justify="between"
-                pad={{horizontal: 'medium', vertical: 'medium'}}
-                wrap={true}>
-                <Box align="center" direction="row">
-                  <OneGraphLogo width="96px" height="96px" />{' '}
-                  <Heading level={2}>
-                    <Link style={{color: 'inherit'}} to="/">
-                      OneGraph Product Updates
-                    </Link>
-                  </Heading>
-                </Box>
-                <Anchor href="https://onegraph.com">
-                  <Text size="small">Learn more about OneGraph</Text>
-                </Anchor>
-              </Box>
-              <Box gridArea="main">
-                <ScrollMemory />
-                <Switch>
-                  {routes.map((routeConfig, i) => (
-                    <Route
-                      key={i}
-                      path={routeConfig.path}
-                      exact={routeConfig.exact}
-                      strict={routeConfig.strict}
-                      render={props => (
-                        <RenderRoute
-                          environment={this.props.environment}
-                          match={props.match}
-                          routeConfig={routeConfig}
-                        />
-                      )}
-                    />
-                  ))}
-                </Switch>
-              </Box>
-            </Grid>
+            <ResponsiveContext.Consumer>
+              {size => {
+                const small = size === 'small';
+                return (
+                  <Grid
+                    fill
+                    rows={['auto', 'flex']}
+                    columns={small ? ['flex'] : ['flex', 'auto']}
+                    areas={
+                      small
+                        ? [
+                            {name: 'header', start: [0, 0], end: [1, 0]},
+                            {name: 'main', start: [0, 1], end: [1, 1]},
+                          ]
+                        : [
+                            {name: 'header', start: [0, 0], end: [1, 0]},
+                            {name: 'main', start: [0, 1], end: [1, 1]},
+                            {name: 'sidebar', start: [1, 1], end: [1, 1]},
+                          ]
+                    }>
+                    <Box
+                      gridArea="header"
+                      direction="row"
+                      align="center"
+                      justify="between"
+                      pad={{horizontal: 'medium', vertical: 'medium'}}
+                      wrap={true}>
+                      <Box align="center" direction="row">
+                        <OneGraphLogo width="96px" height="96px" />{' '}
+                        <Heading level={2}>
+                          <Link style={{color: 'inherit'}} to="/">
+                            OneGraph Product Updates
+                          </Link>
+                        </Heading>
+                      </Box>
+                      <Anchor href="https://onegraph.com">
+                        <Text size="small">Learn more about OneGraph</Text>
+                      </Anchor>
+                    </Box>
+                    {small ||
+                    !process.env.RAZZLE_ENABLE_MAILCHIMP_SIGNUP ? null : (
+                      <Box gridArea="sidebar" pad="medium" width="medium">
+                        <NewsletterSignup />
+                      </Box>
+                    )}
+                    <Box gridArea="main">
+                      <ScrollMemory />
+                      <Switch>
+                        {routes.map((routeConfig, i) => (
+                          <Route
+                            key={i}
+                            path={routeConfig.path}
+                            exact={routeConfig.exact}
+                            strict={routeConfig.strict}
+                            render={props => (
+                              <RenderRoute
+                                environment={this.props.environment}
+                                match={props.match}
+                                routeConfig={routeConfig}
+                              />
+                            )}
+                          />
+                        ))}
+                      </Switch>
+                    </Box>
+                  </Grid>
+                );
+              }}
+            </ResponsiveContext.Consumer>
           </Grommet>
         </NotificationContainer>
       </UserContext.Provider>

src/NewsletterSignup.js

@@ -0,0 +1,186 @@
+// @flow
+
+import React from 'react';
+import idx from 'idx';
+import {Box, Heading, Form, FormField, Button, TextInput, Text} from 'grommet';
+
+// Create your own signup from the Persisted Queries tab on OneGraph
+// 1. create a token with mailchimp auth from the "Server-side Auth" tab.
+// 2. enter the query into the form and change the list id in the path param
+// 3. set free variables to email, firstName, and lastName
+// 4. replace the doc_id below
+// 5. Set RAZZLE_ENABLE_MAILCHIMP_SIGNUP=true in .env
+const DOC_ID = 'd0b9c4f6-73b4-400c-b003-1692b67e12ca';
+/* 
+# Query for d0b9c4f6-73b4-400c-b003-1692b67e12ca
+mutation MailchimpSignup($email: String!, $firstName: String!, $lastName: String!) {
+  mailchimp {
+    makeRestCall {
+      post(
+        path: "/3.0/lists/e6680e715f/members"
+        jsonBody: {
+          email_address: $email
+          status: "pending"
+          tags: ["changelog"]
+          merge_fields: {
+            FNAME: $firstName
+            LNAME: $lastName
+          }
+        }
+      ) {
+        jsonBody
+      }
+    }
+  }
+}
+ */
+
+async function subscribeToList({
+  email,
+  firstName,
+  lastName,
+}: {
+  email: string,
+  firstName: string,
+  lastName: string,
+}): Promise<any> {
+  const resp = await fetch(
+    'https://serve.onegraph.com/graphql?app_id=' +
+      String(process.env.RAZZLE_ONEGRAPH_APP_ID),
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify({
+        doc_id: DOC_ID,
+        variables: {
+          email,
+          firstName,
+          lastName,
+        },
+      }),
+    },
+  );
+  const json = await resp.json();
+  console.log('j', json);
+  const body = idx(json, _ => _.data.mailchimp.makeRestCall.post.jsonBody);
+  if (!body) {
+    throw new Error('unknown error');
+  }
+  if (body.email_address) {
+    return;
+  }
+  const errors = idx(
+    json,
+    _ => _.data.mailchimp.makeRestCall.post.jsonBody.errors,
+  );
+
+  if (errors) {
+    if (errors.find(e => e.field === 'email_address')) {
+      throw new Error('invalid email');
+    } else {
+      throw new Error('unknown error');
+    }
+  }
+
+  const errorDetail = body.detail;
+  if (errorDetail) {
+    throw new Error(errorDetail);
+  }
+}
+
+export default function NewsletterSignup() {
+  const [formFields, setFormFields] = React.useState({
+    email: '',
+    firstName: '',
+    lastName: '',
+  });
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [success, setSuccess] = React.useState(false);
+  if (success) {
+    return (
+      <Box pad="medium" elevation="small">
+        <Heading level={4} margin="none">
+          Subscribed to updates!
+        </Heading>
+        <Text margin={{top: 'small'}} size="small">
+          Check your email for the confirmation.
+        </Text>
+      </Box>
+    );
+  }
+  return (
+    <Box pad="medium" elevation="small">
+      <Heading level={4} margin="none">
+        Subscribe to updates
+      </Heading>
+      <Box margin={{top: 'small'}}>
+        <Form
+          errors={error ? {email: error} : {}}
+          value={formFields}
+          onSubmit={async e => {
+            e.stopPropagation();
+            e.preventDefault();
+            setIsLoading(true);
+            setError(null);
+            try {
+              await subscribeToList(formFields);
+              setSuccess(true);
+            } catch (e) {
+              setError(
+                `Error subscribing: ${e.message} 
+                Email [email protected] for help.`,
+              );
+              console.error('Error subscribing', e);
+            } finally {
+              setIsLoading(false);
+            }
+          }}>
+          <FormField name="firstName˚">
+            <TextInput
+              disabled={isLoading}
+              value={formFields.firstName}
+              onChange={e =>
+                setFormFields({
+                  ...formFields,
+                  firstName: e.target.value,
+                })
+              }
+              placeholder="First name"
+            />
+          </FormField>
+          <FormField name="lastName">
+            <TextInput
+              disabled={isLoading}
+              value={formFields.lastName}
+              onChange={e =>
+                setFormFields({
+                  ...formFields,
+                  lastName: e.target.value,
+                })
+              }
+              placeholder="Last name"
+            />
+          </FormField>
+          <FormField name="email">
+            <TextInput
+              disabled={isLoading}
+              value={formFields.email}
+              onChange={e =>
+                setFormFields({
+                  ...formFields,
+                  email: e.target.value,
+                })
+              }
+              placeholder="Email"
+            />
+          </FormField>
+          <Button disabled={isLoading} type="submit" label="Subscribe" />
+        </Form>
+      </Box>
+    </Box>
+  );
+}

src/Post.js

@@ -204,10 +204,10 @@ export function PostBox({children}: {children: React.Node}) {
   return (
     <Box
       margin="medium"
+      elevation="small"
       style={{
         maxWidth: 704,
         borderRadius: 2,
-        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0,0,0,0.2)',
       }}>
       {children}
     </Box>