Skip to content

Commit

Permalink
Merge pull request #536 from VinayLodhi1712/privateroutes
Browse files Browse the repository at this point in the history 
private routes and hospital page added : #468 done
  • Loading branch information
@Luson045
Luson045 authored Oct 25, 2024
2 parents a8c057b + d817cb4 commit 87c7ad9
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 155 deletions.
269 changes: 132 additions & 137 deletions client/src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect, useCallback, useContext } from 'react';
import { NavLink } from 'react-router-dom';
import { IoMenu, IoClose } from 'react-icons/io5';
import {
Expand All @@ -7,20 +7,25 @@ import {
FaHospital,
FaUserPlus,
FaHospitalAlt,
} from 'react-icons/fa'; // Import FaHospitalAlt
} from 'react-icons/fa';
import { AiOutlineInfoCircle } from 'react-icons/ai';
import { MdOutlineLocalHospital, MdLogin, MdDarkMode } from 'react-icons/md';
import { WiDaySunny } from 'react-icons/wi';
import { useRecoilState } from 'recoil';
import { mode } from '../store/atom';
import { UserContext } from '../store/userContext';
import PropTypes from 'prop-types';
import { FiUser } from 'react-icons/fi'; // New icon for user placeholder

const Navbar = ({ isAuthenticated, user, handleLogout }) => {
const Navbar = () => {
const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
const [dark, setDark] = useRecoilState(mode);
const [isNavbarVisible, setNavbarVisible] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);

// Access isAuthenticated, user, and handleLogout from UserContext
const { isAuthenticated, user, handleLogout } = useContext(UserContext);

const toggleMobileMenu = () => setMobileMenuOpen(!isMobileMenuOpen);

const handleToggleMode = () => {
Expand Down Expand Up @@ -98,6 +103,7 @@ const Navbar = ({ isAuthenticated, user, handleLogout }) => {
{dark === 'light' ? <WiDaySunny /> : <MdDarkMode />}
</button>

{/* Navbar Links */}
<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
Expand All @@ -119,106 +125,94 @@ const Navbar = ({ isAuthenticated, user, handleLogout }) => {
<AiOutlineInfoCircle />
<p className="hover:brightness-50 hover:font-semibold">About</p>
</NavLink>
<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/labtest"
onClick={() => setMobileMenuOpen(false)}
>
<MdOutlineLocalHospital />{' '}
<p className="hover:brightness-50 hover:font-semibold">Lab Tests</p>
</NavLink>

<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/blog"
onClick={() => setMobileMenuOpen(false)}
>
<MdOutlineLocalHospital />{' '}
<p className="hover:brightness-50 hover:font-semibold">Blogs</p>
</NavLink>

<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/hospitals-around"
onClick={() => setMobileMenuOpen(false)}
>
<FaHospitalAlt />
<p className="hover:brightness-50 hover:font-semibold">
Hospitals Around
</p>
</NavLink>
{/* Conditional Links */}
{!isAuthenticated && (
<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/hospitals"
onClick={() => setMobileMenuOpen(false)}
>
<FaHospital />
<p className="hover:brightness-50 hover:font-semibold">Hospitals</p>
</NavLink>
)}

{isAuthenticated ? (
{/* Show Lab Tests and Hospitals Around for regular user */}
{isAuthenticated && user?.role === 'user' && (
<>
<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/profile"
to="/labtest"
onClick={() => setMobileMenuOpen(false)}
>
<MdOutlineLocalHospital />
<p className="hover:brightness-50 hover:font-semibold">Lab Tests</p>
</NavLink>

<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/hospitals-around"
onClick={() => setMobileMenuOpen(false)}
>
<FaUser />
<FaHospitalAlt />
<p className="hover:brightness-50 hover:font-semibold">
Profile
Hospitals Around
</p>
</NavLink>
{user && user?.role === 'user' && (
<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/hospitals"
onClick={() => setMobileMenuOpen(false)}
>
<FaHospital />
<p className="hover:brightness-50 hover:font-semibold">
Hospitals
</p>
</NavLink>
)}
{user && user?.role === 'hospital' && (
<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/panel"
onClick={() => setMobileMenuOpen(false)}
>
<MdOutlineLocalHospital />
<p className="hover:brightness-50 hover:font-semibold">
OPD Panel
</p>
</NavLink>
)}
</>
) : (
)}

{/* Show only Hospitals Around for hospital */}
{isAuthenticated && user?.role === 'hospital' && (
<NavLink
className={({ isActive }) =>
`${isActive ? 'border-b border-white ' : ''} flex items-center gap-2`
`${isActive ? 'border-b border-white ' : ''} flex gap-2 items-baseline`
}
to="/registerOPD"
to="/hospitals-around"
onClick={() => setMobileMenuOpen(false)}
>
<MdOutlineLocalHospital />
<FaHospitalAlt />
<p className="hover:brightness-50 hover:font-semibold">
Instant OPD
Hospitals Around
</p>
</NavLink>
)}

{isAuthenticated ? (
<button
className="bg-white px-5 py-1 rounded-lg text-black font-bold hover:brightness-75"
onClick={handleLogout}
>
Log Out
</button>
<>
{/* Profile Avatar with Name */}
<div className="flex items-center gap-2">
{/* Check if the user has an avatar, else use a placeholder */}
{user?.avatar ? (
<img
src={user.avatar}
alt="User Avatar"
className="w-10 h-10 rounded-full object-cover border border-gray-300"
/>
) : (
<div className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center border border-gray-300">
<FiUser className="text-xl" />
</div>
)}
<span className="font-bold">
{user?.name || user?.hospitalName}
</span>
</div>

<button
className="bg-white px-5 py-1 rounded-lg text-black font-bold hover:brightness-75"
onClick={handleLogout}
>
Log Out
</button>
</>
) : (
<div className="flex gap-2 flex-col xs:flex-row w-full xs:w-auto pr-4 xs:pr-0">
<NavLink
Expand Down Expand Up @@ -258,79 +252,82 @@ const Navbar = ({ isAuthenticated, user, handleLogout }) => {
<FaHome />
<p className="font-bold text-lg hover:brightness-50">Home</p>
</NavLink>

<NavLink
to="/about"
className="flex justify-center items-center gap-2"
>
<AiOutlineInfoCircle />
<p className="font-bold text-lg hover:brightness-50">About</p>
</NavLink>
<NavLink
to="/blog"
className="flex justify-center items-center gap-2"
>
<MdOutlineLocalHospital />{' '}
<p className="font-bold text-lg hover:brightness-50">Blog</p>
</NavLink>

<NavLink to="/labtest" className="flex items-baseline gap-2">
<MdOutlineLocalHospital className="mr-0.5 relative top-[5px] " />{' '}
<p className="font-bold text-lg hover:brightness-50">Lab Test</p>
</NavLink>

{/* Add the new Hospitals Around Link for Desktop */}
<NavLink to="/hospitals-around" className="flex items-baseline gap-2">
<FaHospitalAlt className="mr-0.5 relative top-[3px] " />
<p className="font-bold text-lg hover:brightness-50">
Hospitals Around
</p>
</NavLink>
{/* Conditional Links */}
{!isAuthenticated && (
<NavLink to="/hospitals" className="flex items-baseline gap-2">
<FaHospital />
<p className="font-bold text-lg hover:brightness-50">Hospitals</p>
</NavLink>
)}

{isAuthenticated ? (
{/* Show Lab Tests and Hospitals Around for regular user */}
{isAuthenticated && user?.role === 'user' && (
<>
<NavLink to="/profile" className="flex items-baseline gap-2">
<FaUser />
<p className="font-bold text-lg hover:brightness-50">Profile</p>
<NavLink to="/labtest" className="flex items-baseline gap-2">
<MdOutlineLocalHospital />
<p className="font-bold text-lg hover:brightness-50">Lab Test</p>
</NavLink>

<NavLink to="/hospitals-around" className="flex items-baseline gap-2">
<FaHospitalAlt />
<p className="font-bold text-lg hover:brightness-50">
Hospitals Around
</p>
</NavLink>
{user && user?.role === 'user' && (
<NavLink to="/hospitals" className="flex items-baseline gap-2">
<FaHospital />
<p className="font-bold text-lg hover:brightness-50">
Hospitals
</p>
</NavLink>
)}
{user && user?.role === 'hospital' && (
<NavLink to="/panel" className="flex items-baseline gap-2">
<MdOutlineLocalHospital />
<p className="font-bold text-lg hover:brightness-50">
OPD Panel
</p>
</NavLink>
)}
</>
) : (
<NavLink to="/registerOPD" className="flex items-baseline gap-2">
<MdOutlineLocalHospital className="mr-0.5 relative top-[5px] " />
)}

{/* Show only Hospitals Around for hospital */}
{isAuthenticated && user?.role === 'hospital' && (
<NavLink to="/hospitals-around" className="flex items-baseline gap-2">
<FaHospitalAlt />
<p className="font-bold text-lg hover:brightness-50">
Instant OPD
Hospitals Around
</p>
</NavLink>
)}
</div>

<div className="flex gap-3">
{localStorage?.getItem('token') ? (
<button
className={`${
dark === 'dark'
? 'bg-gray-900 text-gray-100'
: 'bg-white text-black'
} flex gap-2 items-center px-5 py-1 rounded-lg font-bold hover:brightness-75`}
onClick={handleLogout}
>
Log Out
</button>
{isAuthenticated ? (
<>
{/* Profile Avatar with Name */}
<div className="flex items-center gap-2">
{/* Check if the user has an avatar, else use a placeholder */}
{user?.avatar ? (
<img
src={user.avatar}
alt="User Avatar"
className="w-10 h-10 rounded-full object-cover border border-gray-300"
/>
) : (
<div className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center border border-gray-300">
<FiUser className="text-xl" />
</div>
)}
<span className="font-bold">
{user?.name || user?.hospitalName}
</span>
</div>

<button
className={`${
dark === 'dark'
? 'bg-gray-900 text-gray-100'
: 'bg-white text-black'
} flex gap-2 items-center px-5 py-1 rounded-lg font-bold hover:brightness-75`}
onClick={handleLogout}
>
Log Out
</button>
</>
) : (
<div className="flex gap-5">
<NavLink
Expand Down Expand Up @@ -362,9 +359,7 @@ const Navbar = ({ isAuthenticated, user, handleLogout }) => {
};

Navbar.propTypes = {
isAuthenticated: PropTypes.bool,
user: PropTypes.object,
handleLogout: PropTypes.func,
};

export default Navbar;
25 changes: 10 additions & 15 deletions client/src/privateroute/privateroute.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
import { useState, useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import { useContext } from 'react';
import { Outlet, Navigate } from 'react-router-dom';
import Spinner from './spinner';
import { UserContext } from '../store/userContext'; // Import the UserContext

export default function PrivateRoute() {
const [ok, setOk] = useState(false);
useEffect(() => {
const AuthCheck = async () => {
const user = localStorage.getItem('userid');
const { isAuthenticated, loading } = useContext(UserContext); // Get auth and loading state from context

if (user) {
setOk(true);
} else {
setOk(false);
}
};
AuthCheck();
}, []);
// While checking authentication (loading), show Spinner
if (loading) {
return <Spinner />;
}

return ok ? <Outlet /> : <Spinner />;
// If authenticated, show the protected route, otherwise redirect to login
return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
}
Loading

0 comments on commit 87c7ad9

Please sign in to comment.