From 87c10299936c2a00a128b6a4d1c5be28760e7986 Mon Sep 17 00:00:00 2001 From: Wladimir Pasquel <121689749+lordksix@users.noreply.github.com> Date: Sun, 1 Oct 2023 11:59:50 -0500 Subject: [PATCH 1/4] Protect route according to role --- src/App.js | 23 ++++++++++++++--------- src/components/ProtectedRouteAdmin.jsx | 16 ++++++++++++++++ src/hooks/useSession.js | 9 ++++----- src/routes/NotMatch.jsx | 10 +++++----- src/routes/UnAuthorize.jsx | 10 ++++++++++ 5 files changed, 49 insertions(+), 19 deletions(-) create mode 100644 src/components/ProtectedRouteAdmin.jsx create mode 100644 src/routes/UnAuthorize.jsx diff --git a/src/App.js b/src/App.js index e000309..3c394fd 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import './App.css'; import { ToastContainer } from 'react-toastify'; import ProtectedRoute from './components/ProtectedRoute'; +import ProtectedRouteAdmin from './components/ProtectedRouteAdmin'; import Home from './routes/Home'; import Login from './routes/Login'; import SignUp from './routes/SignUp'; @@ -15,6 +16,7 @@ import AppointmentUpdate from './routes/AppointmentUpdate'; import CreateAppointment from './routes/CreateAppointment'; import Layout from './components/Layout'; import NotMatch from './routes/NotMatch'; +import UnAuthorize from './routes/UnAuthorize'; import Logout from './routes/Logout'; function App() { @@ -23,20 +25,23 @@ function App() { } /> - } /> - } /> + } /> + } /> }> }> - } /> - } /> - } /> + } /> + } /> + } /> } /> - } /> - } /> - } /> + } /> + }> + } /> + } /> + - } /> + } /> + } /> } /> diff --git a/src/components/ProtectedRouteAdmin.jsx b/src/components/ProtectedRouteAdmin.jsx new file mode 100644 index 0000000..489d7f9 --- /dev/null +++ b/src/components/ProtectedRouteAdmin.jsx @@ -0,0 +1,16 @@ +// ProtectedRoute.js +import { Navigate, Outlet } from 'react-router-dom'; +import useSession from '../hooks/useSession'; + +const ProtectedRouteAdmin = () => { + const [userInfo] = useSession(); + + if (userInfo.role === 'admin') { + return ; + } + + return ( + + ); +}; +export default ProtectedRouteAdmin; diff --git a/src/hooks/useSession.js b/src/hooks/useSession.js index ee74901..a04ff95 100644 --- a/src/hooks/useSession.js +++ b/src/hooks/useSession.js @@ -5,7 +5,7 @@ import { getCurrentUser } from '../redux/auth/authActions'; const useSession = () => { const { - currentUser, + userInfo, } = useSelector(selectAuth); const dispatch = useDispatch(); @@ -23,12 +23,11 @@ const useSession = () => { const userSignedIn = token && Math.abs((Date.now() - tokenTime)) < 1_800_000; // 30 minutes useEffect(() => { - if (!currentUser && userSignedIn) { + if (!userInfo && userSignedIn) { dispatch(getCurrentUser()); } - }, [dispatch, currentUser, userSignedIn]); - - return [userSignedIn, currentUser]; + }, [dispatch, userInfo, userSignedIn]); + return [userSignedIn, userInfo]; }; export default useSession; diff --git a/src/routes/NotMatch.jsx b/src/routes/NotMatch.jsx index 7b0a2da..2927f46 100644 --- a/src/routes/NotMatch.jsx +++ b/src/routes/NotMatch.jsx @@ -1,10 +1,10 @@ import { Link } from 'react-router-dom'; const NotMatch = () => ( - <> -

Not found!

-

Try another page

- Go to Homepage - +
+

Page not Found

+

Try another page

+ Go to your Homepage +
); export default NotMatch; diff --git a/src/routes/UnAuthorize.jsx b/src/routes/UnAuthorize.jsx new file mode 100644 index 0000000..829995f --- /dev/null +++ b/src/routes/UnAuthorize.jsx @@ -0,0 +1,10 @@ +import { Link } from 'react-router-dom'; + +const UnAuthorize = () => ( +
+

You are no authorize for this action!

+

Try another page

+ Go to your Appointment +
+); +export default UnAuthorize; From afbe283dd9d8b780d3de3bcd219a980710a3c067 Mon Sep 17 00:00:00 2001 From: Wladimir Pasquel <121689749+lordksix@users.noreply.github.com> Date: Sun, 1 Oct 2023 12:33:32 -0500 Subject: [PATCH 2/4] Implement selective rendering on side bar --- src/components/ProtectedRouteAdmin.jsx | 2 +- src/components/Sidebar.jsx | 98 ++++++++++++++++---------- src/index.js | 14 +--- 3 files changed, 63 insertions(+), 51 deletions(-) diff --git a/src/components/ProtectedRouteAdmin.jsx b/src/components/ProtectedRouteAdmin.jsx index 489d7f9..b10dfef 100644 --- a/src/components/ProtectedRouteAdmin.jsx +++ b/src/components/ProtectedRouteAdmin.jsx @@ -3,7 +3,7 @@ import { Navigate, Outlet } from 'react-router-dom'; import useSession from '../hooks/useSession'; const ProtectedRouteAdmin = () => { - const [userInfo] = useSession(); + const userInfo = useSession()[1]; if (userInfo.role === 'admin') { return ; diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 1b41925..255557c 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -5,9 +5,11 @@ import { } from 'react-icons/fa'; import { HiMenuAlt4 } from 'react-icons/hi'; import { AiOutlineCloseCircle } from 'react-icons/ai'; +import useSession from '../hooks/useSession'; import logo from '../logo.png'; const Sidebar = () => { + const userInfo = useSession()[1]; const [isMenuOpen, setIsMenuOpen] = useState(false); const navigate = useNavigate(); const toggleMenu = () => { @@ -18,7 +20,6 @@ const Sidebar = () => { toggleMenu(); navigate(href); }; - return ( <>
@@ -30,11 +31,16 @@ const Sidebar = () => {
-
-
    +
    +
      • + { userInfo.role === 'admin' ? ( +
    • +

      You are an admin

      +
      • + ) : (<>)}
      • -
    • - -
      • -
    • - -
      • + { userInfo.role === 'admin' ? ( + <> +
    • + +
      • +
    • + +
      • + + ) : (<>)}
    -
      +
      • @@ -106,7 +116,13 @@ const Sidebar = () => {
    - logo +
    + logo + { userInfo.role === 'admin' ? ( +

    You are an admin

    + ) : (<>)} +
    +
    • { Schedule a new Appointment
      • -
    • - - Add a new Doctor - -
      • -
    • - - Delete a Doctor - -
      • + { userInfo.role === 'admin' ? ( + <> +
    • + + Add a new Doctor + +
      • +
    • + + Delete a Doctor + +
      • + + ) : (<>)}
    • - - - - , + + + , ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); From 4dca92f922d1371de9d059419f53724b1cd15273 Mon Sep 17 00:00:00 2001 From: david Date: Sun, 1 Oct 2023 21:27:59 +0300 Subject: [PATCH 3/4] Using react query for cache --- .idea/workspace.xml | 6 ++---- src/App.js | 7 +++++-- src/hooks/useSession.js | 10 ++++------ 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 12e3663..a882526 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -6,9 +6,7 @@ - - - +
    -
    diff --git a/src/routes/SignUp.jsx b/src/routes/SignUp.jsx index f660ebf..e70b537 100644 --- a/src/routes/SignUp.jsx +++ b/src/routes/SignUp.jsx @@ -41,7 +41,13 @@ const SignUp = () => { const signup = (data) => { toast.promise( - dispatch(registerUser(data)), + dispatch( + registerUser(data), + ).then(() => { + if (error) { + toast.error(`Oops, something went wrong: ${error}`); + } + }), { pending: 'loading...', error, @@ -50,10 +56,6 @@ const SignUp = () => { ); }; - if (error) { - toast.error(`Oops, something went wrong: ${error}`); - } - if (needsConfirmation) { return ; } @@ -118,11 +120,11 @@ const SignUp = () => {
    {errors.accept_terms?.message}