From fb2727f3649f231154128a5113ba22dcb21c89f7 Mon Sep 17 00:00:00 2001
From: meet <dodiyameet041@gmail.com>
Date: Sat, 20 Jul 2024 15:24:39 +0530
Subject: [PATCH] Added progress scroll bar

---
 frontend/src/App.tsx                          | 215 +++++++++---------
 .../src/components/ProgressScrollDown.tsx     |  33 +++
 2 files changed, 142 insertions(+), 106 deletions(-)
 create mode 100644 frontend/src/components/ProgressScrollDown.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 82cde962..ce3d02a1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -30,6 +30,7 @@ import CodeEditor from "./pages/CodeEditor";
 import Contributors from "./pages/Contributors";
 import userBlock from "./hooks/userBlock";
 import Blocked from "./pages/Blocked";
+import ProgressScrollDown from "./components/ProgressScrollDown";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -44,116 +45,118 @@ function App() {
   if (isBlocked) {
     return <Blocked />;
   }
+
   return (
     <BrowserRouter>
-        <React.Suspense fallback={<Loader />}>
-          <GoTop/>
-          <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000435', color: theme === 'light' ? '#000435' : '#fff'}}>
-            <Navbar theme={theme} toggleTheme={toggleTheme}  />
-            <ScrollToTopWhenRouteChanges/>
-            <div className="min-h-[80vh] mt-12 pt-12">
-              <Routes>
-                <Route path="/app" element={<Home />} />
-                <Route path="/app/posts/:id" element={<Post />} />
-                <Route path="/app/posts" element={<Posts />} />
-                <Route path="/app/contributors" element={<Contributors/>}/>
-                <Route path="/app/profile/:id" element={<ShowProfile/>} />
-                <Route
-                  path="/app/signin"
-                  element={
-                    <NonAuthenticatedRoute>
-                      <LoginForm defaultFormType="Signin" />
-                    </NonAuthenticatedRoute>
-                  }
-                />
-                <Route
-                  path="/app/signup"
-                  element={
-                    <NonAuthenticatedRoute>
-                      <LoginForm defaultFormType="SignUp" />
-                    </NonAuthenticatedRoute>
-                  }
-                />
-                <Route
-                  path="/app/new-post"
-                  element={
-                    <AuthenticatedRoute>
-                      <NewPost  />
-                    </AuthenticatedRoute>
-                  }
-                />
-                <Route
-                  path="/app/posts/edit/:id"
-                  element={
-                    <AuthenticatedRoute>
-                      <EditPost />
-                    </AuthenticatedRoute>
-                  }
-                />
-                <Route
-                  path="/app/profile"
-                  element={
-                    <AuthenticatedRoute>
-                      <Profile  />
-                    </AuthenticatedRoute>
-                  }
-                />
-                <Route
-                  path="/app/fav"
-                  element={
-                    <AuthenticatedRoute>
-                      <Favorite />
-                    </AuthenticatedRoute>
-                  }
-                />
-                <Route
-                  path="/app/customize-with-ai/:id"
-                  element={
-                    <AuthenticatedRoute>
-                      <CustomizeWithAi />
-                    </AuthenticatedRoute>
-                  }
-                />
-                <Route
-                  path="/app/leaderboard"
-                  element={
-                    <LeaderBoard   />
-                  }
-                />
-                <Route
-                  path="/app/code"
-                  element={
-                    <AuthenticatedRoute>
-                      <CodeEditor />
-                    </AuthenticatedRoute>
-                  }
-                />
-                <Route
-                  path="/app/contact-us"
-                  element={
-                    <ContactUs />
-                  }
-                />
-                <Route
-                  path="/app/about"
-                  element={
-                    <About />
-                  }
-                />
-                <Route
-                  path="/app/policy"
-                  element={
-                    <Policy />
-                  }
-                />
-                <Route path="*" element={<PageNotFound/>} />
-              </Routes>
-            </div>
-            <Footer />
+      <React.Suspense fallback={<Loader />}>
+        <GoTop />
+        <ProgressScrollDown />
+        <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000435', color: theme === 'light' ? '#000435' : '#fff'}}>
+          <Navbar theme={theme} toggleTheme={toggleTheme} />
+          <ScrollToTopWhenRouteChanges />
+          <div className="min-h-[80vh] mt-12 pt-12">
+            <Routes>
+              <Route path="/app" element={<Home />} />
+              <Route path="/app/posts/:id" element={<Post />} />
+              <Route path="/app/posts" element={<Posts />} />
+              <Route path="/app/contributors" element={<Contributors />} />
+              <Route path="/app/profile/:id" element={<ShowProfile />} />
+              <Route
+                path="/app/signin"
+                element={
+                  <NonAuthenticatedRoute>
+                    <LoginForm defaultFormType="Signin" />
+                  </NonAuthenticatedRoute>
+                }
+              />
+              <Route
+                path="/app/signup"
+                element={
+                  <NonAuthenticatedRoute>
+                    <LoginForm defaultFormType="SignUp" />
+                  </NonAuthenticatedRoute>
+                }
+              />
+              <Route
+                path="/app/new-post"
+                element={
+                  <AuthenticatedRoute>
+                    <NewPost />
+                  </AuthenticatedRoute>
+                }
+              />
+              <Route
+                path="/app/posts/edit/:id"
+                element={
+                  <AuthenticatedRoute>
+                    <EditPost />
+                  </AuthenticatedRoute>
+                }
+              />
+              <Route
+                path="/app/profile"
+                element={
+                  <AuthenticatedRoute>
+                    <Profile />
+                  </AuthenticatedRoute>
+                }
+              />
+              <Route
+                path="/app/fav"
+                element={
+                  <AuthenticatedRoute>
+                    <Favorite />
+                  </AuthenticatedRoute>
+                }
+              />
+              <Route
+                path="/app/customize-with-ai/:id"
+                element={
+                  <AuthenticatedRoute>
+                    <CustomizeWithAi />
+                  </AuthenticatedRoute>
+                }
+              />
+              <Route
+                path="/app/leaderboard"
+                element={
+                  <LeaderBoard />
+                }
+              />
+              <Route
+                path="/app/code"
+                element={
+                  <AuthenticatedRoute>
+                    <CodeEditor />
+                  </AuthenticatedRoute>
+                }
+              />
+              <Route
+                path="/app/contact-us"
+                element={
+                  <ContactUs />
+                }
+              />
+              <Route
+                path="/app/about"
+                element={
+                  <About />
+                }
+              />
+              <Route
+                path="/app/policy"
+                element={
+                  <Policy />
+                }
+              />
+              <Route path="*" element={<PageNotFound />} />
+            </Routes>
           </div>
-        </React.Suspense>
+          <Footer />
+        </div>
+      </React.Suspense>
       <Tooltip id="my-tooltip" place='right' style={{backgroundColor:"#00AAFF",color:'#fff',fontSize:'15px'}} />
-      <Toaster/>
+      <Toaster />
     </BrowserRouter>
   );
 }
diff --git a/frontend/src/components/ProgressScrollDown.tsx b/frontend/src/components/ProgressScrollDown.tsx
new file mode 100644
index 00000000..7744c811
--- /dev/null
+++ b/frontend/src/components/ProgressScrollDown.tsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+
+const ProgressScrollDown: React.FC = () => {
+  const [scrollProgress, setScrollProgress] = useState(0);
+
+  const handleScroll = () => {
+    const totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    const scrollTop = window.scrollY;
+    const progress = (scrollTop / totalHeight) * 100;
+    setScrollProgress(progress);
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <div style={{
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: `${scrollProgress}%`,
+      height: "6px",
+      backgroundColor: "rgb(14 165 233)",
+      zIndex: 100,
+    }} />
+  );
+};
+
+export default ProgressScrollDown;