fix: abort old loads, stale sync state, warn before unsaved edits are lost

src/pages/PlayNextPage.jsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {Link} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {toast} from 'sonner';
@@ -12,7 +12,8 @@ import GameCover from '../components/GameCover.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {saveGameStatus} from '../utils/backlog.js';
 import {formatPlaytime} from '../utils/games.js';
-import {apiFetch} from '../utils/api.js';
+import {request} from '../utils/api.js';
+import useAbortPrevious from '../hooks/useAbortPrevious.js';
 
 // maxMinutes is IGDB's normal time to beat; a limit leaves out games without IGDB data.
 const BUDGETS = [
@@ -45,33 +46,26 @@ export default function PlayNextPage() {
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(false);
     // A slow answer for an older budget or mood must not replace the newer one.
-    const latestRequest = useRef(0);
+    const nextSignal = useAbortPrevious();
 
     const load = useCallback(async (maxMinutes, moodKey, exclude) => {
-        const request = ++latestRequest.current;
+        const signal = nextSignal();
         setLoading(true);
         setError(null);
-        try {
-            const response = await apiFetch(
-                `${import.meta.env.VITE_CORE_API_URL}/api/library/picker?${pickerQuery(maxMinutes, moodKey, exclude)}`);
-            if (request !== latestRequest.current) return;
-            if (response.status === 401) return;
-            if (!response.ok) {
-                setError('PLAY_NEXT.ERROR_LOAD');
-                return;
-            }
-            const picked = (await response.json()).games ?? [];
-            if (request !== latestRequest.current) return;
-            setGames(picked);
-            setSeen([...exclude, ...picked.map((g) => g.appid)].slice(-MAX_EXCLUDES));
-        } catch (err) {
-            console.error('Picker load error:', err);
-            if (request === latestRequest.current) setError('INFO.ERROR.NETWORK_FAILURE');
-        } finally {
-            if (request === latestRequest.current) setLoading(false);
+        const {ok, status, data} = await request(
+            `${import.meta.env.VITE_CORE_API_URL}/api/library/picker?${pickerQuery(maxMinutes, moodKey, exclude)}`, {signal});
+        if (signal.aborted) return;
+        setLoading(false);
+        if (status === 401) return;
+        if (!ok || !data) {
+            setError(status === 0 ? 'INFO.ERROR.NETWORK_FAILURE' : 'PLAY_NEXT.ERROR_LOAD');
+            return;
         }
+        const picked = data.games ?? [];
+        setGames(picked);
+        setSeen([...exclude, ...picked.map((g) => g.appid)].slice(-MAX_EXCLUDES));
         // No `t` here: a language change gives a new `t`, and a reload would replace the random picks.
-    }, []);
+    }, [nextSignal]);
 
     useEffect(() => {
         load(budget.maxMinutes, mood, []);