Fix bug with setting user state after login, register, logout.

src/App.css

@@ -13,4 +13,5 @@ body {
   align-items: flex-start;
   margin: 0 auto;
   text-align: center;
+  width: 100%;
 }

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>

src/components/HomeLayout.tsx

@@ -7,7 +7,7 @@ function HomeLayout() {
   const nav = useNavigate();
   useEffect(() => {
     if (user && status === "success") {
-      nav("/");
+      nav("/profile");
     }
   }, [user, nav, status]);
 

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} />
       )}

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,

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

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");
     },
   });
 

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">

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");
     },
   });
 

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;

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;