feat: initial version newsletter

components/FormSuscribe.js

@@ -2,9 +2,10 @@ import { useRef, useState } from 'react'
 
 import siteMetadata from '@/data/siteMetadata'
 
-const FormSuscribe = () => {
+const FormSubscribe = () => {
   const inputEl = useRef(null)
   const [message, setMessage] = useState('')
+  const [subscribed, setSubscribed] = useState(false)
 
   const subscribe = async (e) => {
     e.preventDefault()
@@ -19,16 +20,14 @@ const FormSuscribe = () => {
       method: 'POST',
     })
 
-    // console.log('resultat : ', res)
     const { error } = await res.json()
-    // console.log('error :', error)
     if (error) {
-      console.log('error 2 : ', error)
-      setMessage('You are already subscribed!')
+      setMessage('Your e-mail adress is invalid or you are already subscribed!')
       return
     }
 
     inputEl.current.value = ''
+    setSubscribed(true)
     setMessage('Successfully! 🎉 You are now subscribed.')
   }
 
@@ -51,14 +50,16 @@ const FormSuscribe = () => {
             ref={inputEl}
             required
             type="email"
+            disabled={subscribed}
           />
         </div>
         <div className="mt-2 flex-shrink-0 w-full flex rounded-md shadow-sm sm:mt-0 sm:ml-3 sm:w-auto sm:inline-flex">
           <button
             className="w-full bg-primary-500 dark:bg-primary-400 px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-primary-700 dark:hover:bg-primary-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:primary-700 sm:w-auto sm:inline-flex"
             type="submit"
+            disabled={subscribed}
           >
-            {message ? 'Thank you!' : 'Sign up'}
+            {subscribed ? 'Thank you!' : 'Sign up'}
           </button>
         </div>
       </form>
@@ -69,4 +70,4 @@ const FormSuscribe = () => {
   )
 }
 
-export { FormSuscribe }
+export { FormSubscribe }

data/siteMetadata.js

@@ -23,13 +23,13 @@ const siteMetadata = {
     googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
   },
   newsletter: {
-    provider: 'buttondown', // supported providers: mailchimp
+    provider: 'mailchimp', // supported providers: mailchimp, buttondown
     mailChimpConfig: {
       apiKey: process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY,
       apiServer: process.env.NEXT_PUBLIC_MAILCHIMP_API_SERVER,
       audienceId: process.env.NEXT_PUBLIC_MAILCHIMP_AUDIENCE_ID,
     },
-    buttonDown: process.env.NEXT_PUBLIC_BUTTONDOWN,
+    buttondownConfig: process.env.NEXT_PUBLIC_BUTTONDOWN,
   },
   comment: {
     // Select a provider and use the environment variables associated to it
@@ -68,7 +68,7 @@ const siteMetadata = {
       // theme when dark mode
       darkTheme: '',
     },
-    disqus: {
+    disqusConfig: {
       // https://help.disqus.com/en/articles/1717111-what-s-a-shortname
       shortname: process.env.NEXT_PUBLIC_DISQUS_SHORTNAME,
     },

package.json

@@ -19,7 +19,6 @@
     "esbuild": "^0.12.15",
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
-    "mailchimp": "^1.2.1",
     "mdx-bundler": "^6.0.1",
     "next": "11.1.0",
     "next-themes": "^0.0.14",

pages/api/buttondown.js

@@ -2,14 +2,13 @@
 export default async (req, res) => {
   const { email } = req.body
 
+  console.log('hello 1')
   if (!email) {
     return res.status(400).json({ error: 'Email is required' })
   }
 
   try {
     const API_KEY = process.env.NEXT_PUBLIC_BUTTONDOWN
-    // console.log('Api key : ', API_KEY)
-
     const response = await fetch(`https://api.buttondown.email/v1/subscribers`, {
       body: JSON.stringify({
         email,
@@ -20,12 +19,10 @@ export default async (req, res) => {
       },
       method: 'POST',
     })
-
-    const badReponse = await response.json()
-    // console.log('response : ', await response.json())
+    const responseMessage = await response.json()
 
     if (response.status >= 400) {
-      return badReponse
+      return res.status(500).json({ error: responseMessage[0] })
     }
 
     return res.status(201).json({ error: '' })

pages/index.js

@@ -5,7 +5,7 @@ import siteMetadata from '@/data/siteMetadata'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import formatDate from '@/lib/utils/formatDate'
 
-import { FormSuscribe } from '@/components/FormSuscribe'
+import { FormSubscribe } from '@/components/FormSuscribe'
 
 const MAX_DISPLAY = 5
 
@@ -19,7 +19,7 @@ export default function Home({ posts }) {
   return (
     <>
       <PageSEO title={siteMetadata.title} description={siteMetadata.description} />
-      {siteMetadata.newsletter.provider !== '' && <FormSuscribe />}
+      {siteMetadata.newsletter.provider !== '' && <FormSubscribe />}
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
         <div className="pt-6 pb-8 space-y-2 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">