Merge pull request #1 from mamadou-niakate/feature/implement-context-api

Feature/implement context api

src/App.js

@@ -1,40 +1,32 @@
-import Home from '../src/component/Home/Home/Home';
-import {
-  Routes,
-  Route,
-} from "react-router-dom";
-import React, { createContext, useState } from 'react'
-import About from './component/Home/About/About';
-import Dashboard from './component/Dashoboard/Dashboard/Dashboard';
-import { getDecodedUser } from './component/Login/LoginManager';
-import LoginModal from './component/Login/LoginModal';
-import PrivateRoute from './component/Login/PrivateRoute';
-import NotFound from './component/NotFound';
+import Home from "../src/component/Home/Home/Home";
+import { Routes, Route } from "react-router-dom";
+import React, { createContext } from "react";
+import About from "./component/Home/About/About";
+import Dashboard from "./component/Dashoboard/Dashboard/Dashboard";
+import LoginModal from "./component/Login/LoginModal";
+import PrivateRoute from "./component/Login/PrivateRoute";
+import NotFound from "./component/NotFound";
 export const UserContext = createContext();
 
 const App = () => {
-  const [admin, setAdmin] = useState(false);
-  const [selectedService, setSelectedService] = useState({})
-  const [user, setUser] = useState(getDecodedUser())
   return (
-    <UserContext.Provider value={{ user, setUser, admin, setAdmin, selectedService, setSelectedService }}>
-      <div>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/login" element={<LoginModal />} />
-           <Route path="/dashboard/*" element={
-              <PrivateRoute redirectTo="/login">
-                <Dashboard />
-              </PrivateRoute>
-            }
-          />
-          <Route path="*" element={<NotFound/>}/> 
-        </Routes>
-      </div>
-    </UserContext.Provider>
-  )
-}
-
-export default App
+    <div>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/login" element={<LoginModal />} />
+        <Route
+          path="/dashboard/*"
+          element={
+            <PrivateRoute redirectTo="/login">
+              <Dashboard />
+            </PrivateRoute>
+          }
+        />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </div>
+  );
+};
 
+export default App;

src/component/Dashoboard/Dashboard/Dashboard.jsx

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import PopOver from '../../Shared/PopOver/PopOver';
 import AdminDashboard from '../AdminDashboard/AdminDashboard';
@@ -8,21 +8,21 @@ import UserDashboard from '../UserDashboard/UserDashboard/UserDashboard';
 import './Dashboard.css';
 import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { UserContext } from '../../../App';
+import { SET_ADMIN, useAppContext } from '../../../context';
 
 const Dashboard = () => {
-    const { user, admin, setAdmin } = useContext(UserContext);
+    const { state: { user, admin }, dispatch } = useAppContext()
     const [sideToggle, setSideToggle] = useState(false)
     const [title, setTitle] = useState('Easy Consulting')
 
     useEffect(() => {
         axios.get(`https://immense-river-40491.herokuapp.com/admin?email=${user.email}`)
         .then(res => {
             if(res.data.length > 0){
-                setAdmin(true)
+                dispatch({type: SET_ADMIN, payload: true})
             }
         })
-    },[user.email, admin, setAdmin])
+    },[dispatch, user.email])
 
     return (
         <div id="dashboard">

src/component/Dashoboard/MakeAdmin/MakeAdmin.jsx

@@ -1,13 +1,13 @@
 import axios from 'axios';
-import React, { useContext } from 'react';
+import React from 'react';
 import { Col, Form, Row } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import swal from 'sweetalert';
-import { UserContext } from '../../../App';
+import { useAppContext } from '../../../context';
 
 const MakeAdmin = () => {
-    const { user: {email} } = useContext(UserContext)
+    const { state:{ user: {email}}} = useAppContext()
     const { register, handleSubmit, formState: { errors }, reset} = useForm();
 
     const onSubmit = data => {

src/component/Dashoboard/ManageServices/ManageServices.jsx

@@ -3,16 +3,15 @@ import { faEdit } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
-import { useContext } from 'react';
 import { Table, Button } from 'react-bootstrap';
 import toast from 'react-hot-toast';
 import swal from 'sweetalert';
-import { UserContext } from '../../../App';
+import { useAppContext } from '../../../context';
 import TableLoader from '../../Shared/TableOrder/TableOrder';
 import AddService from '../AddService/AddService';
 
 const ManageServices = () => {
-    const {user : { email }} = useContext(UserContext)
+    const { state: { email }} = useAppContext()
     const [services, setServices] = useState([])
     const [isUpdated, setIsUpdated] = useState(false)
     const [edit, setEdit] = useState(null);

src/component/Dashoboard/Profile/Profile.jsx

@@ -1,18 +1,18 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Col } from 'react-bootstrap';
 import toast from 'react-hot-toast';
 import './Profile.css'
 import userimg from '../../../Assets/user.svg';
 import { handleSignOut } from '../../Login/LoginManager';
-import { UserContext } from '../../../App';
+import { SET_USER, useAppContext } from '../../../context';
 const Profile = () => {
-    const {user: {name, email, img}, setUser} = useContext(UserContext);
+    const { state:{user: { name, email, img }}, dispatch} = useAppContext()
     const signOut = () => {
         const loading = toast.loading('Please wait...');
         handleSignOut()
         .then(res => {
             toast.dismiss(loading);
-            setUser(res)
+            dispatch({type: SET_USER, payload: res})
             toast.error('Logged Out!');
         })
     }

src/component/Dashoboard/Sidebar/Sidebar.jsx

@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './Sidebar.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faShoppingCart, faCommentAlt, faUserPlus, faCog, faFileMedical, faList, faUserCircle} from '@fortawesome/free-solid-svg-icons'
 import { faBuffer } from '@fortawesome/free-brands-svg-icons';
-import { UserContext } from '../../../App';
+import { useAppContext } from '../../../context';
 
 const Sidebar = ({setTitle}) => {
-    const { admin } = useContext(UserContext);
+    const { state: { admin } } = useAppContext()
 
     return (
         <div>

src/component/Dashoboard/UserDashboard/AddReview/Review.jsx

@@ -1,20 +1,20 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button } from 'react-bootstrap';
 import ReviewForm from './ReviewFrom';
 import './Review.css';
 import { Link } from 'react-router-dom';
 import userImg from '../../../../Assets/user.svg';
 import axios from 'axios';
-import { UserContext } from '../../../../App';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { faEdit } from '@fortawesome/free-regular-svg-icons';
 import toast from 'react-hot-toast';
 import swal from 'sweetalert';
+import { useAppContext } from '../../../../context';
 
 
 const Review = () => {
-    const { user: {email, img} } = useContext(UserContext);
+    const { state: { user: { email, img } } } = useAppContext();
     const [review, setReview] = useState({});
     const [isUpdated, setIsUpdated] = useState(false)
     const {_id, name, address, description} = review || {};

src/component/Dashoboard/UserDashboard/AddReview/ReviewFrom.jsx

@@ -1,15 +1,15 @@
 import axios from 'axios';
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useParams,useNavigate  } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import { Button, Col, Form, Row } from 'react-bootstrap';
-import { UserContext } from '../../../../App';
 import swal from 'sweetalert';
+import { useAppContext } from '../../../../context';
 
 const ReviewForm = ({setIsUpdated}) => {
-    const {user: {email, img}} = useContext(UserContext)
+    const {state:{user: {email, img}}} = useAppContext()
     const {id} = useParams();
     const { register, handleSubmit, reset } = useForm();
     const [review, setReview] = useState({});

src/component/Dashoboard/UserDashboard/Book/Book.jsx

@@ -1,15 +1,15 @@
-import React, { useContext, useEffect, useState } from 'react';
-import {UserContext} from '../../../../App'
+import React, { useEffect, useState } from 'react';
 import {Elements} from '@stripe/react-stripe-js';
 import {loadStripe} from '@stripe/stripe-js';
 import { Form, Col, Row, Toast } from 'react-bootstrap';
 import './Book.css'
 import axios from 'axios';
 import ifoIcon from '../../../../Assets/info.svg';
 import Checkout from './Checkout';
+import { SET_SELECTED_SERVICE, useAppContext } from '../../../../context';
 
 const Book = () => {
-    const { selectedService , setSelectedService } = useContext(UserContext)
+    const { state: { selectedService }, dispatch} = useAppContext()
     const [services, setServices] = useState([]);
     const [show, setShow] = useState(true);
 
@@ -18,14 +18,14 @@ const Book = () => {
         .then(res => {
             setServices(res.data)
             if(!selectedService.name){
-                setSelectedService(res.data[0])
+                dispatch({type: SET_SELECTED_SERVICE, payload: res.data[0]})
             }
         })
-    }, [selectedService.name, setSelectedService])
+    }, [selectedService.name, dispatch])
 
     const handleSelection = e => {
         const getService = services.find(({name}) => e.target.value === name)
-        setSelectedService(getService)
+        dispatch({type: SET_SELECTED_SERVICE, payload: getService})
     }
 
     const stripePromise = loadStripe('pk_test_51Ii2KaCKKXM4eFaOJWCOr8pS4GVkoCerGCRHefo7hDpLYMcjpGqPNpoeydvFApWXDSSMnfXNzdtwRcF1o8XmTk3H00xDH8wKZc');

src/component/Dashoboard/UserDashboard/Book/Checkout.jsx

@@ -9,10 +9,9 @@ import {
 import swal from 'sweetalert';
 import { Form, Col, Row } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
-import { useContext } from 'react';
 import toast from 'react-hot-toast';
 import axios from 'axios';
-import { UserContext } from '../../../../App';
+import { useAppContext } from '../../../../context';
 
 
 const useOptions = () => {
@@ -36,7 +35,7 @@ const useOptions = () => {
 };
 
 const Checkout = () => {
-  const { user, selectedService: { name, img, _id, description, price } } = useContext(UserContext);
+  const { state: { user, selectedService: { name, img, _id, description, price } } } = useAppContext();
   const stripe = useStripe();
   const elements = useElements();
   const options = useOptions();

src/component/Dashoboard/UserDashboard/BookList/BookList.jsx

@@ -1,16 +1,16 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import axios from 'axios';
 import { Button } from 'react-bootstrap';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import swal from 'sweetalert';
-import { UserContext } from '../../../../App';
 import './BookList.css'
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import ListSkeleton from '../../../Shared/TableOrder/ListSkeleton';
+import { useAppContext } from '../../../../context';
 
 const BookList = () => {
-    const { user } = useContext(UserContext);
+    const { state:{user} } =useAppContext();
     const [bookings, setBookings] = useState([]);
     const [isUpdated, setIsUpdated] = useState(false);
 

src/component/Home/Services/Service.jsx

@@ -1,13 +1,17 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import './Service.css'
 import Fade from 'react-reveal/Fade';
 import './Service.css';
-import { UserContext } from '../../../App';
+import { useAppContext } from '../../../context';
 
 const Service = ({service}) => {
-    const { admin, setSelectedService } = useContext(UserContext)
+    const { state:{ admin}, dispatch } = useAppContext()
     const {name, price, description, img} = service;
+
+    const handleSelectedService = (service) => {
+        dispatch({type: 'SELECTED_SERVICE', payload: service})
+    }    
 
     return (
         <div className="col-md-6 col-lg-4 service">
@@ -22,7 +26,7 @@ const Service = ({service}) => {
                         <p className="servicePrice">${price}</p>
                         <Link className="serviceLink" to={admin ? '/dashboard/orderList' : '/dashboard/book'}>
                             <button className="bookingBtn" 
-                            onClick={() => setSelectedService(service)}
+                            onClick={handleSelectedService}
                             >Book Now</button>
                         </Link>
                     </div>

src/component/Login/LoginModal.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import './LoginModal.css';
 import "firebase/compat/auth";
@@ -9,21 +9,21 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import SignInForm from './SignInForm';
 import SignUpForm from './SignUpForm';
-import { UserContext } from '../../App';
 import toast from 'react-hot-toast';
 import swal from 'sweetalert';
 import { handleSignOut } from './LoginManager';
+import { SET_USER, useAppContext } from '../../context';
 
 const Form = () => {
+  const { dispatch } = useAppContext()
   const [isSignUp, setSignUp] = useState(false);
-  const { setUser } = useContext(UserContext);
 
   const history = useNavigate();
   const location = useLocation();
   let { from } = location.state || { from: { pathname: "/" }};
 
   const handleResponse = (res) => {
-    setUser(res);
+    dispatch({type: SET_USER, payload: res})
     if(!res.error){
       toast.success('Successfully Logged In!');
       history(from);
@@ -39,7 +39,7 @@ const Form = () => {
           if (!ok) {
               handleSignOut()
                 .then(res => {
-                    setUser(res)
+                    dispatch({type: SET_USER, payload: res})
                     toast.error('Logged Out!');
                 })
           }

src/component/Login/PrivateRoute.jsx

@@ -1,10 +1,10 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import {
     Navigate,
 } from "react-router-dom";
-import { UserContext } from '../../App';
+import { useAppContext } from '../../context';
 const PrivateRoute = ({ children,redirectTo  }) => {
-    const { user: { isSignedIn } } = useContext(UserContext)
+    const { state: { user: { isSignedIn } } } = useAppContext()
     return isSignedIn ? children : <Navigate to={redirectTo} />;
 }