mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-08-17 02:10:31 +03:00
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_HIDDEN
-->
----
| <a href="https://ellipsis.dev" target="_blank"><img
src="https://avatars.githubusercontent.com/u/80834858?s=400&u=31e596315b0d8f7465b3ee670f25cea677299c96&v=4"
alt="Ellipsis" width="30px" height="30px"/></a> | 🚀 This PR
description was created by [Ellipsis](https://www.ellipsis.dev) for
commit bb45566f8a
. |
|--------|--------|
### 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 ❤️ by [ellipsis.dev](https://www.ellipsis.dev)
<!--
ELLIPSIS_HIDDEN
-->
---------
Co-authored-by: Zewed <dewez.antoine2@gmail.com>
This commit is contained in:
parent
257a3127f9
commit
c5157186e0
@ -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) => {
|
||||
|
@ -23,10 +23,14 @@ export const UserSettingsProvider = ({
|
||||
const [remainingCredits, setRemainingCredits] = useState<number | null>(null);
|
||||
const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
|
||||
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 (
|
||||
|
Loading…
Reference in New Issue
Block a user