diff --git a/src/app/components/GuessForm.tsx b/src/app/components/GuessForm.tsx index f5515af..2577b2b 100644 --- a/src/app/components/GuessForm.tsx +++ b/src/app/components/GuessForm.tsx @@ -14,15 +14,12 @@ const GuessForm: React.FC = ({ input, onInputChange, onSubmit, d const { language } = useLanguage(); const t = translations[language]; const inputRef = useRef(null); - const prevInputRef = useRef(input); - // Focus input when it gets cleared after submission useEffect(() => { - if (prevInputRef.current && !input && !loading) { + if (!loading && !disabled) { inputRef.current?.focus(); } - prevInputRef.current = input; - }, [input, loading]); + }, [loading, disabled]); const handleSubmit = (e: React.FormEvent) => { onSubmit(e); diff --git a/src/app/components/HomeClient.tsx b/src/app/components/HomeClient.tsx index 8da4589..0cc564a 100644 --- a/src/app/components/HomeClient.tsx +++ b/src/app/components/HomeClient.tsx @@ -27,7 +27,7 @@ export default function HomeClient({ session }: { session: Session }) { const [loading, setLoading] = useState(false); const timerRef = useRef(null); const [howToPlayOpen, setHowToPlayOpen] = useState(false); - const [repeatMessage, setRepeatMessage] = useState(""); + const [errorMessage, setErrorMessage] = useState(""); const { language } = useLanguage(); const t = translations[language]; const [goalAmount, setGoalAmount] = useState(100); @@ -83,49 +83,50 @@ export default function HomeClient({ session }: { session: Session }) { setTimerStarted(false); setMatches([]); setInput(""); - setRepeatMessage(""); + setErrorMessage(""); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const trimmedInput = input.trim(); if (!trimmedInput) return; - if (matches.some((m) => m.input.toLowerCase() === trimmedInput.toLowerCase() && !m.name)) { - setRepeatMessage(t.alreadySubmitted); + if (matches.some((m) => !m.name && m.input.toLowerCase() === trimmedInput.toLowerCase())) { + setErrorMessage(t.alreadySubmitted); return; } - setRepeatMessage(""); + setErrorMessage(""); setLoading(true); try { - const guessedIds = matches.filter((m) => m.correct && m.id).map((m) => m.id!); + const guessedIds = matches.flatMap((m) => (m.correct && m.id ? [m.id] : [])); const res = await fetch("/api/guess", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ input: trimmedInput, guessedIds }), }); + const data: Match | null = res.ok ? await res.json() : null; - if (res.ok) { - const data = (await res.json()) as Match; + if (!data) { + setErrorMessage(res.status === 401 ? t.sessionExpired : t.guessFailed); + return; + } - if (data.id && matches.some((m) => m.id && m.id === data.id)) { - setRepeatMessage(t.alreadySubmitted); - setInput(""); - return; - } - setMatches((prev) => [...prev, data]); + setInput(""); + if (data.id && matches.some((m) => m.id === data.id)) { + setErrorMessage(t.alreadySubmitted); + return; + } + setMatches((prev) => [...prev, data]); - if (data.correct && !timerStarted) { - startTimer(); - } + if (data.correct && !timerStarted) { + startTimer(); } } catch (error) { console.error("Error submitting guess:", error); - setRepeatMessage("An error occurred. Please try again."); + setErrorMessage(t.guessFailed); } finally { setLoading(false); - setInput(""); } }; @@ -175,14 +176,14 @@ export default function HomeClient({ session }: { session: Session }) { input={input} onInputChange={(e) => { setInput(e.target.value); - setRepeatMessage(""); + setErrorMessage(""); }} onSubmit={handleSubmit} disabled={correctMatchesCount === goalAmount} loading={loading} /> - {repeatMessage &&
{repeatMessage}
} + {errorMessage &&
{errorMessage}
} {matches.length > 0 && ( <>

{t.submittedAnswers}

diff --git a/src/app/translations.ts b/src/app/translations.ts index 162d037..427f29c 100644 --- a/src/app/translations.ts +++ b/src/app/translations.ts @@ -22,6 +22,8 @@ export const translations = { tryAgain: "Try logging in again", notPayingMember: "not a paying member", goalSelectorLabel: "Number of gamers to name:", + guessFailed: "Something went wrong. Please try again.", + sessionExpired: "Your session has expired. Reload the page to log in again.", }, no: { submittedAnswers: "Dine svar", @@ -45,5 +47,7 @@ export const translations = { tryAgain: "Logg på igjen", notPayingMember: "ikke betalende medlem", goalSelectorLabel: "Velg antall som må navngis:", + guessFailed: "Noe gikk galt. Prøv igjen.", + sessionExpired: "Økten din har utløpt. Last inn siden på nytt for å logge inn igjen.", }, };