From 13b0065a74b2a38e7ef2ee8c9a67021e33cc269b Mon Sep 17 00:00:00 2001
From: Fatih20 <fnri39@protonmail.com>
Date: Fri, 17 Nov 2023 10:31:52 +0700
Subject: [PATCH] Fix bug with setting user state after login, register,
 logout.

---
 src/App.css                                | 1 +
 src/App.tsx                                | 2 --
 src/components/HomeLayout.tsx              | 2 +-
 src/components/profile/Employer.tsx        | 2 +-
 src/components/profile/ProfileForm.tsx     | 1 +
 src/components/profile/SkillManagement.tsx | 2 +-
 src/pages/Login.tsx                        | 7 ++++---
 src/pages/Profile.tsx                      | 6 +++---
 src/pages/Register.tsx                     | 5 ++---
 src/utils/api/auth.ts                      | 4 +++-
 src/utils/context/SkillProvider.tsx        | 1 -
 11 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/App.css b/src/App.css
index 4d1241e..401641e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,4 +13,5 @@ body {
   align-items: flex-start;
   margin: 0 auto;
   text-align: center;
+  width: 100%;
 }
diff --git a/src/App.tsx b/src/App.tsx
index e6b9f6a..6d4c034 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,7 +6,6 @@ import {
   RouterProvider,
 } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
-import Home from "@/pages/Home";
 import Login from "@/pages/Login";
 import ProtectedLayout from "@/components/ProtectedLayout";
 import HomeLayout from "@/components/HomeLayout";
@@ -22,7 +21,6 @@ const router = createBrowserRouter(
   createRoutesFromElements(
     <>
       <Route path="" element={<ProtectedLayout />}>
-        <Route path="" element={<Home />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/applications" element={<Applications />} />
         <Route path="/gyms" element={<Gym />}></Route>
diff --git a/src/components/HomeLayout.tsx b/src/components/HomeLayout.tsx
index 8662252..4c115e7 100644
--- a/src/components/HomeLayout.tsx
+++ b/src/components/HomeLayout.tsx
@@ -7,7 +7,7 @@ function HomeLayout() {
   const nav = useNavigate();
   useEffect(() => {
     if (user && status === "success") {
-      nav("/");
+      nav("/profile");
     }
   }, [user, nav, status]);
 
diff --git a/src/components/profile/Employer.tsx b/src/components/profile/Employer.tsx
index c7e300a..ef9a1d6 100644
--- a/src/components/profile/Employer.tsx
+++ b/src/components/profile/Employer.tsx
@@ -19,7 +19,7 @@ function Employer({ user }: { user: UserReturned }) {
       {status !== "success" ? (
         <p>Loading...</p>
       ) : gym === undefined ? (
-        <p>You're not currently employed</p>
+        <p className="self-start">You're not currently employed</p>
       ) : (
         <GymCard horizontal={true} gym={gym} />
       )}
diff --git a/src/components/profile/ProfileForm.tsx b/src/components/profile/ProfileForm.tsx
index 78476a9..d08f447 100644
--- a/src/components/profile/ProfileForm.tsx
+++ b/src/components/profile/ProfileForm.tsx
@@ -14,6 +14,7 @@ import { useState } from "react";
 import validate from "@/utils/validationSchema/validate";
 
 function ProfileForm({ user }: { user: UserReturned }) {
+  console.log("User in profile form", user);
   const queryClient = useQueryClient();
   const {
     field: username,
diff --git a/src/components/profile/SkillManagement.tsx b/src/components/profile/SkillManagement.tsx
index 13a73c7..51d1da8 100644
--- a/src/components/profile/SkillManagement.tsx
+++ b/src/components/profile/SkillManagement.tsx
@@ -212,7 +212,7 @@ function SkillManagement() {
         userSkills ? (
           <p>Loading</p>
         ) : (
-          <div className="w-full h-[18.75rem] bg-slate-600 px-3 py-3 lg:px-6 lg:py-6 flex flex-col rounded-lg overflow-y-scroll gap-2">
+          <div className="w-full h-[18.75rem] bg-slate-600 px-3 py-3 lg:px-6 lg:py-6 flex flex-col rounded-lg overflow-y-scroll gap-2 box-border">
             {allSkillsProcessor(allSkills ?? [], userSkills ?? []).map(
               ({ alreadyOwned, description, skillName }) => (
                 <AllSkillBit
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index ab63a09..d1d51f5 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -34,9 +34,10 @@ function Login() {
       setUsername("");
       setPassword("");
       setLoginError("");
-      queryClient.setQueryData(["user"], { user: data, status: "success" });
-      queryClient.invalidateQueries(["user"]);
-      navigate("/");
+      queryClient.setQueryData(["user"], data);
+      console.log(queryClient.getQueryData(["user"]));
+
+      navigate("/profile");
     },
   });
 
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index a428eac..320796c 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -13,11 +13,11 @@ function Profile() {
   const { mutateAsync: logoutMutation } = useMutation({
     mutationFn: logout,
     onSuccess: () => {
-      queryClient.invalidateQueries();
-      queryClient.setQueryData(["user"], { user: undefined, status: "idle" });
+      queryClient.setQueryData(["user"], undefined);
+      queryClient.invalidateQueries({ queryKey: ["skills", "me"] });
+      queryClient.invalidateQueries({ queryKey: ["applications"] });
     },
   });
-  console.log(user);
 
   return (
     <div className="flex flex-col w-full justify-center items-start box-border py-4 lg:py-8 px-4 lg:px-8 text-left gap-4">
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index bd1c454..f232c20 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -55,15 +55,14 @@ function Register() {
     mutationFn: async () =>
       await register({ username, password, description, email, name }),
     onSuccess(data: UserReturned) {
-      console.log(data);
-      queryClient.setQueryData(["user"], { user: data, status: "success" });
+      queryClient.setQueryData(["user"], data);
       setUsername("");
       setDescription("");
       setEmail("");
       setName("");
       setPassword("");
       setRegisterError("");
-      navigate("/");
+      navigate("/profile");
     },
   });
 
diff --git a/src/utils/api/auth.ts b/src/utils/api/auth.ts
index 2d95971..a955f88 100644
--- a/src/utils/api/auth.ts
+++ b/src/utils/api/auth.ts
@@ -29,7 +29,9 @@ async function getMe(): Promise<UserReturned> {
     .user;
 }
 
-async function editMe(payload: UserReturned): Promise<UserReturned> {
+async function editMe(
+  payload: Omit<UserReturned, "gymId">
+): Promise<UserReturned> {
   return (
     await axios.patch(`${config.NODE_JS_API}/api/auth/me`, payload, header)
   ).data.user;
diff --git a/src/utils/context/SkillProvider.tsx b/src/utils/context/SkillProvider.tsx
index 44faed5..af64889 100644
--- a/src/utils/context/SkillProvider.tsx
+++ b/src/utils/context/SkillProvider.tsx
@@ -3,7 +3,6 @@ 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<{
   allSkills: Skill[] | undefined;
-- 
GitLab