From 6514f290d7e56f6cd722c24138417433c4626721 Mon Sep 17 00:00:00 2001 From: phoenix Date: Sun, 14 Dec 2025 21:16:05 +0000 Subject: [PATCH] tsk-3: Dashboard (#7) Closes #3 Reviewed-on: https://git.kundeng.us/phoenix/textsender/pulls/7 Co-authored-by: phoenix Co-committed-by: phoenix --- package-lock.json | 24 +-- package.json | 4 +- src/App.jsx | 6 +- src/components/Dashboard.css | 213 +++++++++++++++++++++++++++ src/components/Dashboard.jsx | 100 +++++++++++++ src/components/Login.jsx | 7 +- src/components/PhoneVerification.jsx | 1 + src/components/Register.jsx | 4 +- 8 files changed, 341 insertions(+), 18 deletions(-) create mode 100644 src/components/Dashboard.css create mode 100644 src/components/Dashboard.jsx diff --git a/package-lock.json b/package-lock.json index 60d0996..b30c02e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,8 @@ "name": "textsender", "version": "0.0.0", "dependencies": { - "react": "^19.1.0", - "react-dom": "^19.1.0", + "react": "^19.2.3", + "react-dom": "^19.2.3", "react-router-dom": "^7.10.1" }, "devDependencies": { @@ -870,9 +870,9 @@ } }, "node_modules/@eslint/js": { - "version": "9.39.1", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz", - "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==", + "version": "9.39.2", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz", + "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==", "dev": true, "license": "MIT", "engines": { @@ -1766,9 +1766,9 @@ } }, "node_modules/eslint": { - "version": "9.39.1", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz", - "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", + "version": "9.39.2", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz", + "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", "peer": true, @@ -1779,7 +1779,7 @@ "@eslint/config-helpers": "^0.4.2", "@eslint/core": "^0.17.0", "@eslint/eslintrc": "^3.3.1", - "@eslint/js": "9.39.1", + "@eslint/js": "9.39.2", "@eslint/plugin-kit": "^0.4.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", @@ -1840,9 +1840,9 @@ } }, "node_modules/eslint-plugin-react-refresh": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.24.tgz", - "integrity": "sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==", + "version": "0.4.25", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.25.tgz", + "integrity": "sha512-dRUD2LOdEqI4zXHqbQ442blQAzdSuShAaiSq5Vtyy6LT08YUf0oOjBDo4VPx0dCPgiPWh1WB4dtbLOd0kOlDPQ==", "dev": true, "license": "MIT", "peerDependencies": { diff --git a/package.json b/package.json index 6037aaa..db92c00 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "format:check": "npx prettier --check ." }, "dependencies": { - "react": "^19.1.0", - "react-dom": "^19.1.0", + "react": "^19.2.3", + "react-dom": "^19.2.3", "react-router-dom": "^7.10.1" }, "devDependencies": { diff --git a/src/App.jsx b/src/App.jsx index 1f2f16e..5b6814b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,8 +4,9 @@ import { Route, Navigate, } from 'react-router-dom'; -import Register from './components/Register'; +import Dashboard from './components/Dashboard'; import Login from './components/Login'; +import Register from './components/Register'; import './App.css'; function App() { @@ -13,8 +14,9 @@ function App() { } /> - } /> + } /> } /> + } /> {/* Add other routes as needed */} { + const [activeView, setActiveView] = useState('dashboard'); + + const handleButtonClick = (buttonNumber) => { + console.log(`Button ${buttonNumber} clicked`); + // Add your logic here for each button + }; + + const handleNavClick = (view) => { + setActiveView(view); + }; + + return ( +
+ {/* Navbar */} + + + {/* Main Content */} +
+
+

Dashboard

+ +
+ + + + + +
+ + {/* Content based on active view */} +
+ {activeView === 'dashboard' && ( +

+ Dashboard view is active. Select one of the buttons above. +

+ )} + {activeView === 'settings' && ( +

+ Settings view - Configuration options will go here. +

+ )} + {activeView === 'profile' && ( +

+ Profile view - User information will go here. +

+ )} +
+
+
+
+ ); +}; + +export default Dashboard; diff --git a/src/components/Login.jsx b/src/components/Login.jsx index 678e43c..727e264 100644 --- a/src/components/Login.jsx +++ b/src/components/Login.jsx @@ -1,10 +1,14 @@ import { useState } from 'react'; -import './Login.css'; +import { useNavigate } from 'react-router-dom'; + import { AUTH_API_BASE_URL } from '../constants/api'; import { DATA_KEY_ACCESS_TOKEN } from '../constants/app'; +import './Login.css'; + // function Login() { const Login = () => { + const navigate = useNavigate(); const [formData, setFormData] = useState({ username: '', password: '', @@ -78,6 +82,7 @@ const Login = () => { console.log(token); localStorage.setItem(DATA_KEY_ACCESS_TOKEN, token); alert(`Login successful! Welcome, ${formData.username}`); + navigate('/dashboard'); } else { console.error('Error logging in'); } diff --git a/src/components/PhoneVerification.jsx b/src/components/PhoneVerification.jsx index a150488..d3422a9 100644 --- a/src/components/PhoneVerification.jsx +++ b/src/components/PhoneVerification.jsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; + import './Register.css'; const PhoneVerification = ({ phoneNumber, onVerify, onResend }) => { diff --git a/src/components/Register.jsx b/src/components/Register.jsx index 32bdb90..b0631e3 100644 --- a/src/components/Register.jsx +++ b/src/components/Register.jsx @@ -1,9 +1,11 @@ import { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; -import './Register.css'; + import { AUTH_API_BASE_URL } from '../constants/api'; import { DATA_KEY_REGISTERED_USER_ID } from '../constants/app'; +import './Register.css'; + const Register = () => { const navigate = useNavigate(); const [formData, setFormData] = useState({