Added loading property when user's profile is loading

This commit is contained in:
2026-07-22 20:49:00 -04:00
parent c7530dcbab
commit c6b6d316cf

View File

@@ -1,64 +1,85 @@
import { useEffect, useState, createContext, useContext, type PropsWithChildren } from "react"; import {
import { useSearchParams } from "react-router"; useEffect,
useState,
createContext,
useContext,
type PropsWithChildren,
} from "react";
import { useLocation, useSearchParams } from "react-router";
type User = { type User = {
id: string, id: string;
steamid: string, steamid: string;
name: string, name: string;
avatar: string avatar: string;
} };
type AuthContextType = { type AuthContextType = {
user: User | null, user: User | null;
login: () => void, loading: boolean;
logout: () => Promise<void> login: () => void;
} logout: () => Promise<void>;
};
const AuthContext = createContext<AuthContextType>({ const AuthContext = createContext<AuthContextType>({
user: null, user: null,
loading: false,
login: () => {}, login: () => {},
logout: async () => {} logout: async () => {},
}); });
export function AuthProvider({children}: PropsWithChildren) { export function AuthProvider({ children }: PropsWithChildren) {
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
const [loading, setLoading] = useState(false);
const [searchParams, setSeachParams] = useSearchParams(); const [searchParams, setSeachParams] = useSearchParams();
const location = useLocation();
useEffect(() => { useEffect(() => {
const load = async () => { const load = async () => {
if (searchParams.get("openid.ns") !== null) {
if (searchParams.get("openid.ns") !== null) { setLoading(true);
let response = await fetch("http://localhost:8080/login?" + searchParams.toString(), {credentials: "include"}).then(r => r.text()); let query = searchParams.toString();
setSeachParams({}, {replace: true}); setSeachParams({}, { replace: true });
if (response === "nok") { let response = await fetch(
// TODO: signal error to user "http://localhost:8080/login?" + query,
{ credentials: "include" },
).then((r) => r.text());
if (response === "nok") {
// TODO: signal error to user
}
} }
}
let data = await fetch("http://localhost:8080/me", {credentials: "include"}) let data = await fetch("http://localhost:8080/me", {
.then(r => r.json()) credentials: "include",
}).then((r) => r.json());
console.log(data); console.log(data);
setUser(data); setUser(data);
} setLoading(false);
};
load(); load();
}, []); }, []);
const login = () => { const login = () => {
location.replace("https://steamcommunity.com/openid/login?openid.claimed_id=http://specs.openid.net/auth/2.0/identifier_select&openid.identity=http://specs.openid.net/auth/2.0/identifier_select&openid.mode=checkid_setup&openid.ns=http://specs.openid.net/auth/2.0&openid.realm=http://localhost:5173&openid.return_to=http://localhost:5173"); window.location.replace(
"https://steamcommunity.com/openid/login?openid.claimed_id=http://specs.openid.net/auth/2.0/identifier_select&openid.identity=http://specs.openid.net/auth/2.0/identifier_select&openid.mode=checkid_setup&openid.ns=http://specs.openid.net/auth/2.0&openid.realm=http://localhost:5173&openid.return_to=http://localhost:5173" +
location.pathname,
);
}; };
const logout = async () => { const logout = async () => {
await fetch("http://localhost:8080/logout", {credentials: "include"}) await fetch("http://localhost:8080/logout", { credentials: "include" });
setUser(null); setUser(null);
}; };
return <AuthContext.Provider value={{user, login, logout}}> return (
{children} <AuthContext.Provider value={{ user, loading, login, logout }}>
</AuthContext.Provider> {children}
</AuthContext.Provider>
);
} }
export function useAuth() { export function useAuth() {
return useContext(AuthContext); return useContext(AuthContext);
} }