From f806f88520df807ac5b22d042ce8d7dd5d87512d Mon Sep 17 00:00:00 2001
From: Fatih20 <fnri39@protonmail.com>
Date: Fri, 17 Nov 2023 08:52:47 +0700
Subject: [PATCH] Better authentication handling.
---
src/components/profile/AddSkillForm.tsx | 4 +-
src/components/profile/SkillManagement.tsx | 4 +-
src/pages/Login.tsx | 9 ++--
src/pages/Profile.tsx | 6 +--
src/pages/Register.tsx | 15 +++----
src/utils/context/AuthProvider.tsx | 3 +-
src/utils/context/SkillProvider.tsx | 48 ++++++++--------------
7 files changed, 40 insertions(+), 49 deletions(-)
diff --git a/src/components/profile/AddSkillForm.tsx b/src/components/profile/AddSkillForm.tsx
index 893f327..af36cdb 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 c02346c..13a73c7 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 2c89c36..ab63a09 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 141a2e5..a428eac 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 3f20433..bd1c454 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 7d3f552..df3b309 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 d0ef347..44faed5 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>
);
}
--
GitLab