fix protected routes

client/src/App/index.jsx

@@ -24,51 +24,48 @@ import './app.css';
 import LayoutUser from '../Components/Layout';
 import { CategoriesProvider } from '../Contexts/CategoriesContext';
 import { ModalLoginProvider } from '../Contexts/ModalLogin';
-import { UserProvider } from '../Contexts/userContext';
-import { AdminProvider } from '../Contexts/adminContext';
+import { ProvideAuth } from '../Contexts/userContext';
 import { AdminProtected, UserProtected } from '../ProtectedRoute';
 
 function App() {
   return (
     <div>
       <CategoriesProvider>
         <ModalLoginProvider>
-          <UserProvider>
-            <AdminProvider>
-              <Routes>
-                <Route path="/login/admin" element={<AdminLogin />} />
-                <Route element={<AdminProtected />}>
-                  <Route path="dashboard" element={<Dashboard />}>
-                    <Route path="/dashboard" element={<General />} />
-                    <Route path="categories" element={<Categories />} />
-                    <Route path="books" element={<DashboardBook />} />
-                    <Route path="contact" element={<Contact />} />
-                    <Route path="services" element={<Services />} />
-                  </Route>
+          <ProvideAuth>
+            <Routes>
+              <Route path="/login/admin" element={<AdminLogin />} />
+              <Route element={<AdminProtected />}>
+                <Route path="dashboard" element={<Dashboard />}>
+                  <Route path="/dashboard" element={<General />} />
+                  <Route path="categories" element={<Categories />} />
+                  <Route path="books" element={<DashboardBook />} />
+                  <Route path="contact" element={<Contact />} />
+                  <Route path="services" element={<Services />} />
                 </Route>
+              </Route>
 
-                <Route path="/" element={<LayoutUser />}>
-                  <Route path="/" index element={<Home />} />
-                  <Route
-                    path="contact"
-                    element={<Description page="contact" />}
-                  />
-                  <Route path="about" element={<Description page="about" />} />
-                  <Route
-                    path="category/:id"
-                    element={<Description page="category" />}
-                  />
-                  <Route path="category/:id" element={<Category />} />
-                  <Route element={<UserProtected />}>
-                    <Route path="/book" element={<Book />} />
-                    <Route path="/profile" element={<Profile />} />
-                  </Route>
+              <Route path="/" element={<LayoutUser />}>
+                <Route path="/" index element={<Home />} />
+                <Route
+                  path="contact"
+                  element={<Description page="contact" />}
+                />
+                <Route path="about" element={<Description page="about" />} />
+                <Route
+                  path="category/:id"
+                  element={<Description page="category" />}
+                />
+                <Route path="category/:id" element={<Category />} />
+                <Route element={<UserProtected />}>
+                  <Route path="/book" element={<Book />} />
+                  <Route path="/profile" element={<Profile />} />
                 </Route>
+              </Route>
 
-                <Route path="*" element={<NotFound />} />
-              </Routes>
-            </AdminProvider>
-          </UserProvider>
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </ProvideAuth>
         </ModalLoginProvider>
       </CategoriesProvider>
     </div>

client/src/Components/BookNow/BookContainer.jsx

@@ -10,7 +10,7 @@ import Summary from './Summary';
 import CompleteBook from './CompleteBook';
 import cities from '../../cities.json';
 import './style.css';
-import { userContext } from '../../Contexts/userContext';
+import { useAuth } from '../../Contexts/userContext';
 
 const { Step } = Steps;
 
@@ -27,7 +27,7 @@ function BookContainer() {
   ]);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const { userInfo } = useContext(userContext);
+  const { userInfo } = useAuth();
 
   useEffect(() => {
     if (typeof userInfo !== 'string') {

client/src/Components/BookNow/UserInformation.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Typography, Form, Input, Row, Col, Select } from 'antd';
 import LeafMap from '../Map';
 import cities from '../../cities.json';
-import { userContext } from '../../Contexts/userContext';
+import { useAuth } from '../../Contexts/userContext';
 
 const { Title } = Typography;
 const { Option } = Select;
@@ -13,7 +13,7 @@ function UserInformation({
   position,
   setPosition,
 }) {
-  const { userInfo } = useContext(userContext);
+  const { userInfo } = useAuth();
 
   return (
     <div>

client/src/Components/Dashboard/AdminLogin/index.jsx

@@ -8,6 +8,7 @@ import './style.css';
 function AdminLogin() {
   return (
     <div className="admin-login">
+      {console.log('admin login')}
       <Link to="/">
         <Image
           preview={false}

client/src/Components/Dashboard/Categories/FormModal.jsx

@@ -17,15 +17,15 @@ function FormModal({
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
 
-  let categroyData = {};
-  categroyData = {
+  let categoryData = {};
+  categoryData = {
     name: categoryRecord.name,
     description: categoryRecord.description,
     image: isUpload ? uploadedImage : categoryRecord.image,
   };
 
   useEffect(() => {
-    form.setFieldsValue(categroyData);
+    form.setFieldsValue(categoryData);
   }, [visible]);
 
   const uploadImage = (e) => {

client/src/Components/Dashboard/General/BookStatus/StatusNumber/index.jsx

@@ -22,7 +22,7 @@ function StatusNumber({ title, number, backgroundColor, icon }) {
 
 StatusNumber.propTypes = {
   title: PropTypes.string.isRequired,
-  number: PropTypes.string.isRequired,
+  number: PropTypes.number.isRequired,
   backgroundColor: PropTypes.string.isRequired,
   icon: PropTypes.element.isRequired,
 };

client/src/Components/Dashboard/General/BookStatus/index.jsx

@@ -70,7 +70,7 @@ function BookStatus() {
         <StatusNumber
           key={title}
           title={title}
-          number={number}
+          number={Number(number)}
           backgroundColor={backgroundColor}
           icon={icon}
         />

client/src/Components/Login/index.jsx

@@ -4,64 +4,31 @@ import axios from 'axios';
 import PropTypes from 'prop-types';
 import { Form, Input, Button, message, Spin } from 'antd';
 import { MailOutlined, LockOutlined, LoadingOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
 import { ModalLoginContext } from '../../Contexts/ModalLogin';
-import { userContext } from '../../Contexts/userContext';
-import { adminContext } from '../../Contexts/adminContext';
+import { useAuth } from '../../Contexts/userContext';
 
 const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 
 function Login({ admin }) {
-  const { setIsOpen } = useContext(ModalLoginContext);
-  const [isloading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const { setIsLogged } = useContext(userContext);
-  const { setIsAdminLogged } = useContext(adminContext);
+  const { isloading, error, login } = useAuth();
+  // const { setIsOpen } = useContext(ModalLoginContext);
+  // const [isloading, setIsLoading] = useState(false);
+  // const [error, setError] = useState('');
+  // const { setIsLogged } = useContext(userContext);
+  // const navigate = useNavigate();
 
   const onFinish = ({ email, password }) => {
-    setIsLoading(true);
-    setError('');
-    axios
-      .post('/api/v1/signin', { email, password })
-      .then(() => {
-        setIsLoading(false);
-        setIsOpen(false);
-        setIsLogged(true);
-      })
-      .catch((err) => {
-        if (err.response) {
-          setError('يوجد خطأ بالإيميل أو كلمة السر');
-          setIsLoading(false);
-        } else {
-          message.error('حدث خطأ ما');
-          setIsLoading(false);
-        }
-      });
-  };
-  const onAdminFinish = ({ email, password }) => {
-    setIsLoading(true);
-    setError('');
-    axios
-      .post('/api/v1/admin/signin', { email, password })
-      .then(() => {
-        setIsAdminLogged(true);
-        setIsLoading(false);
-      })
-      .catch((err) => {
-        if (err.response) {
-          setError('يوجد خطأ بالإيميل أو كلمة السر');
-          setIsLoading(false);
-        } else {
-          message.error('حدث خطأ ما');
-          setIsLoading(false);
-        }
-      });
+    login({ email, password });
   };
+
   return (
     <div>
       <Form
         layout="vertical"
         className={admin ? 'form-width' : ''}
-        onFinish={admin ? onAdminFinish : onFinish}
+        // onFinish={admin ? onAdminFinish : onFinish}
+        onFinish={onFinish}
       >
         <Form.Item
           label="الإيميل"

client/src/Components/Navbar/RightMenu.jsx

@@ -5,43 +5,51 @@ import { Menu, Button, Avatar, Dropdown, Space } from 'antd';
 import { UserOutlined, DownOutlined } from '@ant-design/icons';
 import { Link } from 'react-router-dom';
 import { ModalLoginContext } from '../../Contexts/ModalLogin';
-import { userContext } from '../../Contexts/userContext';
+import { useAuth } from '../../Contexts/userContext';
 
 function RightMenu({ mode, avatarMenu }) {
-  const { userInfo, isLogged } = useContext(userContext);
+  const { userInfo, isLogged } = useAuth();
   const { setIsOpen } = useContext(ModalLoginContext);
 
   const openModal = () => {
     setIsOpen(true);
   };
 
   return (
-    <Menu mode={mode} className="right-menu">
-      <Menu.Item key="avatar">
-        {isLogged ? (
-          <Space direction="vertical">
-            <Dropdown overlay={avatarMenu} placement="bottom">
-              <Space>
-                <div className="avatar">
-                  <Avatar size={32} icon={<UserOutlined />} />
-                  &nbsp;{userInfo.name}&nbsp;
-                  <DownOutlined style={{ fontSize: '12px' }} />
-                </div>
-              </Space>
-            </Dropdown>
-          </Space>
-        ) : (
-          <Button className="login" onClick={openModal}>
-            دخول
-          </Button>
-        )}
-      </Menu.Item>
-      <Menu.Item key="book">
-        <Link to="/book">
-          <Button type="primary">احجز الآن</Button>
-        </Link>
-      </Menu.Item>
-    </Menu>
+    <Menu
+      mode={mode}
+      className="right-menu"
+      items={[
+        {
+          key: 'avatar',
+          label: isLogged ? (
+            <Space direction="vertical">
+              <Dropdown overlay={avatarMenu} placement="bottom">
+                <Space>
+                  <div className="avatar">
+                    <Avatar size={32} icon={<UserOutlined />} />
+                    &nbsp;{userInfo.name}&nbsp;
+                    <DownOutlined style={{ fontSize: '12px' }} />
+                  </div>
+                </Space>
+              </Dropdown>
+            </Space>
+          ) : (
+            <Button className="login" onClick={openModal}>
+              دخول
+            </Button>
+          ),
+        },
+        {
+          key: 'book',
+          label: (
+            <Link to="/book">
+              <Button type="primary">احجز الآن</Button>
+            </Link>
+          ),
+        },
+      ]}
+    />
   );
 }
 

client/src/Components/Navbar/index.jsx

@@ -1,35 +1,21 @@
 /* eslint-disable no-undef */
 import React, { useState, useContext } from 'react';
-import axios from 'axios';
-import { Link, useNavigate } from 'react-router-dom';
-import {
-  Layout,
-  Menu,
-  Image,
-  Button,
-  Dropdown,
-  Space,
-  Drawer,
-  message,
-} from 'antd';
+import { Link } from 'react-router-dom';
+import { Layout, Menu, Image, Button, Dropdown, Space, Drawer } from 'antd';
 import { DownOutlined, MenuOutlined } from '@ant-design/icons';
 import logo from '../../Assets/images/logo.svg';
 import LeftMenu from './LeftMenu';
 import RightMenu from './RightMenu';
 import './navbar.css';
-
 import { CategoriesContext } from '../../Contexts/CategoriesContext';
-import { userContext } from '../../Contexts/userContext';
-import { ModalLoginContext } from '../../Contexts/ModalLogin';
+import { useAuth } from '../../Contexts/userContext';
 
 const { Header } = Layout;
 
 function Navbar() {
   const [visible, setVisible] = useState(false);
   const { categories } = useContext(CategoriesContext);
-  const { setIsLogged } = useContext(userContext);
-  const { setIsOpen } = useContext(ModalLoginContext);
-  const navigate = useNavigate();
+  const { logout } = useAuth();
 
   const showDrawer = () => {
     setVisible(true);
@@ -69,19 +55,6 @@ function Navbar() {
     label: item,
   }));
 
-  const logout = () => {
-    axios
-      .get('/api/v1/logout')
-      .then(() => {
-        setIsLogged(false);
-        navigate('/', { replace: true });
-        setIsOpen(false);
-      })
-      .catch(() => {
-        message.error('حدث خطأ ما');
-      });
-  };
-
   const avatarMenu = (
     <Menu
       items={[