diff --git a/components/EmailSubscribe.js b/components/EmailSubscribe.js new file mode 100644 index 0000000..8edddea --- /dev/null +++ b/components/EmailSubscribe.js @@ -0,0 +1,173 @@ +import React from 'react' +import MailchimpSubscribe from 'react-mailchimp-subscribe' +import { validate } from 'email-validator' +import { useKeyboardListener } from 'actionsack' + +import Input from './Input' +import Button from './Button' +import { COLORS } from '../lib/constants' + +const Error = ({ message = 'something went wrong' }) => { + if ( + message.indexOf && + message.indexOf('The domain portion of the email address is invalid') > -1 + ) { + message = `Oh no, that's not a valid email!` + } + if (message.indexOf && message.indexOf('is already subscribed')) { + message = message.split(' + {message} + + + ) +} + +const Form = ({ message, subscribe, error }) => { + const [email, setEmail] = React.useState('') + const [showError, setShowError] = React.useState(true) + const disabled = !validate(email) + return ( +
{ + e.preventDefault() + subscribe({ EMAIL: email }) + }} + > + { + setEmail(e.target.value) + setShowError(false) + }} + /> + + {error && showError && } + + + ) +} + +const EmailSubscribe = () => { + const [open, setOpen] = React.useState(false) + + useKeyboardListener('Escape', () => setOpen(false)) + + if (!process.env.NEXT_PUBLIC_MAILCHIMP_URL) { + return null + } + + return ( +
+ + {open && ( + { + const success = status === 'success' + const loading = status === 'sending' + const error = status === 'error' + return ( +
+ {loading || success ? ( + {loading ? 'loading...' : 'subscribed!'} + ) : ( +
+ )} +
+ ) + }} + /> + )} + +
+ ) +} + +export default EmailSubscribe diff --git a/components/Footer.js b/components/Footer.js index 929a515..d6a6f5f 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -1,7 +1,13 @@ import React from 'react' import Link from 'next/link' +import dynamic from 'next/dynamic' + import { COLORS } from '../lib/constants' +const EmailSubscribe = dynamic(() => import('./EmailSubscribe'), { + loading: () => null, +}) + const Footer = () => (