Added loading property when user's profile is loading
This commit is contained in:
@@ -1,62 +1,83 @@
|
|||||||
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) {
|
||||||
let response = await fetch("http://localhost:8080/login?" + searchParams.toString(), {credentials: "include"}).then(r => r.text());
|
setLoading(true);
|
||||||
setSeachParams({}, {replace: true});
|
let query = searchParams.toString();
|
||||||
|
setSeachParams({}, { replace: true });
|
||||||
|
let response = await fetch(
|
||||||
|
"http://localhost:8080/login?" + query,
|
||||||
|
{ credentials: "include" },
|
||||||
|
).then((r) => r.text());
|
||||||
if (response === "nok") {
|
if (response === "nok") {
|
||||||
// TODO: signal error to user
|
// 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 (
|
||||||
|
<AuthContext.Provider value={{ user, loading, login, logout }}>
|
||||||
{children}
|
{children}
|
||||||
</AuthContext.Provider>
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAuth() {
|
export function useAuth() {
|
||||||
|
|||||||
Reference in New Issue
Block a user