From c5157186e06feef674f2f7caee337c2cea5d8fdf Mon Sep 17 00:00:00 2001 From: Elazar Naaman Date: Tue, 14 May 2024 10:30:24 +0300 Subject: [PATCH] fix(frontend): Implement persistent dark mode setting and & Implement persistent dark mode setting (#2423) # Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented hard-to-understand areas - [x] I have ideally added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged ## Screenshots (if appropriate): ---- | Ellipsis | :rocket: This PR description was created by [Ellipsis](https://www.ellipsis.dev) for commit bb45566f8a638e56d7ecd0ee39b4f40437a1a41a. | |--------|--------| ### Summary: This PR updates the `useLanguageHook` and `UserSettingsProvider` functions to use the `shortName` of the selected language when changing the language and to retrieve and store the dark mode setting from and to local storage, respectively. **Key points**: - Updated `useLanguageHook` in `/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts` to use `shortName` of selected language when changing language. - Updated `UserSettingsProvider` in `/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx` to retrieve dark mode setting from local storage. - Updated listener for `change` event on `mediaQueryList` in `UserSettingsProvider` to store updated dark mode setting in local storage. ---- Generated with :heart: by [ellipsis.dev](https://www.ellipsis.dev) --------- Co-authored-by: Zewed --- .../LanguageSelect/hooks/useLanguageHook.ts | 18 +++++-- .../User-settings.provider.tsx | 54 ++++++++----------- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts b/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts index 2f8fa8d38..05509c472 100644 --- a/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts +++ b/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts @@ -55,11 +55,21 @@ export const useLanguageHook = (): { useEffect(() => { setAllLanguages(languages); const savedLanguage = localStorage.getItem("selectedLanguage") ?? "English"; - - setCurrentLanguage( - languages.find((language) => language.label === savedLanguage) + let choosedLanguage = languages.find( + (lang) => lang.label === savedLanguage ); - void i18n.changeLanguage(savedLanguage); + if (!choosedLanguage) { + choosedLanguage = languages.find((lang) => lang.label === "English"); + } + if (currentLanguage) { + setCurrentLanguage(choosedLanguage); + localStorage.setItem("selectedLanguage", currentLanguage.label); + void i18n.changeLanguage(currentLanguage.shortName); + } else { + console.error( + "No valid language found, please check the languages configuration." + ); + } }, [i18n]); const change = (newLanguage: Language) => { diff --git a/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx b/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx index eaaa43b4f..1cb5756a9 100644 --- a/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx +++ b/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx @@ -23,10 +23,14 @@ export const UserSettingsProvider = ({ const [remainingCredits, setRemainingCredits] = useState(null); const [isDarkMode, setIsDarkMode] = useState(() => { if (typeof window !== "undefined") { - return true; + const localIsDarkMode = localStorage.getItem("isDarkMode"); + + return localIsDarkMode !== null + ? parseBoolean(localIsDarkMode) + : window.matchMedia("(prefers-color-scheme: dark)").matches; } - return true; + return false; }); useEffect(() => { @@ -37,40 +41,26 @@ export const UserSettingsProvider = ({ }, []); useEffect(() => { - if (typeof window !== "undefined") { - const prefersDarkMode = window.matchMedia( - "(prefers-color-scheme: dark)" - ).matches; - const localIsDarkMode = localStorage.getItem("isDarkMode"); - const newState = - localIsDarkMode !== null - ? parseBoolean(localIsDarkMode) - : prefersDarkMode; - setIsDarkMode(newState); - newState - ? document.body.classList.add("dark_mode") - : document.body.classList.remove("dark_mode"); + const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); + const listener = (event: MediaQueryListEvent) => { + const updatedState = event.matches; + setIsDarkMode(updatedState); + localStorage.setItem("isDarkMode", JSON.stringify(updatedState)); + }; + mediaQueryList.addEventListener("change", listener); - const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); - const listener = (event: MediaQueryListEvent) => { - const updatedState = event.matches; - setIsDarkMode(updatedState); - localStorage.setItem("isDarkMode", JSON.stringify(updatedState)); - }; - mediaQueryList.addEventListener("change", listener); - - return () => { - mediaQueryList.removeEventListener("change", listener); - }; - } + return () => { + mediaQueryList.removeEventListener("change", listener); + }; }, []); useEffect(() => { - isDarkMode - ? document.body.classList.add("dark_mode") - : document.body.classList.remove("dark_mode"); - - localStorage.setItem("isDarkMode", JSON.stringify(isDarkMode)); + if (typeof window !== "undefined") { + isDarkMode + ? document.body.classList.add("dark_mode") + : document.body.classList.remove("dark_mode"); + localStorage.setItem("isDarkMode", JSON.stringify(isDarkMode)); + } }, [isDarkMode]); return (