Make English a default language on feedback page
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useRecoilValue, useSetRecoilState } from "recoil";
|
import { useRecoilValue, useSetRecoilState } from "recoil";
|
||||||
import Nav from "~/components/Nav";
|
import Nav from "~/components/Nav";
|
||||||
@@ -10,19 +10,29 @@ import Management from "~/routes/management";
|
|||||||
import NotFound from "~/routes/[...404]";
|
import NotFound from "~/routes/[...404]";
|
||||||
import Toasts from "~/components/Toasts";
|
import Toasts from "~/components/Toasts";
|
||||||
import { APP_ROLES, hasAnyRole } from "~/auth/roles";
|
import { APP_ROLES, hasAnyRole } from "~/auth/roles";
|
||||||
import { initializeLanguage, useLanguage } from "~/i18n";
|
import { LANGUAGE_STORAGE_KEY, normalizeLanguage, useLanguage } from "~/i18n";
|
||||||
import { sessionAtom } from "~/state/appState";
|
import { languageAtom, sessionAtom } from "~/state/appState";
|
||||||
import "./app.css";
|
import "./app.css";
|
||||||
|
|
||||||
function AppShell() {
|
function AppShell() {
|
||||||
|
const location = useLocation();
|
||||||
const { language, setLanguage } = useLanguage();
|
const { language, setLanguage } = useLanguage();
|
||||||
const session = useRecoilValue(sessionAtom);
|
const session = useRecoilValue(sessionAtom);
|
||||||
const setSession = useSetRecoilState(sessionAtom);
|
const setSession = useSetRecoilState(sessionAtom);
|
||||||
|
const setLanguageAtom = useSetRecoilState(languageAtom);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// Feedback page manages its own language default
|
||||||
|
if (location.pathname === "/feedback") return;
|
||||||
const storedPreferredLanguage = localStorage.getItem("session-preferred-language");
|
const storedPreferredLanguage = localStorage.getItem("session-preferred-language");
|
||||||
initializeLanguage(setLanguage, storedPreferredLanguage === "en" || storedPreferredLanguage === "sk" ? storedPreferredLanguage : "fi");
|
const fallback = normalizeLanguage(storedPreferredLanguage === "en" || storedPreferredLanguage === "sk" ? storedPreferredLanguage : "fi");
|
||||||
}, [setLanguage]);
|
const stored = localStorage.getItem(LANGUAGE_STORAGE_KEY);
|
||||||
|
if (stored !== null) {
|
||||||
|
setLanguage(normalizeLanguage(stored)); // explicit prior choice — keep it saved
|
||||||
|
} else {
|
||||||
|
setLanguageAtom(fallback); // just set the atom, don't persist the default
|
||||||
|
}
|
||||||
|
}, [location.pathname, setLanguage, setLanguageAtom]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const storedUsername = localStorage.getItem("session-username");
|
const storedUsername = localStorage.getItem("session-username");
|
||||||
|
|||||||
@@ -4,6 +4,8 @@ import { languageAtom, type Language } from "~/state/appState";
|
|||||||
|
|
||||||
const STORAGE_KEY = "ui-language";
|
const STORAGE_KEY = "ui-language";
|
||||||
|
|
||||||
|
export { STORAGE_KEY as LANGUAGE_STORAGE_KEY };
|
||||||
|
|
||||||
const translations = {
|
const translations = {
|
||||||
en: {
|
en: {
|
||||||
"nav.home": "Home",
|
"nav.home": "Home",
|
||||||
|
|||||||
@@ -1,13 +1,29 @@
|
|||||||
import { FormEvent, useEffect, useState } from "react";
|
import { FormEvent, useEffect, useState } from "react";
|
||||||
|
import { useSetRecoilState } from "recoil";
|
||||||
import { submitFeedback } from "~/api";
|
import { submitFeedback } from "~/api";
|
||||||
import { useT } from "~/i18n";
|
import { LANGUAGE_STORAGE_KEY, useT } from "~/i18n";
|
||||||
|
import { languageAtom } from "~/state/appState";
|
||||||
|
|
||||||
export default function Feedback() {
|
export default function Feedback() {
|
||||||
const t = useT();
|
const t = useT();
|
||||||
|
const setLanguageAtom = useSetRecoilState(languageAtom);
|
||||||
const [message, setMessage] = useState("");
|
const [message, setMessage] = useState("");
|
||||||
const [status, setStatus] = useState<"idle" | "sending" | "success" | "error">("idle");
|
const [status, setStatus] = useState<"idle" | "sending" | "success" | "error">("idle");
|
||||||
const [validationError, setValidationError] = useState("");
|
const [validationError, setValidationError] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Default to English on the feedback page only when no language has been explicitly chosen
|
||||||
|
if (localStorage.getItem(LANGUAGE_STORAGE_KEY) === null) {
|
||||||
|
setLanguageAtom("en");
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
// Restore Finnish default when leaving, if the user still hasn't made an explicit choice
|
||||||
|
if (localStorage.getItem(LANGUAGE_STORAGE_KEY) === null) {
|
||||||
|
setLanguageAtom("fi");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [setLanguageAtom]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.title = t("feedback.title");
|
document.title = t("feedback.title");
|
||||||
}, [t]);
|
}, [t]);
|
||||||
|
|||||||
Reference in New Issue
Block a user