Email subscribers now go to Loops.

web/src/components/SubscribeForm.js

@@ -1,19 +1,51 @@
-import React from 'react'
+import React, { useState } from 'react'
 import classNames from 'classnames'
 
-const SubscribeForm = ({ className, inputBgColor }) => (
+const createNewEmailSubscriberApiEndpoint = "https://app.loops.so/api/newsletter-form/clg0zndc9000ajn0f8a1bhgmu"
+
+const SubscribeForm = ({ className, inputBgColor }) => {
+  const [email, setEmail] = useState('')
+  const [message, setMessage] = useState('')
+
+  const handleSubmit = async (event) => {
+    // NOTE(matija): without this, the whole page reloads on form submission.
+    event.preventDefault()
+
+    console.log('going to submit an email!')
+
+    try {
+      const res = await fetch(createNewEmailSubscriberApiEndpoint, {
+        method: "POST",
+        body: 'userGroup=&email=' + 'matija.sosic@gmail.com',
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      })
+      setMessage('Thank you for subscribing! 🙏')
+
+    } catch (error) {
+      setMessage('🛑 Oops! Something went wrong. Please try again.')
+    }
+  }
+
+  return (
+    <>
+      { message ?
+        <p className='text-lg text-neutral-500'>{message}</p>
+      :
         <form
+          onSubmit={handleSubmit}
           className={classNames('sm:flex', className)}
-    action="https://gmail.us4.list-manage.com/subscribe/post?u=8139c7de74df98aa17054b235&amp;id=f0c6ba5f1d"
-    method="post"
         >
           <input
             aria-label="Email address"
             type="email"
-      name="EMAIL" 
+            name="email"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
             id="email-address"
             required autoComplete='email'
-      placeholder='you@areawesomeforsubscribing.com'
+            placeholder='you@awesomedev.com'
             className={`
               text-sm w-full
               appearance-none
@@ -39,6 +71,9 @@ const SubscribeForm = ({ className, inputBgColor }) => (
             </button>
           </div>
         </form>
+      }
+    </>
   )
+}
 
 export default SubscribeForm