From fefb97819f04d38877d922fded8dfd8f13a13efb Mon Sep 17 00:00:00 2001 From: phoenix Date: Wed, 1 Jul 2026 23:38:22 -0400 Subject: [PATCH 1/2] Got it working --- src/App.jsx | 2 + src/api/loginApi.js | 15 +++++ src/components/Dashboard.jsx | 17 +++-- src/components/ProfileForm.css | 40 +++++++++++ src/components/ProfileForm.jsx | 120 +++++++++++++++++++++++++++++++++ 5 files changed, 185 insertions(+), 9 deletions(-) create mode 100644 src/components/ProfileForm.css create mode 100644 src/components/ProfileForm.jsx diff --git a/src/App.jsx b/src/App.jsx index a524fa0..9e83a6b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ import { import Dashboard from './components/Dashboard'; import Login from './components/Login'; import Register from './components/Register'; +import ProfileForm from './components/ProfileForm'; import './App.css'; @@ -19,6 +20,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/src/api/loginApi.js b/src/api/loginApi.js index 717ab4d..fa9bf41 100644 --- a/src/api/loginApi.js +++ b/src/api/loginApi.js @@ -20,3 +20,18 @@ export const loginApi = { } }, }; + +export const userApi = { + get_user_profile: async (userId) => { + const reponse = await fetch(`${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`, { + method: 'GET', + headers: { 'Content-Type': 'application/json' }, + }); + + if (reponse.ok) { + return reponse.json(); + } else { + throw new Error('Error logging in'); + } + }, +}; diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index cf5148a..90beef9 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -1,7 +1,7 @@ import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import AddContact from './AddContact'; -// import ViewContact from './ViewContact'; import ViewSentMessages from './ViewSentMessages'; import './Dashboard.css'; @@ -9,12 +9,12 @@ import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal'; import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal'; const Dashboard = () => { + const navigate = useNavigate(); const [activeView, setActiveView] = useState('dashboard'); const [isWizardOpen, setIsWizardOpen] = useState(false); const [isViewContactWizardOpen, setIsViewContactWizardOpen] = useState(false); const [isViewSentMessagesOpen, setViewSentMessagesOpen] = useState(false); const [showContactForm, setShowContactForm] = useState(false); - // const [isPopupOpen, setIsPopupOpen] = useState(false); const handleAddContactClick = () => { setShowContactForm(true); @@ -22,15 +22,9 @@ const Dashboard = () => { const handleContactSuccess = (contactData) => { console.log('Contact created successfully:', contactData); - - // You could: - // 1. Refresh the contacts list if you have one - // 2. Show a success notification - // 3. Update local state with the new contact }; const handleWizardComplete = () => { - // Add your logic here for each button setIsWizardOpen(false); }; @@ -47,7 +41,12 @@ const Dashboard = () => { }; const handleNavClick = (view) => { - setActiveView(view); + console.log(view); + if (view === 'profile') { + navigate('/user/profile'); + } else { + setActiveView(view); + } }; return ( diff --git a/src/components/ProfileForm.css b/src/components/ProfileForm.css new file mode 100644 index 0000000..8cb6739 --- /dev/null +++ b/src/components/ProfileForm.css @@ -0,0 +1,40 @@ +.profile-form { + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.profile-form h2 { + text-align: center; + margin-bottom: 20px; +} + +.profile-form form { + display: flex; + flex-direction: column; +} + +.profile-form div { + margin-bottom: 15px; +} + +.profile-form label { + font-weight: bold; + margin-bottom: 5px; + display: block; +} + +.profile-form input[type="text"], +.profile-form input[type="tel"] { + width: 100%; + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.profile-form input[readonly] { + background-color: #f9f9f9; +} diff --git a/src/components/ProfileForm.jsx b/src/components/ProfileForm.jsx new file mode 100644 index 0000000..886bc50 --- /dev/null +++ b/src/components/ProfileForm.jsx @@ -0,0 +1,120 @@ +import React, { useState, useEffect } from 'react'; + +import { tokenService } from '../services/TokenService'; +import { userApi } from '../api/loginApi'; + +import './ProfileForm.css'; + +const ProfileForm = () => { + const [formData, setFormData] = useState({ + firstname: '', + lastname: '', + phone: '', + username: '', + createdDate: new Date().toISOString().split('T')[0], + lastLoginDate: new Date().toISOString().split('T')[0] + }); + + useEffect(() => { + const fetchData = async () => { + console.log('Getting data'); + const userId = tokenService.getUserId(); + const response = await userApi.get_user_profile(userId); + + if (response) { + console.log('Response is good'); + const userProfile = response.data[0]; + setFormData((prev) => ({ + ...prev, + firstname: userProfile.firstname, + lastname: userProfile.lastname, + phone: userProfile.phone_number, + username: userProfile.username, + createdDate: userProfile.created, + lastLoginDate: userProfile.last_login + })); + } else { + console.error("Error getting user profile"); + } + }; + + fetchData(); + + }, []); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + return ( +
+

Profile Form

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ ); +}; + +export default ProfileForm; -- 2.47.3 From 08a5e484a298017368ede5ccac5893c00c451983 Mon Sep 17 00:00:00 2001 From: phoenix Date: Wed, 1 Jul 2026 23:55:20 -0400 Subject: [PATCH 2/2] Able to view profile --- src/api/loginApi.js | 11 +- src/components/Dashboard.jsx | 1 - src/components/ProfileForm.css | 5 +- src/components/ProfileForm.jsx | 179 ++++++++++++++++++++------------- 4 files changed, 120 insertions(+), 76 deletions(-) diff --git a/src/api/loginApi.js b/src/api/loginApi.js index fa9bf41..c3cba83 100644 --- a/src/api/loginApi.js +++ b/src/api/loginApi.js @@ -23,10 +23,13 @@ export const loginApi = { export const userApi = { get_user_profile: async (userId) => { - const reponse = await fetch(`${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`, { - method: 'GET', - headers: { 'Content-Type': 'application/json' }, - }); + const reponse = await fetch( + `${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`, + { + method: 'GET', + headers: { 'Content-Type': 'application/json' }, + } + ); if (reponse.ok) { return reponse.json(); diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 90beef9..1a44675 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -41,7 +41,6 @@ const Dashboard = () => { }; const handleNavClick = (view) => { - console.log(view); if (view === 'profile') { navigate('/user/profile'); } else { diff --git a/src/components/ProfileForm.css b/src/components/ProfileForm.css index 8cb6739..31bd471 100644 --- a/src/components/ProfileForm.css +++ b/src/components/ProfileForm.css @@ -5,6 +5,7 @@ border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: #ffffff; } .profile-form h2 { @@ -27,8 +28,8 @@ display: block; } -.profile-form input[type="text"], -.profile-form input[type="tel"] { +.profile-form input[type='text'], +.profile-form input[type='tel'] { width: 100%; padding: 8px; border: 1px solid #ccc; diff --git a/src/components/ProfileForm.jsx b/src/components/ProfileForm.jsx index 886bc50..2ed853e 100644 --- a/src/components/ProfileForm.jsx +++ b/src/components/ProfileForm.jsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; import { tokenService } from '../services/TokenService'; import { userApi } from '../api/loginApi'; @@ -6,23 +7,23 @@ import { userApi } from '../api/loginApi'; import './ProfileForm.css'; const ProfileForm = () => { + const navigate = useNavigate(); + const [activeView, setActiveView] = useState('profile'); const [formData, setFormData] = useState({ firstname: '', lastname: '', phone: '', username: '', createdDate: new Date().toISOString().split('T')[0], - lastLoginDate: new Date().toISOString().split('T')[0] + lastLoginDate: new Date().toISOString().split('T')[0], }); useEffect(() => { const fetchData = async () => { - console.log('Getting data'); const userId = tokenService.getUserId(); const response = await userApi.get_user_profile(userId); if (response) { - console.log('Response is good'); const userProfile = response.data[0]; setFormData((prev) => ({ ...prev, @@ -31,15 +32,14 @@ const ProfileForm = () => { phone: userProfile.phone_number, username: userProfile.username, createdDate: userProfile.created, - lastLoginDate: userProfile.last_login + lastLoginDate: userProfile.last_login, })); } else { - console.error("Error getting user profile"); + console.error('Error getting user profile'); } }; fetchData(); - }, []); const handleChange = (e) => { @@ -47,72 +47,113 @@ const ProfileForm = () => { setFormData({ ...formData, [name]: value }); }; + const handleNavClick = (view) => { + if (view === 'profile') { + navigate('/user/profile'); + } else { + navigate(`/${view}`); + } + }; + return ( -
-

Profile Form

-
-
- - +
+ {/* Navbar */} + + + {/* Main Content */} +
+

User Profile

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
); }; -- 2.47.3