Merge pull request #105 from t49tran/refactor-log-warning-message-only-in-development

Refactor log warning message only in development

Author: t49tran

package-lock.json

@@ -7,7 +7,11 @@ import {
   createContext,
   ReactNode
 } from 'react';
-import { cleanGoogleRecaptcha, injectGoogleReCaptchaScript } from './utils';
+import {
+  cleanGoogleRecaptcha,
+  injectGoogleReCaptchaScript,
+  logWarningMessage
+} from './utils';
 
 enum GoogleRecaptchaError {
   SCRIPT_NOT_AVAILABLE = 'Recaptcha script is not available'
@@ -57,7 +61,9 @@ export function GoogleReCaptchaProvider({
 
   useEffect(() => {
     if (!reCaptchaKey) {
-      console.warn('<GoogleReCaptchaProvider /> recaptcha key not provided');
+      logWarningMessage(
+        '<GoogleReCaptchaProvider /> recaptcha key not provided'
+      );
 
       return;
     }
@@ -66,7 +72,7 @@ export function GoogleReCaptchaProvider({
 
     const onLoad = () => {
       if (!window || !(window as any).grecaptcha) {
-        console.warn(
+        logWarningMessage(
           `<GoogleRecaptchaProvider /> ${GoogleRecaptchaError.SCRIPT_NOT_AVAILABLE}`
         );
 
@@ -82,13 +88,18 @@ export function GoogleReCaptchaProvider({
       });
     };
 
+    const onError = () => {
+      logWarningMessage('Error loading google recaptcha script');
+    };
+
     injectGoogleReCaptchaScript({
       reCaptchaKey,
       useEnterprise,
       useRecaptchaNet,
       scriptProps,
       language,
-      onLoad
+      onLoad,
+      onError
     });
 
     return () => {

src/google-recaptcha-provider.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useGoogleReCaptcha } from './use-google-recaptcha';
+import { logWarningMessage } from './utils';
 
 export interface IGoogleRecaptchaProps {
   onVerify: (token: string) => void | Promise<void>;
@@ -11,16 +12,16 @@ export function GoogleReCaptcha({ action, onVerify }: IGoogleRecaptchaProps) {
 
   useEffect(() => {
     const { executeRecaptcha } = googleRecaptchaContextValue;
-    const handleExecuteRecaptcha = async () => {
-      if (!executeRecaptcha) {
-        console.warn('Execute recaptcha function not defined');
-        return;
-      }
 
+    if (!executeRecaptcha) {
+      return;
+    }
+
+    const handleExecuteRecaptcha = async () => {
       const token = await executeRecaptcha(action);
 
       if (!onVerify) {
-        console.warn('Please define an onVerify function');
+        logWarningMessage('Please define an onVerify function');
 
         return;
       }

src/google-recaptcha.tsx

@@ -3,6 +3,7 @@ interface InjectGoogleReCaptchaScriptParams {
   useRecaptchaNet: boolean;
   useEnterprise: boolean;
   onLoad: () => void;
+  onError: () => void;
   language?: string;
   scriptProps?: {
     nonce?: string;
@@ -135,3 +136,20 @@ export const injectGoogleReCaptchaScript = ({
 
   elementToInjectScript.appendChild(js);
 };
+
+/**
+ * Function to log warning message if it's not in production mode
+ *
+ * @param message String
+ * @returns
+ */
+export const logWarningMessage = (message: string) => {
+  const isDevelopmentMode =
+    !!process.env && process.env.NODE_ENV !== 'production';
+
+  if (isDevelopmentMode) {
+    return;
+  }
+
+  console.warn(message);
+};