aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/account.tsx2
-rw-r--r--components/navbar.tsx2
-rw-r--r--components/preferencesContext.tsx12
-rw-r--r--pages/game.tsx4
-rw-r--r--pages/index.tsx54
-rw-r--r--pages/user.tsx83
6 files changed, 66 insertions, 91 deletions
diff --git a/components/account.tsx b/components/account.tsx
index 005e0d1..7b825cd 100644
--- a/components/account.tsx
+++ b/components/account.tsx
@@ -1,5 +1,3 @@
-import { useState, useEffect } from 'react';
-
var dummy = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/j/PwAHAQL/gXZXNQAAAABJRU5ErkJggg==";
export function AccountAvatar(props: {
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 2c38c3c..252635d 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -46,7 +46,7 @@ export function NavBar() {
}
setGotData(true);
- })()});
+ })()}, []);
return <div className="navbar" style={{
width: 48,
diff --git a/components/preferencesContext.tsx b/components/preferencesContext.tsx
index 6b7914f..1b58a4f 100644
--- a/components/preferencesContext.tsx
+++ b/components/preferencesContext.tsx
@@ -12,13 +12,13 @@ function applyPreferences(preferences: userPreferences) {
var PreferencesContext = createContext<{ preferences?: userPreferences; updatePreference?: (newPreference: userPreferences) => void }>({});
export function PreferencesContextWrapper(props: { children?: ReactNode }) {
- var [gotData, setGotData] = useState(false);
+ var server = typeof window === "undefined";
+ var loggedIn = !server && document.cookie.includes("token");
+
var [preferences, setPreferences] = useState<userPreferences>();
useEffect(() => {(async() => {
- if (gotData) return;
- if (typeof window === "undefined") return;
- if (!document.cookie.includes("token")) return;
+ if (!loggedIn) return;
var local_prefs = window.localStorage.getItem("preferences");
if (local_prefs) {
@@ -37,9 +37,7 @@ export function PreferencesContextWrapper(props: { children?: ReactNode }) {
window.localStorage.setItem("preferences", JSON.stringify(preferencesReq.data.preferences));
setPreferences(preferencesReq.data.preferences);
}
-
- setGotData(true);
- })()});
+ })()}, []);
useEffect(() => applyPreferences(preferences), [preferences]);
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/>