Email subscribers now go to Loops.

web/src/components/SubscribeForm.js

@@ -1,44 +1,79 @@
-import React from 'react'
+import React, { useState } from 'react'
 import classNames from 'classnames'
 
-const SubscribeForm = ({ className, inputBgColor }) => (
-  <form 
-    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" 
-      id="email-address"
-      required autoComplete='email'
-      placeholder='you@areawesomeforsubscribing.com'
-      className={`
-        text-sm w-full
-        appearance-none
-        placeholder:text-neutral-400
-        border border-yellow-500
-        px-4 py-2 rounded-md
-        focus:outline-none focus:ring-2 focus:ring-yellow-400
-      ` + ` ${inputBgColor}`}
-    />
-    <div className='rounded-md mt-3 sm:mt-0 sm:ml-3'>
-      <button
-        type='submit'
-        className={`
-          w-full
-          text-sm border border-transparent rounded-md
-          bg-yellow-500 text-white
-          px-4 py-2
-          hover:bg-yellow-400
-          transition ease-out duration-200
-        `}
-      >
-        Subscribe
-      </button>
-    </div>
-  </form>
-)
+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)}
+        >
+          <input
+            aria-label="Email address"
+            type="email"
+            name="email"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            id="email-address"
+            required autoComplete='email'
+            placeholder='you@awesomedev.com'
+            className={`
+              text-sm w-full
+              appearance-none
+              placeholder:text-neutral-400
+              border border-yellow-500
+              px-4 py-2 rounded-md
+              focus:outline-none focus:ring-2 focus:ring-yellow-400
+            ` + ` ${inputBgColor}`}
+          />
+          <div className='rounded-md mt-3 sm:mt-0 sm:ml-3'>
+            <button
+              type='submit'
+              className={`
+                w-full
+                text-sm border border-transparent rounded-md
+                bg-yellow-500 text-white
+                px-4 py-2
+                hover:bg-yellow-400
+                transition ease-out duration-200
+              `}
+            >
+              Subscribe
+            </button>
+          </div>
+        </form>
+      }
+    </>
+  )
+}
 
 export default SubscribeForm