From 3e5acda75af5a61fc68e73d1cdd5edd0f64ee5f4 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 11 Sep 2020 12:46:53 -0700
Subject: [PATCH] chore: Use reacaptcha package

---
 gatsby-ssr.js                      | 10 ++++++++++
 package-lock.json                  |  5 +++++
 package.json                       |  1 +
 src/components/common/recaptcha.js | 30 +++++++++---------------------
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index e2daec984..59fe23b26 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -4,4 +4,14 @@ exports.onRenderBody = ({ setPostBodyComponents, setBodyAttributes }) => {
   setBodyAttributes({
     className: 'no-js',
   })
+
+  setPostBodyComponents([
+    <script
+      type="text/javascript"
+      key="recaptcha-script"
+      async
+      defer
+      src="https://www.google.com/recaptcha/api.js"
+    />,
+  ])
 }
diff --git a/package-lock.json b/package-lock.json
index 706e51628..55fdbb843 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32355,6 +32355,11 @@
         "react-popper": "^1.3.7"
       }
     },
+    "react-recaptcha": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/react-recaptcha/-/react-recaptcha-2.3.10.tgz",
+      "integrity": "sha512-IyanbozsYCuHvTYDuskZTIEcRAMG/sdvAu5b29iQWoC8Kd3Zk9WGCv2oNxh6RfGHvSvgHAyaLjmC6ei/yMsJ7g=="
+    },
     "react-reconciler": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.25.1.tgz",
diff --git a/package.json b/package.json
index 02625dc77..94e87265f 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "react-dom": "^16.12.0",
     "react-expand-animated": "^1.0.2",
     "react-helmet": "^5.2.1",
+    "react-recaptcha": "^2.3.10",
     "react-typography": "^0.16.19",
     "slugify": "^1.4.0",
     "smartypants": "^0.1.1"
diff --git a/src/components/common/recaptcha.js b/src/components/common/recaptcha.js
index 6ec255430..d003ed51b 100644
--- a/src/components/common/recaptcha.js
+++ b/src/components/common/recaptcha.js
@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
-import Helmet from 'react-helmet'
+import ReCaptcha from 'react-recaptcha'
 
 const Recaptcha = () => {
   const data = useStaticQuery(graphql`
@@ -13,27 +13,15 @@ const Recaptcha = () => {
     }
   `)
 
-  const captchaRef = useRef(false)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined')
-      window.recaptchaOnload = () => {
-        window.grecaptcha.render(captchaRef.current, {
-          siteKey: data.site.siteMetadata.recaptchaKey,
-        })
-      }
-  }, [])
-
   return (
     <>
-      <Helmet>
-        <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=recaptchaOnload" />
-      </Helmet>
-      <div
-        className="g-recaptcha"
-        ref={captchaRef}
-        data-sitekey={data.site.siteMetadata.recaptchaKey}
-      />
+      {typeof window !== 'undefined' && (
+        <ReCaptcha
+          sitekey={data.site.siteMetadata.recaptchaKey}
+          render="explicit"
+          elementID={`captcha-${Math.round(Math.random() * 1000)}`}
+        />
+      )}
     </>
   )
 }