Protected routes from unregistered users

frontend/src/components/Posts.jsx

@@ -14,8 +14,9 @@ import {
 import axios from "axios";
 import CreatePost from "./CreatePosts";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
 import SearchBar from "./SearchBar";
+import { useUser } from "../hook/useUser";
 const Posts = () => {
   const [posts, setPosts] = useState([]);
   const [communities, setCommunities] = useState([]);
@@ -24,6 +25,7 @@ const Posts = () => {
   const [selectedCommunity, setSelectedCommunity] = useState("all");
   const [allCommunities, setAllCommunities] = useState([]);
   const [page, setPage] = useState(1);
+  const { userDeatils} = useUser();
   const navigate = useNavigate();
 
   const fetchPosts = async () => {
@@ -132,7 +134,8 @@ const Posts = () => {
     );
     window.location.reload();
   };
-
+  if (loading) return <div>Loading...</div>;
+  if (!userDeatils) return <Navigate to="/login" />;
   return (
     <Container centerContent>
       <SearchBar />

frontend/src/components/chatroomui/chatroom.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import useWebSocket from "react-use-websocket";
 import { ReadyState } from "react-use-websocket";
 import axios from "axios";
+import { Navigate } from "react-router-dom";
 
 const Chatroom = () => {
   const userId = localStorage.getItem("userId");
@@ -10,6 +11,7 @@ const Chatroom = () => {
   const [prevMsg, setPrevMsg] = useState([]);
   const [myMsg, setMyMsg] = useState("");
   const messageEndRef = useRef(null); 
+  const {loading, userDeatils} = useUser();
 
 
   const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket('ws://localhost:8080');
@@ -65,7 +67,12 @@ const Chatroom = () => {
     }
   }, [allMsg]);
 
-
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+  if (!userDeatils) {
+    return <Navigate to="/login" />;
+  }
 
   // Submit message function
   const submit = () => {

frontend/src/components/chatroomui/createRoom1.jsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import { useUser } from '../../hook/useUser';
-import { useNavigate } from 'react-router-dom';
+import { Navigate, useNavigate } from 'react-router-dom';
 import { useToast } from '@chakra-ui/react';
 
 const Createroom1 = () => {
@@ -96,6 +96,11 @@ const Createroom1 = () => {
     }
 
     if (loading) return <div className="flex justify-center items-center h-screen text-xl text-gray-400">Loading...</div>;
+    if (!userDetails) {
+
+        return <Navigate to="/homepage" />;
+
+    }
 
     return (
         <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center py-10">

frontend/src/components/chatroomui/main.jsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Navigate, Outlet, useNavigate } from "react-router-dom";
 import { useContext } from "react";
 import { chatRoomApi } from "../contexts/chatRoomApi";
 import axios from "axios";
+import { useUser } from "../../hook/useUser";
+
 
 function Createroom() {
   //@ts-ignore
@@ -121,6 +123,8 @@ function Joinroom() {
 
 function Mainbuttons() {
   const navigate = useNavigate();
+  const {loading, userDetatails} = useUser();
+
   const createroom = () => {
     console.log("creating the rooms");
     navigate("/room/createroom");
@@ -130,6 +134,13 @@ function Mainbuttons() {
     navigate("/room/joinroom");
     console.log("joining the rooms");
   };
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+  if (!userDetatails) {
+
+    return <Navigate to="/login" />;
+  }
   return (
     <div>
       <button onClick={createroom}>createroom</button>

frontend/src/components/homePage/HomePage.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import image from '../../images/image7.png';
@@ -53,10 +53,10 @@ export const Header = () => {
                     <span className='pt-1'>Campus Chatter</span>
                 </div>
                 <div className="hidden md:flex space-x-6">
-                    <a href="/" className="hover:text-purple-500">Home</a>
-                    <a href="/" className="hover:text-purple-500">Post</a>
-                    <a href="/" className="hover:text-purple-500">Room</a>
-                    <a href="/" className="hover:text-purple-500">Contact</a>
+                <Link to="/homepage" className="hover:text-purple-500 ">Home</Link>
+          <Link to="/posts" className="hover:text-purple-500 ">Post</Link>
+          <Link to="/room" className="hover:text-purple-500">Room</Link>
+          <Link to="/" className="hover:text-purple-500">contact</Link>
                 </div>
                 <button className="bg-purple-500 text-white rounded-full px-4 py-2 font-bold hover:bg-purple-600" onClick={() => { navigate('/signup') }}>
                     Sign up

frontend/src/components/routes/mainroute.jsx

@@ -67,7 +67,7 @@ const Mainrouter = createBrowserRouter([
   {
 
     path: "/",
-    element: <Navbar />,
+    element: <Navbar btnName="Logout" navigateUrl="/logout"  display={true}/>,
     children: [
 
       {