Remember language selection

i18n.js

@@ -7,7 +7,9 @@ i18n.use(HttpApi) // Load translations via HTTP (use with i18next-http-backend)
     .use(LanguageDetector) // Detect user language
     .use(initReactI18next) // Pass the i18n instance to react-i18next.
     .init({
-        lng: "en",
+        lng: localStorage.getItem("ispeaker")
+            ? JSON.parse(localStorage.getItem("ispeaker")).language
+            : "en",
         fallbackLng: {
             "en-US": ["en"],
             "en-GB": ["en"],

package.json

@@ -3,7 +3,7 @@
     "author": "yell0wsuit",
     "description": "An English-learning interactive tool written in React, designed to help learners practice speaking and listening",
     "private": true,
-    "version": "3.0.6",
+    "version": "3.0.7",
     "type": "module",
     "main": "main.cjs",
     "license": "Apache-2.0",

src/components/general/AccentDropdown.jsx

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import AccentLocalStorage from "../../utils/AccentLocalStorage";
+import { sonnerSuccessToast } from "../../utils/sonnerCustomToast";
 
 // Emoji SVGs import
 import UKFlagEmoji from "../../emojiSvg/emoji_u1f1ec_1f1e7.svg";
@@ -24,6 +25,7 @@ const AccentDropdown = ({ onAccentChange }) => {
     const handleAccentChange = (value) => {
         setSelectedAccent(value);
         onAccentChange(value);
+        sonnerSuccessToast(t("settingPage.changeSaved"));
     };
 
     return (

src/components/setting_page/LanguageSwitcher.jsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { LuExternalLink } from "react-icons/lu";
 import { isElectron } from "../../utils/isElectron";
+import { sonnerSuccessToast } from "../../utils/sonnerCustomToast";
 
 // Utility function to open external links
 const openExternal = (url) => {
@@ -31,6 +32,12 @@ const LanguageSwitcher = () => {
     const handleLanguageChange = (lng) => {
         i18n.changeLanguage(lng);
         document.documentElement.setAttribute("lang", lng); // Update HTML lang attribute
+
+        const ispeakerSettings = JSON.parse(localStorage.getItem("ispeaker")) || {};
+        ispeakerSettings.language = lng;
+        localStorage.setItem("ispeaker", JSON.stringify(ispeakerSettings));
+
+        sonnerSuccessToast(t("settingPage.changeSaved"));
     };
 
     const currentLanguage =

src/components/setting_page/ResetSettings.jsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { isElectron } from "../../utils/isElectron";
 import { sonnerSuccessToast } from "../../utils/sonnerCustomToast";
 
-const ResetSettings = ({ onReset }) => {
+const ResetSettings = () => {
     const { t } = useTranslation();
 
     const [isResettingLocalStorage, setIsResettingLocalStorage] = useState(false);
@@ -44,7 +44,7 @@ const ResetSettings = ({ onReset }) => {
                 localStorage.clear();
                 setIsResettingLocalStorage(false);
                 localStorageModal.current?.close();
-                onReset();
+                window.location.reload();
                 sonnerSuccessToast(t("settingPage.changeSaved"));
             };
             deleteRequest.onerror = () => setIsResettingLocalStorage(false);

src/components/setting_page/Settings.jsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Container from "../../ui/Container";
 import { isElectron } from "../../utils/isElectron";
-import { useTheme } from "../../utils/ThemeContext/useTheme";
 import TopNavBar from "../general/TopNavBar";
 import AppearanceSettings from "./Appearance";
 import AppInfo from "./AppInfo";
@@ -15,21 +14,13 @@ import VideoDownloadSubPage from "./VideoDownloadSubPage";
 
 const SettingsPage = () => {
     const { t } = useTranslation();
-    const { resetTheme } = useTheme();
 
     useEffect(() => {
         document.title = `${t("navigation.settings")} | iSpeakerReact v${__APP_VERSION__}`;
     }, [t]);
 
-    const [resetFlag, setResetFlag] = useState(false); // Boolean flag to force remount
     const [currentPage, setCurrentPage] = useState("settings");
 
-    const handleReset = () => {
-        // Change the key to remount the CachingSettings component
-        setResetFlag((prevFlag) => !prevFlag);
-        resetTheme();
-    };
-
     const handleVideoDownloadMenuPage = () => {
         setCurrentPage("video-download");
     };
@@ -43,7 +34,7 @@ const SettingsPage = () => {
             <TopNavBar />
             <Container>
                 <div className="my-8 flex justify-center">
-                    <div className="w-full md:w-2/3 lg:w-1/2" key={resetFlag}>
+                    <div className="w-full md:w-2/3 lg:w-1/2">
                         {currentPage === "settings" && (
                             <>
                                 <h1 className="text-3xl font-semibold md:text-4xl">
@@ -77,7 +68,7 @@ const SettingsPage = () => {
                                         </>
                                     )}
                                     <div className="divider"></div>
-                                    <ResetSettings onReset={handleReset} />
+                                    <ResetSettings />
                                 </div>
                             </>
                         )}

src/utils/ThemeContext/ThemeProvider.jsx

@@ -51,19 +51,12 @@ export function ThemeProvider({
         };
     }, [theme]);
 
-    // Method to reset the theme
-    const resetTheme = () => {
-        localStorage.removeItem(storageKey); // Remove the theme from localStorage
-        setTheme(defaultTheme); // Reset to the default theme
-    };
-
     const value = {
         theme,
         setTheme: (newTheme) => {
             localStorage.setItem(storageKey, newTheme);
             setTheme(newTheme);
         },
-        resetTheme, // Add resetTheme to the context value
     };
 
     return <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;