Feat(Frontend): Added Routing

frontend/src/App.tsx

@@ -19,6 +19,9 @@ import { Helmet, HelmetProvider } from "react-helmet-async";
 // Authentication Context: Check if user is logged in or not
 import { AuthContextProvider } from "./AuthContext";
 
+// React router
+import Router from "./Router";
+
 function App() {
   return (
     <AuthContextProvider>
@@ -27,7 +30,9 @@ function App() {
           <title>Todo</title>
         </Helmet>
         <ThemeProvider>
-          <Container maxWidth="md"></Container>
+          <Container maxWidth="md">
+            <Router />
+          </Container>
         </ThemeProvider>
       </HelmetProvider>
     </AuthContextProvider>

frontend/src/Router.tsx

@@ -0,0 +1,9 @@
+import { BrowserRouter, Routes } from "react-router-dom";
+
+const Router = () => {
+  <BrowserRouter>
+    <Routes>{}</Routes>
+  </BrowserRouter>;
+};
+
+export default Router;

frontend/src/components/RequireAuth.tsx

@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+import { AuthContext } from "src/AuthContext";
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const RequireAuth = ({ children }: IProps) => {
+  const { authenticated } = useContext(AuthContext);
+
+  const location = useLocation();
+
+  if (authenticated) {
+    return <>{children}</>;
+  } else {
+    // re-route user back to login page if not logged in
+    return <Navigate state={{ from: location }} to="/login/" />;
+  }
+};
+
+export default RequireAuth;

frontend/src/components/ScrollToTop.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router";
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  // pathname changes => scroll to top
+  // scrolling only on navigation
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;

frontend/src/setupTests.ts

@@ -3,3 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
+
+window.scrollTo = (x, y) => {
+  document.documentElement.scrollTop = y;
+};