fixed use context error

src/App.js

@@ -4,7 +4,7 @@ import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
 
 import SiteRoutes from './SiteRoutes';
 import LogoutModal from './components/layouts/LogoutModal';
-import { generalLayoutContext } from './context/GeneralLayoutContext';
+import { GeneralLayoutContext } from './context/GeneralLayoutContext';
 
 import './App.css';
 
@@ -24,7 +24,7 @@ function App() {
 
   const {pathname} = useLocation()
 
-  const {logoutModal, setLogoutModal} = generalLayoutContext()
+  const {logoutModal, setLogoutModal} = GeneralLayoutContext()
 
   useEffect(()=>{
     window.scrollTo(0,0)

src/components/layouts/DashboardHeader.jsx

@@ -1,7 +1,7 @@
 import { LuSunDim } from "react-icons/lu";
 import { IoMdSunny } from "react-icons/io";
 
-import { generalLayoutContext } from "../../context/GeneralLayoutContext"
+import { GeneralLayoutContext } from "../../context/GeneralLayoutContext"
 
 import UserAvatar from '../../assets/user_avatar.jpg'
 import HandBurger from "./HandBurger"
@@ -15,7 +15,7 @@ export default function DashboardHeader() {
 
     // let {pathname} = useLocation()
 
-    const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
+    const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = GeneralLayoutContext()
 
   return (
     <>

src/components/layouts/DashboardLayout.jsx

@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router-dom'
 
 import DashboardHeader from './DashboardHeader'
-import { generalLayoutContext } from '../../context/GeneralLayoutContext'
+import { GeneralLayoutContext } from '../../context/GeneralLayoutContext'
 import DashboardAside from './aside/DashboardAside'
 import RightAsideBar from './rightaside/RightAsideBar'
 
@@ -9,7 +9,7 @@ export default function DashboardLayout() {
 
     // let {pathname} = useLocation()
 
-  const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
+  const {showAsideDrawer, setShowAsideDrawer} = GeneralLayoutContext()
   
   return (
     <div className='w-full flex gap-10 relative m-auto h-screen overflow-x-hidden overflow-y-auto bg-white-body dark:bg-black-body p-8 pt-0 lg:p-10'>

src/components/layouts/_DashboardLayout.jsx

@@ -4,7 +4,6 @@ import { FaArrowRight, FaArrowLeft } from "react-icons/fa6";
 
 import DashboardAside from './aside/DashboardAside'
 import DashboardHeader from './DashboardHeader'
-import { generalLayoutContext } from '../../context/GeneralLayoutContext'
 
 export default function DashboardLayout() {
     const [shrinkAside, setShrinkAside] = useState(false)

src/components/layouts/aside/AsideLink.jsx

@@ -1,10 +1,10 @@
 import { Link, useLocation } from "react-router-dom"
 import Icons from "../../Icons"
-import { generalLayoutContext } from "../../../context/GeneralLayoutContext"
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext"
 
 export default function AsideLink({name, to, icon}) {
 
-    const {shrinkAside, setShowAsideDrawer} = generalLayoutContext()
+    const {shrinkAside, setShowAsideDrawer} = GeneralLayoutContext()
 
   const {pathname} = useLocation()
 

src/components/layouts/aside/AsideLinkWithSubLinks.jsx

@@ -2,12 +2,12 @@ import { useState } from "react";
 import { useLocation } from "react-router-dom"
 import { FaCaretDown } from "react-icons/fa";
 import Icons from "../../Icons";
-import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
 
 
 export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}) {
 
-    const {shrinkAside} = generalLayoutContext()
+    const {shrinkAside} = GeneralLayoutContext()
 
   const {pathname} = useLocation()
 

src/components/layouts/aside/DashboardAside.jsx

@@ -5,7 +5,7 @@ import MainBtn from "../../MainBtn";
 import AsideLink from "./AsideLink";
 import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
 import { useSelector } from "react-redux";
-import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
 import { TbLogout2 } from "react-icons/tb";
 import UserAvatar from '../../../assets/user_avatar.jpg'
 import Icons from "../../Icons";
@@ -14,7 +14,7 @@ export default function DashboardAside() {
 
     const {pathname} = useLocation()
 
-    const {setLogoutModal, activeMenu, handleActiveMenu} = generalLayoutContext()
+    const {setLogoutModal, activeMenu, handleActiveMenu} = GeneralLayoutContext()
 
     const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
     const {role}= userDetails

src/components/layouts/aside/_DashboardAside.jsx

@@ -6,7 +6,7 @@ import MainBtn from "../../MainBtn";
 import AsideLink from "./AsideLink";
 import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
 import { useSelector } from "react-redux";
-import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
 import { TbLogout2 } from "react-icons/tb";
 
 
@@ -14,7 +14,7 @@ export default function DashboardAside({shrinkAside=false}) {
 
     const {pathname} = useLocation()
 
-    const {setLogoutModal} = generalLayoutContext()
+    const {setLogoutModal} = GeneralLayoutContext()
 
     const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
     const {role}= userDetails

src/components/layouts/aside/__DashboardAside.jsx

@@ -6,7 +6,7 @@ import MainBtn from "../../MainBtn";
 import AsideLink from "./AsideLink";
 import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
 import { useSelector } from "react-redux";
-import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
 import { TbLogout2 } from "react-icons/tb";
 
 
@@ -14,7 +14,7 @@ export default function DashboardAside({shrinkAside=false}) {
 
     const {pathname} = useLocation()
 
-    const {setLogoutModal} = generalLayoutContext()
+    const {setLogoutModal} = GeneralLayoutContext()
 
     const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
     const {role}= userDetails

src/context/GeneralLayoutContext.jsx

@@ -108,6 +108,6 @@ export default function GeneralLayoutContextInt({children}) {
 }
 
 
-export const generalLayoutContext = () => {
+export const GeneralLayoutContext = () => {
   return useContext(GeneralContextProviderInt)
 }

src/index.js

@@ -6,7 +6,7 @@ import { Provider } from "react-redux";
 import './index.css';
 import App from './App';
 import store from './store/store.js'
-import GeneralLayoutContext from './context/GeneralLayoutContext.jsx';
+import GeneralLayoutContextInt from './context/GeneralLayoutContext.jsx';
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -14,9 +14,9 @@ root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Provider store={store}>
-        <GeneralLayoutContext>
+        <GeneralLayoutContextInt>
           <App />
-        </GeneralLayoutContext>
+        </GeneralLayoutContextInt>
       </Provider>
     </BrowserRouter>
   </React.StrictMode>