prevent repeat api requests

3 files changed, 60 insertions, 81 deletions

diff --git a/pages/game.tsx b/pages/game.tsx
index f9d7c0e..a7083a6 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -62,7 +62,7 @@ function VoerGame(props: {
 		});
 
 		setIoListeners(true);
-	});
+	}, []);
 
 	return <div style={{
 		position: "relative",
@@ -196,7 +196,7 @@ export default function GamePage() {
 		io.on("gameStart", () => setActive(true));
 
 		setIoListeners(true);
-	});
+	}, []);
 
 	return <div>
 		<NavBar/>
diff --git a/pages/index.tsx b/pages/index.tsx
index 41da36e..71a83d3 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -62,7 +62,9 @@ function LoginOrRegisterBox() {
 			position: "absolute",
 			fontSize: 14,
 			left: 0, right: 0, top: 0,
-			margin: "0 100px"
+			margin: "0 auto",
+			minWidth: 240,
+			maxWidth: 350
 		}}>Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies</span>
 		<div style={{
 			display: "grid",
@@ -115,39 +117,31 @@ function AccountBox(props: {
 }
 
 export default function HomePage() {
-	var [gotData, setGotData] = useState(false);
-	var [loggedIn, setLoggedIn] = useState(false);
+	var server = typeof window === "undefined";
+	var loggedIn = !server && document.cookie.includes("token");
+
 	var [userInfo, setUserInfo] = useState<userInfo>();
 	var [gameInfo, setGameInfo] = useState<userGames>();
 
 	useEffect(() => {( async () => {
-		if (gotData) return;
-
-		if (typeof window === "undefined") return; // return if run on server
-		setLoggedIn(document.cookie.includes("token"));
-
-		if (!loggedIn) return; // don't request user info if not logged in
-
-		if (!userInfo) {
-			var userInfoReq = await axios.request<userInfo>({
-				method: "get",
-				url: `/api/user/info`,
-				headers: {"content-type": "application/json"}
-			})
-			setUserInfo(userInfoReq.data);
-		}
-
-		if (!gameInfo) {
-			var userGamesReq = await axios.request<userGames>({
-				method: "get",
-				url: `/api/user/games`,
-				headers: {"content-type": "application/json"}
-			})
-			setGameInfo(userGamesReq.data);
-		}
-
-		setGotData(true);
-	})()})
+		if (!loggedIn) return;
+		var userInfoReq = await axios.request<userInfo>({
+			method: "get",
+			url: `/api/user/info`,
+			headers: {"content-type": "application/json"}
+		});
+		setUserInfo(userInfoReq.data);
+	})()}, []);
+
+	useEffect(() => {( async () => {
+		if (!loggedIn) return;
+		var userGamesReq = await axios.request<userGames>({
+			method: "get",
+			url: `/api/user/games`,
+			headers: {"content-type": "application/json"}
+		});
+		setGameInfo(userGamesReq.data);
+	})()}, []);
 
 	return <div>
 		<NavBar/>
diff --git a/pages/user.tsx b/pages/user.tsx
index 01a2d23..ac6f012 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -71,65 +71,50 @@ function InfoSection(props: { children: ReactNode }) {
 }
 
 export default function AccountPage() {
-	var [gotData, setGotData] = useState(false);
+	var server = typeof window === "undefined";
+	var loggedIn = !server && document.cookie.includes("token");
+	var pageID = server ? "" : new URLSearchParams(window.location.search).get("id");
+
+	if (!loggedIn && !pageID) !server && window.history.go(-1);
+	var reqData = loggedIn && pageID ? { "id": pageID } : undefined;
+
 	var [user, setUser] = useState<userInfo>();
-	var [ownPage, setOwnPage] = useState(false);
 	var [gameInfo, setGameInfo] = useState<userGames>();
-	var [loggedIn, setLoggedIn] = useState(false);
-
 	var [editingStatus, setEditingStatus] = useState(false);
-
 	var [relation, setRelation] = useState<userInfo["relation"]>("none");
+	var [ownPage, setOwnPage] = useState(loggedIn && !pageID);
 
 	var { toast } = useContext(ToastContext);
 
 	useEffect(() => {(async() => {
-		if (gotData) return;
-		if (typeof window === "undefined") return;
-
-		var id = new URLSearchParams(window.location.search).get("id");
-		var loggedIn = document.cookie.includes("token");
-		setLoggedIn(loggedIn);
+		var userReq = await axios.request<userInfo>({
+			method: "post",
+			url: `/api/user/info`,
+			headers: {"content-type": "application/json"}
+		});
+		setOwnPage(ownPage || userReq.data.id == pageID);
+	})()}, []);
 
-		if (id || loggedIn) {
-			var self_id = "";
-			if (loggedIn && !self_id) {
-				var selfReq = await axios.request<userInfo>({
-					method: "get",
-					url: `/api/user/info`,
-					headers: {"content-type": "application/json"}
-				});
-				self_id = selfReq?.data.id;
-			}
-
-			if (id == self_id || !id) setOwnPage(true);
-
-			if (!user) {
-				var userReq = await axios.request<userInfo>({
-					method: "post",
-					url: `/api/user/info`,
-					headers: {"content-type": "application/json"},
-					data: { "id": id || self_id }
-				});
-				setUser(userReq.data);
-				setRelation(userReq.data.relation || "none");
-			}
-
-			if (!gameInfo) {
-				var userGamesReq = await axios.request<userGames>({
-					method: "post",
-					url: `/api/user/games`,
-					headers: {"content-type": "application/json"},
-					data: { "id": id || self_id }
-				});
-				setGameInfo(userGamesReq.data);
-			}
-		} else {
-			window.history.go(-1);
-		}
+	useEffect(() => {(async() => {
+		var userReq = await axios.request<userInfo>({
+			method: "post",
+			url: `/api/user/info`,
+			headers: {"content-type": "application/json"},
+			data: reqData
+		});
+		setUser(userReq.data);
+		setRelation(userReq.data.relation || "none");
+	})()}, []);
 
-		setGotData(true);
-	})()});
+	useEffect(() => {(async() => {
+		var userGamesReq = await axios.request<userGames>({
+			method: "post",
+			url: `/api/user/games`,
+			headers: {"content-type": "application/json"},
+			data: reqData
+		});
+		setGameInfo(userGamesReq.data);
+	})()}, []);
 
 	return <div>
 		<NavBar/>