|
|
@@ -1,4 +1,5 @@
|
|
|
import { useState, useEffect } from 'react';
|
|
|
+import dequal from 'dequal';
|
|
|
import { gameInfo } from '../domain/apiMethods';
|
|
|
import { useGameId } from '../domain/gameStore';
|
|
|
|
|
|
@@ -10,8 +11,10 @@ export default () => {
|
|
|
// define how to fetch scores
|
|
|
const fetchInfo = async () => {
|
|
|
const { players } = await gameInfo(gameId);
|
|
|
- // TODO would be nice to only setScores on a change - maybe have back-end provide timestamp?
|
|
|
- setScores(players);
|
|
|
+ // TODO maybe have back-end provide timestamp? to avoid this check
|
|
|
+ if (!dequal(players, scores)) {
|
|
|
+ setScores(players);
|
|
|
+ }
|
|
|
};
|
|
|
// when the hook triggers, fetch the game info
|
|
|
fetchInfo();
|
|
|
@@ -19,7 +22,7 @@ export default () => {
|
|
|
const interval = setInterval(() => fetchInfo(), 5000);
|
|
|
// and return a clean-up callback
|
|
|
return () => { clearInterval(interval) };
|
|
|
- }, [gameId]);
|
|
|
+ }, [gameId, scores]);
|
|
|
|
|
|
return scores;
|
|
|
}
|
