Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 6x 6x 6x 6x 6x 4x 4x 4x 1x 2x 54x | 'use client';
import { setCookie } from 'nookies';
import { useStore } from 'zustand';
import { persist, devtools } from 'zustand/middleware';
import { createStore } from 'zustand/vanilla';
import { useThemeStore } from '../stores/changeModeStore';
import { useSnackStore } from '../stores/snackbarStore';
import { type ChangeLanguage, type ChangeLanguageState } from '../types/index';
const COOKIE_PATH = '/';
const MAX_AGE = 30 * 24 * 60 * 60;
/**
* @module ChangeLanguageStore
* @author Munir Mardinli
*
* Zustand store for managing the application's language selection and related state.
*
* @property {string} languageSelected - Currently selected language code (default: 'de')
* @property {boolean} languageChangedManually - Indicates if the language was changed by the user
* @property {Function} setLanguage - Sets the application language and handles related operations
* @property {Function} setChangelanguage - Sets the language change callback
*
* @example
* // Access the store in a React component
```ts
import { useChangeLanguageStore } from './changeLanguageStore';
const language = useChangeLanguageStore(state => state.languageSelected);
```
*
* @example
* // Change the language
* const setLanguage = useChangeLanguageStore(state => state.setLanguage);
* setLanguage('en', true);
*/
export const changeLanguageStore = createStore<ChangeLanguageState>()(
devtools(
persist(
(set, get) => ({
languageSelected: 'de',
languageChangedManually: false,
changelanguage: null,
/**
* Sets the application language and handles related side effects
*
* @param {string} lang - Language code to set ('en', 'fr', 'de', 'ar', etc.)
* @param {boolean} [manually=false] - Whether change was user-initiated
*
* @example
* setLanguage('en', true); // Manual change to English
*/
setLanguage: (lang, manually = false) => {
setCookie(null, 'languageSelected', lang, {
maxAge: MAX_AGE,
path: COOKIE_PATH,
});
set(
{
languageSelected: lang,
languageChangedManually: manually,
},
false,
'language/setLanguage',
);
const setThemeLanguage = useThemeStore.getState().setLanguage;
setThemeLanguage(lang);
if (manually) {
const setSnack = useSnackStore.getState().setSnack;
const messages: Record<string, string> = {
en: 'Language changed to English!',
fr: 'Langue changée en français!',
de: 'Die Sprache wurde zu Deutsch geändert!',
ar: 'تم تغيير اللغة إلى العربية!',
};
setSnack(messages[lang] || 'Language changed!', 'success');
}
},
/**
* Sets the callback function for language changes
*
* @param {ChangeLanguage} data - The callback function
*/
setChangelanguage: (data: ChangeLanguage) => {
set({ changelanguage: data }, false, 'language/setChangelanguage');
},
}),
{
name: 'changeLanguage-store',
},
),
{ name: 'Devtools: LanguageStore' },
),
);
/**
* Hook to access the ChangeLanguageStore in React components
*
* @param {(state: ChangeLanguageState) => T} selector - Selector function
* @returns {T} Selected state slice
*/
export const useChangeLanguageStore = <T>(
selector: (state: ChangeLanguageState) => T,
): T => useStore(changeLanguageStore, selector);
|