From d4fb131cec3377a072c6f2c3f8786f332ce97a67 Mon Sep 17 00:00:00 2001 From: iyanfdezz Date: Thu, 29 Feb 2024 23:08:12 +0100 Subject: [PATCH 01/10] Added UI for Stats service (not working) --- package-lock.json | 91 +++++++++++++++++++++++++++++++ package.json | 1 + users/authservice/auth-service.js | 4 +- webapp/src/App.js | 2 + webapp/src/components/Nav/Nav.js | 1 + webapp/src/components/Stats.js | 19 +++++++ webapp/src/pages/Stats/Stats.css | 0 webapp/src/pages/Stats/Stats.js | 72 ++++++++++++++++++++++++ 8 files changed, 188 insertions(+), 2 deletions(-) create mode 100644 webapp/src/components/Stats.js create mode 100644 webapp/src/pages/Stats/Stats.css create mode 100644 webapp/src/pages/Stats/Stats.js diff --git a/package-lock.json b/package-lock.json index 0add4cee..9f1a24b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "axios": "^1.6.7", "cross-fetch": "^4.0.0", "date-fns": "^3.3.1", "react-auth-kit": "^3.0.2-alpha.19" @@ -169,6 +170,21 @@ "tslib": "^2.4.0" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", + "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "dependencies": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -207,6 +223,17 @@ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "peer": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/cross-fetch": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz", @@ -224,6 +251,46 @@ "url": "https://github.com/sponsors/kossnocorp" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", @@ -256,6 +323,25 @@ "loose-envify": "cli.js" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -373,6 +459,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", diff --git a/package.json b/package.json index eed5c7aa..7b2b2a7d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "axios": "^1.6.7", "cross-fetch": "^4.0.0", "date-fns": "^3.3.1", "react-auth-kit": "^3.0.2-alpha.19" diff --git a/users/authservice/auth-service.js b/users/authservice/auth-service.js index 20943611..1d036ee2 100644 --- a/users/authservice/auth-service.js +++ b/users/authservice/auth-service.js @@ -39,9 +39,9 @@ app.post('/login', async (req, res) => { // Generate a JWT token const token = jwt.sign({ userId: user._id }, 'your-secret-key', { expiresIn: '1h' }); //Almacenamos el token del usuario para su autentificación - sessionStorage.setItem('token', token); + //sessionStorage.setItem('token', token); - sessionStorage.setItem('username', username); + //sessionStorage.setItem('username', username); // Respond with the token and user information res.json({ token: token, username: username, createdAt: user.createdAt }); diff --git a/webapp/src/App.js b/webapp/src/App.js index b65ff3d2..a22b7098 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import Authenticate from './pages/Authenticate/Authenticate.js'; import Home from './pages/Home/Home.js'; +import Stats from './pages/Stats/Stats.js'; import Clasico from './pages/Clasico/Clasico.js'; import WrongRoute from './pages/WrongRoute/WrongRoute.js'; import './App.css'; @@ -19,6 +20,7 @@ function App() { {/** Rutas privadas */} } /> } /> + } /> {/* Ruta por defecto */} } /> diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js index 95d8f951..59ec3610 100644 --- a/webapp/src/components/Nav/Nav.js +++ b/webapp/src/components/Nav/Nav.js @@ -9,6 +9,7 @@ const Nav = () => {
  • Home
  • Sobre nosotros
    • +
  • Stats
); diff --git a/webapp/src/components/Stats.js b/webapp/src/components/Stats.js new file mode 100644 index 00000000..2592721b --- /dev/null +++ b/webapp/src/components/Stats.js @@ -0,0 +1,19 @@ +const axios = require('axios'); + +// Definir la función para realizar la solicitud +async function fetchStats() { + const url = 'http://localhost:8004/stats'; + const params = { + user: 'user' + }; + + try { + const response = await axios.get(url, { params }); + return response.data; + } catch (error) { + throw new Error('Error al obtener las estadísticas:', error); + } +} + +// Exportar la función +module.exports = { fetchStats }; \ No newline at end of file diff --git a/webapp/src/pages/Stats/Stats.css b/webapp/src/pages/Stats/Stats.css new file mode 100644 index 00000000..e69de29b diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js new file mode 100644 index 00000000..3b90a540 --- /dev/null +++ b/webapp/src/pages/Stats/Stats.js @@ -0,0 +1,72 @@ +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; + +import Nav from '../../components/Nav/Nav.js'; +import Footer from '../../components/Footer/Footer.js'; + +const Stats = () => { + const [username, setUsername] = useState(''); + const [stats, setStats] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchStats = async () => { + try { + const response = await axios.get(`http://localhost:8004/stats?user=${username}`); + setStats(response.data); + setIsLoading(false); + } catch (error) { + setError(error.message); + setIsLoading(false); + } + }; + + if (username !== '') { + fetchStats(); + } + }, [username]); + + const handleUsernameChange = (event) => { + setUsername(event.target.value); + }; + + if (isLoading) { + return
Cargando...
; + } + + if (error) { + return
Error: {error}
; + } + + return ( + <> +