Fix useUser hook

frontend/src/components/Posts.jsx

@@ -10,6 +10,7 @@ import {
   Heading,
   Stack,
   Select,
+  useToast,
 } from "@chakra-ui/react";
 import axios from "axios";
 import CreatePost from "./CreatePosts";
@@ -25,8 +26,9 @@ const Posts = () => {
   const [selectedCommunity, setSelectedCommunity] = useState("all");
   const [allCommunities, setAllCommunities] = useState([]);
   const [page, setPage] = useState(1);
-  const { userDeatils} = useUser();
+  const { userDetails, loadingUser } = useUser();
   const navigate = useNavigate();
+  const toast = useToast();
 
   const fetchPosts = async () => {
     try {
@@ -54,6 +56,15 @@ const Posts = () => {
       setPage(page + 1);
       setLoading(false);
     } catch (err) {
+      if (err.response.status === 401) {
+        toast({
+          title: "Please login to view posts",
+          status: "error",
+          duration: 3000,
+          isClosable: true,
+        });
+        return;
+      }
       setLoading(false);
       alert("Error fetching posts");
     }
@@ -135,7 +146,10 @@ const Posts = () => {
     window.location.reload();
   };
   if (loading) return <div>Loading...</div>;
-  if (!userDeatils) return <Navigate to="/login" />;
+  if (loadingUser) return <div>Loading...</div>;
+  if (!userDetails) {
+    return <Navigate to="/login" />;
+  }
   return (
     <Container centerContent>
       <SearchBar />

frontend/src/hook/useUser.jsx

@@ -2,33 +2,31 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 
 export const useUser = () => {
-    const [loading, setLoading] = useState(true);
-    const [userDetails, setUserDetails] = useState(null);
+  const [loadingUser, setLoadingUser] = useState(true);
+  const [userDetails, setUserDetails] = useState(null);
 
-    async function getDetails() {
-        try {
-            const res = await axios.get('/user/me', {
-                withCredentials: true,
-            });
-            setUserDetails(res.data);
-            setLoading(false); // Move setLoading inside try block to ensure it's always set
-        }
-        catch (err) {
-            console.log(err);
-            setLoading(false); // Set loading to false in case of error
-        }
+  async function getDetails() {
+    try {
+      const res = await axios.get("/user/me", {
+        withCredentials: true,
+      });
+      setUserDetails(res.data);
+      setLoadingUser(false); // Move setLoading inside try block to ensure it's always set
+    } catch (err) {
+      console.log(err);
+      setLoadingUser(false); // Set loading to false in case of error
     }
+  }
 
-    useEffect(() => {
-        getDetails();
-    }, []); // Empty dependency array, so it runs only once on component mount
+  useEffect(() => {
+    getDetails();
+  }, []); // Empty dependency array, so it runs only once on component mount
 
-    useEffect(() => {
-        if (userDetails) {
-
-            // console.log("User details:", userDetails);
-        }
-    }, [userDetails]); // Log userDetails whenever it changes
+  useEffect(() => {
+    if (userDetails) {
+      // console.log("User details:", userDetails);
+    }
+  }, [userDetails]); // Log userDetails whenever it changes
 
-    return { loading, userDetails };
-};
+  return { loadingUser, userDetails };
+};