From 64c877e74f58349fde0717721c6fd151184eea34 Mon Sep 17 00:00:00 2001 From: Kevin Orta Date: Thu, 10 Apr 2025 14:05:34 -0400 Subject: [PATCH 1/3] feat: Add React Router --- web/package-lock.json | 70 ++++++++++++++++++++++++++++++++++++++- web/package.json | 3 +- web/src/App.tsx | 39 +++------------------- web/src/main.tsx | 7 ++-- web/src/pages/AboutUs.tsx | 20 +++++++++++ web/src/router.tsx | 15 +++++++++ 6 files changed, 114 insertions(+), 40 deletions(-) create mode 100644 web/src/pages/AboutUs.tsx create mode 100644 web/src/router.tsx diff --git a/web/package-lock.json b/web/package-lock.json index 4d6aa63..5c2a6d6 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.1", "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^7.5.0" }, "devDependencies": { "@eslint/js": "^9.21.0", @@ -1381,6 +1382,12 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz", @@ -1863,6 +1870,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2863,6 +2879,46 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.0.tgz", + "integrity": "sha512-estOHrRlDMKdlQa6Mj32gIks4J+AxNsYoE0DbTTxiMy2mPzZuWSDU+N85/r1IlNR7kGfznF3VCUlvc5IUO+B9g==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.0.tgz", + "integrity": "sha512-fFhGFCULy4vIseTtH5PNcY/VvDJK5gvOWcwJVHQp8JQcWVr85ENhJ3UpuF/zP1tQOIFYNRJHzXtyhU1Bdgw0RA==", + "license": "MIT", + "dependencies": { + "react-router": "7.5.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2971,6 +3027,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3056,6 +3118,12 @@ "typescript": ">=4.8.4" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/web/package.json b/web/package.json index addbdf9..a4cb6f8 100644 --- a/web/package.json +++ b/web/package.json @@ -12,7 +12,8 @@ }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^7.5.0" }, "devDependencies": { "@eslint/js": "^9.21.0", diff --git a/web/src/App.tsx b/web/src/App.tsx index 32a02e5..5943d21 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,43 +1,12 @@ import { useEffect, useState } from "react"; -import reactLogo from "./assets/react.svg"; -import viteLogo from "/vite.svg"; -import "./App.css"; -function App() { - const [count, setCount] = useState(0); - const [apiData, setApiData] = useState(""); - - useEffect(() => { - fetch(import.meta.env.VITE_BASE_API_URL + "/api/test") - .then((res) => res.json()) - .then((body) => setApiData(body.message)); - }); +import { Outlet } from "react-router-dom"; +function App() { return ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Message from api: {apiData} -

-

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+ {/* This is where the Navbar and other components will be rendered */} + {/* This is where the child routes will be rendered */} ); } diff --git a/web/src/main.tsx b/web/src/main.tsx index eff7ccc..e5017fb 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -1,10 +1,11 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./index.css"; -import App from "./App.tsx"; +import { RouterProvider } from "react-router-dom"; +import { router } from "./router.js"; createRoot(document.getElementById("root")!).render( - - , + + ); diff --git a/web/src/pages/AboutUs.tsx b/web/src/pages/AboutUs.tsx new file mode 100644 index 0000000..e2d0191 --- /dev/null +++ b/web/src/pages/AboutUs.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const AboutUs = () => { + return ( +
+

About Us

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+
+ ); +}; + +export default AboutUs; diff --git a/web/src/router.tsx b/web/src/router.tsx new file mode 100644 index 0000000..641803a --- /dev/null +++ b/web/src/router.tsx @@ -0,0 +1,15 @@ +import { createBrowserRouter } from "react-router-dom"; +import App from "./App.tsx"; + +import AboutUs from "./pages/AboutUs.tsx"; +export const router = createBrowserRouter([ + { + path: "/", + element: , + /* This is where the LandingPage and other pages will be rendered */ + children: [ + // { path: "/", element: }, + { path: "about", element: }, + ], + }, +]); From 16818270047cf5951390494a456e0dd9bb5653ff Mon Sep 17 00:00:00 2001 From: Kevin Orta Date: Thu, 24 Apr 2025 20:24:09 -0400 Subject: [PATCH 2/3] merged from app.tsx from main --- web/src/App.tsx | 70 ++++++++++++++++++++++++------------------------- 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 6644800..355b998 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,43 +1,41 @@ import { useEffect, useState } from "react"; -import reactLogo from "./assets/react.svg"; -import viteLogo from "/vite.svg"; -import "./App.css"; -function App() { - const [count, setCount] = useState(0); - const [apiData, setApiData] = useState(""); - - useEffect(() => { - fetch(import.meta.env.VITE_BASE_API_URL + "/api/test") - .then((res) => res.json()) - .then((body) => setApiData(body.message)); - }); +import { Outlet } from "react-router-dom"; +import SideNav from "./components/SideNav"; +import PopularActivities from "./components/PopularActivities"; +import WeeklySchedule from "./components/WeeklySchedule"; +import RightContent from "./components/RightContent"; +import PersonalBests from "./components/PersonalBests"; +// function App() { +// return ( +// <> +// {/* This is where the Navbar and other components will be rendered */} +// {/* This is where the child routes will be rendered */} +// +// ======= +export default function App() { return ( - <> - -

Vite + React

-
- -

- Message from api: {apiData} -

-

- Edit src/App.tsx and save to test HMR -

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
-

- Click on the Vite and React logos to learn more -

- +
); } From ee52a6a980f01febc1b254ac19c27be5a0fa4b51 Mon Sep 17 00:00:00 2001 From: Kevin Orta Date: Thu, 24 Apr 2025 20:53:44 -0400 Subject: [PATCH 3/3] integrate existing frontend template with router --- web/src/App.tsx | 20 +++----------------- web/src/components/SideNav.tsx | 21 ++++++++++++++------- web/src/pages/Home.tsx | 25 +++++++++++++++++++++++++ web/src/router.tsx | 5 +++-- 4 files changed, 45 insertions(+), 26 deletions(-) create mode 100644 web/src/pages/Home.tsx diff --git a/web/src/App.tsx b/web/src/App.tsx index 355b998..ef316ba 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,18 +1,13 @@ import { useEffect, useState } from "react"; - import { Outlet } from "react-router-dom"; import SideNav from "./components/SideNav"; -import PopularActivities from "./components/PopularActivities"; -import WeeklySchedule from "./components/WeeklySchedule"; import RightContent from "./components/RightContent"; -import PersonalBests from "./components/PersonalBests"; // function App() { // return ( // <> // {/* This is where the Navbar and other components will be rendered */} -// {/* This is where the child routes will be rendered */} +// // -// ======= export default function App() { return ( @@ -21,17 +16,8 @@ export default function App() {
-
- -
-
- -
-
- -
-
-
+ {" "} + {/* This is where the Content (child routes) will be rendered */}
diff --git a/web/src/components/SideNav.tsx b/web/src/components/SideNav.tsx index 455defe..4ca5348 100644 --- a/web/src/components/SideNav.tsx +++ b/web/src/components/SideNav.tsx @@ -32,54 +32,61 @@ const SideNav: React.FC = () => { TTP Code App
Home Profile Schedule Activities Settings Quiz Leetcode + + About Us + {isOpen && ( diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx new file mode 100644 index 0000000..b1e0524 --- /dev/null +++ b/web/src/pages/Home.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import PopularActivities from "../components/PopularActivities"; +import WeeklySchedule from "../components/WeeklySchedule"; + +import PersonalBests from "../components/PersonalBests"; + +const Home = () => { + return ( +
+
+ +
+
+ +
+
+ +
+
+
+
+ ); +}; + +export default Home; diff --git a/web/src/router.tsx b/web/src/router.tsx index 641803a..2ec9500 100644 --- a/web/src/router.tsx +++ b/web/src/router.tsx @@ -2,14 +2,15 @@ import { createBrowserRouter } from "react-router-dom"; import App from "./App.tsx"; import AboutUs from "./pages/AboutUs.tsx"; +import Home from "./pages/Home.tsx"; export const router = createBrowserRouter([ { path: "/", element: , - /* This is where the LandingPage and other pages will be rendered */ + children: [ - // { path: "/", element: }, { path: "about", element: }, + { path: "/", element: }, ], }, ]);