From 545d666bf506e61543bf7142882219eb050b7244 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Fri, 15 Jul 2022 15:58:42 +0500
Subject: [PATCH] loader context added

---
 src/App.tsx | 43 +++++++++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2e95fe7..8b7778a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 // Modules
 import { Routes, Route } from "react-router-dom";
-import { useState } from "react";
+import { useState, useMemo } from "react";
+import { LoaderContext } from "./context/LoaderContext";
 
 // Styles
 import "./styles/style.scss";
@@ -22,27 +23,37 @@ import Calendar from "./components/global/Calendar";
 const App = () => {
   // Types
   type drop = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  type loaderType = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 
   // State
   const [dropdown, setDropdown]: drop = useState(false);
+  const [loader, setLoader]: loaderType = useState(false);
+
+  // Stack state into Memo
+  const loaderValue = useMemo(
+    () => ({ loader, setLoader }),
+    [loader, setLoader]
+  );
 
   return (
-    <div className="App">
-      <Nav dropdown={dropdown} setDropdown={setDropdown} />
-      <div className="inner-body">
-        <Routes>
-          <Route path="/" element={<Main />} />
-          <Route path="/news" element={<Events />} />
-          <Route path="/rating" element={<Rating />} />
-          <Route path="/profile" element={<Profile />} />
-          <Route path="/event" element={<EventItem />} />
-          <Route path="/structure" element={<Structure />} />
-          <Route path="/contact" element={<Contacts />} />
-          <Route path="/calendar" element={<Calendar />} />
-        </Routes>
+    <LoaderContext.Provider value={loaderValue}>
+      <div className="App">
+        <Nav dropdown={dropdown} setDropdown={setDropdown} />
+        <div className="inner-body">
+          <Routes>
+            <Route path="/" element={<Main />} />
+            <Route path="/news" element={<Events />} />
+            <Route path="/rating" element={<Rating />} />
+            <Route path="/profile" element={<Profile />} />
+            <Route path="/event" element={<EventItem />} />
+            <Route path="/structure" element={<Structure />} />
+            <Route path="/contact" element={<Contacts />} />
+            <Route path="/calendar" element={<Calendar />} />
+          </Routes>
+        </div>
+        <Footer dropdown={dropdown} setDropdown={setDropdown} />
       </div>
-      <Footer dropdown={dropdown} setDropdown={setDropdown} />
-    </div>
+    </LoaderContext.Provider>
   );
 };