From 7702809958d847dc17ae4d8a391d0e12927039ab Mon Sep 17 00:00:00 2001 From: BunyodL Date: Sat, 26 Apr 2025 18:42:35 +0500 Subject: [PATCH] fix: fix page duplication --- src/shared/language/index.tsx | 93 +++++++++++++++++++---------------- 1 file changed, 51 insertions(+), 42 deletions(-) diff --git a/src/shared/language/index.tsx b/src/shared/language/index.tsx index d9d6dc3..b2daf9c 100644 --- a/src/shared/language/index.tsx +++ b/src/shared/language/index.tsx @@ -1,87 +1,96 @@ -"use client" +'use client'; -import { createContext, useContext, useState, useEffect, type ReactNode } from "react" -import enTranslations from "./locales/en.json" -import ruTranslations from "./locales/ru.json" +import { Loader } from 'lucide-react'; +import { + createContext, + type ReactNode, + useContext, + useEffect, + useState, +} from 'react'; + +import enTranslations from './locales/en.json'; +import ruTranslations from './locales/ru.json'; // Define available languages export const languages = { - en: { name: "English", flag: "🇬🇧" }, - ru: { name: "Русский", flag: "🇷🇺" }, -} + en: { name: 'English', flag: '🇬🇧' }, + ru: { name: 'Русский', flag: '🇷🇺' }, +}; -export type Language = keyof typeof languages +export type Language = keyof typeof languages; // Define translations type with flat structure -export type Translations = Record +export type Translations = Record; // Load translations const translations: Record = { en: enTranslations, ru: ruTranslations, -} +}; // Create context type LanguageContextType = { - language: Language - setLanguage: (lang: Language) => void - t: (key: string) => string -} + language: Language; + setLanguage: (lang: Language) => void; + t: (key: string) => string; +}; -const LanguageContext = createContext(undefined) +const LanguageContext = createContext( + undefined, +); // Create provider export function LanguageProvider({ children }: { children: ReactNode }) { // Default to Russian, but check localStorage on client - const [language, setLanguageState] = useState("ru") - const [isLoaded, setIsLoaded] = useState(false) + const [language, setLanguageState] = useState('ru'); + const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { // Check if we're in the browser - if (typeof window !== "undefined") { - const savedLanguage = localStorage.getItem("language") as Language + if (typeof window !== 'undefined') { + const savedLanguage = localStorage.getItem('language') as Language; if (savedLanguage && languages[savedLanguage]) { - setLanguageState(savedLanguage) + setLanguageState(savedLanguage); } - setIsLoaded(true) + setIsLoaded(true); } - }, []) + }, []); const setLanguage = (lang: Language) => { - setLanguageState(lang) - if (typeof window !== "undefined") { - localStorage.setItem("language", lang) + setLanguageState(lang); + if (typeof window !== 'undefined') { + localStorage.setItem('language', lang); } - } + }; // Translation function for flat structure const t = (key: string): string => { if (translations[language][key]) { - return translations[language][key] + return translations[language][key]; } - console.warn(`Translation key not found: ${key}`) - return key - } + console.warn(`Translation key not found: ${key}`); + return key; + }; - // Only render children when language is loaded from localStorage - if (!isLoaded && typeof window !== "undefined") { - return null // Or a loading spinner - } - - return {children} + return ( + + {children} + + ); } // Create hook export function useLanguage() { - const context = useContext(LanguageContext) + const context = useContext(LanguageContext); if (context === undefined) { - throw new Error("useLanguage must be used within a LanguageProvider") + throw new Error('useLanguage must be used within a LanguageProvider'); } if (typeof context.t !== 'function') { - throw new Error("Translation function (t) is not available"); + throw new Error('Translation function (t) is not available'); } - - return context -} \ No newline at end of file + + return context; +}