2024-01-04 13:44:04 -06:00

39 lines
1006 B
TypeScript

import { client } from "@/util/api";
import { useAuth } from "@/util/auth";
import { Container, Text, Title } from "@mantine/core";
import { useNavigate } from "@remix-run/react";
import { useQuery } from "@tanstack/react-query";
import { AxiosError } from "axios";
import { useEffect } from "react";
export default function Me() {
const user = useQuery({
queryKey: ["user"],
queryFn: async () => await client.get(`users/me`).then((res) => res.data),
retry: (failureCount, error: AxiosError) => {
return !error || error.response?.status !== 401;
},
});
const { clearUser } = useAuth();
const navigate = useNavigate();
useEffect(() => {
if (
user.isError &&
user.error instanceof AxiosError &&
user.error.response?.status === 401
) {
clearUser();
navigate("/login");
}
}, [user]);
return (
<Container>
<Title order={2}>{user.data.username}</Title>
<Text>Level {user.data.level}</Text>
</Container>
);
}