Rewrite recaptcha widget.

Author: robgietema

frontend/packages/volto-form-block/src/components/Widgets/GoogleReCaptchaWidget.jsx

@@ -1,28 +1,43 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useIntl } from 'react-intl';
 
-const GoogleReCaptchaWidget = (props) => {
-  const { captcha_props, GoogleReCaptcha: recaptchalib, id, onChange } = props;
+const ReCaptchaComponent = (props) => {
+  const { GoogleReCaptcha: recaptchalib, id, onChange } = props;
+
+  const { useGoogleReCaptcha } = recaptchalib;
+
+  const { executeRecaptcha } = useGoogleReCaptcha();
+
+  const handleReCaptchaVerify = useCallback(async () => {
+    if (!executeRecaptcha) {
+      return;
+    }
+
+    const token = await executeRecaptcha();
+    onChange(id, token);
+  }, [executeRecaptcha]);
 
-  const { GoogleReCaptchaProvider, GoogleReCaptcha } = recaptchalib;
+  useEffect(() => {
+    handleReCaptchaVerify();
+  }, [handleReCaptchaVerify]);
+
+  return null;
+};
+
+const GoogleReCaptchaWidget = (props) => {
   const intl = useIntl();
-  const [submitted, setSubmitted] = useState(false);
+
+  const { captcha_props, GoogleReCaptcha: recaptchalib } = props;
+  const { GoogleReCaptchaProvider } = recaptchalib;
 
   return (
-    !submitted && (
-      <GoogleReCaptchaProvider
-        reCaptchaKey={captcha_props.public_key}
-        language={intl.locale ?? 'en'}
-      >
-        <GoogleReCaptcha
-          onVerify={(token) => {
-            setSubmitted(true);
-            onChange(id, token);
-          }}
-        />
-      </GoogleReCaptchaProvider>
-    )
+    <GoogleReCaptchaProvider
+      reCaptchaKey={captcha_props.public_key}
+      language={intl.locale ?? 'en'}
+    >
+      <ReCaptchaComponent {...props} />
+    </GoogleReCaptchaProvider>
   );
 };