chg: dev: massive refactor on fetches - create centralized dataProvider #7

assets/js/mine-seeker/components/OnlinePlayersDialog.jsx

@@ -9,6 +9,7 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Dialog from '@mui/material/Dialog';
+import { useLobbyDataProvider } from '@mine-hooks';
 
 const DIALOG_SX = {
   '& .MuiDialog-paper': {
@@ -39,7 +40,7 @@ const formatSince = isoStr => {
   return `${diff} min ago`;
 };
 
-const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
+const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc, isEnvDev = false }) => {
   const [players, setPlayers] = useState([]);
   const [search, setSearch] = useState('');
   const [loading, setLoading] = useState(false);
@@ -49,6 +50,7 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
   const [declinedMsg, setDeclinedMsg] = useState('');
   const [waitingCountdown, setWaitingCountdown] = useState(0);
   const declinedTimerRef = useRef(null);
+  const { waitingPlayersQuery, challengeMutation } = useLobbyDataProvider();
 
   const addPlayer = useCallback(entry => {
     setPlayers(prev =>
@@ -66,20 +68,21 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
     if (!open) return;
     setLoading(true);
     setSnapshotLoaded(false);
-    fetch('/api/game/waiting')
-      .then(r => r.json())
-      .then(data => {
+
+    waitingPlayersQuery.refetch().then(result => {
+      if (result.data) {
         // Filter out current user's game from the snapshot
-        const filtered = data.filter(p => p.gameAssoc !== currentGameAssoc);
+        const filtered = result.data.filter(p => p.gameAssoc !== currentGameAssoc);
         setPlayers(filtered);
-        setSnapshotLoaded(true);
-        setLoading(false);
-      })
-      .catch(() => {
-        setPlayers([]);
-        setSnapshotLoaded(true);
-        setLoading(false);
-      });
+      }
+      setSnapshotLoaded(true);
+      setLoading(false);
+    }).catch(() => {
+      setPlayers([]);
+      setSnapshotLoaded(true);
+      setLoading(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, refreshKey, currentGameAssoc]);
 
   useEffect(() => {
@@ -107,6 +110,13 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
     return () => es.close();
   }, [open, snapshotLoaded, addPlayer, removePlayer, currentGameAssoc]);
 
+  useEffect(() => {
+    if (challengeMutation.isError) {
+      setChallengingGameAssoc(null);
+      setWaitingCountdown(0);
+    }
+  }, [challengeMutation.isError]);
+
   useEffect(() => {
     const handler = () => {
       setChallengingGameAssoc(null);
@@ -138,14 +148,10 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
     setChallengingGameAssoc(player.gameAssoc);
     setDeclinedMsg('');
     setWaitingCountdown(30);
-    fetch('/api/game/challenge/' + player.gameAssoc, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ challengerGameAssoc: currentGameAssoc }),
-    }).catch(() => {
-      setChallengingGameAssoc(null);
-      setWaitingCountdown(0);
-    });
+
+    challengeMutation.mutate(
+      { targetGameAssoc: player.gameAssoc, challengerGameAssoc: currentGameAssoc }
+    );
   };
 
   const visible = players
@@ -156,17 +162,18 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
   const hasMore = 5 < visible.length;
 
   // Debug: log if currentGameAssoc is undefined or if current user appears
-  if ('development' === process.env.NODE_ENV && 0 < players.length) {
+  if (isEnvDev && 0 < players.length) {
     const userInList = players.find(p => p.gameAssoc === currentGameAssoc);
+
     if (userInList) {
       console.warn('[OnlinePlayersDialog] Current user appears in players list:', { currentGameAssoc, userInList });
     }
   }
 
   return (
-    <Dialog 
-      open={open} 
-      onClose={0 < waitingCountdown ? undefined : onClose} 
+    <Dialog
+      open={open}
+      onClose={0 < waitingCountdown ? undefined : onClose}
       disableEscapeKeyDown={0 < waitingCountdown}
       sx={DIALOG_SX}
     >
@@ -189,9 +196,9 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
             >
               <i className="fa fa-refresh" />
             </button>
-            <button 
-              className="opd-close" 
-              onClick={() => { if (0 === waitingCountdown) onClose(); }} 
+            <button
+              className="opd-close"
+              onClick={() => { if (0 === waitingCountdown) onClose(); }}
               disabled={0 < waitingCountdown}
               aria-label="Close"
             >