Initial commit - WhyRating Engine (Google Reviews Scraper)

web/hooks/useTranslation.ts

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+
+interface TranslationState {
+  translated: string;
+  isLoading: boolean;
+  error: string | null;
+  isTranslated: boolean;
+}
+
+interface TranslationsMap {
+  [key: string]: TranslationState;
+}
+
+/**
+ * Hook for translating text on demand using MyMemory free API
+ * - 1000 translations/day free (anonymous)
+ * - 10000/day with free email registration
+ * - No API key required for basic usage
+ */
+export function useTranslation(targetLang: string = 'en') {
+  const [translations, setTranslations] = useState<TranslationsMap>({});
+  const translationsRef = useRef<TranslationsMap>({});
+
+  // Keep ref in sync with state
+  translationsRef.current = translations;
+
+  const translate = useCallback(async (text: string, id: string, sourceLang: string = 'auto') => {
+    const current = translationsRef.current[id];
+
+    // If already translated, toggle back to original
+    if (current?.isTranslated) {
+      setTranslations(prev => ({
+        ...prev,
+        [id]: { ...prev[id], isTranslated: false }
+      }));
+      return;
+    }
+
+    // If we have a cached translation, just show it
+    if (current?.translated) {
+      setTranslations(prev => ({
+        ...prev,
+        [id]: { ...prev[id], isTranslated: true }
+      }));
+      return;
+    }
+
+    // Start loading
+    setTranslations(prev => ({
+      ...prev,
+      [id]: { translated: '', isLoading: true, error: null, isTranslated: false }
+    }));
+
+    try {
+      // Use MyMemory free translation API
+      // Docs: https://mymemory.translated.net/doc/spec.php
+      // Note: 500 character limit per query
+      const truncatedText = text.length > 500 ? text.substring(0, 497) + '...' : text;
+      const langPair = sourceLang === 'auto' ? `autodetect|${targetLang}` : `${sourceLang}|${targetLang}`;
+      const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(truncatedText)}&langpair=${langPair}`;
+
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error('Translation failed');
+      }
+
+      const data = await response.json();
+
+      // Handle "same language" error - text is already in target language
+      if (data.responseStatus !== 200) {
+        const errorMsg = data.responseDetails || '';
+        if (errorMsg.includes('DISTINCT LANGUAGES') || errorMsg.includes('same language')) {
+          // Text is already in target language, just show original
+          setTranslations(prev => ({
+            ...prev,
+            [id]: { translated: text, isLoading: false, error: null, isTranslated: true }
+          }));
+          return;
+        }
+        throw new Error(errorMsg || 'Translation failed');
+      }
+
+      const translatedText = data.responseData.translatedText;
+
+      setTranslations(prev => ({
+        ...prev,
+        [id]: { translated: translatedText, isLoading: false, error: null, isTranslated: true }
+      }));
+    } catch (error) {
+      console.error('[Translation] Error:', error);
+      setTranslations(prev => ({
+        ...prev,
+        [id]: {
+          translated: '',
+          isLoading: false,
+          error: error instanceof Error ? error.message : 'Translation failed',
+          isTranslated: false
+        }
+      }));
+    }
+  }, [targetLang]);
+
+  const getState = useCallback((id: string): TranslationState => {
+    return translations[id] || { translated: '', isLoading: false, error: null, isTranslated: false };
+  }, [translations]);
+
+  return { translate, getState };
+}