Skip to content

Commit

Permalink
Merge pull request #470 from MeetDOD/issue-469
Browse files Browse the repository at this point in the history 
Feat: Added scroll down progress in style share successfully issue 469
  • Loading branch information
@VaibhavArora314
VaibhavArora314 authored Jul 21, 2024
2 parents fc6d000 + 407e29f commit 0d32879
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 106 deletions.
215 changes: 109 additions & 106 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import Contributors from "./pages/Contributors";
import userBlock from "./hooks/userBlock";
import Blocked from "./pages/Blocked";
import GoogleTranslate from "./components/GoogleTranslate";
import ProgressScrollDown from "./components/ProgressScrollDown";
// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:3001/";

Expand All @@ -45,119 +46,121 @@ 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] pt-20">
<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] pt-20">
<div className="ml-2 fixed z-40">
<GoogleTranslate/>
</div>
<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 />
<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>
);
}
Expand Down
33 changes: 33 additions & 0 deletions frontend/src/components/ProgressScrollDown.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 0d32879

Please sign in to comment.