add debug output for lang codes

SecurityQQ · Jun 23, 2024 · 41eeb8b · 41eeb8b
1 parent 2f555ca
commit 41eeb8b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 19 deletions.
diff --git a/src/components/ChallengeModal.tsx b/src/components/ChallengeModal.tsx
@@ -1,11 +1,8 @@
-// components/ChallengeModal.tsx
-// components/ChallengeModal.tsx
+import { useTranslations } from 'next-intl';
 import React, { useState } from 'react';
 
 import Button from '@/components/ui/Button';
 import Coin from '@/components/ui/Coin';
-import RewardText from '@/components/ui/RewardText';
-import { useModal } from '@/contexts/ModalContext';
 
 interface ChallengeModalProps {
   title: string;
@@ -32,6 +29,7 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
 }) => {
   const [rewardChecked, setRewardChecked] = useState(isCompleted);
   const [rewardStatus, setRewardStatus] = useState(isCompleted ? 'success' : '');
+  const t = useTranslations('challenge_modal');
 
   const handleCheckReward = async () => {
     if (rewardStatus === 'success') {
@@ -76,23 +74,23 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
         {!rewardChecked ? (
           <>
             <Button type="blue" subtype="secondary" onClick={handleCheckReward}>
-              Проверить награду
+              {t('check_reward')}
             </Button>
             <Button type="blue" subtype="primary" onClick={() => window.open(refLink, '_blank')}>
-              Подписаться
+              {t('subscribe')}
             </Button>
           </>
         ) : rewardStatus === 'success' ? (
           <>
             <Button type="blue" subtype="secondary">
-              &#10003; Награда получена
+              {t('reward_received')}
             </Button>
             <Button type="blue" subtype="primary" onClick={() => window.open(refLink, '_blank')}>
-              Перейти в канал
+              {t('go_to_channel')}
             </Button>
           </>
         ) : (
-          <div className="text-2xl text-red-500">Не удалось получить награду</div>
+          <div className="text-2xl text-red-500">{t('reward_failed')}</div>
         )}
       </div>
     </div>

diff --git a/src/components/SubscribeChannelsCard.tsx b/src/components/SubscribeChannelsCard.tsx
@@ -12,7 +12,7 @@ const SubscribeChannelsCard: React.FC = () => {
   const { user } = useUser();
   const { openModal } = useModal();
   const [challenges, setChallenges] = useState<ChallengeWithStatus[]>([]);
-  const t = useTranslations('');
+  const t = useTranslations();
 
   useEffect(() => {
     const fetchChallenges = async () => {
@@ -60,7 +60,7 @@ const SubscribeChannelsCard: React.FC = () => {
 
   const menuItems = challenges.map((challenge) => ({
     image: challenge.image,
-    title: challenge.description,
+    title: t(challenge.description),
     reward: challenge.isCompleted ? t('subscribe_channels_card.completed') : `+${challenge.reward}`,
     onClick: () => handleOpenModal(challenge),
   }));

diff --git a/src/locales/en/common.json b/src/locales/en/common.json
@@ -166,6 +166,14 @@
       "name": "Subscribe to Burning Anna",
       "description": "Co-founder of the Female TON project, product manager, talks about AI and web3"
     }
+  },
+
+   "challenge_modal": {
+    "check_reward": "Check Reward",
+    "subscribe": "Subscribe",
+    "reward_received": "✓ Reward Received",
+    "go_to_channel": "Go to Channel",
+    "reward_failed": "Failed to get reward"
   }
 
 

diff --git a/src/locales/ru/common.json b/src/locales/ru/common.json
@@ -164,6 +164,14 @@
       "name": "Подпишись на Burning Anna",
       "description": "Сооснователь проекта Female TON, продакт-менеджер, рассказывает про AI и web3"
     }
+  },
+
+   "challenge_modal": {
+    "check_reward": "Проверить награду",
+    "subscribe": "Подписаться",
+    "reward_received": "✓ Награда получена",
+    "go_to_channel": "Перейти в канал",
+    "reward_failed": "Не удалось получить награду"
   }
 
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -27,17 +27,18 @@ const ROBOTO_MONO_TTF = Roboto_Mono({
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [isHashValid, setIsHashValid] = useState(false);
-  const [locale, setLocale] = useState('ru');
+  const [locale, setLocale] = useState('en'); // Default to 'en' if not set
   const [messages, setMessages] = useState({});
   const [loading, setLoading] = useState(true);
+  const [languageCode, setLanguageCode] = useState('');
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
       setupMockTelegramEnv();
     }
 
     if (process.env.NODE_ENV === 'production') {
-      // telegram hook for production
+      // Telegram hook for production
       axios
         .post('/api/validate-hash', { hash: window.Telegram.WebApp.initData })
         .then((response) => setIsHashValid(response.status === 200))
@@ -48,14 +49,24 @@ function MyApp({ Component, pageProps }: AppProps) {
     }
 
     // Extract language_code from Telegram WebApp and set locale
-    const languageCode = window.Telegram.WebApp.initDataUnsafe.user?.language_code || 'en';
-    setLocale(languageCode);
+    const initData = window.Telegram.WebApp.initData || {};
+    const user = initData.user || {};
+    const lC = user.language_code;
+    console.log('USER DATA: ', window.Telegram.WebApp.initDataRaw); // Log for mock data
+
+    setLanguageCode(lC);
+    setLocale(lC || 'en');
 
     // Fetch the appropriate messages based on the determined languageCode
-    import(`../locales/${languageCode}/common.json`).then((msgs) => {
-      setMessages(msgs.default);
-      setLoading(false);
-    });
+    import(`../locales/${lC || 'en'}/common.json`)
+      .then((msgs) => {
+        setMessages(msgs.default);
+        setLoading(false);
+      })
+      .catch(() => {
+        // Handle error in case locale file is not found
+        setLoading(false);
+      });
   }, []);
 
   if (!isHashValid) {
@@ -79,6 +90,8 @@ function MyApp({ Component, pageProps }: AppProps) {
             <UserProvider>
               <ModalProvider>
                 <Toaster />
+                <p>{`LC: ${languageCode}`}</p>
+                <p>{`Data: ${window.Telegram.WebApp.initData}`}</p>
                 <Component {...pageProps} />
               </ModalProvider>
             </UserProvider>