set user context after refreshing page

client/ecommerce/src/api/axios.tsx

@@ -269,3 +269,8 @@ export const addReview = async ({
   const response = await axiosApi.post(`reviews`, data);
   return response.data;
 };
+
+export const fetchUserInfoWhenLostContext = async () => {
+  const response = await axiosApi.get("users/profile");
+  return response.data as User;
+};

client/ecommerce/src/components/Navbar.tsx

@@ -31,6 +31,8 @@ import { useNotifications } from "../hooks/useNotifications";
 import { useProductNotifications } from "../hooks/useProductNotifications";
 import { useMarkProductNotificationAsRead } from "../hooks/useMarkProductNotificationAsRead";
 import PopoverPopupState from "./PopoverPopupState";
+import { useUserInfo } from "../hooks/useUserInfo";
+import { useFetchUserInfo } from "../hooks/useFetchUserInfo";
 
 export const NotAuthed = () => {
   return (
@@ -122,7 +124,7 @@ export const Navbar = () => {
   const [searchInputValue, setSearchInputValue] = useState("");
   const [value, setValue] = useState(0);
   const below800 = useMediaQuery(800);
-  const { user } = useUserContext();
+  const { user, setUser } = useUserContext();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [mobileMoreAnchorEl, setMobileMoreAnchorEl] =
     useState<null | HTMLElement>(null);
@@ -135,6 +137,15 @@ export const Navbar = () => {
   const handleProductNotificationsIconClick = () => {
     markProductNotificationsAsRead();
   };
+  const {
+    data: userData,
+    isLoading: isUserLoading,
+    isSuccess: isFetchedUserSuccess,
+  } = useFetchUserInfo(user.id);
+  if (isFetchedUserSuccess && !isUserLoading) {
+    setUser(userData);
+  }
+  console.log(user);
   const {
     data: productNotificationsReceived,
     isLoading: isProductNotificationsLoading,
@@ -144,6 +155,7 @@ export const Navbar = () => {
   const { mutate: markProductNotificationsAsRead } = mutation;
   const { data: notificationsReceived, isLoading: isNotificationsLoading } =
     useNotifications(user.id);
+
   if (!user.username && !user.id) {
     return;
   }

client/ecommerce/src/hooks/useFetchUserInfo.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchUserInfoWhenLostContext } from "../api/axios";
+
+export const useFetchUserInfo = (userId: number) => {
+  return useQuery({
+    queryKey: ["user", "me"],
+    queryFn: fetchUserInfoWhenLostContext,
+    enabled: userId === 0,
+  });
+};