Merge pull request #3668 from cassiano/placing-donate-button-text-update-logic-in-use-effect-hook

Placing donate button text update in `useEffect` hook

Author: raclim

client/index.jsx

@@ -1,6 +1,6 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
+import { Provider, useSelector } from 'react-redux';
 import { Router } from 'react-router-dom';
 
 import { useTranslation } from 'react-i18next';
@@ -21,6 +21,8 @@ const initialState = window.__INITIAL_STATE__;
 
 const store = configureStore(initialState);
 
+const DONATE_LOGO_IMAGE_URL = 'https://donorbox.org/images/white_logo.svg';
+
 if (
   window.location.href.indexOf('full') === -1 &&
   window.location.href.indexOf('embed') === -1
@@ -56,30 +58,30 @@ if (
     'background: #f1678e; color: #fff; text-decoration: none; font-family: Verdana, sans-serif; display: flex; gap: 8px; width: fit-content; font-size: 16px; border-radius: 0 0 5px 5px; line-height: 24px; position: fixed; top: 50%; transform-origin: center; z-index: 9999; overflow: hidden; padding: 8px 22px 8px 18px; right: 20px; left: auto; transform: translate(50%, -50%) rotate(90deg)'
   );
   buttonScript.setAttribute('data-button-cta', 'Donate');
-  buttonScript.setAttribute(
-    'data-img-src',
-    'https://donorbox.org/images/white_logo.svg'
-  );
+  buttonScript.setAttribute('data-img-src', DONATE_LOGO_IMAGE_URL);
 
   document.body.appendChild(buttonScript);
 }
 
 const App = () => {
   const { t } = useTranslation();
-
-  setTimeout(() => {
-    const donateButton = document.getElementsByClassName(
-      'dbox-donation-button'
-    )[0];
-
-    if (donateButton) {
-      const donateLogoImage = document.createElement('img');
-      donateLogoImage.src = 'https://donorbox.org/images/white_logo.svg';
-
-      donateButton.text = t('About.Donate');
-      donateButton.prepend(donateLogoImage);
-    }
-  }, 0);
+  const language = useSelector((state) => state.preferences.language);
+
+  useEffect(() => {
+    setTimeout(() => {
+      const donateButton = document.getElementsByClassName(
+        'dbox-donation-button'
+      )[0];
+
+      if (donateButton) {
+        const donateLogoImage = document.createElement('img');
+        donateLogoImage.src = DONATE_LOGO_IMAGE_URL;
+
+        donateButton.text = t('About.Donate');
+        donateButton.prepend(donateLogoImage);
+      }
+    }, 500);
+  }, [language]);
 
   return (
     <div>