Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Multilingual Translator #193

Merged
merged 12 commits into from
Oct 12, 2024
Merged
15 changes: 11 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,22 +235,29 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
<sub><b>Sawan kushwah </b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/devxMani">
<img src="https://avatars.githubusercontent.com/u/122438942?v=4" width="100;" alt="devxMani"/>
<br />
<sub><b>MANI </b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Ayush215mb">
<img src="https://avatars.githubusercontent.com/u/154300084?v=4" width="100;" alt="Ayush215mb"/>
<br />
<sub><b>Ayush Yadav</b></sub>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/AliGates915">
<img src="https://avatars.githubusercontent.com/u/128673394?v=4" width="100;" alt="AliGates915"/>
<br />
<sub><b>Ali Gates</b></sub>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/mishradev1">
<img src="https://avatars.githubusercontent.com/u/118660840?v=4" width="100;" alt="mishradev1"/>
Expand Down Expand Up @@ -286,15 +293,15 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
<sub><b>Bashua Mutiat</b></sub>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/NilanchalaPanda">
<img src="https://avatars.githubusercontent.com/u/110488337?v=4" width="100;" alt="NilanchalaPanda"/>
<br />
<sub><b>Nilanchal</b></sub>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/Sapna127">
<img src="https://avatars.githubusercontent.com/u/91309280?v=4" width="100;" alt="Sapna127"/>
Expand Down
Binary file added frontend/src/assets/img/google.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 87 additions & 0 deletions frontend/src/components/Shared/GoogleTranslate.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import React, { useEffect } from "react";

const GoogleTranslate = () => {
useEffect(() => {
let retryCount = 0;
const maxRetries = 50; // Adjust as needed

window.googleTranslateInit = () => {
if (!window.google?.translate?.TranslateElement) {
if (retryCount < maxRetries) {
retryCount++;
} else {
console.error('Failed to initialize Google Translate after maximum retries.');
}
setTimeout(window.googleTranslateInit, 100);
} else {
new window.google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,nl,fr,de,it,ta,te',
layout: window.google.translate.TranslateElement.InlineLayout.VERTICAL,
defaultLanguage: 'en',
autoDisplay: false,
}, 'google_element');
}
};

const loadGoogleTranslateScript = () => {
if (!document.getElementById("google_translate_script")) {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateInit";
script.id = "google_translate_script";
script.onerror = () => console.error('Error loading Google Translate script');
document.body.appendChild(script);
}
};

loadGoogleTranslateScript();

if (window.google?.translate) {
window.googleTranslateInit();
}

return () => {
// Cleanup logic if necessary
};
}, []);
Comment on lines +44 to +47
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add cleanup logic in the useEffect cleanup function

The useEffect hook returns a cleanup function, but it currently contains only a placeholder comment. To prevent potential memory leaks and side effects, consider adding necessary cleanup logic when the component unmounts.

For example, you might want to remove the script or clean up global functions:

 return () => {
     // Cleanup logic if necessary
+    // Remove the Google Translate script
+    const script = document.getElementById("google_translate_script");
+    if (script) {
+        document.body.removeChild(script);
+    }
+
+    // Remove the global function
+    delete window.googleTranslateInit;
 };

Committable suggestion was skipped due to low confidence.


return (
<div id="google_element" className="pl-20 md:pl-0">
<style jsx>{`
.goog-te-combo {
@apply w-full bg-white border border-gray-300 rounded px-2 py-1 text-sm;
}
.goog-te-gadget {
@apply flex flex-col items-start text-xs text-gray-500;
}
.goog-te-gadget > div {
@apply w-full mb-1;
}
.goog-te-gadget > span {
@apply flex flex-col items-start;
}
.goog-te-gadget .goog-logo-link {
@apply flex items-center;
}
.goog-te-gadget .goog-logo-link img {
@apply ml-1;
}
.goog-te-gadget > span > a:last-child {
@apply mt-[-2px];
}
.goog-te-banner-frame {
@apply hidden !important;
}
.goog-te-menu-frame {
@apply max-h-96 overflow-y-auto bg-white border border-gray-300 rounded;
}
.skiptranslate > iframe {
@apply h-0 border-none shadow-none;
}
`}</style>
</div>
);
};

export default GoogleTranslate;
11 changes: 11 additions & 0 deletions frontend/src/components/Shared/footer/Content.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useEffect, useState } from 'react';
import Logo from '../../../assets/Logo/playcafe.png';
import googleImage from "../../../assets/img/google.png"
import { FaFacebook, FaInstagram, FaTiktok, FaGithub } from 'react-icons/fa';
import GoogleTranslate from "../GoogleTranslate";

export default function Content() {
return (
Expand Down Expand Up @@ -147,6 +149,15 @@ const Nav = () => {
<a href="tel:+17189711684" className="mb-2 hover:underline">
718-971-1684
</a>

{/* <div className="flex items-center justify-center mt-4">
<img
src={googleImage}
alt="Google Translate"
className="w-[2rem] h-[2rem] mr-[65px]"
/>
</div> */}
<GoogleTranslate/>
</div>
</div>
);
Expand Down
Loading