diff --git a/src/components/profile/AddSkillForm.tsx b/src/components/profile/AddSkillForm.tsx index 893f327536122e60ea6f39abf8a2d201a036b5dc..af36cdb166a11ad2981d45a83d5ebe72e06e2a77 100644 --- a/src/components/profile/AddSkillForm.tsx +++ b/src/components/profile/AddSkillForm.tsx @@ -7,10 +7,12 @@ import { useMutation, useQueryClient } from "react-query"; import { createSkill } from "@/utils/api/skill"; import { useState } from "react"; import { useAllSkills, useUserSkills } from "@/utils/context/SkillProvider"; +import { useUser } from "@/utils/context/AuthProvider"; function AddSkillForm() { const queryClient = useQueryClient(); - const { userSkills } = useUserSkills(); + const { user } = useUser(); + const { data: userSkills } = useUserSkills({ user }); const { allSkills } = useAllSkills(); const { field: skillName, diff --git a/src/components/profile/SkillManagement.tsx b/src/components/profile/SkillManagement.tsx index c02346c27851cf95aa9705819174f1278ea5982d..13a73c7baf0ba4ed05423d40ad36f2b62b66c67b 100644 --- a/src/components/profile/SkillManagement.tsx +++ b/src/components/profile/SkillManagement.tsx @@ -89,7 +89,9 @@ function allSkillsProcessor( function SkillManagement() { const queryClient = useQueryClient(); const { user, status } = useUser(); - const { userSkills, userSkillsStatus } = useUserSkills(); + const { data: userSkills, status: userSkillsStatus } = useUserSkills({ + user, + }); const { allSkills, allSkillsStatus } = useAllSkills(); const [selectedSkill, setSelectedSkill] = useState<Skill | undefined>( diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 2c89c362432ed4db74e47411255d6004a6169f31..ab63a09f963696d14c33f680a3c7178c4cccb128 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -31,7 +31,12 @@ function Login() { const { mutateAsync: loginMutation } = useMutation({ mutationFn: async () => await login({ username, password }), onSuccess(data) { + setUsername(""); + setPassword(""); + setLoginError(""); queryClient.setQueryData(["user"], { user: data, status: "success" }); + queryClient.invalidateQueries(["user"]); + navigate("/"); }, }); @@ -42,10 +47,6 @@ function Login() { try { await loginMutation(); - setUsername(""); - setPassword(""); - setLoginError(""); - navigate("/"); } catch (err: unknown) { const error = err as { response: { data: { error: string } } }; setLoginError(error.response.data.error); diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 141a2e5a0e1eb2fa3c792ff07719fa04e6e06d49..a428eac5fbc1f99a0ca86440942a61ebb2a4e56e 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -6,17 +6,15 @@ import { logout } from "@/utils/api/auth"; import { useUser } from "@/utils/context/AuthProvider"; import SkillProvider from "@/utils/context/SkillProvider"; import { useMutation, useQueryClient } from "react-query"; -import { useNavigate } from "react-router-dom"; function Profile() { const { user } = useUser(); const queryClient = useQueryClient(); - const nav = useNavigate(); const { mutateAsync: logoutMutation } = useMutation({ mutationFn: logout, onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ["user"] }); - nav("/login"); + queryClient.invalidateQueries(); + queryClient.setQueryData(["user"], { user: undefined, status: "idle" }); }, }); console.log(user); diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index 3f20433e49598c3a1c364288bb6621aab0f114a0..bd1c454c8d73f8b52d2d323edec0facfa8a8f677 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -55,7 +55,15 @@ function Register() { mutationFn: async () => await register({ username, password, description, email, name }), onSuccess(data: UserReturned) { + console.log(data); queryClient.setQueryData(["user"], { user: data, status: "success" }); + setUsername(""); + setDescription(""); + setEmail(""); + setName(""); + setPassword(""); + setRegisterError(""); + navigate("/"); }, }); @@ -74,13 +82,6 @@ function Register() { try { await registerMutation(); - setUsername(""); - setDescription(""); - setEmail(""); - setName(""); - setPassword(""); - setRegisterError(""); - navigate("/"); } catch (err: unknown) { const error = err as { response: { data: { error: string } } }; setRegisterError(error.response.data.error); diff --git a/src/utils/context/AuthProvider.tsx b/src/utils/context/AuthProvider.tsx index 7d3f55218ac3b7c727217a981b06c3f33b6b0b20..df3b3091800a9aa0665dfed104c3998f8518c5dc 100644 --- a/src/utils/context/AuthProvider.tsx +++ b/src/utils/context/AuthProvider.tsx @@ -15,7 +15,8 @@ export function useUser() { function UserProvider({ children }: { children: ReactNode }) { const { status, data: user } = useQuery(["user"], getMe, { cacheTime: 300000, - retry: 3, + retry: 1, + refetchOnWindowFocus: false, }); return ( <UserContext.Provider value={{ status, user }}> diff --git a/src/utils/context/SkillProvider.tsx b/src/utils/context/SkillProvider.tsx index d0ef34730a6c800855e097e2fbc60e30393c2b06..44faed575bb82de30c39b13502052281bc75dbc3 100644 --- a/src/utils/context/SkillProvider.tsx +++ b/src/utils/context/SkillProvider.tsx @@ -2,6 +2,7 @@ import { ReactNode, createContext, useContext } from "react"; import { QueryStatus, useQuery } from "react-query"; import { Skill } from "../validationSchema/skill"; import { getSkills, getUserSkills } from "../api/skill"; +import { UserReturned } from "../validationSchema/trainer"; import { useUser } from "./AuthProvider"; const AllSkillsContext = createContext<{ @@ -9,35 +10,15 @@ const AllSkillsContext = createContext<{ allSkillsStatus: QueryStatus; }>({ allSkills: undefined, allSkillsStatus: "idle" }); -const UserSkillsContext = createContext<{ - userSkills: Skill[] | undefined; - userSkillsStatus: QueryStatus; -}>({ userSkills: undefined, userSkillsStatus: "idle" }); - export function useAllSkills() { return useContext(AllSkillsContext); } -export function useUserSkills() { - return useContext(UserSkillsContext); -} - -function SkillProvider({ children }: { children: ReactNode }) { - const { user, status } = useUser(); - const { status: allSkillsStatus, data: allSkills } = useQuery( - ["skills"], - getSkills, - { - cacheTime: 300000, - retry: 3, - } - ); - const userSkillsQuery = useQuery({ +export function useUserSkills({ user }: { user: UserReturned | undefined }) { + return useQuery({ queryKey: ["skills", "me"], queryFn: async () => { - console.log("Username in skill provider : ", user?.username); - console.log("User is : ", status); - if (status === "loading" || user === undefined) { + if (user === undefined) { return []; } console.log("Getting actual user skills"); @@ -46,18 +27,23 @@ function SkillProvider({ children }: { children: ReactNode }) { }, cacheTime: 300000, retry: 3, + enabled: !!user, }); +} + +function SkillProvider({ children }: { children: ReactNode }) { + const { status: allSkillsStatus, data: allSkills } = useQuery( + ["skills"], + getSkills, + { + cacheTime: 300000, + retry: 3, + } + ); return ( <AllSkillsContext.Provider value={{ allSkills, allSkillsStatus }}> - <UserSkillsContext.Provider - value={{ - userSkills: userSkillsQuery.data, - userSkillsStatus: userSkillsQuery.status, - }} - > - {children} - </UserSkillsContext.Provider> + {children} </AllSkillsContext.Provider> ); }