From 095497e9b9513ef9e26d6f7a0284271df0fe077d Mon Sep 17 00:00:00 2001 From: Luiscuatro Date: Thu, 27 Feb 2025 00:34:22 +0100 Subject: [PATCH 1/7] Install react-router-dom for routing+ --- package-lock.json | 64 ++++++++++++++++++++++++++++++++++++++++++++++- package.json | 3 ++- 2 files changed, 65 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index a87405c..66513d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "axios": "^1.7.9", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^7.2.0" }, "devDependencies": { "@eslint/js": "^9.19.0", @@ -1089,6 +1090,11 @@ "@swc/counter": "^0.1.3" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -1480,6 +1486,14 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -3313,6 +3327,44 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-router": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.2.0.tgz", + "integrity": "sha512-fXyqzPgCPZbqhrk7k3hPcCpYIlQ2ugIXDboHUzhJISFVy2DEPsmHgN588MyGmkIOv3jDgNfUE3kJi83L28s/LQ==", + "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.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.2.0.tgz", + "integrity": "sha512-cU7lTxETGtQRQbafJubvZKHEn5izNABxZhBY0Jlzdv0gqQhCPQt2J8aN5ZPjS6mQOXn5NnirWNh+FpE8TTYN0Q==", + "dependencies": { + "react-router": "7.2.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -3485,6 +3537,11 @@ "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==" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -3762,6 +3819,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "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==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 58fee0b..a842efb 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "dependencies": { "axios": "^1.7.9", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^7.2.0" }, "devDependencies": { "@eslint/js": "^9.19.0", From c44d4d14dd86f8a489e85e8e925214845303a019 Mon Sep 17 00:00:00 2001 From: Luiscuatro Date: Thu, 27 Feb 2025 00:43:03 +0100 Subject: [PATCH 2/7] feat: add .jsx components Home, Map, About --- src/About.jsx | 0 src/Home.jsx | 0 src/Map.jsx | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/About.jsx create mode 100644 src/Home.jsx create mode 100644 src/Map.jsx diff --git a/src/About.jsx b/src/About.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/Home.jsx b/src/Home.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/Map.jsx b/src/Map.jsx new file mode 100644 index 0000000..e69de29 From aaabf3e65f972da6c63feb715ade9ef83e06be13 Mon Sep 17 00:00:00 2001 From: Luiscuatro Date: Fri, 28 Feb 2025 11:50:58 +0100 Subject: [PATCH 3/7] feat: add BrowserRouter for navigation and initial AppBar setup with Material-UI --- package-lock.json | 1 + src/App.jsx | 2 + src/layouts/Appbar.jsx | 161 ++++++++++++++++++++++++++++++++++++ src/main.jsx | 5 ++ src/{ => pages}/About.jsx | 0 src/{ => pages}/Home.jsx | 0 src/{ => pages}/Map.jsx | 0 src/{ => pages}/Weather.jsx | 0 8 files changed, 169 insertions(+) create mode 100644 src/layouts/Appbar.jsx rename src/{ => pages}/About.jsx (100%) rename src/{ => pages}/Home.jsx (100%) rename src/{ => pages}/Map.jsx (100%) rename src/{ => pages}/Weather.jsx (100%) diff --git a/package-lock.json b/package-lock.json index 66513d8..18da638 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3354,6 +3354,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.2.0.tgz", "integrity": "sha512-cU7lTxETGtQRQbafJubvZKHEn5izNABxZhBY0Jlzdv0gqQhCPQt2J8aN5ZPjS6mQOXn5NnirWNh+FpE8TTYN0Q==", + "license": "MIT", "dependencies": { "react-router": "7.2.0" }, diff --git a/src/App.jsx b/src/App.jsx index dcce23f..bf3c84f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,3 +9,5 @@ export default function App() { ); } +/* Importar todas las paginas y el layout + diff --git a/src/layouts/Appbar.jsx b/src/layouts/Appbar.jsx new file mode 100644 index 0000000..8454c32 --- /dev/null +++ b/src/layouts/Appbar.jsx @@ -0,0 +1,161 @@ +import * as React from 'react'; +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; +import Toolbar from '@mui/material/Toolbar'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Menu from '@mui/material/Menu'; +import MenuIcon from '@mui/icons-material/Menu'; +import Container from '@mui/material/Container'; +import Avatar from '@mui/material/Avatar'; +import Button from '@mui/material/Button'; +import Tooltip from '@mui/material/Tooltip'; +import MenuItem from '@mui/material/MenuItem'; +import AdbIcon from '@mui/icons-material/Adb'; + +const pages = ['Home', 'Weather', 'Map', 'About']; +const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; + +function ResponsiveAppBar() { + const [anchorElNav, setAnchorElNav] = React.useState(null); + const [anchorElUser, setAnchorElUser] = React.useState(null); + + const handleOpenNavMenu = (event) => { + setAnchorElNav(event.currentTarget); + }; + const handleOpenUserMenu = (event) => { + setAnchorElUser(event.currentTarget); + }; + + const handleCloseNavMenu = () => { + setAnchorElNav(null); + }; + + const handleCloseUserMenu = () => { + setAnchorElUser(null); + }; + + return ( + + + + + + WeatherApp + + + + + + + + {pages.map((page) => ( + + + + ))} + + + + + WeatherApp + + + {pages.map((page) => ( + + ))} + + + + + + + + + {settings.map((setting) => ( + + {setting} + + ))} + + + + + + ); +} +export default ResponsiveAppBar; + +// Linea 89, Link to = '/${page.toLowerCase()}' \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index b9a1a6d..01c97b8 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,9 +2,14 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' +import { BrowserRouter } from 'react-router-dom' createRoot(document.getElementById('root')).render( + + , ) + + diff --git a/src/About.jsx b/src/pages/About.jsx similarity index 100% rename from src/About.jsx rename to src/pages/About.jsx diff --git a/src/Home.jsx b/src/pages/Home.jsx similarity index 100% rename from src/Home.jsx rename to src/pages/Home.jsx diff --git a/src/Map.jsx b/src/pages/Map.jsx similarity index 100% rename from src/Map.jsx rename to src/pages/Map.jsx diff --git a/src/Weather.jsx b/src/pages/Weather.jsx similarity index 100% rename from src/Weather.jsx rename to src/pages/Weather.jsx From 7a51c653e2a041392a3c3b1534fb41190b1c701d Mon Sep 17 00:00:00 2001 From: Luiscuatro Date: Fri, 28 Feb 2025 11:55:54 +0100 Subject: [PATCH 4/7] feat: add basic routing with React Router --- src/App.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index bf3c84f..c51d53b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,16 @@ +import { Routes } from 'react-router-dom'; import Weather from './Weather' export default function App() { return ( - <> - - + + } /> + } /> + } /> + } /> + ); } -/* Importar todas las paginas y el layout From 7f99d8ad76faa5bc1efae28906bafacfdf1bae59 Mon Sep 17 00:00:00 2001 From: Luiscuatro Date: Fri, 28 Feb 2025 12:11:53 +0100 Subject: [PATCH 5/7] feat: add navigation links to AppBar with React Router --- src/App.jsx | 3 ++- src/layouts/Appbar.jsx | 9 ++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index c51d53b..c03ed4b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import { Routes } from 'react-router-dom'; -import Weather from './Weather' +import Weather from './pages/Weather' + export default function App() { diff --git a/src/layouts/Appbar.jsx b/src/layouts/Appbar.jsx index 8454c32..9f11db0 100644 --- a/src/layouts/Appbar.jsx +++ b/src/layouts/Appbar.jsx @@ -13,6 +13,9 @@ import Tooltip from '@mui/material/Tooltip'; import MenuItem from '@mui/material/MenuItem'; import AdbIcon from '@mui/icons-material/Adb'; +import { Link } from 'react-router-dom' + + const pages = ['Home', 'Weather', 'Map', 'About']; const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; @@ -87,7 +90,7 @@ function ResponsiveAppBar() { > {pages.map((page) => ( - + {page} ))} @@ -115,6 +118,8 @@ function ResponsiveAppBar() { {pages.map((page) => (