From fc75aa4df262f3bcf404788631ee5ad74a89dee5 Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Mon, 17 Oct 2022 00:19:45 +0100
Subject: [PATCH] feat: support deps in useApiQuery and refresh rival requests
 properly

---
 .../pages/dashboard/users/ARCIntegrationPage.tsx |  2 +-
 .../_game/_playtype/rivals/RivalsComparePage.tsx |  8 ++++++++
 .../_game/_playtype/rivals/RivalsManagePage.tsx  |  6 +++++-
 client/src/components/game/ScoreLeaderboard.tsx  | 13 +++++++++++--
 client/src/components/util/query/useApiQuery.tsx | 16 ++++++++++++++--
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/client/src/app/pages/dashboard/users/ARCIntegrationPage.tsx b/client/src/app/pages/dashboard/users/ARCIntegrationPage.tsx
index 0946fd49c..e268fe251 100644
--- a/client/src/app/pages/dashboard/users/ARCIntegrationPage.tsx
+++ b/client/src/app/pages/dashboard/users/ARCIntegrationPage.tsx
@@ -17,7 +17,7 @@ export default function ARCIntegrationPage({ reqUser }: { reqUser: PublicUserDoc
 	const { data, error } = useApiQuery<{
 		iidx: ARCSavedProfileDocument | null;
 		sdvx: ARCSavedProfileDocument | null;
-	}>(`/users/${reqUser.id}/integrations/arc`, undefined, true);
+	}>(`/users/${reqUser.id}/integrations/arc`, undefined);
 
 	useEffect(() => {
 		if (data) {
diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsComparePage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsComparePage.tsx
index 8a5bd1f99..75cd0e1b1 100644
--- a/client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsComparePage.tsx
+++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsComparePage.tsx
@@ -3,6 +3,7 @@ import useSetSubheader from "components/layout/header/useSetSubheader";
 import Divider from "components/util/Divider";
 import Icon from "components/util/Icon";
 import SelectLinkButton from "components/util/SelectLinkButton";
+import useLUGPTSettings from "components/util/useLUGPTSettings";
 import useUGPTBase from "components/util/useUGPTBase";
 import React from "react";
 import { Col, Row } from "react-bootstrap";
@@ -28,6 +29,12 @@ export default function RivalsComparePage({
 
 	const base = `${useUGPTBase({ reqUser, game, playtype })}/rivals/compare`;
 
+	const { settings } = useLUGPTSettings();
+
+	if (!settings) {
+		return <div>You have no settings. How did you get here?</div>;
+	}
+
 	return (
 		<Row>
 			<Col xs={12} className="text-center">
@@ -63,6 +70,7 @@ export default function RivalsComparePage({
 						<ScoreLeaderboard
 							game={game}
 							playtype={playtype}
+							refreshDeps={[`rivals-score-leaderboard-${settings.rivals.join(",")}`]}
 							url={`/users/${reqUser.id}/games/${game}/${playtype}/rivals/score-leaderboard`}
 						/>
 					</Route>
diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsManagePage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsManagePage.tsx
index 2d857089c..b90772aac 100644
--- a/client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsManagePage.tsx
+++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsManagePage.tsx
@@ -33,8 +33,12 @@ export default function RivalsManagePage({
 		`Managing ${reqUser.username}'s ${FormatGame(game, playtype)} Rivals`
 	);
 
+	const { settings } = useLUGPTSettings();
+
 	const { data, error } = useApiQuery<PublicUserDocument[]>(
-		`/users/${reqUser.id}/games/${game}/${playtype}/rivals`
+		`/users/${reqUser.id}/games/${game}/${playtype}/rivals`,
+		{},
+		[`fetch-rivals-${settings?.rivals.join(",")}`]
 	);
 
 	const {
diff --git a/client/src/components/game/ScoreLeaderboard.tsx b/client/src/components/game/ScoreLeaderboard.tsx
index 44b43bdd9..e31b2f7c5 100644
--- a/client/src/components/game/ScoreLeaderboard.tsx
+++ b/client/src/components/game/ScoreLeaderboard.tsx
@@ -25,7 +25,12 @@ const USER_COLOURS = [
 	COLOUR_SET.orange,
 ];
 
-export default function ScoreLeaderboard({ game, playtype, url }: GamePT & { url: string }) {
+export default function ScoreLeaderboard({
+	game,
+	playtype,
+	url,
+	refreshDeps = [],
+}: GamePT & { url: string; refreshDeps?: Array<string> }) {
 	const gptConfig = GetGamePTConfig(game, playtype);
 
 	const defaultAlg = useScoreRatingAlg(game, playtype);
@@ -43,7 +48,11 @@ export default function ScoreLeaderboard({ game, playtype, url }: GamePT & { url
 			</Form.Control>
 		) : null;
 
-	const { data, error } = useApiQuery<ScoreLeaderboardReturns>(`${url}?alg=${alg}`);
+	const { data, error } = useApiQuery<ScoreLeaderboardReturns>(
+		`${url}?alg=${alg}`,
+		{},
+		refreshDeps
+	);
 
 	if (error) {
 		return (
diff --git a/client/src/components/util/query/useApiQuery.tsx b/client/src/components/util/query/useApiQuery.tsx
index 65a6f8013..160899217 100644
--- a/client/src/components/util/query/useApiQuery.tsx
+++ b/client/src/components/util/query/useApiQuery.tsx
@@ -5,10 +5,22 @@ import { SuccessfulAPIResponse } from "tachi-common";
 export default function useApiQuery<T>(
 	url: string | string[],
 	options?: RequestInit,
-	neverCache = false
+	additionalDeps?: string[]
 ) {
+	const deps = [];
+
+	if (additionalDeps) {
+		deps.push(...additionalDeps);
+	}
+
+	if (Array.isArray(url)) {
+		deps.push(...url);
+	} else {
+		deps.push(url);
+	}
+
 	return useQuery<T, UnsuccessfulAPIFetchResponse>(
-		url,
+		deps,
 		async () => {
 			if (Array.isArray(url)) {
 				const results = await Promise.all(url.map((u) => APIFetchV1(u, options)));