Make English a default language on feedback page

This commit is contained in:
2026-05-28 21:50:04 +03:00
parent ea4747ec16
commit e97d698387
3 changed files with 34 additions and 6 deletions

View File

@@ -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");

View File

@@ -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",

View File

@@ -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]);